With Flatsome, you can create a fast responsive website and enjoy a large number of customization options, extensive element library and other great features. Flatsome runs on its own intuitive drag and drop page builder called UX Builder. It includes a few presets to choose from and allows to mix and match elements.
We've create this demo website so it's easier for you to build a store based on Flatsome + WooCommerce + AliDropship Woo plugin, give it a check!
Once you've downloaded the theme, enter your WordPress panel and go to Appearance → Themes → Add New → Upload Theme.
Click Activate to continue.
Flatsome's setup wizard will help you set up the theme in a few clicks. You can always skip a step if you don't need a certain option right now.
Create a child theme if necessary.
Install the default plugins required for Flatsome to work. You'll have a chance to add or remove them later.
Select what demo pages and elements you'd like to have installed.
Choose the preset you like most or create your store from scratch. Note that demo images aren't included.
Congrats! Now that you've got your theme installed, you can start customizing it. Click the View your new website button if you're ready.
Use the front-end editor called UX Builder to organize your content, add new blocks and elements, edit text and titles, etc.
Click the Edit with UX Builder link at the top of the page to get started.
If you've installed demo content and already have some elements added to your Homepage, you may just hover over an element and right-click to edit it. Alternatively, select the element you need to edit in the left-hand menu.
Click the chip and select Options in the drop down.
Flatsome offers a wide range of customization options for the slider element. You can upload your own image, decide which part of it to show in the banner, add overlay, animation and many more.
In the banner settings below, you can also add a background video: insert a YouTube video ID or paste the link to the video you've uploaded to you Media. Don't forget to click the white Apply button to save your changes.
Under the slider you'll find the default row with three columns. Feel free to edit them to fit your vision or remove from your Homepage.
On the demo website, we've replaced this block with the Product categories element.
It's super easy to add a new element in this theme. Click the + Add elements button in the left-hand menu.
To quickly find the element you need, use the search option. Let's say you need to add a Featured products block.
Quick reminder: just mark the products with a star in your WP admin area to show them in the Featured products block.
It might be a good idea to add a title to this product block.
Add and style your title.
Looks great! Just add a gap between the two blocks.
So, you're free to choose any element from the library and place it anywhere on the page.
Some other elements and menus can be customized in the WP customization. To open it, go to your WP Dashboard → Appearance → Customize.
Choose the area you want to make changes to in the left-hand menu.
To edit some certain elements, just hover over them.