Using the Page Builder

If you don't have an external website and want to build a site for your business, or would simply like a dedicated site for your learning platform, we've got you covered. With the Academy of Mine Page Builder, your website page creation options are limitless! Your platform has an attached front-end website that you can add pages to and design so that students can browse and purchase courses using our eCommerce tool. You can add your own marketing or content pages as well. Whatever pages you want to add, you can do so through our easy-to-use page builder. 

This article will walk you through how to create a new site page, and add your content. We also have a video walkthrough included if you're more of a visual learner. Let's get started!

In this article

Page builder overview

First, let's go over what structures a page's content: sections, rows, and blocks.

  • Sections: Each page with contain at least one section (the blue boxes) to hold your rows and blocks. Each section will have its own purpose, so think about what sort of sections you'd like your content divided up into on your page. 
  • Rows: We use rows (the green boxes) to further organize content within a section. Rows are powerful as unlike sections, they can be broken into columns and you can choose what layout you want to use. There can be multiple rows in each section. 
  • Blocks: Blocks (the grey boxes) are how you add content to the page! We have several different block types available: you can add Text/HTML, Image, Video, PDF, Button, Code, Contact Form, Product Listing, Shopping Cart and Checkout.

In the screenshot below, you can see the sections, rows, and blocks in the page builder on the left. Then, on the right, we can see how those structures become the page on your site! In the example below we can see how different rows are used. The first section contains a row with two columns and three blocks. The second section contains two rows (one with one column, and one with three columns). Then each of those rows contains blocks of content.  Now, let's go through what each area of the page builder is for:

  • The Title is the title of the page.
  • The Page Layout has three options:
    • Full Width – This kind of page takes up the entire width of the screen.
    • Fixed Width with Left/Right Margin Gaps – This Page Layout Type is the same as the Full Width but there is a gap on each side of the page.
    • Page With No Headers – This page layout type is full width and without a header.
  • The Content is where our page-building magic happens--this is where you will add your text, images, videos, buttons, and more dynamic blocks like Product Listing and the Contact Form. 
  • The SEO Title is the title that should show up on the search engine for this website. This should be a unique identifier under 60 characters.
  • The SEO Description is a short text that describes the webpage to search engines. Your SEO Description should be between 50-160 characters and should include keywords to boost your recognition by search engines.
  • The Thumbnail Image URL is an image that’s associated with the webpage and is displayed whenever your page URL is shared on social media platforms like Facebook or Twitter. 

We're now ready to start building our page!

Creating and building a page

Now that we understand what the parts of the page are, we can create and build the page using the steps below.

If you're a more visual learner, check out this video walkthrough below!

  1. From the AOM Dashboard, select the Pages & Menus tab and choose Pages
  2. Click “+ Create Page” button located in the top right corner
  3. We offer several page layouts that you can use if you don't want to build your page from scratch--click "Layouts" to select a layout, or you can continue to the next step to create a page from the ground up. You can also create your own layouts if you'd like to create and use a specific layout on more than one page. Click here for more information. 
  4. Add the necessary sections for your page. Remember, you'll want to add a section for each main purpose of your page. You can add new sections or import a saved section by clicking the blue "+" button as seen below.
  5. Add rows to each section via the green + button. This is how you decide how you want your blocks of content laid out--for instance, do you want one column of content in a row, or multiple? You can also have more than one row in a section.  
  6. Add blocks to each row by clicking the grey + button. Then, select what sort of block you want to add from the options below. Please also note that rows can have multiple blocks!

    As you can see, there are several different types of blocks, and you can choose the one that applies to the content you're wanting to add--choose Text/HTML if you're wanting to add text, Image to add a picture to that block, etc. 

    The Contact Form, Product Listing, Shopping Cart and Checkout block serve a very special purpose for certain pages on your platform website. They are dynamic fields that will display the information on your Course Catalog, Cart, Checkout page that syncs with Academy of Mine's eCommerce features so that clients can view your products and go through checkout. They'll also be able to message you via the Contact Form if you add that block to a page. 

    The Course Catalog page you create must contain the Product Listing block, the Cart page you create must contain the Shopping Cart block, and the Checkout page you create must contain the Checkout block.

  7. To add or edit the content within a block, click the Settings gear icon or simply double-click the solid gray rectangle. Enter your content, and click Save Changes.
    1. Further customize the block by clicking the Design tab after entering your content on the Content tab. Here, you can adjust spacing, alignment and borders. Or, click the Advanced tab to add a custom class. 
    2. You are welcome to add custom HTML to your page. At any point, you can switch the page builder from text view to HTML view. This can be done by selecting the HTML option (<>) from the Content menu.
    3. On the content menu, the ¶ icon will allow you to format the element you have selected, and you can also bold, italicize, underline, add bullets/number as well as change the font, font color and size 
    4. Hint: after saving your block content, you can duplicate the block by clicking the Clone Block button (double square icon)
  8. You also have the option to add custom script and styles to your page if you'd like! Click Add Script & Styles to add page-specific CSS, and save when you're done. For more information on custom styling, click here or continue reading
  9. Add in SEO Details and a thumbnail image URL for the page as well if you'd like. 
  10. Edit the Slug if you want to--this is the URL for your page. The default slug is pulled from the page title, though you can edit by clicking Edit and entering the preferred wording. Keep in mind, there are a few slugs that won't work as they conflict with folders that we have for special purposes, so please ensure that your slug is not the just following: fonts, css, storage, resources, apidocs, images, and js.
  11. To see how things will look on your site, click the "Preview" button in the upper right corner at any time. 
  12. Be sure to click Save Page when you're done to save the page!

Now that your platform website page is created, you can add it to a menu, and customize the navigation menus that will be displayed on your site. To learn more about navigation menus, please follow our guide: Customizing Navigation Menus

Video Walkthrough of Pages

If you're more of a visual learner, this video will go over an overview of pages, their structures, and how to create a page.

Editing a page

Making edits to an existing page is simple. Check it out:

  1. From the AOM Dashboard, select the Pages & Menus tab and choose Pages.
  2. Click on the page you'd like to edit.
  3. Click Settings (gear icon) on the block that contains the content you would like to update.
  4. Edit the desired content, and hit Save Changes.
  5. Click Update Page to save the changes made to the page.

Using layouts

There are some pre-configured page layouts available for you to choose from, such as a Product Listing or About Page, and you can even create and save your own custom layouts as well! Creating a custom layout is a great way to duplicate a page you've already set up--for instance, if you have created a page layout that you'd like to use again and just want to change up the text or images. 

To create your own layout page:

  1. From the Pages & Menus tab, choose Pages and click on the page you want to save as a layout.
  2. Click the Layouts button and choose Save Layout--enter a name, and Save.

To use an Academy of Mine template or one that you have created:

  1. From the AOM Dashboard, select the Pages & Menus tab and choose Pages.
  2. Click + Create Page to add a new page.
  3. Click Layouts and choose Load Layout.
  4. Choose either AOM Library (to use one of our templates) or Your Library (to use one of your custom saved layouts page).
  5. Select the layout you want to use.
  6. From there, you can click the Settings gear on each block and make the necessary changes! Be sure to save the page when you're done.

Adding page scripts and styles

You can further customize your pages using CSS! For those unfamiliar, essentially CSS is what styles and makes up the presentation of the HTML (which is the language that makes up your web page). Each HTML element in a page is wrapped inside a layered box that consists the margin, border, padding, and content. The margin, border and padding are aspects that can be changed by adding page specific CSS to the page script and style. You can also add tracking code, and many other custom features. Learn about adding page specific script here.

If you're familiar with CSS or have someone on your team who knows a thing or two, you can make your desired adjustments by following the steps below:

  1. From the AOM Dashboard, select the Pages & Menus tab and choose Pages.
  2. Click on the page you'd like to edit.
  3. Click Add Script & Styles.
  4. Add the CSS for that page, and hit Save.
  5. Then, to add a custom class to a section, row or block, click the settings for the setting, row or block, then choose Advanced. Add the class name and save
  6. Click Save Page.

 You can also get a quick overview of how margins, borders and padding work in this helpful article from Hubspot.