Mission 8: Add element to layout


Every layout is built using a massive library of design elements. These elements can be styled and tweaked however you like using the Design Application. Know that every element is created using the Code App, giving the developer the freedom to change elements or create their own. There is literally no limit to what you can do.

In this mission we are going to add a to top button to our layouts.


Step 1: Design Application

Log in your project and go to the design application.



Click the edit button of the main layout to enter the Design App.



Step 2: Add new element to main layout

We are going to add a To Top Button to the footer.

Click the plus button next to the footer section.



Click the Special Elements button in the footer library.



Click Add to site next to the To Top element



Click yes to confirm the installment.


Step 3: Style Element

When you scroll down you should see the scroll to top button appear on the right of your preview screen.

Click the style button next to To Top in the footer section.



We are going to change the icon in the top button.

Click Icon Default Settings in the Style design panel.



There are 3 types of font libraries you can choose from. Click on the links to search the icon class you want to add to the element.

(1) change "fa-angle-up" to "fa-arrow-up"

(2) click the green save button

(3) Click Dimensions



As you will notice in the preview screen the new arrow is a little off center.

(1) Change the left margin from 14 to 12

(2) Click the green save button

(3) Return home



The To Top button should look something like this now:



To make the new layout available for the CMS and website we need to save our layout.



Step 4: Link element to other layout

Now that we have added a new styled element to our content layout we also want to add this element to our homepage layout.

Return to the design starter page and click the edit button next to the homepage layout.



Next to the Footer section you will see a new blue link button.

This button indicates that there are elements on other layouts that can be added to this section of the current layout.

Click the link button



(1) Select To Top from the content layout

(2) Click Add



The To Top element has been added to the Footer as a linked element. This means that the styling and settings of the To Top element of the content layout and homepage layout are the same. If you make changes to one of these elements both will be updated.

Click the Save Layout to save your changes.



Don't forget to take a look in the CMS and publish your website to see the new To Top button in action.



The technique of adding elements to a layout is the fundamental way to built a layout lightning fast from scratch. Simply add elements to the Header, Content and Footer section. Style them. Publish.

You can also take a look at our video where we built the tutorial site from scratch.

Thank you for going through these missions with us. The final mission awaits as we will update our credentials to the site and add a custom background to the CMS login screen of our clients.

if you have any questions you can always contact us at support@sitemanager.io. If you like to learn more about the Design application you can always watch our Youtube playlist where we give you a full overview.