Waching daily Sep 25 2018

In this video we will learn about how to configure the Section Styles,

this feature allows you to control the style of a section of your layout.

JSN Epic template will be used as an example in this video.

Go to Template Styles manager page to select JSN Epic 2 - Default style.

Choose the Styles tab, and click on Section.

Here you can see all the sections that you are able to configure, such as

Top section, Header, Main Menu, Content Top, Main Content, Content Bottom, Footer, and Demo Builder.

The Section builder interface with Live Preview area is on the left side,

and the Settings panel is on the right.

Next, go to Layout Builder page,

here you can see all the sections are equivalent to the sections in the Section Builder page.

Now, let's start with the Section Container Styles.

This area allows you to select Background Color or image for the Container.

First, for the Background Color, you can select Main Color,

Sub Color, or Custom Color.

For the Background Image, you can select an image from the media selector,

and configure the Background Image Settings and Border to your preference.

Save Style to see the changes on the front page.

This is the image of the section container.

Next, the Section Heading Styles Configuration.

Select heading element to settings.

By default, the Section Headings Style will be inherited from the General style,

so you need to activate custom style settings.

then you can change the heading color, select font weight,

or text transform and text shadow.

Base Size is the font size of Heading 5.

With other headings, the font size will automatically increase according to a certain parameter depending on the Base Size.

Only Heading Style has this option.

The last one is Line Height and Letter Spacing.

Save and go to the front page to check.

Content Style allows you to style all the content in this section.

By default, Section Content Style will be inherited from General style.

Activate custom style settings.

Try changing the content color,

adjust the font size and line height.

Save the style,

reload your website to check the result.

This feature allows you to change the styles of buttons and links on the section.

On each section there are two buttons - Default and Primary buttons.

Similar to other elements, click on Use Custom Settings to activate custom button style settings.

Included here there are two states available for buttons.

Normal State, the natural state of the button when you are not interacting with it.

And Hover State, the state of the button when the mouse cursor is moved above it.

Let's try to changing color for each state.

Click on Save Style,

and go to the Category Blog page to check.

Finally, let's learn how to manage the style of all links on each section,

click on Use Custom Settings to activate custom link style settings.

Select color for Normal state and Hover state.

After finishing, don't forget to save the style,

Check on the frontpage.

Thank you for watching.

Please check our other videos to learn more about how to work with the JSN Sun Framework.