It’s time to design a beautiful and professional homepage with Ux builder wordpress to continue the series of DIY Website Design with WordPress.

This article will have a lot of important knowledge about the installation, please be patient to watch it all!

Just read and practice this article, you have designed 80% of the interface of the website already.

While this is how to edit the homepage, it can also be applied with all this knowledge to edit other pages.

So what is Ux Builder wordpress?

UX Builder is a tool built into the Flatsome Theme, which is a set of tools to customize the look and feel of your website with just drag and drop.

You did not hear wrong, just drag and drop to arrange the order and display of the website without having to code a complicated line of code.


Working principle of UX Builder: The interface on the website is conventionally displayed according to the code, and the UX builder gives us an interface that allows easier drag and drop.

What we drag & drop & arrange will be AUTOMATICALLY converted into lines of code in the interface.


Are you really excited? Let’s continue to see what the sequence of steps will be!

3 steps to take your interface to the next level

I have summarized 3 steps to be able to create a beautiful interface.

First of all, you have to get to the layout frame, which part will show what? After that, we will find the right pieces to assemble into the frame and then fill it with the prepared information.

Let’s get started!

Step 1: Outline each piece of content that will appear

The framework is the most important thing when designing your own website, arrange the template for each section on the website you want to display.

Take a look at the following picture, I will take the homepage of as an example!


  • Part 1: The main banner of the web includes the name + description of the main content of the web
  • Part 2: It will be a summary of the main content categories for readers
  • Part 3: Additional information for the content “Online Business” & attach the latest 3 articles of the website
  • Part 4: Introduce a part about self-study series to build yourself a sales system.



I will only take the first 4 Sections (Separate frame arrays) as an example.

Imagine in advance that readers will read from top to bottom, from left to right, so they will arrange the content as follows so that they understand what their homepage is showing!

The above are only 4 sections, but a homepage or a landing page introducing an individual or business needs at least 9 – 12 sections.

I will leave 9 necessary sample information of the 2 most popular types of websites, Business Websites & E-commerce Websites for everyone to refer to!

Business E-commerce – Retail
1: Intro banner 1: Intro banner
2: Introduce key services/products 2: Product catalog
3: Unique features 3: New products
4: Why should you use the service/product? 4: Promotion banner – program
5: Actual photos/videos 5: Promotional products
6: Customer reviews 6: Banner of the upcoming program (If any)
7: Pricelist 7: Introduction of the business
8: Information dictionary form 8: Introduction of product source (Manufactory if any)
9: News-related articles 9: News-related articles Once you have the full skeleton, go to Pages > Add New Page.Fill in the page title as Home 2, because in the interface there is already a default homepage of the theme.
No need to enter a description or anything > Click Publish.
Then click on the Ux Builder section as shown below.

After clicking it will bring up the interface of UX Builder, this is where the love begins :))

Giao diện Ux Builder WordPress
Giao diện Ux Builder WordPress

Immediately click on Add elements, on the left-hand side will appear a toolbar to add elements (small elements in a section )

At this point, a panel will appear, you will see the Flatsome Studio section



Flatsome Studio not showing up? (Skip if not encountered)

Calm down! There are times when WP crashes and hides this section by itself.

Look at the Flatsome icon on the left corner of the screen > Advanced > Integtations. In this section will show Flatsome Studio, if it is turned off, turn it on and Save.


Continue, if you click Flatsome Studio, the next page will appear. It contains more than 300+ homepage templates, product pages, contact, campaigns… available.

Or not? Just a few clicks and you have a really majestic interface.

However, before instructing you to import these existing pages, you need to understand a little bit about Flatsome Studio.

  • Contains two main sections, a page full of pre-arranged elements and small elements for those who want to organize themselves.
  • The interface here looks professional, but in my experience, this interface has been Americanized. Sort of, it’s more suitable for foreigners than Vietnamese viewers.
  • After Import there is still a lot of things to customize, if you are new to WP, choose the pre-made pages SIMPLE and as few sections as possible to practice.

Now just Import, choose the page that best suits your purpose: Be it a personal blog, selling products or introducing services, businesses… You can click Preview to preview the delivery. present.


The built-in full page is only available in 1.E-commerce and 2.Full page sections, the rest are small sections.


Here I have selected a Coffee Shop Theme, this is a business website to introduce businesses and a little sales.

I recommend you tick Import Images so that it loads all the things we previewed before, then we change the image later. Downloading 11 photos will take 3-5 minutes to install slightly longer than usual.


If you don’t click Import image, Flatsome will default to just Import the section frame, it will be empty and a bit difficult to edit for those of you who have not used it proficiently.


When the download is complete, the interface will add a lot of sections to your web, click Update and the blog will look like this:


Before continuing, open a new chorme tab and go to Lesson 4: Some Basic Terms in WordPress and scroll down to the interface glossary to review the names of the elements that we are about to arrange. arrange.


Step 3: Complete the settings and content in UX Builder WordPress

Now that we have a page with a lot of sections arranged in the template interface, the next job is to replace all of our images and content according to the existing framework.


Note that for every few customizations, click Apply > Update to save. And when you click Update, wait for it to finish saving, don’t rush to turn it off otherwise all your editing efforts have been almost wasted 🙁

Personally, I spent a few hours editing the web but saved the error and had to start over 🙂


There are a few things to keep in mind in this section:

The order of arrangement of the skeleton structure in the form of Father > Child in wordpress.

  1. Section
  2. Row
  3. Columns (When you get here you can still open a new section, and the order is recalculated from the beginning, but still a subset of this Columns)
  4. Text, Image, Video, Image box

The frame that we downloaded already has almost all its own customizations and effects, just change the image and text.

However, if you want to customize it to your liking, then quickly read the section below!

Next, are the customizations included in each section, click the gear at the bottom of each section > go to Option to install.

Here, I only say a few of the most popular parts because the program time to come here is also quite long :))

In the Frame section: Includes Section, Row, Column

+ Background

  • Photo: Will be used to uploading photos
  • Size: Always choose Original for the best image quality
  • Overlay: Color overlay on the image
  • Effects: Photo effects, but complex effects will make the website load slowly

+ Layout: This is an advanced part, it will have some things to adjust the text color, the height of the frame

+ Border: Temporarily should be ignored

+ Video: To insert the video link, you should temporarily ignore it

+Advance: This section is advanced about inserting interface code

In the Text section:

Click Open Text Editor to customize your text. The interface is quite similar to word, so it is easy to use, here if you have experience in HTML, you can edit it directly like in the picture.

After you have changed everything, click Apply > Update.


Note the second time in UX Buider wordpress, for every few customizations, click Apply > Update to save. And when you click Update, let it save, don’t hurry to turn it off, otherwise all your editing efforts have been almost wasted 🙁



After customizing and saving, press the X in the left corner of the screen to exit.

The page part has one more customization that is in the Page Properties > Layout > Please select Page – Full Width > Click Update to make the page spread to both sides ^^

Finally, go to Settings > Reading > Home page layout > A static page > Then select the Home page 2 you just finished.

Now go back to your main domain to see the magic <3.


It looks a bit basic, but keep in mind that this is a series for beginners.

I always wish when I first started learning, someone would guide me in such detail 😀




Phe finally finished the UX Builder wordpress part, I will leave a link to the English document for your reference about UX Builder WordPress

So that’s more than halfway through, the next article I will guide you to design the interface of the article page.

For now, take a break and see what you’ve done on your own kk.

<< Lesson 4: Some basic terms in WordPress


>> Lesson 6: Sidebar menu and interface design for article pages


động từ



tính từ

after, posterior, ulterior, puisne

trạng từ

later, behind

giới từ