Start from a template

What Studio is for

PGB Studio (studio.pgbhub.com) builds websites and small apps. You can describe what you want and let an assistant write it, or start from a template: a finished design that you configure with a form. Templates are the fastest way to a good-looking result, and they are a safe way to learn the editor.

Open Studio

1. Go to studio.pgbhub.com. The home page says "Build something people will use."
2. Sign in with your PGBHub account when asked. You can look around without one, but creating a project needs it.
3. Scroll to Start from a template. If you have projects already they appear above under Your projects.

Choose Business Website

The templates PGB provides include Business Website, Product Landing Page, Portfolio and Restaurant Menu. Use Search templates if you want to look for a particular one. Each card shows the name, a short summary and categories.

Choose Use this template on Business Website.

Meet the configurator

The page has two halves:

• On the left, a form. At the top is Project name, and under it the sections Business, Look, Content and Contact.
• On the right, a Live preview. Above it are three buttons for Phone size, Tablet size and Desktop size.

On a phone, two tabs, Customise and Preview, let you switch between the halves.

Fill in the form

Work through each section:

1. Business: type your Business name, a Slogan, some About us text, choose an Industry and optionally the Years in business.
2. Look: choose a Brand colour with the picker or by typing a hex value such as #0F766E, and upload a Logo (up to 2 MB; png, jpg, webp, gif, svg or ico).
3. Content: tick the Sections to show, add and edit Services (each has a name, description and price), and use Show prices. When Show prices is on, a Pricing note field appears.
4. Contact: enter a Contact email, Phone and Website.

Fields with a red star are required. Watch the preview change as you type. Try each device size.

Create the project

Choose Create project. If a value is invalid you see "Some values need attention. Fix the fields marked below." Fix the highlighted fields and try again. The note beside the button says "You can change everything later" and that is true: we will see how in lesson 3.

Studio creates the project and opens the editor.

Try it yourself

1. Create a Business Website for a real or imaginary business.
2. Set a distinctive brand colour and add three services.
3. Switch Show prices off and notice the pricing field disappear.

Recap

• Templates turn a form into a finished site.
• The configurator shows a form and a Live preview side by side.
• Required fields are starred; colours, images and lists have their own controls.
• Create project opens the editor, and you can change values later.