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 Editor

Log in your project and go to the design application.

1 design button-2

(1) Click the edit button of the content layout to enter the design editor

2 select layout-1

You always enter the design editor 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 real page render to see the effect.

3 render select

(example of picking a actual content render)

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 green styling button next to floating menu.

4. style floating menu button 2

Click Floating Menu

5 style overview-1

Click background

6 background overview

(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

7 floating menu color

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).

4. style floating menu button 2

Click the on Scroll Effect button (Sticky Settings)

8 on scroll effect

Click on the Background Banner button

9 scroll effect overview

Click on Background

10 banner background

(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

11 background color

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

12 result

Step 4: Change Submenu (Open Close Animation)

Some elements in the layout have a dark gear button next to the green 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.

13 js button

(2) Click Menu Options

(3) Set Animation Open Effect to Fade In

(4) Set Animation Out Effect to Face In Close

(5) Click save button next to Menu Options

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

14 jsoptions

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

15 update layout

Since the floating menu is also used in the Homepage Layout we also need to update this layout.

Click the edit button next to homepage.

16 edit homepage

Click the update layout on the bottom of the start panel.

17 publish homepage layout

When you return to the CMS editor you will see the updated floating menu. 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.