Note: This article only applies to customers who have purchased DIY- Website Builder after January 2020.
Building a webpage with Site Editor is as easy as 1, 2, 3! You can use one of the professionally designed template pages or a blank page as a starting point for your own website.
Each Site Editor template contains a basic set of professionally designed pages with sample content - text, images, forms, and videos - which you can replace with your own content. You can then modify the page by editing the selected template pre-filled with structured content or adding new content - blocks or individual elements - to the page.
Follow these simple steps to create your own custom professionally looking pages with Site Editor:
- Step 1: Add a Page (blank or template).
- Step 2: Fill in the Template Layout.
- Step 3: Expand the Template Layout.
- Step 4: Preview and Publish the Page.
Read this section to learn more about each of the steps.
To save time and energy, use one of the professionally designed templates to build your site.
Each multi-page website template has a standard set of pages ordinarily encountered on a website, such as HOME, ABOUT, GALLERY, NEWS, CONTACT, BLOG, and DELIVERY pages. Template pages are created for a specific purpose. You can use these ready-made pages to build your own Home, Contacts, or Gallery pages.
All you need to do is:
- 1. duplicate a page from the template you have selected to build your own site
If you'll duplicate an ABOUT page there will be two identical ABOUT pages on the website you've created
Copy a page from any of the other templates available in Site Editor
- 2. Replace the sample content with actual data: your own contact details, slogans, pictures, and videos.
- 3. You can then edit and rearrange the content on your website.
IMPORTANT: Be advised that there is a 5-page limit per project in the free Starter plan. Upgrade to create a site with more than 5 pages.
- 1. Fill in the template layout with actual content to customize the webpage.
- 2. Each template layout is pre-filled with sample content. select the element of the layout (text, heading, photo, video, button, icon, form, map, Facebook like, etc.) to display the editing menu and replace the selected sample content with the actual content you would like to appear on your site instead.
- 3. You can then edit the selected element, with the help of the same editing menu, to suit your needs.
Feel free to expand the template layout by adding blocks and individual elements called "Features" in Site Editor. You can also rearrange the elements of the layout, blocks and features, to create the custom design that suit your needs.
- 1. You can access the library of ready-made blocks and features from the left-hand sidebar of the Site Editor: just click the BUILD button.
The two tabs, Features and Blocks, list all the layout elements that you can use to create custom pages:
- 2. Drag a block or a feature from the library (left-hand sidebar of the Site Builder) and drop it onto one of the available placeholders which are highlighted in red when you drag the selected layout element over them.
A block consists of a set of features. Both blocks and features can be customized. You can move, duplicate and delete blocks, as well as modify their settings from the right-hand floating sidebar that appears when you hover over the block with the mouse cursor. Please refer to the Blocks section of this guide to learn more about managing blocks in Site Editor.
- 3. To modify the design and settings of some features, you need to hover over them and click the Edit button that appears in their top right-hand corner. An example of such feature would be a Map element shown below.
- 4. You will need to click other features, such as text or header items, as well as buttons and icons, to display the editing menu and be able to modify these features.
For example, click an icon to display the editing menu and be able to:
- Locate and replace the icon,
- add a shape to the icon,
- align the icon (with the shape) to the left, to the right, or place it in the center of the placeholder,
- rotate the icon left or right,
- flip the icon vertically or horizontally:
Note: Please refer to Step 2 "Fill in the Template Layout" of this section to learn more about modifying any available feature in Site Editor.
To view the page you are building as it will appear when your visitors access it online:
- 1. Click PREVIEW in the top right-hand corner of the screen.
All the editing functionality is hidden in Preview Mode.
- 2. Use the Navigation Menu at the top of the screen to navigate the website in Preview Mode
- 3. To switch between viewing modes (widescreen, laptop, tablet, or mobile), click the corresponding buttons at the bottom of the screen
- 4. To return to the Editing Mode, click BACK TO EDITOR in the bottom left-hand corner of the screen.
To make the site available online, you need to publish it. You can publish a site from both modes - Edit and Preview - in Site Editor.
To publish a site from the Edit Mode:
- 1. Click the PUBLISH button in the top right-hand corner of the screen.
To publish a site from the Preview Mode:
- 1. Click the PUBLISH button in the bottom right-hand corner of the screen.
- 2. You will be able to update the site with all the changes you make at a later point in time by clicking the Update button that appears in place of the PUBLISH button once you have published the site.