Mission 2: Style Component

Briefing

Today we are going to use the Design Editor to style the blockquote component we added to the homepage in mission 1. The Design application enables you to create website layouts and style content lightning fast. As content users don't have access to the Design application your branding and design stay consistent throughout the project.

Step 1: Design Editor

In the CMS editor hover over the left menu and click the design button. If you don't see the design button make sure design and developer rights are enabled for your account.

1 design button

In the Design application scroll to website layouts and click the edit button for the homepage layout. This is the layout attached to the homepage where we added the blockquote component.

2 edit homepage

The Design editor opens with the homepage layout in placeholder mode. To switch to the home content render you click the layout selector on top of the browser preview (1). Select Home (2) to render the content that includes the blockquote component.

3 select home

Tip: if you want to open the design editor directly from the CMS you can also click the green design button on the top right of the website preview (see picture below)

1b design shortcut

Step 2: Blockquote Styling

When the home content has rendered in the design editor scroll down untill you see the blockquote. When you hover over it you will notice 2 paintbrush icons appear (1) en (2). These are the buttons to style the blockquote component. The left darker button (1) will style the component and the changes will affect all current and future installments of the blockquote component on any page of your project. When you want to style the component for this instance only and not affect the general style of the component you need to click the lighter right button (2). This will create a style instance for the component.

In this example click the darker style button (1) as we are going to make some changes to the general style of the blockquote component.

4 style blockquote

Step 3: Text Styling (Blockquote)

After clicking on the dark style button in step 2 a new menu with styling options will appear on the left of your screen. We click on the button that says Text.

5 style overview

A new panel will appear with all properties switched to the OFF position. We are going to make some changes to the following styling options: font family (1), font size (2), font style (3) and text align (4).

6 text properties

1) Switch the Font Family to ON. Select Raleway in the font list and click the green save button above it. Make sure the blockquote is visible in the render preview and you will see the font change in real-time.

2) Switch the Font Size to ON. Set the font size to 36 and select Pixels as type (default). Click the green save button.

3) Switch the Font Style to ON. Select Italic as type and click the green save button.

4) Switch the Text Align property to ON. Select Center and click the green save button.

Tip: you can make all 4 changes without hitting the green save button every time. But before you leave the style panel you need to click the green save button for the changes to take affect.

Step 4: Mobile Styling (Blockquote Text)

With the design editor you can change any style property for mobile, tablets and large desktop screens.

In the text panel click on the mobile button (1) in the Font Size property. You can also set the render in mobile view by clicking the mobile icon on the top right corner of the preview window (2). In mobile view scroll down until the blockquote is visible.

7 mobile properties

In mobile view set the font size to 24 pixels (1). You will see the result change in real time in the mobile render. Press any green save button (3) to save your changes. When you want to return to the browser view you can click the screen icon on the top right of your page (2).

After saving we can click the arrow button (4) to return to the styling options of the blockquote.

8 mobile font pixels

Step 5: Background Styling (Blockquote)

In the styling options menu for the blockquote component click the Background button (2).

Note: As a visual reminder to show you that the text styling panel has properties that are activated (switched to ON) you see an exclamation icon next to the button (1).

9 overview part 2

Switch the Background Color to ON and select Color 4 from the color palette list. (1) Click the green save button. Then click the circled arrow button next to Background to return to the style menu.

10 background style

Step 6: Border Styling (Blockquote)

In the styling options menu for the blockquote component click the Border button (1).

11 overview part 3

Switch the Border Left to ON (1). Set the border thickness to 4, border type to solid border and pick color 3 from the color palette list. Click the green save button. Then click the circled arrow button next to Border to return to the style menu.

12 border left

Step 7 : Style Dimensions (Blockquote)

In the styling options menu for the blockquote component click the Dimensions button (1).

With dimensions you can change the width, height, margin and padding of the selected component.

13 overview part 4

Switch the Margin (pixels) to ON (1). Set the Bottom to 20 and the other dimensions to 0. Click the green save button.

You can now return to the CMS editor to publish your project by clicking the Home icon as shown in the picture below (2).

14 dimensions

Debriefing

Good job! We hope you are enjoying these tutorial missions 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.

Tomorrow we are going to take a first look at the Developer application, the heart of the SiteManager platform. Don't worry if you are not a developer we will have a friendly version of the assignment ready for you.