Blocks in the Web Page Builder
When editing a page in the Web Page Builder, you can simply edit the pre-built template but even add new blocks and elements to the page and customize them as you want.
If you want to learn how to create web pages, edit them and publish, read this article: Web Page Builder Guide
From the Open Blocks section of the editor, you can add blocks to your page. Let's see what they are below, starting from the Basic ones.
Basic Blocks
Header: a Header is a title you can place anywhere on your page to emphasize your messaging. When you select a header, on the Element Settings menu, you can change the dimension of the header (from H1 to H6), its typography, font size, color, opacity, shadow and more.
Text: this is a simple block where you can add some text. When you drag and drop this block into your page, it automatically adjusts its size to the dimensions of the parent block you are placing it into. When you select a text block, on the Element Settings menu, the typography, font size, color, opacity, shadow and more.
Link: a link can be created in two ways. First, by turning a piece of text into a link: highlight the words you want to turn into a link and click on the link icon (picture below) directly from the text block. At this point, on the Elements Setting menu, add your link under "Href".
Secondly, by dragging a link block into your page: from the Blocks Selection Menu, drag the Link block into your page and edit the text. On the Elements Setting menu, add your link under "Href".
Image: you can add an image by dragging and dropping the "Image" block into your page. Once you do that, a window will appear (same as on the lesson editor) where you can upload an image from your computer or search Unsplash. If there already is an image in a pre-built template and you wish to change it, simply double-click on that image, and the same window will appear.
Please note that images added on the page keep their original dimensions without being cropped. So if the image you want to add to the page does not match the size you wish, you should crop it before uploading it.
Quote: you can quickly add quotes to your website by dragging the "Quote" block into the page. All you have to do is change the text and your quote is ready.
Text Group: you can use this block to quickly create a new section with a Header and a few lines of text.
Video: add a video to your page by dragging this block into the page. On the Open Style Manager, you can add the link to your video by choosing from YouTube, Vimeo or adding a custom iframe URL.
Please note that to add video you need to paste in the video ID: On YouTube it is the last characters in the video URL. For example, in this URL https://youtu.be/SupKoC5Yy3g, " SupKoC5Yy3g " is the video ID.
Button: use this block to add a Call to action button to your site. When dragged into the page, this button automatically inherits the same class as the other buttons, so you don't have to spend time changing the style of each button one by one.
List: if you want to create an unordered list of bullet points, you can use this block and modify the text.
Product: you can easily add a product card that showcases one of your courses or digital products you have created in Heights Platform. To do this, drag and drop the Product block into the page. On the Open Style Manager, select what type of product you want to showcase (course, digital product or bundle), and from the dropdown, choose the product among the ones you have created. You can also choose which link to direct your visitors to when they click on the product card between the checkout page link and the preview page link.
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.
Advanced Blocks
If you feel confident about using the editor, you can use Advanced blocks to meet specific needs.
Custom Code: this lets you add lines of codes to create specific designs in your web page.
Map: easily add a map to your web page. On the Open Style Manager, you can add an address to highlight on the page and set the level of zoom.
Countdown: add a visual countdown to promote a launch or offer on your page. Set the due date in the Open Style Manager.
Link Block: link blocks can be used to turn elements into clickable links. To do this, position the link block in your design and then drag the element you wish to make clickable into the link block. Then set up the link in the Open Style Manager.
One Column: this adds an empty block that takes up the whole space of the screen (or the whole space of the element it is placed into). You can use this block to create unique designs from scratch by adding other blocks inside it.
Two Columns: this adds an empty block equally divided into two columns that takes up the whole space of the screen (or the whole space of the element it is placed into). You can use this block to create unique designs from scratch by adding other blocks inside it.
Two Columns 5/7: this adds an empty block divided into two columns, where the left column is slightly narrower than the right one. This block automatically takes up the whole space of the screen (or the whole space of the element it is placed into). You can use this block to create unique designs from scratch by adding other blocks inside it.
Three Columns: this adds an empty block equally divided into three columns that takes up the whole space of the screen (or the whole space of the element it is placed into). You can use this block to create unique designs from scratch by adding other blocks inside it.