General Layout settings and content blocks

The general layout settings are the settings you'll find by default in almost all homepage sections whatever it is, therefore it's important to learn how to use them.

Content blocks are elements you can add in some sections of Booster Theme, you will mostly use it for the Call to Action section that used a lot!

In this article, we will explain everything setting by settings. You may not need to read the whole article, because some settings are simple and understandable without having to read it, therefore it's all there whenever you need it!

  1. General layout settings

  2. Add Content Block

General layout settings

Of course, there are lots of general settings, but this makes the theme really flexible. You'll see they are simple to use and easy to understand.

  1. Section Layout
  2. Section Background
  3. Background Overlay
  4. Section Content
  5. Section Heading

Section Layout

Show this section on

Sometimes, you don't want one section to show on mobile because it is not looking good for various reasons, then you can decide to show this section only on Desktop by a click. This feature is really great for optimizing your website for mobile or desktop without affecting the other. 

You can select to show this section on:

  • All devices
  • Mobile
  • Desktop

Section layout

You'll be able to use this setting to change the layout of your sections if you don't want them to follow the global default. It is an essential setting to create an amazing website layout.
There are 3 different possible layouts: Boxed, Fullwidth background, Fullwidth.

We made a complete article about this! See it here.

General Layout settings and content blocks 1

Section-scoped CSS

This setting enables you to apply CSS rules only to the sections you are currently working on. This makes the customization process much easier.

General Layout settings and content blocks 2

Remove section's bottom margin

The section bottom margin is the little space that is at the bottom of each section. Sometimes it feel better without it, so with made the setting for it.

General Layout settings and content blocks 3

Minimum height

This setting modifies the minimum height of the section. 

General Layout settings and content blocks 4

Section padding

Padding will create space all around the content.
General Layout settings and content blocks 5

Space between blocks

This setting modifies the space between content blocks of the section.

General Layout settings and content blocks 6

Section Background

Background color

This setting modifies the color of your section's background.

General Layout settings and content blocks 7

Background image

This setting modifies the image of your section's background.

General Layout settings and content blocks 8

Background image position

This setting modifies the image position of your section's background.

Parallax

You can put a parallax effect on one of your backgrounds in order to create a visually captivating section. 

General Layout settings and content blocks 9

Background Overlay

An overlay is a filter you put over a certain image in order to match it with your branding or simply giving it a better look.

Overlay opacity

This setting modifies the overlay opacity. You can choose between 0% from 100%

General Layout settings and content blocks 10

Overlay color

This setting modifies the overlay color.

Section Content

Default text color

This setting modifies the color of the text and the buttons.

Content alignment(left to right) & (top to bottom)

This setting allows you to modify the alignment of your block. You can choose between 3 different options on the vertical: Left(1), Center(2), Right(3) and 3 different options on the horizontal: Top(1), Middle(2), Bottom(3)

General Layout settings and content blocks 11

Section Heading

Section heading

This setting modifies the heading of your section

Section Subheading

This setting modifies the subheading of your section

Subheading position

This setting modifies the subheading position. You can choose between: Above heading or Below heading.

General Layout settings and content blocks 12

Heading alignment(left to right)

This setting allows you to modify the alignment of your heading. You can choose between 3 different options: Left(1), Center(2), Right(3).

General Layout settings and content blocks 13

 

Add Content Block Settings

In some categories in Booster Theme V5, you can add content blocks to your section, this is a great way to customize your store to make it unique. 

General Layout settings and content blocks 14

Add Content Block

Adding a content block is super simple, add a call to action and click "Add content", you'll have access to the various content block that Booster theme to offer. There is a total of 11 different blocks.
General settings for content blocks

In most of the blocks, you'll find settings that are the same. 

Single in row

Enabling this will make your element the only element on the row. Therefore, if you keep it disable you'll be to put a heading or another element besides a button as an example.

Make sure to have both blocks unchecked in order to have them on the same line.

Text color

This setting is to change your text color.

Font family

This setting allows you to choose between your two font presets.

Font size

This setting allows you to change the font size. You can choose between 4 options: Small(1), Base(2), Medium(3), Big(4).

1.Heading

The heading block can be used to add a header to a section.

 

2.Text

Width

With the text block, you can select the maximum width content 

Content

This is the setting to write your text.

Automatically detect lists

Whenever you activate this setting, ff a row begins with a '-' (dash), the theme will automatically turn this row into a list element.

3.Button Block

How to use the button block

Button text

This setting modifies the button text.

Links to

This setting allows you to add a link to your button. You can either directly paste a link or search for one of your pages or products.

Button icon

This is the location where you'll need to put the name of the icon you want. There are more than 2200 icons available on the Unicons library. 

More information about how to use the Unicons library here

Button style

You can also make the button full width.

This setting allows you to choose between your primary or secondary style.

More information about how to modify the button combination here

Button type

General Layout settings and content blocks 15

This setting allows you to change the button type. There are 4 different options: Filled(1), Ghost(2), Text(3), Underlined(4)

Animation

This setting allows you to animate your button. There are many different animations available. See some examples in the gif below.

General Layout settings and content blocks 16

Animation duration 

This setting allows you to change the duration of your animation. You can choose between 100ms and 2500ms.

Animate infinitely

This setting allows you to choose if your animation is infinitely or only for a short period of time.

4.Image block

Image
Select an image you want to display in your section.

Width
This is where you can select the maximum width of the image.

Border radius
This property allows you to add rounded corners to your image.

 

5.Separator Block

How to use the separator block

Height

This setting modifies the height of your separator. You can choose between 0 px to 250 px

General Layout settings and content blocks 17

Divider Height

This setting modifies the height of your divider. You can choose between 0 px to 20 px.

General Layout settings and content blocks 18

Divider Width

This setting modifies the width of your divider. You can choose between 5% to 100%.

General Layout settings and content blocks 19

 

6.Countdown timer

In Booster V5 you can add a custom countdown timer to your homepage.
It is working the same way as the countdown timer for your product page and product cards.

Learn more about the countdown timer here

 

7.Newsletter

Learn how to setup the newsletter here

 

8.Custom Heading, Custom Text, Custom Button

Those custom blocks are not based on your preset. They allow you to make a custom content block instead of using the preset you made in your Theme Settings. Those custom content blocks have the same settings as the non-custom content block. You'll be able to use them the same way you use the others, therefore the custom button block does have more advanced settings. In order, to understand how to properly use them, read this article: Buttons settings

 

Conclusion

This concludes every general section layout and content block you will find in Booster V5!