If you want to learn how to use the Flatsome theme and make a WordPress website or an online store and want it to be mobile friendly, we have a video tutorial that shows you how. I will link it below and this will be a text tutorial that you can also use if you want some step by step help.
If you need to install WordPress and you don’t know how, you can check out our video on how to set up a WordPress website with Hosting. In this text tutorial, I am just going to focus on the Flatsome theme but the video does walk through how to set up WordPress also.
First thing, we need to get the Flatsome theme. You can go to the theme forest website to get it. It’s a premium theme.
Why the Flatsome theme is good
Popular and developer cares – this mean it stays updated
Easy to use – you can click and drag things around and its easy to customize
Integrated with Woocommerce – so you can sell products and collect payment
Demo content – you don’t have to start from scratch so it makes things easier and faster
Not subscription based – you only have to pay a one time fee. This beats a lot of other options where you have to pay monthly or annually
Get the Flatsome theme
Download all the files and the purchase code
Once you get the Flatsome theme you want to install it. If you don’t know how to do this, then do this!
Go to the wordpress dashboard
Hover over appearance
Click on themes
Click on upload themes
Upload the zip file of the version of the theme (click on flatsome folder, go to themes, there it is)
Now you’ll see the set up wizard
Go through the set up wizard
Click to select the template you want
You don’t really need the child theme unless you are going to do some coding to it
Select all the plugins and demo content
Choose the logo you want to use if you have one – you can update this later
Install everything
Now you can visit the site if you want. After that, we want to set up Woocommerce
Click to install Woocommerce for the Flatsome theme. If you are on the WordPress dashboard you can hover over Woocommerce and click on settings
Now just go through the tabs.
Put in your address
There is nothing to do on the products tab
Nothing to do for taxes unless you want to make it more complex
For payments you can install a payment plugin or use the woocommerce option. I like to use woocommerce for PayPal. So I go and get that and install and activate it.
Then I go through the set up to enable it for the payments. I don’t do pay later or the credit card option since I can use that with the regular set up.
For the accounts tab, you can add a terms and conditions page
For the emails, you will see the notification settings. If you scroll down to the bottom you can choose to edit the email template.
The other tabs I don’t think are really necessary but you can go through them. Check the video to see if there is more if you have questions because we cover it all.
Now that you have Woocommerce set up and the Flatsome theme, what you can do is go to the theme options to change the default settings for the ecommerce website if you want.
To go to the theme settings you can hover over Appearance and click on customize.
In the theme options you can customize the layout default settings. This doesn’t mean that everything you select are the only options for your website. Just the default settings.
You can go into the general tab to change the colors that you can select from with your website.
The header tab lets you customize the header and also where you can go to change the logo. Just click on the button at the bottom in the builder to go to the logo page or navigate through it in the header options.
You can also change the layout for the footer and the product pages and blog post pages.
Once you have all of your changes, click on save or publish (the blue button) so all the changes are saved.
Now close out of this and we’ll go to the website settings for the WordPress website.
If you want to go into your general settings, you will see a settings tab on the left hand side of the dashboard. Hover over that and click on general. You can change the website name here and the email address associated with the ecommerce website with WordPress.
Make sure you click update or save at the bottom.
To update the password for logging in –
Hover over Users
Click on the admin user
Change the password in the section on the page
Click update and save
To login you can use the URL websitename.com/wp-admin/
Put in the username and password
This is an easier way than going through the hosting dashboard.
Now that we got all of that out of the way, this is how you can update the Flatsome theme and the pages
What you are going to do is go to your pages list and find the homepage – it might be labeled as the front page
Click to edit it
If you want to remove the parent page for the homepage, just click on the x to do so
To edit the homepage using the flatsome pagebulider you want to click on the UX builder button
Now you should see the UX builder
This is how you can edit the entire page
On the left hand side are the different sections
The preview screen of the page you are editing is on the main page
And on the right hand side you should see icons that
This is where you can go to see the website on different devices including the desktop, tablet and the mobile devices
We will make the website looks good on the mobile device since that is what most people use nowadays in order to shop online and to surf the internet.
Just a side know, whether you are watching our tutorial or someone else’s you should make sure your website is mobile responsive and you should prioritize the the mobile view in order to make sure the user experience is good for all users since that is where most of your customers are going to be coming from.
So to edit the website we are going to go into the different sections and we can click on each module and customize everything from the colors to the spacing to anything in between.
The first thing that we’ll do is change the background for the sliders.
In order to do this we can go into each banner and if you need, you can see the structure by going into the left hand side to expand the section.
For the tutorial we delete two of the banners and only edit two of them for practice.
If you expand each section you can see all the elements inside. To edit them you can click on the options wheel and you can click into the options
Here is where you can edit the different options available for the element
Whether it is the spacing or the size or the colors of even adding links
For the text module for the Flatsome theme you can click on the text editor and you’ll a pop up and you can change the text here and also change some of the settings and formatting
Click apply and update once you are done
That’s all you have to do for all the text editors throughout the website using the Flatsome theme
To edit the buttons
All you have to do is click into them (double click) or you can click on the wheel and you will see the drop down and you can click on the options
Here is where you can change the layout options and the settings
I normally change the button to a larger size and sometimes change the color depending on the location of it on the page
You can also change the link to a URL you want to link the button to for the ecommerce website
Make sure you click apply and update once you are ready
Adding Elements
You can add element anywhere just by clicking to add elements at the bottom on the left hand side or if you want to add them to any row or element.
You will also see a plus button that allows you to add elements to the ecommerce website with the flatsome theme.