Detailed Advanced Flatsome User Guide 2023

Huong dan Flatsome nang cao

Flatsome stands as a cornerstone in the realm of WordPress themes, renowned for its flexibility and effectiveness in crafting sales and e-commerce platforms. The mention of online retail invariably brings Woocommerce into the conversation, and with it, Flatsome’s reputation shines. This theme, despite its years in the market, continues to be a go-to choice for those looking to dazzle in the digital marketplace. In this comprehensive guide, we’ll delve deep into the advanced functionalities of Flatsome. From the foundational basics to the nuanced intricacies, I’ll walk you through every step, ensuring you master Flatsome from A to Z, equipping you with the skills to elevate your online store to new heights.

Mastering Responsive Design with UX Builder: A Comprehensive Guide

Diving into the world of web design, responsive design stands out as a pivotal aspect, ensuring websites look impeccable across a myriad of devices—be it smartphones, tablets, or desktops. Traditionally, achieving this seamless adaptability involves delving into the nitty-gritty of coding, with @media screen queries playing a crucial role in adjusting display properties based on screen width. This approach, while effective, can seem daunting for those not well-versed in coding languages.

Enter the era of modern themes, where the complexity of responsive design is simplified, making it accessible even to those with minimal coding expertise. Flatsome emerges as a stellar example within this new wave of themes, incorporating intuitive responsive design functionalities that streamline the adaptation process.

To get hands-on with responsive design in Flatsome, beginning with a practical exercise is advisable. Start by navigating to the Admin interface of your WordPress site. Look for the “Pages” section and click the “Add New” button. This action prompts a new window where you can christen your page with a suitable name in the provided text box. This initial step is your gateway to exploring and mastering responsive design within the Flatsome theme, setting the foundation for a website that’s visually coherent across all device types:

Add new page
Once you’ve entered the name for your page:

  1. Click on the blue “Publish” button located in the top right corner.
  2. Wait for the page to load, then click on “Edit with UX Builder”.
Edit with Ux Builder
Edit with Ux Builder

This is what Ux Builder looks like when you’ve just created the page:

Ux Builder interface
Ux Builder interface

Moving forward:

  1. Click on the “Add Elements” button, found on the left corner. A new window will pop up.
  2. Within this window, select the “Row” option, followed by the “3 Columns” option.
  3. Drag your mouse downwards until you see the “Apply” button, highlighted in green, then click on it
Select the Row cell
Select the Row cell
  1. Click on the back arrow ” < “ located on the left to navigate back. Here, you’ll see all the elements you’ve just added, including a “Row” and three “Columns”.
  2. Note that “4/12” signifies that the “Row” (which consists of 12 parts) is divided into 3 parts (12 divided by 3 equals 4), resulting in 3 columns.
Row trong Flatsome
Row trong Flatsome

Continuing with the customization:

  1. Drag and drop the elements to resize them according to your preference. This flexibility allows you to expand or shrink these components as desired.
  2. To add more elements, simply click on one of the three boxes on the right, marked in blue. Adjustments can be made by dragging and dropping to achieve the responsive effect you’re aiming for.
  3. Modify the indexes of columns, rows, and elements effortlessly from the box on your left. This user-friendly interface lets you customize without any coding knowledge; it’s all about filling in the pre-defined fields.

Highlighting a key feature, take notice of the three icons in the far left corner, resembling a phone, tablet, and PC. These icons enable you to make your design responsive across different devices, offering a tailored viewing experience for users regardless of how they access your site.

Responsive according to the screen
Responsive according to the screen

To further refine your site’s responsiveness:

  1. Click on any element listed on the left; this action will bring up a new window.
  2. Then, click on the phone icon on the right side of this window. You’re now adjusting your website’s appearance specifically for mobile viewing.

This feature streamlines the design process, eliminating the need to understand coding or memorize screen resolution sizes. Tailoring your site for optimal display on phones becomes straightforward and intuitive, showcasing the convenience of modern web design tools. Isn’t that remarkably handy.

Responsive with many devices
Responsive with many devices

As you dive deeper into the realm of responsive design with UX Builder, you’ll encounter several adjustable properties for your elements, including Width, Padding, and Margin. A notable feature is the presence of a small dot on the phone icon (and similarly on the tablet and PC icons) on the right. This dot is not just a design element; it signifies a powerful functionality.

These dots indicate that the property can be customized responsively for different device types—Mobile, Tablet, and PC. By clicking on each device icon, you can tailor how elements display specifically for that device. The color of the dot serves as a visual cue: blue signifies that a property has been specifically adjusted for that device, while a non-colored dot indicates no customization has been made for that device compared to others. This system simplifies the process of making targeted adjustments, such as resizing an image that appears too large on mobile devices by editing its “height” parameter when in the mobile view, thereby activating the initially uncolored dot to blue.

Flatsome shines with its robust customization capabilities, integrating a powerful “Page Builder” into the theme itself. This tool equips users with a range of features rivalling those of professional plugins and drag-and-drop programs. Next, we’ll explore how to utilize the UX Builder in Flatsome to craft an attractive Footer.

Upon initial setup, using Flatsome’s demo data import function presents you with a sample Footer. However, this default Footer might not appeal to all aesthetics, particularly for Vietnamese users who may find it lacks allure, showcasing only a few products and offering limited customization options.


Flatsome's default footer
Flatsome’s default footer

Indeed, the adoption of certain design styles, including the default Footer provided by Flatsome, appears to be less common among sales websites in Vietnam. What might be aesthetically pleasing to an international audience doesn’t always align with local preferences or usability standards. Recognizing this discrepancy underscores the importance of customization to cater to specific cultural tastes and functional requirements.

In this next section, we’ll delve into how you can tailor the Footer in Flatsome to suit your needs, moving away from the conventional, pre-designed templates. This guide aims to equip you with the knowledge to create a Footer that not only meets the aesthetic expectations of the Vietnamese market but also enhances the overall user experience on your website. By customizing your Footer, you can ensure it aligns with your brand identity and resonates more effectively with your target audience.

A sample Footer from Flatsome
A sample Footer from Flatsome

Before diving into customizing your Footer with Flatsome, it’s essential to familiarize yourself with a fundamental concept: Blocks. If you’re new to this term, worry not—I’m here to clarify. Blocks are essentially snippets of code that encapsulate various reusable elements. These blocks can be seamlessly integrated across different parts of your website, from the homepage to subpages and articles, or even nested within another Block. The beauty of Blocks lies in their ability to eliminate redundant coding efforts, thereby streamlining the design process and saving valuable time.

READ  How to create article ratings with the KK Star Ratings plugin

To kickstart the creation of a new Block, navigate to the Admin interface of your WordPress site. From there, proceed to UX Block > Add New. This initial step is your gateway to leveraging Blocks for designing a custom Footer that caters precisely to your site’s needs and aesthetic preferences.

Create new block
Create new block

To begin crafting a custom Footer with Flatsome, here’s what you need to do:

  1. Navigate to the “Add New Page” option and click on it.
  2. Enter a name for your new page, which will serve as the foundation for your Footer.
  3. Click on the “Edit with UX Builder” button. This action opens up a world of possibilities for you to design and customize your Footer.

Start by creating a basic structure using Section > Row > Column > Icon Box. This sequential approach helps you lay down the framework for your Footer’s design, onto which you can build more complex and visually appealing elements.

The aesthetic appeal and functionality of your Footer are largely dependent on your creativity. You have the freedom to experiment with different layouts, elements, and styles to achieve a look that resonates with your brand and appeals to your audience.

For further customization and to ensure your Footer stands out, consider adding custom classes to each element. This strategic move not only organizes your design elements but also facilitates easier CSS modifications down the line. By refining your Footer’s design through CSS, you can significantly enhance its visual appeal, improve user experience, and ultimately, drive higher conversions and revenue for your business.

An example of creating a Footer using UX Block
An example of creating a Footer using UX Block

After designing your custom Footer, follow these steps to implement it across your website:

  1. Once you’re satisfied with the Footer, click on the “Update” button to save your Block. It’s crucial to remember or note down the name of this Block, as you’ll need it to replace the default main Footer provided by Flatsome.
  2. To integrate your newly crafted Footer into the home screen, navigate through your WordPress dashboard using the following path: Interface > Customization > Footer. This action will open a new window dedicated to Footer customization.
  3. In the new window, look for a select box at the top. Select the name of the Block you’ve just created for your Footer. For instance, if you named your Block “Footer,” choose this option from the dropdown list. Keep in mind, your Block might have a different name, so ensure you select the correct one you’ve designated for your Footer.

By following these steps, you’ll successfully replace Flatsome’s default Footer with your unique, customized version, enhancing the aesthetic appeal and functionality of your website. This personalized touch not only aligns with your brand identity but also enriches the user experience for your visitors.

Set the main Footer for the website
Set the main Footer for the website

After choosing the custom Footer Block:

  • Proceed by clicking the “Publish” button to finalize your changes. Once done, sign out of the admin area and take a moment to browse through your website. As you navigate to the bottom of any page, you’ll be greeted by the Footer you’ve meticulously crafted. It now proudly sits across every corner of your site, from the welcoming homepage to the detailed subpages, seamlessly integrating with the overall design and enhancing the navigational experience for your visitors. This consistency not only bolsters your site’s aesthetic appeal but also fortifies your brand presence across the digital landscape

Customize your Products page with UX Builder

For e-commerce websites, the significance of the product page cannot be overstated. It serves as the digital storefront, showcasing the essence of your business or company. A well-designed product page not only garners positive first impressions from visitors but also plays a pivotal role in converting browsing into sales. It’s the charm of the product presentation that can entice visitors, encouraging them to make a purchase.

Flatsome provides a robust foundation with its built-in product page features, ensuring functionality right out of the box. However, this initial setup offers limited flexibility for customization. Those looking to tailor the product page further, adding or omitting elements to suit their unique branding and customer engagement strategies, are directed towards a more technical path. By navigating to Appearance > Customization > WooCommerce > Product Page, users have the opportunity to inject custom codes to modify the product page’s layout and functionality.

The primary limitation of this approach is its requirement for coding knowledge. Customization options are predominantly focused around the “Add to cart” button, which, while central to the purchasing process, is just one component of the overall product page experience. For merchants with specific design visions or functional needs outside this scope, the coding requirement poses a barrier to achieving the ideal product page layout. This highlights the need for either developing coding skills or seeking assistance from professionals, ensuring your product page fully reflects the brand identity and enhances the user journey on your site:

Box to add code to product page
To tackle this customization challenge, an alternative solution is to utilize “Hooks.” In essence, hooks enable you to insert code or functions into specific locations permitted by WooCommerce. The syntax for accurately embedding code into these designated spots is as follows:

For example:

After that, you’ll move forward to craft a function to embed your desired code. This step is quite manageable even with a basic understanding of PHP. WooCommerce’s single product page generously provides a wide array of potential insertion points for your code, offering extensive opportunities for in-depth customization

Some hooks in the product page
Some hooks in the product page

The primary drawback of this method is the requirement for coding knowledge. If you’re not already familiar with coding, you may need to refer to external documentation to create the necessary function. Flatsome promotes a design philosophy aimed at minimizing the reliance on coding, and UX Block perfectly embodies this principle. Next, we’ll delve into how you can utilize UX Block to customize product pages according to your requirements.

To begin, you’ll need to create a new block by navigating to UX Block > Add New Page. The specific name you choose for your block is entirely up to you; what’s important is the functionality and customization it will provide for your product pages.

Create new block
Create new block

Continuing forward, navigate to Interface > Customization > WooCommerce > Product Page. Within the Layout section, select the “Custom” option. This setting empowers you to apply your custom UX Block to the product pages, ensuring a personalized layout that aligns seamlessly with your brand’s aesthetic and functional requirements.

Custom trang Product
Custom trang Product

Within the “Custom Product Layout” section, choose the Block you’ve recently created. For example, you may select “GPL Global,” as demonstrated in the example.

To apply this customized layout to a specific product, go to Products > All Products on your dashboard. Locate the “Product Layout” option. Just above it, you’ll find the “Custom Product Layout” setting. Here, select the Block you’ve designed. This process seamlessly integrates your custom design into the product page, ensuring a personalized shopping experience that aligns perfectly with your brand’s vision.

READ  Top WordPress Plugins for Beginners Starting a WordPress Site

Select Block on the product page

Select Block on the product page

You’re almost there. At this stage, you can exit the setup process and refresh the homepage. Afterward, select any product to view its details. When you hover your mouse over that area, keep an eye out for an option to edit the product. Before long, a new choice will emerge, labeled “Edit product layout with UX Builder.” Click on this option to launch the UX Builder and commence the final touches of refining your product page layout to perfection.

Instructions for editing products with Ux Builder
Instructions for editing products with Ux Builder

Upon entering the UX Builder, you’ll be greeted with a plethora of new functions, distinctly highlighted in purple as illustrated in the example image. These features, now easily accessible, may be entirely novel to you within this context, presenting thrilling opportunities to elevate the design and functionality of your product page.

New functionality in UX Builder
New functionality in UX Builder

With the UX Builder now accessible, you’re well-positioned to enhance your product page by effortlessly dragging and dropping elements, just as you’ve done previously, but with a broader array of options at your fingertips. You can incorporate essential components such as the cart button, product tabs, descriptions, titles, reviews, breadcrumbs, and more. Essentially, you have access to every basic feature necessary to craft a comprehensive product page. The beauty of this process lies in its simplicity—no coding is required, allowing you to customize and personalize the product page effortlessly.

It’s recommended to start your design with a simple structure, such as 1 Row and 2 Columns, for intuitive usability. From there, you have the freedom to shape the layout according to your preferences. The allure and effectiveness of your product page will reflect your creativity, with the UX Builder providing the tools and flexibility to bring your vision to life.

Instructions for adding a “Buy Now” button to WooCommerce:

In the default setup of WooCommerce, particularly within the Flatsome theme, product pages and listings typically only feature one interactive option: the “Add to Cart” button. However, savvy retailers understand the importance of offering a “Buy Now” button alongside it. This addition streamlines the purchasing process for customers, which is particularly appreciated by Vietnamese consumers who prefer straightforward and rapid transactions. The “Buy Now” option simplifies the buying journey by allowing customers to skip the cart and proceed directly to checkout. This enhancement can significantly improve the shopping experience and potentially boost conversion rates.

Although Flatsome doesn’t include native support for the “Buy Now” button, the flexible nature of WooCommerce enables you to add this functionality through customization. This capability is advantageous for store owners seeking to tailor their e-commerce platforms to meet consumer expectations and streamline the purchasing process. While integrating a “Buy Now” button may require some additional steps, it’s a worthwhile investment to accommodate the preferences of your audience and create a more user-friendly online store.

Add a buy now button to your store
Add a buy now button to your store

Incorporating a “Buy Now” button not only aligns your store with the practices of major e-commerce giants like Lazada, Red Lotus, Tiki, Thegioididong, and Dienmayxanh, but it also enhances the professionalism and aesthetic appeal of your site. This functionality goes beyond simplifying the purchase process for your customers; it injects your website with a sleek, modern appearance that elevates the overall design. By enabling direct progression to checkout, the “Buy Now” button streamlines shopping in a manner that resonates with today’s fast-paced consumer expectations.

To integrate this sought-after “Buy Now” button into your WooCommerce site, you can seamlessly incorporate a code snippet into your theme’s functions.php file. This approach is efficient and straightforward, eliminating the need for additional plugins that could potentially slow down your site’s performance. Here’s the essential code snippet to implement the “Buy Now” button, empowering you to leverage this functionality without the burden of plugin dependencies:

READ  Top WordPress Themes for 2024: Exceptional Choices for Your Website

Incorporating a “Buy Now” button not only aligns your e-commerce platform with global retail giants like Amazon, eBay, and Walmart but also enhances its professional appeal. These industry leaders have established a standard for streamlined purchasing processes, making convenience and efficiency an expectation among consumers worldwide. Beyond its practical advantages, a well-designed “Buy Now” button contributes to the website’s aesthetic appeal, ensuring a seamless and visually pleasing shopping experience.

The initial step involves integrating a bit of CSS to refine the appearance of the “Buy Now” button in WooCommerce, ensuring it matches the visual elegance portrayed on these international platforms. Tailoring the button’s design to align with the unique style of your website elevates its overall look, creating a more inviting and professional interface for your customers.

This customization not only enhances the visual appeal of your store but also elevates the user experience on your product pages. The versatility of this enhancement extends beyond specific themes or platforms, making it applicable to any website built with PHP, not limited to Flatsome or WordPress alone. By adopting such tailored features, you position your e-commerce site on par with the industry’s best, offering both beauty and functionality throughout your customer’s shopping journey.

Create beautiful promotion frames for product pages

Utilizing promotional frames to spotlight discount policies and special offers is a prevalent strategy among leading retail establishments. These frames play a pivotal role in amplifying sales and augmenting the brand’s online presence. By serving as a direct conduit to consumers, they disseminate the latest deals and incentives, thereby stimulating engagement and driving purchases.

While implementing a promotional frame on your product page is optional, integrating such a feature can yield significant advantages for your store. Not only does it draw attention to special offers, but it also instills a sense of urgency and exclusivity, potentially elevating the perceived value of your products and enhancing the allure of your website. By strategically showcasing promotions, you can cultivate a more dynamic and immersive shopping experience that resonates positively with customers, fortifying your business’s reputation and fueling its expansion.

Beautiful promotion frame for the product
Beautiful promotion frame for the product

In the forthcoming section, I’ll walk you through the creation of an attention-grabbing promotional frame that captivates both website owners and, most importantly, your customers—the primary audience you aim to engage. While platforms like WooCommerce or the Flatsome theme don’t inherently provide built-in functionalities for crafting such promotional frames, a bit of coding is all it takes. Rest assured, the process involves just a few lines of code. By adhering to the steps I outline, you’ll empower your product pages with custom promotional frames that showcase your discounts and special offers, rendering them irresistible to shoppers:

Copy the provided code and proceed to the following path: Appearance > Customize > Additional CSS. Paste the code into the designated area and save your changes.

Keep in mind that in the highlighted red section of the code, you should replace the path with the URL of the tick icon you downloaded from the internet. Numerous samples are available online. Once downloaded, copy the link of the chosen icon and overwrite it in the specified red text.

Next, navigate to Interface > Customization > WooCommerce > Product Page. Paste the following code into the HTML > HTML before Add to Cart Button section:

Add the code here

Insert the code provided here to manually create an attractive promotional frame for your WooCommerce product page. The preceding instructions serve as a demonstration, offering you the flexibility to fully customize your Flatsome interface to enhance its visual appeal. The aesthetic appeal of the frames depends on individual taste and the quality of the CSS styling. Alternatively, you can directly utilize the provided code on your website without any modifications, as it already offers an appealing design.


In this article, I’ve covered a range of tutorials and techniques for customizing the Flatsome interface, from fundamental to advanced levels. However, there may still be aspects left unexplored. Going forward, I plan to release more articles aimed at providing further guidance on crafting visually appealing websites. Stay tuned for my latest updates to gain additional insights into Flatsome.

With that, we’ve reached the conclusion of this article. I hope the detailed instructions provided here have been beneficial to you. I trust that you now feel equipped to confidently utilize and customize the Flatsome Theme interface according to your preferences.

Leave a Reply

Your email address will not be published. Required fields are marked *