Step 1. Building the block for Desktop
In the articles above you can find more information about the element types included in FlexBlock and their functionality, details on how to work with layers, what are the additional tools and shortcuts that can help you build your new block with Flex Block.
Now, it’s time to go through the actual steps of creating the desktop version of your custom block:
- On the page where you want to build your custom block, find Flex Block in the list of your theme’s blocks and insert it into the page.
- Click Open Builder to get into the Flex Block building area. By default, you see the builder for your Desktop version.
- We recommend starting with the Block Height option if you know what is the approximate height of the block you want to create (if you don’t tweak the Block Height, it remains at its default of 750px). If you are not sure what height your block will have, you can always adjust it later.
- In case you want to set up a background color for your block, now it’s a good time to do it. By default the background color of the FlexBlock is white (it does not use your site’s background color as a default). We recommend setting up the background color in the beginning since you may insert various blocks with color transparency later on, and they will be affected by your background color.
- Now you can start adding various elements to the block building area. You have 5 types of elements to work with – image, button, text, shape and line (check the corresponding articles for detailed info on each and tricks). Keep in mind the availability of the copy function (Command+C or the Copy option inside Layers) that can save you a lot of time, especially when you’re building a grid or a layout that requires respecting the same proportions.
- While adding the elements and building the block layout do not forget about the 3 inbuilt helpers – Visual Guide, Grid and Smart Guides.
- In case the elements overlap each other, use Layers to order them correctly.
- When the content is added and you are happy with it, check the Block Height once again and ensure the content fits it perfectly, to avoid any big empty gaps.
- Go to the Mobile tab to build the mobile version of your block (in case you try to save a block without the mobile version created, you will get a warning about the absence of the mobile version).