Last Updated on June 3, 2021
This article will help you understand how to use the Style tab, what the different options inside it are and how to use them effectively in your page designs.
The Style Tab is basically where you will spend most of your time tweaking the looks of the different aspects of your block.
The contents of the Style Tab differ from block to block, but the general structure of the settings are the same to make navigating easier. So if you get to know the settings of a single block, you’ll be a master of every Stackable block in no time.
A video version of this guide is also available below:
The settings inside the Style Tab are grouped together in the following areas. I’ll explain what each of these are and what they do to your block:
- General settings
- Column or Container Background Settings
- Individual Block Element Settings
- Spacing Settings
- Block Title & Block Description Settings
- Block Background Settings
- Block Separator Settings
1. General Settings
The first panel for every Stackable block is usually the General Settings panel. This panel contains common options like columns, shadows, border radius and alignments.
2. Column or Container Background Settings
If the block has a “boxed” container, there is usually a Column Background panel or Container Background panel where you can modify the background properties of your container.
3. Individual Block Element Settings
Each block is composed of different elements, things like titles, descriptions, buttons, images or icons. We call these Block Elements.
Every block element has their own settings panel, and almost every block element can be toggled on or off.
4. Spacing Settings
After all the block element settings, you can find the Spacing panel where you can adjust the spacing between all your different block elements.
5. Block Title & Block Description Settings
Depending on the block, you can enable Block Titles and Block Descriptions. These text show up on the top part of your block.
6. Block Background Settings
The Block Background allows you to turn your block into an entire section. Turning it on will allow your block to become full-width and will allow you to add a background for the entire section.
This setting is different from Column / Container Background settings, wherein those settings only affect the “boxed” containers in the design of your block. While the Block Background is more about using the block as an entire section. You can read about about the difference between Column Backgrounds and Block Backgrounds here.
7. Block Separator Settings
In some blocks, you can enable Separators to appear on the top or bottom part of your block.
These separators (sometimes called Shape Dividers by other plugins) is a good way to separate the sections of your site.
Separators work great alongside Block Backgrounds.
