How to build a page using blocks
If you are building a new website there are 2 ways to create your pages: by applying predesigned page layouts or by creating these pages from scratch using blocks.
There are 2 types of blocks inside the Gutenberg theme: Flo Gutenberg Blocks and Flex Blocks, and you can mix these with other Gutenberg native blocks to create more tailored and personalized page layouts.
Gutenberg Blocks
We’ve recreated the WP Blocks available inside your Flothemes designs, such as Gallery, Slideshow, Listing, Contact Form, Newsletter, Related Items, Button, Title & Text into Gutenberg blocks.
To add a new block to a page or post, simply click on the “+” button located in the top left corner:
or on the right side of your layout:
Flex Blocks
With Pronto, you can add FlexBlock as any other Gutenberg block into your layouts and enjoy the vast flexibility and full control over your website design.
There are 2 ways how you can use Flex Block:
1. Build your own Flex Block
Click Add Block, select Flex, and get into the Flex builder to build a block from scratch using the provided elements and functionality. Please refer to Flex Block tutorials for more details.
You can save your own Flex blocks if you need to reuse them on other pages. Please refer to Saving your own blocks tutorial for more details.
Note that if you are building a block from scratch once you're done with the desktop layout you need to work on the mobile layout.
2. Use one of Predesigned Flex Blocks
We have 100+ predefined blocks available with Pronto. These are recommended layouts that you can use as a base for your blocks.
In order to use a predesigned block, add a Flex Block, open the builder and click the Layouts button in the bar at the top:
When you add the block, it will be applied with dummy content. The images that you see in the preview will be replaced with grey placeholder images. Now you can work on the content and replace the dummy content with your own content.
In case your content doesn’t fit the layout perfectly, adjust elements as you require – move elements, resize images, etc.
For the predesigned blocks, the mobile content is automatically synced with the desktop one, there is no need to work on your mobile content separately.
When the desktop version is ready, make sure to switch to the mobile version and check if the page is looking good. Usually, you might need to tweak element sizes and positions for texts.
In case you want to make some element of the block different for the mobile version only (e.g. have less text on mobile) open your Flex Block, switch to mobile, select the element and disable Desktop Sync.
Add the content you prepared for your mobile version, save the block, update the page & check the new block on the final page.