UX Blocks explained in Flatsome Theme

Learn to master UX Blocks in Flatsome for easy, dynamic site customization! Effortlessly control headers, footers, product pages, and more across your entire site.

 •

UX Blocks are powerful tools in the Flatsome theme, letting you customize elements like footers, headers, call-to-actions, and even unique product layouts across your entire site. In this guide, I’ll walk you through creating and using UX Blocks for global changes, e-commerce pages, widgets, and more.

Step-by-Step Guide

1. Creating a UX Block

  • Go to your WordPress dashboard.
  • Find UX Blocks on the left sidebar and click Add New.
  • Give your block a title, publish it, and then open it with the UX Builder to customize your layout.

2. Adding a UX Block to a Page

  • Open the page where you want to place the UX Block (e.g., homepage).
  • In the UX Builder, click the + icon, search for “Block” on the left, and select it.
  • Choose the block you created from the dropdown.

3. Editing UX Blocks Across Multiple Pages

  • To make changes that will apply globally (e.g., across the homepage, contact page), simply edit the UX Block.
  • Update the content, and your changes will reflect on all pages where the block is used.

4. Using UX Blocks in Widgets

  • Go to Appearance > Widgets.
  • Add a Flatsome Block widget to the desired sidebar, and select the UX Block you want to display.

5. Creating a Custom Footer with UX Blocks

  • Create a new UX Block, name it “Custom Footer,” and build it in the UX Builder.
  • Go to Flatsome > Theme Options > Footer and select your Custom Footer block to apply it site-wide.

6. Adding UX Blocks to Product Pages

  • For single products, go to the product editor, scroll to the Extra section and add the UX Block shortcode.
  • To apply a custom layout to all products, go to Flatsome > Theme Options > WooCommerce > Product Page and choose the block under Custom Product Layout.

7. Assigning UX Blocks to Categories

  • Go to Products > Categories and select the category you want to customize.
  • Add the UX Block shortcode in the Top Content or Bottom Content fields to control where it appears.

8. Using UX Blocks in Headers

  • In the Header Builder, add a Block element, then select the UX Block you want.
  • You can also add blocks specifically for mobile headers by going to Header Mobile.

9. Setting a Custom 404 Page with UX Blocks

  • Create a new UX Block titled “404 Page,” design it as needed, and save.
  • Go to Flatsome > Theme Options > Advanced and set your 404 page to the new block.

10. Using UX Blocks in Lightboxes

  • In the UX Builder, set a button to open a Lightbox. Inside the Lightbox shortcode, insert your desired UX Block shortcode for dynamic content.

Whether you’re building a site from scratch or looking to enhance an existing design, mastering UX Blocks allows you to create a more dynamic, user-friendly experience for your visitors. Experiment with the different ways to integrate UX Blocks into your layout, and see how they can simplify and supercharge your Flatsome site! Happy building, and enjoy exploring everything UX Blocks have to offer!

Continue learning

flatsome designs

200+ Free Designs

Get for free

Need a custom design? Hire Seb today

Get the #1 All In One Design Agency for Flatsome

Hire Seb & Tas