How to Use the Guided Custom CSS

If you are a premium user, there will be a new options panel named Custom CSS in your Advanced Tab.

When you open it, you should see something like this:

Our Guided Custom CSS

Any CSS styles you enter here will only be applied to the current block you are editing. You won’t have to worry about your styles affecting unwanted places.

You might be wondering why we call this feature “guided”, this simply means that we’ve already laid out for you a list of CSS classes you’ll need in order to modify the block through CSS. You won’t have to dive into the block’s source to find out the CSS class names.

Just fill out the necessary areas with your own style rules.

Fill it up with your style rules.

After adding your custom CSS, the block should show your changes right away.

You don’t also have to worry about the empty CSS selectors, Stackable removes the unused ones so that we can keep your pages loading fast.

My Blocks Do Not Go Full-Width Properly

Your theme normally dictates how the contents are shown in your pages.

Sometimes, blocks may not show up in full-width properly. When this happens, most of the time things get fixed by using a full-width page template.

Themes usually provide this type of template. To see if this is the case, please see if your page attributes have something like this:

Check the “Document” tab in the Block Editor’s inspector.

If your theme doesn’t have a full-width page template, there are a few plugins that that provide this type of functionality.

Here’s a free one from the WordPress Plugin Directory called ​Fullwidth Templates for Any Theme & Page Builder (we are not affiliated with the plugin)

Your mileage may vary depending on your ​theme though, so if you find that this method doesn’t work, you can also manually create your own Full Page Template. ThemeIsle has a great article discussing how to do this.