5 Time-saving Hacks for Flatsome I wish I knew before

Video Tutorial unlocking 5 Time-saving Hacks for the Flatsome theme, including UX Blocks, presets, auto-updates, and more, freeing up hours for your passions!

 •


Flatsome is a top choice for WooCommerce users, known for its flexibility and ease of use. It’s a theme built to create visually stunning, high-performing eCommerce websites. However, despite its versatility, it can feel overwhelming if you’re not familiar with its time-saving tools.

As someone who often works against tight deadlines, finding efficient ways to use Flatsome has been a game changer. Here are five practical hacks that have streamlined my workflow and saved me countless hours.

Quick Tips to Simplify Website Creation with Flatsome UX Builder

Flatsome’s UX Builder is packed with powerful tools to help you create custom designs—no coding required. By using features like UX Blocks, presets, and templates, you can streamline your workflow and focus on what matters most: building an exceptional website.

1. Use UX Blocks to Centralize Elements

UX Blocks are a lifesaver when it comes to managing reusable elements across multiple pages. These blocks allow you to create a design or feature once and apply it wherever you need, ensuring consistency and saving time.

For example, if you have a call-to-action promoting a free course, instead of adding it manually to every page, create it as a UX Block. Once built, you can insert it wherever necessary using a shortcode.

How to Create a UX Block:

  1. Navigate to UX Blocks in WordPress.
  2. Click Add New and give it a descriptive name, such as “Course CTA.”
  3. Use the UX Builder to design your block or paste an existing shortcode.
  4. Save your work and insert the block on pages where needed.

This method simplifies updates too—make a change in the UX Block, and it automatically reflects everywhere it’s used.

2. Reuse Elements with Presets

Presets are perfect for sections you use frequently, such as an image-and-text row or testimonial layout. Unlike UX Blocks, presets save specific layouts you can quickly apply to other pages.

Steps to Save and Reuse Presets:

  1. Design your section (e.g., an image with text beside it).
  2. Click on the section in the UX Builder and select Save as Preset.
  3. Give the preset a name, like “Testimonial Layout.”
  4. When building a new page, simply select the preset from your library and apply it instantly.

Presets save time by eliminating repetitive work while maintaining design consistency.

3. Copy-Paste Options for Quick Styling

Customizing elements like buttons can be time-consuming if you have to recreate the same style repeatedly. Flatsome’s Copy Options feature solves this by allowing you to duplicate styling settings between elements.

How to Use Copy-Paste Options:

  1. Right-click on a styled element (e.g., a button) and select Copy Options.
  2. Navigate to the element you want to style, right-click, and choose Paste Options.

This feature instantly applies the same design settings, speeding up the process while keeping the design cohesive.

4. Work Responsively Before Duplicating

Responsiveness is crucial for eCommerce sites. Instead of designing your layout first and adjusting it later, ensure that your design looks great across all devices before duplicating sections.

Steps for Responsive Design:

  1. Create a column or section in the UX Builder.
  2. Use the responsive preview tool to adjust the layout for desktop, tablet, and mobile.
  3. Once you’re satisfied, right-click the column or section and choose Duplicate as needed.

This approach ensures consistency and avoids extra work down the line.

5. Use Templates for Entire Pages

If you frequently create similar pages, like product landing pages or contact pages, saving entire page layouts as templates can significantly cut down on setup time.

How to Save and Apply Page Templates:

  1. Design a page in the UX Builder.
  2. Click the settings icon and choose Save as Template.
  3. Name your template (e.g., “Landing Page”).
  4. When creating a new page, apply the saved template and make minor adjustments as needed.

Templates are particularly useful for branding consistency across your site.

Mastering these five time-saving hacks for Flatsome can transform your workflow, making website design and management faster and more efficient. From using UX Builder shortcuts to leveraging presets and the Global Options Panel, these tips help cut down on repetitive tasks, giving you more time for creative work.

For more detailed guides and additional Flatsome tips, visit our website at Seb de la Web. And don’t forget to share your own time-saving tips in the comments—we’d love to hear from you!

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