How to Customize Blocks
STACKABLE BASICS
Learn the different ways you can customize the blocks you added through the inspector and toolbar.
Video Transcript
Hello! Welcome to Stackable, your all-in-one solution to building stunning websites with the WordPress block editor
This video is an in-depth tutorial on how to customize Stackable blocks. You will have a deeper understanding of all the customizations and settings that are possible with Stackable.
Hello! Welcome to Stackable, your all-in-one solution to building stunning websites with the WordPress block editor
This video is an in-depth tutorial on how to customize Stackable blocks. You will have a deeper understanding of all the customizations and settings that are possible with Stackable.
Let’s start by adding a block. For purposes of this tutorial, you will be using the header block by Stackable. Generally, there are three tabs in the Inspector panel.
The Layout tab
the Style tab
and the Advanced tab.
Let’s first go through the Layout tab.
In the layout tab, you can change the layout of your block. There are various options to choose from.
If you scroll further down, you will see the design section. We have a number of pre-made designs that you can choose from. These are some designs you can start off to design your page. Which of course you can still customize according to your own liking.
You can also access these pre-made designs by clicking on the Design Library button in the toolbar.
We’ve chosen the Angled Header design to start with.
Now on to the Style tab so we can customize how we want this block to look like.
Let’s go through the different design options in the style tab.
Generally the style tab’s contents are the same across Stackable blocks. Let’s go over these one by one.
The General section is where you can set some general height and width settings, as well as select the alignment of the elements within the block.
The spacing section is where you could adjust the spacing between the elements within the block as well as the padding surrounding each element. You can use the slider or type the number in the text field.
The text elements in each block generally have the same customizable attributes. But for the title, you can change the HTML tag. A quick tip is to limit one H1 tag in each page for SEO purposes.
The text elements’ customizable options may be divided into four sections–the typography, size, color and alignment.
The pencil icon opens up the typography settings where you can change the font family, size, weight, and more.
Now let’s move on to button settings!
You can either add the button’s link to the button itself or paste the URL in the inspector. You have the option to open it in a new tab and to make it into a nofollow link!
There are also various button layout options such as basic, ghost, plain, or simply turning it into a link.
You have various color options for buttons. You can opt to use a single color or a gradient.
You can also add animation to your website by using a hover effect for your buttons.
Further customize your buttons with these size, radius, padding, shadow, and opacity settings. Again, you can adjust these by using the slider or manually typing your desired setting in the text field.
Lastly, for buttons, you have the option to add an icon and adjust the alignment.
Now let’s talk about the block background, you can opt to use a plain background with either a solid color or gradient. You can also use a background image.
You can add a tint to your background so it blends well with the rest of your website.
there are also advanced background image settings to display the background image in a specific way
Next, the top and bottom separator sections are where you could use different shapes to mask the top and/or bottom border of your block. You can adjust its color, height, width, and many more. You can even layer different shapes to enhance your design.
Lastly, the container link section is where you can make the container of your block clickable. Like most links or buttons, you have the option to open the link to a new tab, or mark it as a nofollow link.
Finally, let’s walk you through the different styling options in the Advanced tab.
The General section allows you to make general changes to your block, such as change its HTML tag, adjust its opacity as well as the z-index.
The z-index stacks the order of different blocks to make one appear in front of another. A block with a higher z-index will show up on top of another block with a lower z-index.
The block spacing section is where you can adjust the different dimensions of the block, such as its height, width, alignment, margins and paddings.
The column or container settings lets you adjust the minimum column height and the block’s vertical alignment.
The alignment you set here will align all the contents within your block.
In the responsive section, you are able to hide the block for any of these devices.
If you click hide on mobile, you will still see the block when you view from a desktop.
however it will be hidden when you view it from a tablet.
The Custom CSS section lets you further customize the block using CSS syntax.
Finally, the Advanced section will let you add an html anchor for this block so you can link directly to this block anywhere on your website. You can also add any additional CSS classes in this section..
Those are all the ways you can customize blocks in the inspector.
We hope you find this guide helpful for your page-building journey with Stackable.
Thanks for watching! Don’t hesitate to reach out to us with any questions you may have. If you liked this video, subscribe to our channel for more videos.
Related Articles & Documentation
All About Typography (in Stackable)
NEXT IN STACKABLE BASICS
By the end of this video, you will have a deeper understanding of all the typography settings within Stackable!