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!
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.
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.
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.
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.
Minimum height
This setting modifies the minimum height of the section.
Section padding
Padding will create space all around the content.
Space between blocks
This setting modifies the space between content blocks of the section.
Section Background
Background color
This setting modifies the color of your section's background.
Background image
This setting modifies the image of your section's background.
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.
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%
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)
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.
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).
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.
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
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.
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
Divider Height
This setting modifies the height of your divider. You can choose between 0 px to 20 px.
Divider Width
This setting modifies the width of your divider. You can choose between 5% to 100%.
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!