How to use UX Blocks in Flatsome

Master UX Blocks in Flatsome! Learn how to create, manage, and effectively use UX Blocks to control content globally, design custom footers, and enhance product layouts effortlessly.

Back to tutorials

1. What Are UX Blocks?

UX Blocks are reusable content elements that you can create once and use across multiple pages in the Flatsome theme. They are perfect for managing content centrally, such as CTAs, banners, and footers.

2. Creating a UX Block:

1. Go to WordPress Dashboard: Click on UX Blocks (visible only if Flatsome theme is active).
2. Add New Block: Click Add New, enter a title (e.g., "Call to Action"), and click Publish.
3. Open UX Builder: Click Edit with UX Builder to design your block visually.
4. Design the Block: Add elements like text, images, buttons, etc.
5. Update and Save: Click Apply and Update to save your changes.

3. Adding a UX Block to a Page:

1. Open the Page with UX Builder: Navigate to Pages > All Pages and open the page where you want to insert the block.
2. Add a Block Element: Click the + icon and search for Block.
3. Select Your UX Block: Choose the block you created (e.g., "Call to Action").
4. Apply and Update: Click Apply and Update to save.

4. Editing a UX Block:

1. Go to UX Blocks: Navigate to UX Blocks in the WordPress dashboard.
2. Select the Block: Click Edit with UX Builder for the desired block.
3. Make Changes: Modify the content, design, or layout as needed.
4. Apply and Update: Click Apply and Update to save.
5. Changes Reflect Globally: Updates will automatically apply to all instances of the block across the website.

5. Using UX Blocks in Widgets:

1. Navigate to Appearance > Widgets: Select the sidebar or widget area where you want to add the block.
2. Add a Flatsome Block Widget: Drag the Flatsome Block widget to the desired area.
3. Select the Block: Choose the UX Block you created (e.g., "Call to Action").
4. Save Changes: Click Save to display the block in the widget area.

6. Creating a Custom Footer with UX Blocks:

1. Go to UX Blocks > Add New: Create a new block and name it "Custom Footer."
2. Design the Footer: Use the UX Builder to design your footer layout.
3. Assign the Footer: Go to Flatsome > Theme Options > Footer and select the newly created UX Block.
4. Save Settings: Click Publish to apply the footer globally.

7. Adding UX Blocks to Single Products:

1. Open a Product Page: Go to Products > All Products and open a specific product.
2. Insert Shortcode: In the Product Data section, paste the UX Block shortcode in the Custom Tab Content or Description area.
3. Update Product: Click Update to save the changes.

8. Applying UX Blocks Globally to Categories:

1. Go to Products > Categories: Edit the category where you want the UX Block.
2. Paste Shortcode: Add the shortcode to the Top Content or Bottom Content field.
3. Update Category: Save changes to apply the block globally to all products in that category.

9. Assigning UX Blocks in the Header:

1. Go to Flatsome > Header Builder: Open the header editor.
2. Add a Block Element: Drag a Block element to the desired header section.
3. Select UX Block: Choose the block you want to display.
4. Save and Publish: Click Publish to apply changes.

10. Creating a Custom 404 Page with UX Blocks:

1. Create a New UX Block: Name it Custom 404 Page.
2. Design the 404 Layout: Add a message, button, or relevant content.
3. Assign 404 Page: Go to Flatsome > Advanced > 404 Page and select the newly created block.
4. Save Settings: Click Save to activate the custom 404 page.

11. Using UX Blocks in Lightboxes:

1. Copy the Lightbox Shortcode: Go to Flatsome Documentation and copy the lightbox shortcode structure.
2. Insert the UX Block: Place the block shortcode inside the lightbox shortcode.
3. Assign a Button: Add a button and link it to the lightbox using the assigned shortcode ID.

Conclusion:

UX Blocks in Flatsome provide a powerful way to manage and control content globally across your site. Whether you’re creating banners, footers, or custom product layouts, UX Blocks streamline content management and ensure consistency. Practice using them in different areas to fully leverage their potential.