AI Web Page Builder Guide
Video guide on the latest AI Web Page features in Heights AI:
Video guide on manual web page editing:
With the Web Page Builder update, you can now create and customize your whole website inside Heights Platform.
Pro and Academy customers can create unlimited public web pages that will be automatically linked to your custom domain or subdomain, the same one you use for your online courses.
Web pages are fully customizable through a visual editor, where you can drag and drop sections without using custom code. For more advanced creators, there is always the option to edit the custom code in the Page Templates area.
This article will cover the following topics:
- Creating a Page
- Editing a Page
- Positioning & Sizing
- Classes
- Click & Hover State
- Editing the Navigation Menu & Footer
- Mobile Formatting
- Edit Page Setting & Publish
- Create Additional Website Pages
- Setting the Home Page
Create a New Web Page
To create your first web page, head to the Web Pages section in your vertical menu from your Creator Dashboard.
Creator Dashboard > Web Pages > Web Pages
Here you will see a window with a list of all the pages you have created so far. If this is your first time visiting it, the list will be empty. From here you can also navigate to the Navigation, Blog, Terms & Checkout Pages and Page Templates areas.
To create a new page, click on the "+ New Page" button. Once you do that, you will see a window with a three-step process.
Step 1. The first step is to add a name to your page (ex: About us, Home Page, Services...). You can always change the name of your page later in the Page Settings.
Give a name to your page and click on "Create Page."
Step 2. The second step is to choose a template for your page. Templates are pre-built pages that you can customize according to your style. You can change the text, images, and colors or completely redesign the whole layout if you are up for it. You can also choose to start with a blank page if you prefer.
Before you choose your template, you can easily preview the design of each template by clicking on the "Preview" icon you see when you hover over a template. This allows you to get a quick view of each template to better choose the one you want.
Once you have settled on a template, click on "Choose."
Step 3. Now, the editing panel will open. This is where you can customize the template, add new sections, preview your page and save it.
Edit a Page
The editing panel is where you can customize the content of a pre-made template to make it your own, or if you have chosen the blank page, add new sections and modify them.
If you have chosen a pre-made template, you can modify the existing blocks by clicking on them and using the setting menu on the right side to edit them. Whether you use a pre-made template or a blank page, you can also add new blocks to the page by dragging and dropping them from the right-side menu into the page.
When dragging and dropping a new block into the page, you can easily see where you can position it, as a layout of lines will appear to facilitate this process. While you drag the block onto the page, you will see these lines turning green: these indicate the places where you can drop the block (as shown below).
The same concept goes for moving an existing block to a different place on the page. To do this, click on the move icon (image below) and drag and drop the block wherever it is possible.
The other icons in the image above let you (from left to right): select a parent block, duplicate the block, and delete the block.
The first icon (arrow pointing up) is useful when selecting a parent block or element (an element that contains the element you have selected). If you wish to style a selected element, but the style is not being applied, this can be because a class overrides your changes. In this case, try clicking on this icon and applying the change to the parent element until it appears.
Understanding the Editor
The editor is composed of a top menu bar and one on the right side of your screen, where you can switch between the Open Style Manager, Open Blocks and Page Info.
On the top bar, you can choose to view the page in different screen sizes: Desktop, Tablet and Mobile view. This allows you to see how your page looks on smaller screens and adjust your layout where needed. You can also "undo" or "redo" your actions, preview your page on a browser, exit the editor and save your changes.
The menu on the right-hand side of your screen is divided into:
- Open Style Manager: when you select an element in your page, you can modify it in the Open Style Manager. Here you can change the class of an element, modify its appearance on different states (hover, click), add an animation, change the dimension of the block, add margins and padding, add a border or a shadow and more, depending on the block you select.
- Open Blocks: This is where you can add new blocks and elements to your page. Simply drag and drop the block you need into the page and edit them, switching to the Open Style Manager. This section is divided into Basic (simple elements you can add to the page), Section Templates (pre-built sections with a combination of elements ready to use) and Advanced (more complex blocks you might want to add depending on your level of understanding of the editor and web design).
- Page Info: This is where you can connect Google Analytics to your page and jump into your page settings.
Basic Blocks
As we mentioned, you can add blocks from the Open Blocks section of the editor into your page, let's see what they are below, starting from the Basic ones. Learn more about this here: Blocks in the Web Page Builder
Section Templates
Section templates are blocks composed of multiple basic blocks and ready to edit for specific uses. These blocks are already made so all you need to do is modify the text, images and - if you want - colors inside them to make them your own. You can use section templates to add an "about us" section to your page, a "hero page" section with a background image and some text, and more. Learn more about this here: Blocks in the Web Page Builder
Advanced Blocks
If you feel confident about using the editor, you can use Advanced blocks to meet specific needs. Learn more about this here: Blocks in the Web Page Builder
Sizing & Positioning
When you drag a new block or element into the page, it automatically takes up the space available in the container it is positioned into.
For images only, you can also visually adjust it by clicking on its corners and dragging it smaller or larger, however, this approach can be risky as it can potentially break your design and how it appears on smaller screens.
Another way to change the size of a block is to select it and head over to the Open Style Manager. Under "Dimensions," you can change the width and height of an element and set a maximum width and a minimum height as well.
You can choose to utilize different metrics:
- Px (Pixels): the standard measurement on computer screens relative to the screen resolution.
- % (Percentage): a unit of measurement relative to the parent element (element in which the selected element is placed). For example, if you want an element to be half as wide as the element it is placed into, you can set its width (or max width) to 50%. Using percentages allows you to create responsive designs that easily adapt to different screen sizes.
- Em: a unit of measurement relative to the size of the font. Also a more responsive unit compared to pixels.
- Rem: a unit of measurement relative to the font size of the body element (the whole page). Also a more responsive unit compared to pixels.
- Vh (viewport height): a unit of measurement relative to the viewport height (the vertical area visible on your screen) The viewport height is 100vh. For example, if you want an element to be as tall as your screen view, you can set its height to 100vh. Also a more responsive unit compared to pixels.
- Vw (viewport width): a unit of measurement relative to the viewport width (the horizontal area visible on your screen) The viewport width is 100vh. For example, if you want an element to be as wide as your screen view, you can set its width to 100vh. Also a more responsive unit compared to pixels.
You can also adjust the paddings and margins of an element.
The easiest and safest way to change the position of an element is to change its padding.
In CSS, a margin is the space around an element's border, while the padding is the space between an element's border and the element's content. By adding padding, you add space inside the element, while the margin adds space outside of it.
To avoid breaking something in your design, we recommend using padding instead of margin where possible.
Padding can be used to center an element in the middle of the page or in the middle of the element in which it is positioned. For example, by adding the same amount of padding on the left and right (ex: 20% left - 20% right), you can distance the element equally from its borders.
Classes
Classes in CSS are attributes used to define a group of HTML elements in order to apply unique styling and formatting to those elements.
You can use classes to easily apply set styles to different elements and blocks across your design. For example, if you want all (or some) of your headings to be blue, you can apply a class to those headings, name it as you want (ex: "headings-blue") and set the font color as blue. When you create a new heading, and you assign it to the class called "headings-blue", the heading will automatically turn blue.
Classes can be useful to quickly apply style changes such as colors, padding, margins, animations, spacing, fonts and more. You can find the class in the Open Style Manager under Element Settings.
Most elements in the editor already come with a pre-built class. One of these elements are buttons: when you add a new button to your page, you will see that it already come with a class called "cta-button." This way, if you edit one button in your design, the changes will be automatically applied to all other buttons to create a consistent experience.
As you can see above, only one of the buttons is selected, but by changing the color of one, the other one also changes. This is because they have the same class applied.
What if you want to have a button that is different from the others?
You can override a class by adding another class to an element. This applies to all elements, not just buttons.
Our advice is to not delete the pre-built class that an element comes with, as you would have to redesign the element from scratch. Instead, you can keep the existing class there, and add a new one. To do this, click on the "+" icon next to the class, and type in the name you want. Now that you have an extra class applied only to the element you want to differentiate, you can apply all the changes you want without impacting the design of other elements.
Hover & Click State
With the class, you can change how an element behaves when you hover over it and when you click on it. To set changes for the hover or click state, select the state you wish to edit from the dropdown next to the class. Then go ahead and apply your style changes.
If there is a class applied to the element, the hover or click state will be the same for all other elements with that class. When you are working on hover and click states, remember to switch them back to normal once you are done!
Again, with buttons, the pre-applied class of "cta-button" also comes with a hover and click state already set, where the button changes color once hovered on it.
Editing the Navigation Menu and Footer
From the editor, you can change the background color and the font used in the top navigation and the footer. To do this simply select the navigation menu or the footer and head over to the Open Style Manager where you can select the font you want and change the background color.
By selecting the navigation menu or the footer, you will see that there are several classes applied. These classes ensure that the navigation menu or the footer stay consistent across all of your web pages and have the same links inside them.
From the editor you can only change the background color and the font: to change the links displayed in the menus, you need to exit the editor (remember to save your changes!) and head over to the Navigation Tab in Heights: Web Page Builder Site Menu
Mobile Formatting
If you use a pre-built template, your design will be 100% responsible for mobile devices and tablets, meaning you don't have to change anything in your design to make it look good on mobiles.
To view how your web page looks on tablets and mobile devices, click on the tablet and mobile icons on the top-left side of the editor. If you change your design while on tablet or mobile view, the changes will be applied on all the views (desktop, tablet and mobile).
Previewing a Web Page
If you want to see how your page looks like on the browser, click on the icon shown below:
Remember to save your changes before previewing, as it will only show the page version that was last saved.
Edit Page Setting & Publish
When you are ready to publish your page, save your changes and then exit the editor. Learn more about page settings in this article: https://support.heightsplatform.com/article/222-web-page-settings
From the page list, click on page settings icon by hovering over the page, as shown below:
Here you can edit the page setting and publish your page. Before publishing, make sure to fill out the page title, URL and meta description to help your web page SEO.
Here is what you can edit:
- Page Name: this is just for your reference and will not appear on search engines
- Page URL: the URL for your web page is set based on the name of your page upon creation. You can adjust it anytime, but note that old page links you've posted online may no longer work.
- Page Title: this is the name of the page as it will appear on search engines, so make sure to insert a clear name as you want your website visitor to see it
- Meta Description: a description of the web page that will appear in search engine results. The recommended length of the meta description is 160 characters or less.
Once you have set all of this, you can click on the "Published" button at the end of the page to publish your page.
Create Additional Website Pages
Once you have created your first page, you can create other pages for your site.
At this point, you can choose whether to create additional pages using the same style or create a new page with a new style different from the others. If you want to build a full website for your business, keep the same style and design on all of your pages. However, you can create pages with different designs if you want to have a stand-alone landing page (for example, if you are running a special promotion), or to promote different products.
Keep in mind that however you decide to structure your website, all pages you create from one Heights account will have the same domain (or subdomain) name.
To create an additional page with the same style as another one you have already built, you can simply duplicate the first page and edit it. To do this, head over to the Web Pages list.
Creator Dashboard > Web Pages > Web Pages
Hover over the page you want to copy and click on the duplicate icon, as shown below:
Once you have duplicated the page, head to the Editor to change its content and style. You can change the page name and URL on the page settings.
If you want to create a completely different page from scratch, click on "+ New Page" and repeat the process!
Setting The Home Page
Every website has a home page: to make sure that your website has one as well, you need to set this up once you publish your pages. On the Web Pages list (Creator Dashboard > Web Pages > Web Pages), you can choose which page you want to set as Home Page by selecting it from a dropdown on the right side of the screen:
You can only set your home page once the page is published.