Mission 6: Style Layout Element

Briefing

Every website layout in SiteManager is built with different elements. In the design editor you can style these elements using the same kind of design panels we used in mission 2 when we styled a page component. In this mission we are going to change the background color of the floating menu (in starting position and on scroll effect) and change the way our submenu opens and closes.

 

Step 1: Design Application

Log in your project and go to the Design Application.

Screenshot_128-1

 

Click the edit button of the content layout to enter the Design Application.

Screenshot_286-1

 

You always enter the Design App in placeholder view. In this tutorial we are going to style one of the design elements of the layout. You can do this in placeholder view but you can also pick any other existing page render to see the effect.

Step 2: Floating Menu Styling (start)

We are going to change the background of the floating menu. We will change it to white since we have changed the content background in the previous mission.

 

Click the styling button next to Floating Menu.

Screenshot_287

 

Click Floating Menu

Screenshot_288

 

Click background

Screenshot_289

 

(1) Select Color 5 (white) as the new background color, replacing Content BG

(2) Click save

(3) Click on the home icon to return to the start panel

Screenshot_290

 

Step 3: Floating Menu Styling (sticky effect)

When you scroll down you will see that the background of the floating menu is not white yet. In this step we are going to change the background color again but this time it for when the floating menu is scrolling down and sticking to the top of the screen.

Return to the floating menu styling (see step 2).

Screenshot_287

 

Click the on Scroll Effect button (Sticky Settings)

Screenshot_291

 

Click on the Background Banner button

Screenshot_292-1

 

Click on Background

Screenshot_293

 

(1) Select Color 5 (white) to replace Content BG as background color

(2) Click the save button (update CSS)

(3) Click home icon to return to the start panel

Screenshot_294

 

When you scroll down you will see that the background of the banner is now white.

Screenshot_295

 

Step 4: Change Submenu (Open Close Animation)

Some layout elements have a gear button next to the style button. This button contains panels where you can change the functionalities of the element. Where styling changes the CSS file of the layout, the gear option changes the javascript functionalities of the element.

In this example we are going to change the submenu functionality of the floating menu.

(1) Click the dark gear button next to Floating Menu.

Screenshot_296

 

(2) Click Menu Options

Screenshot_297

(3) Set Animation Open Effect to Fade In

(4) Set Animation Out Effect to Face In Close

Screenshot_298

(5) Click save button next to Menu Options

(6) Click home icon to return to the start panel

 

 

Step 5: Publish Layouts

For the design changes to take affect in the CMS and published website we need to update the layouts.

First we are going to update the Content layout.

(1) Click Update Layout

(2) Return to the design home page

Screenshot_299

 

Don't forget to publish the website to see the changes on the preview site.

 

Debriefing

The tutorial missions start with the layouts already build. Know that you can built any website from scratch as shown in the videos on the behind the scenes page of the tutorial website.

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.

In the next mission we are going to add an appear animation to our blockquote component using the design editor.