How to use Presets & Templates in Flatsome Theme

Learn how to create, save, and reuse Flatsome presets in UX Builder for fast, consistent page design. This guide covers everything from saving components to importing templates across projects!

 •

With the Flatsome UX Builder, you can save custom components or entire page layouts as presets, allowing you to easily reuse these designs on other pages or even in different projects. This guide walks you through creating, saving, and importing these presets step-by-step.

Step-by-Step Guide

1. Open UX Builder in Flatsome

  • Go to the page where you want to work on in Flatsome.
  • Open it in the UX Builder. This tool is the drag-and-drop editor where you can create sections, rows, columns, and various components.

2. Create and Save a Component as a Preset

  • Design your desired component, like a section with columns, text, and a banner.
  • Right-click on the section you want to save, or click the Settings gear on the component.
  • Select Save as Preset and give your preset a name, like “Text with Banner.”

3. Add Saved Preset to a New Section

  • When you want to reuse your saved preset, start by adding a new section.
  • Select your saved preset from the list that appears under Saved Presets to load your design instantly.

4. Save an Entire Page as a Preset

  • If you want to save a full page layout, open the Settings gear at the top of the UX Builder.
  • Scroll down to Save as Preset and name your page, such as “Home Page.”
  • This full-page preset can now be reused on other pages.

5. Load a Full-Page Preset on Another Page

  • Create a new page and open it in the UX Builder.
  • In the Insert Template section, under Custom, locate and select your saved page template.
  • Note: Ensure the page is blank before importing a full-page preset, as you can’t load it if other components are already present.

6. Export Presets for Use on Another Website

  • Go to Tools > Export in your WordPress dashboard.
  • Choose to export UX Templates and download the XML file.
  • On the new website, go to Tools > Import, install the WordPress Importer if needed, and upload your XML file.
  • Assign the templates to a user and click Submit to finish importing your saved designs.

This workflow allows you to create, save, and manage reusable design components and layouts efficiently, making it easy to maintain consistency across your projects.

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