Flatsome is the
best-selling WooCommerce theme on the Themeforest website. In this article, Naiba teaches you how to use Flatsome to
build your own website。
Prerequisites for Building a Website with Flatsome
To use Flatsome as your WordPress Theme, the primary prerequisite is that you must have your own WordPress website. Naibabiji has shared many related tutorials, so we won't repeat the introduction here.
- Steps to Build a Website
- SiteGround Hosting WordPress Installation Tutorial Recommended for Foreign Trade Users
After installing the WordPress website, we can use Flatsome to build our own foreign trade independent website.
Flatsome Usage Tutorial
1. Flatsome Theme Installation
1. Download the theme file after purchasing from Themeforest
Purchase Link2. Extract the downloaded zip file, then upload the theme installation package via the WordPress Admin Dashboard for installation. 3. Activate the theme and enter the wizard interface, as shown in the figure below:
4. Follow the wizard's steps. During the process, you will be prompted to enter the key, activate the Child Theme, install Plugins, import content, etc. If you don't know where to retrieve the key
click here。
After the content import is complete, you will be prompted to upload a logo and select a preset template. Choose the demo style you like. The LOGO image can also be changed later. 5. Import completed
After the import is complete, you can choose Setup WooCommerce to configure the e-commerce plugin, or click View your new website to browse the site.
2. Flatsome Theme Customization
On the website homepage, click the customize button to make a series of custom modifications to the Theme.
Here, you can modify and adjust many aspects of the Theme; simply adjust the parameters according to your actual situation. For example, in the Presets under Header, you can select the website navigation bar style, and then in the Header Builder interface, you can drag and choose the content to display in the header.
If your website has domestic users, it is recommended to disable Google Fonts in the Typography section under Style. For foreign trade websites, this step is unnecessary because Google Fonts are relatively richer and more aesthetically pleasing. After customizing the content, click the publish button to apply the changes.
3. Modifying Flatsome Page Layout
For example, if you want to modify the layout of the website homepage again, click the edit button at the top of the homepage, or go to the WP Admin Dashboard, find the homepage page, and edit it. Select Edit with UX Builder to enter the page builder editing interface. As shown below:
In the image above, the left navigation shows the layout of your current page. We can see that the top consists of two banners. Click on the content of the first banner to edit the text directly. Clicking the options settings for the Banner allows you to access specific banner settings, where you can modify the background image and layout. Between sections, you can click the ➕ plus sign to add new sections.
The content that can be added is shown in the image below:
You can customize the layout and content of the page using these functional modules. After all content is debugged, click update to publish the new page. Once all settings are completed, you can upload products and launch the website for operation. The above content is what Naibabiji introduces to everyone
How to Build Your Own Website Using the Flatsome Theme Tutorial.
4. Follow the wizard's steps. During the process, you will be prompted to enter the key, activate the Child Theme, install Plugins, import content, etc. If you don't know where to retrieve the keyclick here。 
After the content import is complete, you will be prompted to upload a logo and select a preset template. Choose the demo style you like. The LOGO image can also be changed later. 5. Import completed
After the import is complete, you can choose Setup WooCommerce to configure the e-commerce plugin, or click View your new website to browse the site.
Here, you can modify and adjust many aspects of the Theme; simply adjust the parameters according to your actual situation. For example, in the Presets under Header, you can select the website navigation bar style, and then in the Header Builder interface, you can drag and choose the content to display in the header.
If your website has domestic users, it is recommended to disable Google Fonts in the Typography section under Style. For foreign trade websites, this step is unnecessary because Google Fonts are relatively richer and more aesthetically pleasing. After customizing the content, click the publish button to apply the changes.
In the image above, the left navigation shows the layout of your current page. We can see that the top consists of two banners. Click on the content of the first banner to edit the text directly. Clicking the options settings for the Banner allows you to access specific banner settings, where you can modify the background image and layout. Between sections, you can click the ➕ plus sign to add new sections.
The content that can be added is shown in the image below:
You can customize the layout and content of the page using these functional modules. After all content is debugged, click update to publish the new page. Once all settings are completed, you can upload products and launch the website for operation. The above content is what Naibabiji introduces to everyoneHow to Build Your Own Website Using the Flatsome Theme Tutorial.
Comments are closed
The comment function for this article is closed. If you have any questions, please feel free to contact us through other channels.