Flex block allows you to create your own block modules for custom pages. You can add and rearrange images, text, buttons, and dividers on a grid-based system to create layouts that fit your work.
Your self-expression is important to us. That’s why Format is moving into a new era of customization and functionality, to bring you more control over the look of your site. This is just the first in a series of new tools releasing throughout 2025.
Accessing the flex block
The flex block can be added to any Custom Page. It cannot be added to Gallery Pages, Collection Pages, Client Galleries, or your Blog.
To access the flex block, you will first need to create a Custom Page. Once you have done so, you can add a flex block by clicking Add Section:
- Click Add Section
Then, navigate to the new Flex heading and add a flex block section:
- Navigate to Flex
- Click Add Section
- Suggested Templates: You can choose to start with a template instead. For the purpose of this help article, we are adding a Blank Template
After adding the new section, you'll see it on your Custom Page. It will be blank at first, and you'll now have the opportunity to add content:
- New Flex Block section added
- You can click Edit Block to begin adding content
Flex block editor overview
When you click Edit Block, you will be brought to a separate editing interface for the flex block. In this editor, you can make and save changes to your flex block section, including but not limited to:
- Creating blocks using a snap grid to control spacing and layout
- Adding elements such as images, text, buttons, and lines, and layering them to add depth to your designs
- Editing your images within the flex block—change their shape, aspect ratio, add overlays, and more
- Changing the background color independently of your website background
- Adjusting the layout of your flex block section for mobile display
The above list is only a general overview. You will be able to personalize your flex block in many additional ways, including custom positioning and design options for each element.
- Add Element +: Add text, images, buttons, video, lines, and slideshows
- Add Template +: Start with a pre-built flex block template
- Undo/Redo: Use these buttons to undo or redo actions taken within the flex block editor*
- Section Options: Adjust flex block width, padding, and margins
- Background Color: Change the flex block's background color, add an image background, and change the background to full-width, if desired
- Duplicate: Duplicate the current section
- Delete: Delete the current section
- Enhanced Grid Contrast: High-contrast setting for the flex editor's grid
-
Additional Section Options: From top to bottom, these are:
- Move Down: You can rearrange the order of multiple sections within the flex block editor
- Duplicate: Duplicate the current section
- Delete: Delete the current section
- Add Section: Add a new section below the current section
- Section Length: You can click and drag this icon up or down to change the length of the current flex block section
*Undo/Redo: You can also use keyboard shortcuts to undo (CTRL + Z on PC, or CMD + Z on Mac) or redo (CTRL + SHIFT + Z on PC, or CMD + SHIFT + Z on Mac).
You can also preview and edit the mobile view of your flex block, which we will explain in further detail in this article's Mobile editing section, further down this page.
Section options
If you click on Section Options (number 3 in the previous screenshot), you will be presented with a range of options related to your flex block section:
- Padding Top: Adjust how much of the flex block's background extends above its content
- Padding Bottom: Adjust how much of the flex block's background extends below its content
- Margin Top: Adjust how much space on your Custom Page is above the flex block section
- Margin Bottom: Adjust how much space on your Custom Page is below the flex block section
You also have the option to change your flex block section's background color, set it to full-width, or add an image background:
- Theme Background: This is the default setting, which uses your site background color for your flex block background
- Customize: Select a custom background color from our palette
- Your Colors: Pick your own custom background color
- Image or Video Background: Add an image or video (coming soon) background
- Upload Background: Upload your image or video (coming soon) background
- Full-width Background: Set your background to be full-width
Using flex block templates
You can choose to start from scratch by adding elements to your flex block, or you can start with one of our premade templates. All templates can be accessed within the Custom Page Add Section menu:
- Flex: Navigate to the Flex tab to view all flex block templates
- Blank Template: Select this option to start from scratch
- Suggested Templates: Select one of our premade flex block templates
- Scroll Down: Scroll to view all available templates
Once you select a template, it will be added to your flex block. From there, you can edit each element individually.
Overview of available elements
You can add images, text, buttons, and lines to your flex block. Each of these elements have many design options available. Here, we'll go into a bit more detail about each of these element types.
Images
- Edit Image: Clicking this provides you with more image formatting options (see next screenshot)
- Image Link: You can add a link to your image
- Move Forward and Move Backwards: You can adjust whether your image is in front of or behind other content
- Duplicate: You can duplicate your image
- Delete: You can delete your image (this is permanent)
If you click Edit Image (number 1 in the above list), you will then be presented with the following options:
- Image Content: You can change the focal point of the image (i.e. which portion of your image to center on if the image is cropped), or replace the image with another image
-
Image Options: Here you have several options, including:
- Crop Ratio: Choose between Fit or Fill
- Zoom: Adjust the zoom on your image
- Opacity: Adjust the transparency of your image
- Corner Radius: Round the corners of your image
- Overlay Opacity: Adjust the transparency of the overlay on your image
- Overlay Color: Change the color of the overlay on your image
- Image Description: You can add a short SEO description of your image. This description is not displayed on your live site
Pro Tip: You can create image backgrounds by resizing an image to cover the entire flex block. You can then add other elements on top of the image.
Text
After adding a text element, you will be presented with the following options:
- Edit Text: Click here for additional editing options (see below screenshot)
- Alignment: Choose between top, center, and bottom text alignment
- Move Forward and Move Backwards: You can adjust whether your text is in front of or behind other content
- Duplicate: You can duplicate your text element
- Delete: You can delete your text element
- Text Box: You can resize your text element or click and drag it to reposition it
You can click Edit Text (number 1 in the previous screenshot) to access additional design options for your text element:
- Text Type: Choose between Large Heading, Heading, Body, Small Text, and List
- Font Size: Change the font size for your text. You can use multiple font sizes within a single text section
- Text Color: Change the color of your text
- Text Justification: Change the justification of your text, e.g. left-justified, center-justified, etc.
- Text Styling: Bold or italicize your text
- Clear Text Formatting: Clear all formatting for the selected text
- Link: Create a hyperlink by adding a link to your text
Please note: Text type (Large Heading, Heading, etc.) styles are set by your site's Design settings for Custom Pages. This can be adjusted by navigating to the Design tab and changing the typography settings for Custom Pages.
Buttons
The ability to add buttons is a new feature, introduced with the flex block. After adding a new button to your flex block, you'll be provided with the following options:
- Button Options: Adjust the font size and border radius
- Button Text & Link: Change the button's text content and link destination
- Button Colors: Change the button background color and text color
- Button Align: You can align your button on a nine-point grid within its bounding box
- Move Forward and Move Backwards: You can adjust whether your button is in front of or behind other content
- Duplicate: You can duplicate your button element
- Delete: You can delete your button element
- Button Bounding Box: In the flex block editor, you can view how your button aligns in its bounding box based on the alignment option you choose in the Button Align setting
Lines
Lines can be used as content dividers, design elements, borders, and more.
- Line Type: Choose between a Simple Line or Dashed Line
- Line Weight: Adjust the pixel weight of the line element
- Line Color: Adjust the color of the line element
- Alignment: Choose between top, center, and bottom alignment for the line element
- Move Forward and Move Backwards: You can adjust whether your line element is in front of or behind other content
- Duplicate: Duplicate the line element
- Delete: Delete the line element
Video
- Edit Video: Access additional video editing controls, like looping, autoplay, and muting
- Video Align: Align your video within a nine-point grid
- Element Overlap Controls: You can overlap elements in the Flex Block editor. These buttons allow you to bring elements forward, send them backwards, move to front, and move to back. This effectively allows you to decide if an element is hidden behind another element or on top of it
- Duplicate: Duplicate the currently selected element
- Delete: Delete the currently selected element
Slideshows
- Upload Images: Upload images to your Slideshow section. This works the same way as uploading images anywhere else on your site
- Slideshow Options: Adjust visual effects, navigation options, and more
- Manage Images: Manage the images in your Slideshow section. As no images have been uploaded yet, this cannot be accessed
- Layer Positioning: Adjust the positioning of your slideshow in relation to other elements in your flex block section, where overlapping elements may be a concern
- Duplicate: Duplicate the Slideshow
- Delete: Delete the Slideshow
How to add and organize elements
The flex block is a drag-and-drop editor, allowing you to create custom sections and page layouts with more advanced flexibility than our standard pages. Before you begin adding elements to your flex block section, it will help to understand how the flex block editor functions.
The flex block editor is comprised of a grid of rectangles. When you add a new element, you can edit it, resize it, and move it around within that grid. Your elements will automatically snap in place to the grid points that you click and drag the element to.
- A blue bounding box surrounds the entire flex block section. Within this bounding box, you can see a faint grid of rectangles—this grid is not visible on your live site, and is only present as a visual guide when editing your flex block
- A smaller bounding box surrounds individual elements, and will snap to grid points when clicking and dragging the element
You can also group elements together. Grouping elements together allows you to reposition them, as well as duplicate multiple elements at once. When elements are grouped, you can edit them independently by double-clicking individual elements. However, keep in mind that you'll need to ungroup elements if you want to resize them.
To group elements, you can hold Ctrl (or Cmd on a Mac) and click on each element you want to add to a group. You can also click and drag within the flex block to highlight multiple elements.
- Group: Once you have selected the elements you want to group, you can click this button to group them
- Grouped Elements: Grouped elements will appear with a large blue bounding box around the entire group
Asset layer list
To help you organize the elements in your flex block even more conveniently, you can access an asset layer list. This list allows you to view all of the elements in the currently selected flex block section and how they are layered on top of each other. If you've ever used a program like Photoshop or Clip Studio Paint, this layer list functions similarly.
- Layers: Clicking this tab will open a sidebar on the left with a list of all assets in the currently selected layer
Once you select the Layers tab, you'll be able to view the following:
- Layers: You can view an ordered list of your asset layers. Assets are displayed from topmost layer to bottommost layer
- Reorganize layers: You can click and drag a layer to reorganize its position in relation to the layers above or below it. This is more convenient than simply using the move forward and move backwards buttons on individual layers
Mobile editing
You can also create a custom mobile view of your flex block sections. This mobile view displays on devices such as cellphones and tablets, and is separate from your flex block's desktop view.
- Preview: Preview and edit desktop and mobile views by clicking on the icons in the top-right corner of the flex block editor
When you initially switch to mobile editing, your elements will be arranged vertically. You can then move and resize all elements in your flex block to create a custom mobile layout. This allows you to optimize your flex block content for improved viewing experiences on mobile phones and tablets.
The below screenshot shows an example of how flex block elements can be resized and repositioned into a layout that is separate from the desktop layout:
Upcoming features
Our team is working hard to introduce additional functionality to the flex block beyond its initial release.
Please note that we're not able to confirm the release date of additional functionality, nor are we able to share information about each new feature on the roadmap, but would recommend keeping an eye on our monthly email newsletters for more information.
If you aren't signed up for our newsletter or don't want to sign up for it, you can also keep an eye on your account Dashboard where we'll share updates to your theme and new feature releases.
All stock images used within flex block screenshots in this article were sourced from Unsplash.
Still have questions? Reach us on our live chat or email us at info@format.com. We’re here to help!