The Customize Template HTML page allows you to customize the page layout of your website by editing the HTML source code. You can also insert custom code snippets to the head, body, and footer sections of the HTML code and add jQuery scripts. All available themes that can be applied to your website use one of two default templates on each of the pages - the Standard template or the Logo Only template. The Logo Only template is a simpler layout. You can customize your website layout by editing the default templates. You can also create brand-new layouts. Custom layouts can be applied using the Website Editor via the Advanced Settings for each page.
- To edit the Standard or Logo Only page Layout
- To add custom code snippets to the HTML code
- To create a new page layout
To edit the Standard or Logo Only page Layout:
- On the Admin menu for your website, click Edit Website, then click Customize Template HTML.
The Customize Template HTML page is displayed showing the Page Layouts list, including the Standard layout, the Logo Only layout, and any custom layouts you have created.
The Custom Layout column will indicate whether the layout of the template has been customized and the Custom Code Snippets column will indicate if any of the custom snippet fields of the layout have content added.
- Click Edit beside the Standard or Logo layout.
The Custom Code Snippets page is displayed.
- Add custom snippets to the head, body, and footer as required to the respective input fields. Add jQuery scripts as required to the jQuery Snippet input field.
- Click on the Advanced Custom Layout tab in the menu at the left.
The Advanced Custom Layout page, containing an HTML Code Editor is displayed. The HTML Code Editor is disabled by default.
- Tick the Enable custom HTML layout checkbox.
The HTML Code Editor will become enabled.
- Edit the code as required.
- If you want to save the changes before you continue making more changes, do the following:
- Click Save & Continue.
- Click on Preview to view your edits to the page layout, without making the changes visible to visitors.
Your website is loaded in a new tab with your saved page layout changes applied for you to preview.
- Go back to the tab with the HTML Code Editor to continue to edit the code as required.
If you are done editing and want to save the changes, but don't want the changes published yet, do the following:
- Click on the Save button.
- Click Continue.
The selected layout is saved as an unpublished version until you are ready to publish it live to visitors.
- Click on the Preview button if you want to preview your saved changes before you publish them.
If you want to apply the Layout and immediately publish the changes live to visitors, do the following:
- Hover the mouse pointer over the Save button and click Save and Publish.
- Click Continue.
To add custom code snippets to the HTML code:
- On the Admin menu for your website, click Edit Website, then click Customize Template HTML.
The Customize Template HTML page is displayed showing the Page Layouts list, including the Standard layout, the Logo Only layout, and any custom layouts you have created.
The Custom Layout column will indicate whether the layout of the template has been customized and the Custom Code Snippets column will indicate if any of the custom snippet fields of the layout have content added.
- Click Edit beside the layout you want to edit.
The Edit Template - Custom Code Snippets page is displayed.
- Add custom snippets to the head, body, and footer as required to the respective input fields. Add jQuery scripts as required to the jQuery Snippet input field.
- Click on the Save button.
- Click Continue.
The selected layout is saved as an unpublished version until you are ready to publish it live to visitors.
To create a new page layout:
- On the Admin menu for your website, click Edit Website, then click Customize Template HTML.
The Customize Template HTML page is displayed showing the Page Layouts list, including the Standard layout, the Logo Only layout, and any custom layouts you have created.
The Custom Layout column will indicate whether the layout of the template has been customized and the Custom Code Snippets column will indicate if any of the custom snippet fields of the layout have content added.
- Click on the Add Custom Layout button.
The Edit Template - Custom Code Snippets page is displayed.
- Add custom snippets to the head, body, and footer as required to the respective input fields. Add jQuery scripts as required to the jQuery Snippet input field.
- Click on the Advanced Custom Layout tab in the menu at the left.
The Edit Template - Create Custom Layout page, containing an HTML Code Editor is displayed.
- Enter a Template Name for the new layout.
- Edit the code as required.
- If you want to save the changes before you continue making more changes, do the following:
- Click Save & Continue.
- Click on Preview to view your edits to the page layout, without making the changes visible to visitors.
Your website is loaded in a new tab with your saved page layout changes applied for you to preview.
- Go back to the tab with the HTML Code Editor to continue to edit the code as required.
If you are done editing and want to save the changes, but don't want the changes published yet, do the following:
- Click on the Save button.
- Click Continue.
The selected page layout is saved as an unpublished version until you are ready to publish it.
- Click on the Preview button if you want to preview your saved changes before you publish them.
If you want to immediately publish the changes and make the page layout available to apply to your website pages, do the following:
- Hover the mouse pointer over the Save button and click Save and Publish.
You can apply the new page layout through the Advanced Settings for each page in the Website Pages Editor. Click here for instructions on how to edit the Advanced Settings.
- Click Continue.
Comments
2 comments
What are the <[{"snippet":"..."}]> tags in the HTML template? What do these reference? Can the snippet be edited?
Hi James,
Snippets are standalone, reusable pieces of code that are used to build elements and add functionality to your website. The existing snippets cannot be edited. However, you can add custom snippets that are defined via the Custom Snippets tab.
Please sign in to leave a comment.