HOW TO USE THE FLATSOME THEME TUTORIAL 2021! [COMPLETE FLATSOME TUTORIAL!!]

what's going on everyone it's james from nyc tech club and this is a flatsome themed tutorial so we're doing something a little different here because i've used the flatsome theme a bunch of different times on the nyc tecla youtube channel and i've shown you guys how to build an ecommerce website but whenever we do that we build what i want to build so i design the website and i show you how to do it but i wanted to show you guys how to just use the flatsome theme so that you can customize and build whatever you guys want because there's a lot of people out there using the flatsome theme and i get messages all the time that you want to build this you want to build that and you don't know how to do it and you can't see the answer or find the answer in a flatsome tutorial so this is an all-encompassing full video tutorial that's going to show you everything that you need to know about the flatsome theme we're going to show you how to install the theme how to go through the demo content and install that the theme settings will give you a tour of the ux builder and all the different modules that you can use we'll show you how to use the flatsome studio to import your own template that you can customize and we'll even show you how to make your own page so we'll start from scratch we'll add sections and layouts and rows and all that stuff to really customize your website and then if you guys want we can also show you guys some premium features such as integrating instagram creating mega menus creating opt-in forms and contact forms google maps and changing the grid layouts for your product pages and customizing your footers and headers and everything that you guys need so again this is a full tutorial on just how to use the flatsome theme we're not going to show you how to build a website but we're going to show you how to use the flatsome theme so that you can build anything that you guys want so whether you have the theme already or you need the theme or you're just curious about it or you need some help go through the table of contents see what we cover and if we cover what you need watch this video tutorial and if we don't cover what you need leave a comment in the comment section below we'll make a new video i'll answer your questions i'll redirect you to the right place so if you guys want to learn everything that you need to know about the flatsome theme keep watching this video tutorial because we're going to show you how step by step so if you're ready i'm ready let's get started alright everyone so welcome to this video tutorial on how to use the flatsome theme and we're gonna go over everything we're even gonna go over how to get the flats and theme on the themeforest website so if you already have the flatsome theme you can skip this step there are the timestamps in the video but if you do need the flatsome theme then you can come to the text tutorial right here that we're typing up and don't mind the page that you see we're updating the website but right here in part one there are some affiliate links right here to the flatsome theme and in the video description you can also go and click on that and you'll come to the themeforest website right here and this is where you can go to get the flatsome theme so that's probably the big requirement that you need for this video tutorial is you do need to make sure that you have the flatsome theme so you can come here and purchase it and once you do let me just show you the files that you need to install onto your wordpress website so i'm going to hover over my username right here because i already have the flatsome theme and just click on downloads and once you purchase the flatsome theme all we're going to do is come to the downloads page and you can see that i have the flatsome theme right here i'm going to go into this button click on download and all we're going to do is click on installable wordpress file and you're going to download a folder and once you do now we can go to our wordpress website and this is just a demo website right here and we're using the 2020 theme that wordpress installs i'm going to go and log into the wordpress dashboard so that we can install the flatsome theme and once you're logged into the wordpress dashboard before we go and install this theme i want to go to the downloads folder right here where i just downloaded the flat sum folder and you can see that we have it right here with all of our contents and what i want to do is make sure that this is a zip file so i'm going to right click this and i'm going to compress it and once it's compressed you should see the flatsome.zip or maybe your file got downloaded as a zip file that's what you want so once we have that now what we're going to do is hover over appearance and then click on themes and once you come to this page right here we'll just click on the add new button and then click on upload theme and then you can click on choose file right here or what you can do is just go into your folder find the flatsome.zip and then just drag that in right here and you should see it get added and now all we have to do is click on the install now button and once it's installed the last thing that we have to do right now is click on the activate button so click on that and then we'll be good to go with this part of this video tutorial so the next thing that we're going to do is go through the setup wizard right here on the flatsome theme so again if you already set up the flatsome theme then you can skip the step and move on to the next step or whatever section that you want to for the flatsome theme tutorial i just want to make sure that everyone sets up their website correctly with the flatsome theme so what we're going to do is just go through the setup wizard so what we're going to do is click on the let's go button right here and the first thing we're going to do is we can register our theme so that we can get automatic updates which is probably the best thing to do so what you want to do is generate a token so go ahead and click on this link right here and you're going to see this pop-up right here and this is the envato website so if you need to you can just log in with the same details to the themeforce website and you're going to create a token name so you can just type in a name right here and you can see down here that these are the boxes that you want to select for the permissions so go ahead and pause this video just to make sure that you select all of these different boxes and then once you're ready you want to come down to the bottom check you have read and agree to the terms and then click on create token and you'll see the tokens show up right here and what we can do is just highlight this and copy it and then go back to the setup wizard right here and paste that in and you want to paste in your own unique token so don't paste in mind because mine is unique so once you do that check on the box right here and then just click on register and you should see right here that it says your token is valid and now on this page right here if you want we can just check this box that says you copy this and click woohoo got it and you can just close this and now we're back on the flatsome page right here and what we can do is go ahead and click on the continue button and if you guys want to install a child theme you can i like to do this just because if i make any changes to my theme it saves them and whenever i update the parent theme it doesn't erase or overwrite anything so i'm going to click on create and use a child theme and we're just going to click on continue right here because i already think i have one created since i've installed this theme before so if you guys need to go ahead and click on continue and now what we want to do is install the recommended plugins and we're not going to go over these plugins in this video tutorial but you want to make sure that you have the recommended plugins installed for the flatsome theme just so that you can use it correctly so we're gonna click continue right here and once you see the contents tab right here what we can do is install all the demo content so that we have the templates and the placeholders and everything and really see how some things are created so i like to install this and we can always delete this later but it's really up to you you can skip the step and you can always come back into the setup wizard later to install the stuff if you want so if you guys just want to watch this tutorial and see what i do with the demo content that's fine but i'm going to click on continue right here just to install everything and you should come to the logo and design tab after you either install the demo content or you skip it and over here is where you can upload a new logo and you can also do this in the customizer in the theme options so i'm going to show you how to do that a little bit later just in case you don't run through the setup wizard and then down here if you want to use a preset design for your ecommerce website using the flatsome theme then you can select one of these options right here i'm just going to select this one because this is the default setting and the most popular option so once you're ready just come down here and click on continue and once we come to this tab right here i'm just going to come down to agree and continue and you should come to this tab right here and again we're not going to set up woocommerce in this video tutorial but i do have video tutorials on how to use woocommerce and i also have video tutorials on how to make an ecommerce website that we go through setting up woocommerce so if you guys haven't done this you probably want to in order to run an ecommerce website but since we're just learning how to use the flatsome theme in this video i'm just going to go and check out the new website so i'm going to click on this button at the bottom and if you come to your homepage and you selected one of the preset designs then you should see it show up just like this with the demo content and if you don't then that's okay because we are going to show you how to use the flatsome theme in this video tutorial and we'll show you how to create your own pages and everything like that with the modules and all that so this completes this section of the video tutorial on how to use the flatsome theme so now we're going to move on to the next part so now that we have everything installed what we're going to do now is cover the theme settings to select the colors the layouts and the settings so what you can do is hover over the customize tab and click on that if you're on the home page or you can go back to the wordpress dashboard and once you're on the dashboard right here just hover over the flatsome tab and then click on theme options and once you come to the theme options what you're going to see are all of these different tabs here and if you've used wordpress before you know that you can come in here and customize the font styles the colors the layouts and the spacing and everything for the theme that you're using so what i want to do is just kind of introduce you to the different setting options and you can come into the section and customize your website however you want so first let's go to the header tab and what you're going to notice is that you get this header builder right here and you do have all these different tabs for the header but over here is where you can customize the top bar the main section and then if you have a bottom section right here you have all of these different navigation modules or header modules and if you want to use them you can just click and drag them and place them wherever you want so you can see that we just placed a button right here and if you want to customize it just double click on any of these elements you'll get the little edit section right here and then you can customize it however you want and if you want to remove any of these just click and move it back down to the bottom so let's say for example you want to customize the text right there just double click on this for the top bar and then you can come in here and customize it however you want you also have menus so if you go and create menus in the wordpress dashboard you can select the top bar menu or the main menu and then just place them wherever you want you also have this newsletter tab and this is what's really cool with the flatsim theme is if you click on this link right here you'll see that the newsletter gets this pop-up so you can have an opt-in form or something for your visitors to sign up to collect emails so that you can reach out to them and then i'm going to show you how to integrate a contact form opt-in a little bit later in this video tutorial i just wanted to show you that you do have this option and if you want to customize anything like these social icons just double click on this and then you have this entire section and you can see that the icons show up right here so again you can customize the top bar the main section and then the bottom section if you want you can add and remove stuff and if you want to change the look and feel then you want to come back to the main header section right here and you can go into the logo and site identity this is where you can change the site title the tagline you can change the logo positioning and also the logo right here which we talked about in the setup wizard so if you have your own logo you can just remove this one and select the logo that you want and then down at the bottom you also have the site icon so the site icon usually shows up in the tab over here or in the web browser so you can insert one if you want or you can just leave it blank if you do make any changes i like to tell people make sure that you click on the publish button just to save your changes and i'm going to click on that just to be a good role model just to remind you guys that you should be clicking on that whenever you do make any changes so if you want to get rid of the top bar then you want to go into the top bar section right here and you can just disable it you can also change your colors and the navigation style and again you can play around with this stuff on your own you can change the navigation colors and the hover colors and really just explore the section because that's the best way to know what you really want for your website and if we go back here what we can do is go into the header main section and you can change the width again the colors and whatever else you see over here and we're just going to go back and i'm going to go through this other stuff and i'm just going to skip the header bottom because not a lot of people use it so if you do then you can come in here and then just change the settings however you want for the mobile menu you can come in here and change the icon style if you want and how the menu pops up so i'll let you guys do that on your own because again it's very specific to what you want for your ecommerce website and same with the sticky header and drop down style i don't really make any changes but again you can come in here all of this stuff is just for your header menu and for the buttons i recommend if you use one of these button modules just double click on it and you'll come into the section and you can customize it for the account and the cart i don't make any changes i use the default settings with woocommerce and same with the search button but if you want to change the icon that shows up right over here then you can change that over here okay so i'm going to go back right here for html that's for these text boxes so again just double click on the stuff whenever you use them for your header or your top bar and then for the contact if you use this module right here you want to come in here and you can change the phone number your email your location and all that stuff for the newsletter again what we're going to do a little bit later is we're going to show you how to integrate the contact form 7 plug-in i believe to really add a opt-in form for your e-commerce website okay so i'll just come down here and just show you that you do have the wishlist tab right here you can change the icon style if you want and then for the follow icons you can see that you can change the icon styles and you can also change the different urls right here and they're going to show up in the social icon section okay so that's pretty much with the header and what i'm going to do is just go back here and we're going to go into a few of these other ones one of the main ones that you want to go and explore is the style tab so we can click on this right here and you have your color setting your typography so let's just go into colors right here and what you can do in the colors tab right here is you can change your main colors and also your colors for the text and your links down here so i'm just going to show you how to change some of these colors really quickly so for the primary color of your website if you want to change this let's say for example we want this blue color we can select that and now you can see that some of our colors change so when we hover over the stuff you can see that we have this blue color and if we want we can move it back to the default and then for the secondary color if we come in here and select this green color you can see that the secondary color changes just like that so what you want to do is go in to this tab and then select the colors that work for your own ecommerce website or your brand and again you have the font text right here your link colors and then even your shop colors down here if you want to customize them for the sale bubble new bubble and all that stuff so i'll let you play around with this but this is where you can go to customize your colors and then if you want to change the font style you want to come into typography right here and then you can change the font family for your headlines your base paragraphs and your navigation and everything like that just remember that you want to click on the publish button if you do make any changes and really that's all you have to do for the style tab the colors and the font styles is what you can really change over here so i'm going to go back and now we can talk about the blog layout if you want so let's come in here and you have these different tabs and before we go into any of these tabs let's actually click on this link right here to the blog page so if you're using the demo content or have the layout then we can just select the blog link and now we have the blog page just as a preview page and we can go into these different settings so if we go into the blog global you can see that this is where you can change the date formatting for your blog post right here so you can customize this however you want the main thing in this section is the blog layout and the single post tab right here so for blog layout that's for the main blog page and you can customize whether or not you want to have a sidebar or not so you can select whichever one that you want and then for the post layout you can change the option of the layout right here so maybe we want the two column option and this is how it looks if you like it then just save that if you like any of these other ones you can choose them also and if you scroll down you'll see some additional settings that you can play around with for the title and everything like that just make sure that again you click on the publish button to save everything once you do make your changes so i'm going to skip the archive section because there's really nothing to talk about here i would just want to go into the single post because this is for individual blog posts so if you want to change the single layout or the title layout you can select them right here and you can always just click on a blog post and then see the preview page and then if you want to click on this you can get the update right there like that and then what you can do is just select what you want to show up over here so i'll let you guys play around with that on your own and you also have the featured blog post section so if you are creating featured blog posts then you can customize your settings right here okay so i'm going to go back to the main page right here and let's talk about the woocommerce tab so before we go there let's click on the shop link to go to the product page and we can actually go one level deeper so let's click on a product so we go to the product page and now if you guys don't use the demo content then you guys might not have these links up here and that's okay you can just watch this video and see how you can customize the layout and also whenever you create products and everything you can always come back into the section so i'm going to click on woocommerce right here and you'll notice that we have these different tabs so let's just go through these so if we go into the store notice you have to enable this in order to make this message sew up but you do have this option so just keep this in mind if you want to close your store or you want to just leave it so it's private for a little while so that you can update it you have the store notice option and then if we go to product category our page is going to refresh and you can see right here that there are little descriptions right here so you can see right here that this is what you're going to display on the shop page and then down here you can display what you want on the category pages so just go into these drop downs and select whatever you want i like to leave everything as default and really just show all my different products because then people can see pretty much everything that i'm selling so i'm going to go back here and let's go to the product page and i'm going to go back to the product page right here so i'm going to click on it and this is where we can change the layout so right now we're using the right sidebar and there's nothing in our sidebar because we don't have any widgets but if you've used wordpress before you know that you can go to the widgets page and then you can add some right here so if you want to change the layout you can select whichever one that you want and you'll see that it refreshes and if you like it then just keep it if you don't like it go back to the default settings and then down here you have the option of changing your header which is right over here so we can click on this and then you can see if we have category names they'll show up right here and then you have these other options so if you had some alternative images you can choose the style that you want and they would just show up like this where your thumbnails are either on the top or on the bottom or on the side and down here you have some additional options so you can come in here and customize the stuff just remember that this is for the product page so we're gonna go back and we don't need to do anything with these other pages my account leave it as the default if you want to change the colors or the settings you can and again you can always just go to that page by clicking on this link right here for your payment icons you can select which payment icons show up and you only need to do this if you are using the module so you can see down here that i have some payment icons in my footer so if you're not using a module for your payment icons then you can kind of skip this section and you can upload your own icons also so these other pages these are for your product images you can change the sizes and then for the checkout page if you go to this you'll see the checkout page show up and we'll just scroll up you can customize it you can change which fields are optional or required and then in the cart page same thing you can customize this if you want to okay so i'm gonna go back to the main page let me know if you have any questions about the woocommerce settings i think it's pretty straightforward you can go in there and customize the shop pages the product page and all that stuff so let's go to the layout tab and what we can do in the layout mode over here is choose the option that we want so if you want to change it you can customize it however you want so i'll let you guys do that on your own and then if we go into the footer tab and i'm gonna scroll down to the footer section you can see right here this is footer one and there's some widgets right here and then we have footer two right here with some additional widgets and then the absolute footer right here so if you wanna get rid of any of this stuff you can see in the footer section that we have footer one right here we can disable this if we want or we can go and customize it and then same with footer two if you want to change the number of columns the text color or even the background color right here you can do that just by coming in here just like this and then what you can do is change the absolute footer section so if you want to change the alignment the background color or the text so you can see we have our copyright text right here and then we have our navigation menu which we can select in the menu section and then we have our payment icons right here which we could customize in the woocommerce tab okay so you do have some additional options down here with the back to top button and then some additional html for your footer so go ahead and customize it however you want and maybe you want to leave it just as is you can see that i got rid of that footer one i think that looks better when it's not there but again it's really up to you i'm going to go back and now let's just go through these other tabs really quickly there's not really much to cover here so let's go to the pages tab and this is where you can change the default page template you can also select the template that you want whenever you create a new page and that's what i do so i'll show you guys how to do that and then for the portfolio if you do have a portfolio you can change the layout options right here so come in here and do that if you want and if we go through these other ones menus i like to customize and create my menus on the wordpress dashboard but you can come in here and you can do that by clicking on this button and then you can set the main menu the secondary menu which is going to be for the footer and the top bar and if you need any help with wordpress let me know i do have tutorials on how to use wordpress and we're probably going to create a new one this year so if you guys want subscribe or just shoot me a message and i'll send you the link for widgets again i like to go to the wordpress dashboard but you can see right here in the widgets section you can come into footer one and footer two and then customize it add widgets or anything like that so we'll go back right here and then homepage settings you guys know how to use this probably if you have used wordpress before you want to have a static page and then select your homepage and your blog post page you can also do this in your settings in the wordpress dashboard so we'll just go and cover these other things really quickly so in the share tab right here this is where you can go for the product pages to have share icons so let me just go to a product page really quickly i'm going to click on shop right here and then just go in here and you can see the share icons they show up on the product page right here so whichever ones you select will show up and you can change the icon over here also if you wanted to and then let's just go through these other ones notifications i don't do anything here but if you want to enable cookies or a notice you can you want to select the privacy policy page over here you can also do it in your woocommerce settings so you want to make sure that you do have a privacy policy page because i think they're kind of mandatory nowadays to have so you want to make sure that you create one and i think wordpress actually has a default template that you can use so if you have any additional css you can add that right here to customize your website and that's pretty much it if you make any changes and you decide that you want to go back to the default settings just click on reset options and then you can click on this right here so if you guys have any questions with the flatsome theme options or anything like that let me know i think it's pretty straightforward the main ones that you want to make sure that you cover are the header the style tab blog tab woocommerce and then the footer right over here okay so pretty much we are done learning about the theme options for the flatsome theme i'm going to close out of this and then we can move on to the next part of this video tutorial so the next thing that we're going to do in this flatsome theme tutorial is give you an overview of the ux builder which is the flatsome page builder and we have this template page right here that was created for us and we're going to show you how to customize this page and then a little bit later we will show you how to make pages from scratch so this is going to give us a good overview of the ux page builder and then we're going to learn a lot about how to customize our own pages so what we can do is hover over edit page right here and click on edit with the ux builder and once the ux page builder shows up let me give you a quick tour and just remember what we're going to do first is give you an introduction of the ux page builder and show you how to customize an existing template and then we're going to go in and create our own page with our own elements and modules and different sections and everything so over here you can see that we have a preview screen of the web page and then on the right hand side over here you have buttons to undo redo you can see what the website looks like on the mobile device the tablet and the desktop and then if you have animations you can play them so that you can see them you can hide the section on the left hand side right here if you wanted to and over here these are the different sections and modules that we add to create the page that you see right here so you can see that we have a slider right here and if we expand this we have a bunch of different banner images so i believe there are four different images or four different sections right here and then we have a row below this so this is our row and if we expand this you'll notice that we have three different columns and if you go down you'll just see that this whole page is created with different sections right here so what we can also do if i just close all of these is we can add new sections by clicking on the add elements button right here or you can hover over any section and you'll see this plus button if you click on that you'll get the add content section right here you can add a new section if you wanted to or a module for some content and then if you want you can scroll down to the bottom and you have the shop section also so if you want to get out of this just click close and again what you can do is hover over any of these places and whenever you see a plus button you can add elements or new layouts or what you can do is just click on this button right here that says add elements and again you'll get the same exact section and you can add a section with rows or a slider or a block or anything that you see here so we're going to be using some of these a little bit later to customize a page that will create from scratch but first what i want to do is i'm just going to close this and i'm going to scroll back up to the top and i'm going to show you how to use the page builder to customize an existing page something like you see right here so what i want to do right now is just show you how you can edit some of these elements in this page so that you can customize these demo templates because i think this is the easiest way to really build an ecommerce website but after we become familiar with the ux builder we will show you how to create your own page and also how you can use some of these other modules so again i'm going to come in here just to show you that there's a bunch of different modules that you can use to customize your website and we'll cover as many as we can if you guys have any questions about some of them that we don't then let me know but i think they're pretty straightforward so this is the slider section right here and we can go into this section right here and expand this and you'll notice that there's a few different banners so right now we have four different images what we can do is first just double click on slider right here and that's going to open up the edit slider section and for each of these sections or elements you can double click on them and then you'll get an edit section to customize the settings so you can see for the slider you can change these type right here and the layout there's a few different options if you wanted to go in there and you can change the image you can change whether or not this is a parallax slider and for the navigation down here you'll notice when you hover over this you have these arrows if you want to customize them you can change that stuff right here and then down here for the slider time for each image you can change the amount of time that you stay on each slider image so right now it's at six seconds because this is in milliseconds you can change this to make it faster or slower okay so we don't really need to do anything here but you can edit some of the settings for the slider and what i want to do is just go into these different banners right here and edit these so if you ever want to remove any of these you can click on the wheel and you'll get this pop-up and then you can just click delete just like that and you can remove them so maybe we'll just remove two of them so that we have two and we can double click on the first one and again you'll get the edit banner section right here and you can change the height if you wanted to you can change the effect for how the slider comes in or you can leave it as none but what we can do and what i want you guys to probably do for your own sliders is you're probably going to want to change the background image or add one so we can remove this and then what we can do is click on select media right here and if you already have some images then you can go to your media library and you should see them right here if you guys don't have any images you probably already know because you've used wordpress before but just come in here click on select files and what we can do is just go and find the image that we want to use so i will have a bunch of demo images that you can use so that'll be in the text tutorial and the video description if you want to download that file just in case you need some images to follow this video tutorial so we have our image right here i'm going to click use and you should see the slider refresh so now we have a background image just like this and again you can change the height you can change the effects and the colors and everything you have the hover option over here and you can even change or add a border or have a link for the slider and down here you can also add a video instead of a background image if you want you just have to link the video over here okay so again you can do this for the other banner if you want just double click on it super easy just come down to the background section click on change media go to upload files and then go and find the image that you want to use and that's pretty much it but just remember that you can also edit the slider so again if you want to do that you want to go into the slider right here double click it and then you'll come into this section right here and you can change the settings so that's all we're going to cover with the banner images or slider images and again you can always add more so you can see right here that says add to slider just click on this and then you can add a new banner and then you'll have another image you can just select the type of banner that you want so these lines are different types of text you can just click on this one right here and you can see what it looks like maybe you want this one and if you like whatever you select just click apply and then it's going to get added and then you can come in here and you can change whatever you want so you can see that it gets added right down here and just remember you can delete these also and you also have the undo and redo button over here so if you guys have any questions about sliders or background images with your banners let me know otherwise we're going to move on and show you how to edit these text boxes that you see over here and just cover text modules in general so text modules are really easy to use you can just hover over these ones if you're using a demo template and you can double click on them and you can always go into the ux builder over here on the side and find the elements if you expand them so you can see that we have the text box right here and then we have individual text boxes right here and you can always add some additional text boxes by clicking on add elements and then down in the content section right here just click on this you'll add a text box and this isn't really formatted so we didn't really add it to another section but you can see right here there are a bunch of different options so if you wanted to go with paragraph with a headline or a sub headline or uppercase you have all of these different options and if you don't want to use these you can just click on the x or you can click apply right here and you'll see that it gets added right here and then you have this edit box to edit your typography and you can edit the text right here or you can click on open text editor and then you can type in the text and you have the formatting buttons right here and you can add the toolbar toggle to open up some additional formatting options now there is something with the flatsome theme ux builder called shortcodes and these are similar to the modules except you can add something kind of like html but their shortcode to format the style and the layout with just some text so we'll cover that a little bit later but this is just an overview of how to use the text module so what i'm going to do is come down here and delete this one and we're going to go and edit the ones that we see at the top over here for the banner so i'm going to scroll back up and all you have to do is just come in here double click on this and you'll open up the editor right here and you can change the text to whatever you want so maybe holiday season has begun holiday seasons have begun that does that sound right to you guys i don't really know i'm going to delete that and just go like this and click ok and now you can see that it shows up right here we can change the color if we wanted to to whatever color that we want and yeah it's pretty easy so again you can come in here and play around with it you have these other text boxes right here that you can open up and format however you want so let me know if you guys have any questions i think it's pretty straightforward again the great thing about the ux builder is just how easy it is to use the flatsome theme so if you do make any changes you can click on the apply button down here and it sounds like there's some honking outside i don't know if you guys know i'm in new york city so there's always some type of background noise but i try to make it as professional as possible with these videos but sometimes something comes up and sometimes it makes more sense to re-record these but um for what we're doing right now i don't think i'm going to so i apologize if you guys hear any background noise so right here we do have this update button that's going to save everything i think i mentioned that with the banner slider but you want to make sure that you click on that just in case you crash your website or your computer breaks down or anything like that you don't want to lose everything that you updated okay so if you guys want you can format your text and you can add modules really easy again we will be showing you how to create a page using a bunch of these modules a little bit later so now let's move on and just really quickly talk about these divider lines right here because we do have them in our banner and you can add them wherever you want so for the divider what we can do is just double click on the divider element and you can come in here it's really really easy so there's really not much to cover it's pretty straightforward you can see that you can change the alignment right here and then you can change the width the height the margin and then also the color so it's a grayish color right now because that's the settings in our theme options but you can see that you can change it to whatever color that you want okay so you can also cancel that and again click apply if you want to save your changes discard if you want also and we are going to be covering some of the elements that don't really fit with this template just because i want to show you guys really how to use certain modules in order to really customize your website so don't mind if things don't look that great just remember this is a flatsome theme tutorial just to kind of get you guys used to building your own website okay so now what we're going to do is cover how to edit our buttons for the flatsome theme so if you want to edit a button for your ecommerce website using the flatsome theme you can double click on any of these buttons right here and you can also remove them you can also add them by clicking on the plus button or you can add them by clicking on any of these plus buttons right here wherever you want to add it so you can also drag these modules wherever you want to place them so let's say for example we want to add a button by clicking on the plus button and then coming in here selecting the button and then you have these different options so we can select this one right here maybe we like that click apply and then we have the edit button right here and we can change our text we can just type in something like learn more and you can make it all uppercase or lowercase just like this and right here in the color tab you have these different options so remember in the theme settings you can select the primary color secondary alert and all these other ones so you can just choose the color that you want and then you can change the style right here if you wanted to also and you can make the button larger it's really up to you and you can also add an animation and add some padding and all these other settings the main thing that you want to do is you want to come down to the link section and this is where you're going to type in the link so you can type in http colon www.yourwebsite.com and then it's going to link to this page right here okay so i'm going to remove this button because it looks a little weird so we're just going to go back here and i'll just delete this and if you want to edit any of these other ones just double click on them and same thing you can just come in here you can change the style change the text and just make sure that you add a url if you don't have a url right now then the cheat code or whatever you want to call it is to put in the hashtag so that there is an active link it just doesn't go anywhere okay so just remember to always come back in here and update these if you guys want but adding a button super easy and again you can drag these to wherever you want to place them so if we want to move it around we can do that super super easy okay so i'm going to click on update right here just to save my changes and now what we're going to do is we're going to come down to the next section over here and talk about how to add some little mini banners like this and it's very simple it's kind of like the slider section and then we'll talk about inserting rows and all that stuff so before we get started on this new row right here i do want to remind you that there are some additional banner sometimes so if you ever want to edit these other banners you want to click on them and then you can edit all the elements you can also add some additional elements if you want okay so now what we're going to do is come down here and we're talking about adding a new row so if you want to add a new row what you can do is just hover over where you want to add the row so if you want to add it in between these two sections right here we can click on the plus button and then we can add a new section or a new row so if you add a section what that's going to do is create this entire block over here and then you can add some certain options right here or you can just add the section with a blank section and then what you can do is hover over this right here and you can add your elements so if you wanted to change the background color you could but let's say we want to just add a new row we can just click on the plus button add a row and then we can choose the number of columns that we want so maybe something like this one and you can see that this is what it looks like and then we can just click apply right here and then again we can just come back in here click on the plus button and then add the modules that we want so maybe we wanted something like let's say a gallery so we can insert this and then we can edit our gallery and then on this side over here we can double click on this and then we can go into this section and add the image because this is what this module is for and you can see that it gets added just like that so i just wanted to give you an example of how you can add a section and some rows i know this doesn't really look that good but super easy to customize and create different types of layouts for your website so right here you can see that we just added this entire section and you can see the modules that got added and you can add some additional stuff to this column on this side and then you have this other column over here with our image and then you can add some more stuff if you want to remove this you can click the undo button or just come over here and delete everything if you want also so now what i want to do is just talk about the template section right here which already has a row with some banners and some text modules and that's this section right here so if we double click on this what you're going to see is that you can edit this row and you have the column style so if you wanted to have a background color you can click on solid right here and then you can come in here and choose whatever color that you want you can see that we add it and if you're wondering why doesn't it go all the way across like this that's because down here in the width section we need to choose the full width option like that so you do have other options here to customize the row super easy and what i want to do is just talk about what you need to do to customize this section when you see a bunch of different modules so the easiest way is to go to your list right here of all your different modules and expand the section and then you can see that we have three columns and if we open them up we have a banner and then a text box and then we have text and a divider so if you want to edit this stuff again just double click on it you'll go into the banner section you guys already know that you can add an image over here if you wanted to so we can do that really quickly i'm just going to use these images instead of uploading a new one just as an example really quickly and then you can come in here you can change the text right here or you can come into the text editor and update it right here and then same with the divider and let's say that you wanted to link this entire banner as a button to another page just double click on the banner and then you can come down i think down here to the link section and then what you can do is just type in the url or the page title right here to link this banner to whatever page that you want to go to and then you can repeat the steps over here okay so again super easy and i'll let you guys just do that on your own i just want to really kind of give you an idea of how i think about some of these templates when i see this right here and i want to customize it so now we're going to click apply right here click update just to save everything and now let's come down to the section and talk a little bit about the title section right here and then the featured product section so now let's talk about the title section so you can see that we have a title module here and you can always go and add one in the elements but let's just double click this and just show you that you can change the title style right here and then you can change your text the size and then your color you can add an icon and even link this to another page if you wanted to super easy and i don't think anything should really surprise you now at how easy this stuff is but with titles what i think they are really good for are breaking up different sections especially when you want to show different products or different types of products so you can see right here that this one says featured products and then this is best selling products and if you come down here we have browse our categories so you can add as many different titles as you want let me know if you guys have any questions about them but now let's talk about how you can actually add a feature product section down here so if we come into the ux builder i'm just going to come down to this section and now what we're going to do is talk about the product modules so the next thing that we're going to do is talk about the products modules so if i open this up you're going to see the edit section and what you're going to notice is that we're editing this section right here and nothing is showing up but down here we have another products module where we actually have products and the reason why is because this is for featured products and when you create a product using woocommerce and the flatsome theme you need to make sure that you select the products to show up as feature products if you want this section to populate with some products so i'm going to show you how to do that after we talk about this module but you can come in here and you can change the style if you want you can change the layout option so if you wanted a row or masonry grid you can do that instead of a slider similar to the one that you see down here you can also change the size and the navigation style the color and a few different things here so the only big thing for a featured product is you want to come down to where it says filter posts and down here where it says show you have a few different options so if you show all your products then you're going to select this option right here but if you only want to show featured products or stuff that's on sale you're going to select these options so right here this is for featured products and then if we just double click into this other product module and we come down to the filter post you can see that this one says all and if we select on sale if there's anything on sale then they'll show up right here also so we don't have anything on sale but we have a few different products that are created right here so that's all you really have to do and once you create products they're going to populate in the section if you do use the products module so really quickly what i'm going to do is just open up another tab and show you on the product page and on the wordpress dashboard right here i'm just going to come down to products and go and open up a product page so you can see right here that we have a list of demo products what i'm going to do is just click on the edit button for one of these and when you see the product right here just remember that we're using woocommerce for our wordpress website so you should have a good understanding of how to create different types of products using woocommerce if you need any help let me know i do have some video tutorials and we're making a new one for this year so i can link you to that but right now we're talking about featured products and what you have to do if you have a featured product is over here where it says catalog visibility whenever you create a new product you want to click in the edit button right here and right here where it says this is a featured product you want to select this as a featured product and then click update and once you do that now if you go back to the home page right here i'm going to update this and then just refresh it and we should see a product in that featured product section now so once we get the home page refresh let's scroll down and you can see right here now we have our product because we selected that product to show up as a feature product and in the products module right here just remember that in the filtered section over here we selected to only show featured products okay so that's just a quick tip for you guys for creating products that you want to make featured products it's going to be right over here that you need to click on the edit button to check that box okay so that's pretty much all we have to cover with the product modules but you can also select the number of products that you want to show up so if you come into the product module right here if you scroll up to the post section what you can do is change the number of posts that show up over here and again remember that we're using a slider right here but if we would change this to a grid option then we can change the layout of the section okay so if you guys have any questions let me know i'm going to discard this and we're going to scroll down to the category section because this is a little different than the product module this one shows product categories so we can double click on this or what we can do is come over here and just double click on this and for the categories module you can see that you can change the style and you can also change the type so i should have enough categories that if i select something else you can see that it updates the layout and you can also come down here to the meta section and you can select the type of categories that you want to show up so if we only want the albums to show up we can just select that and we can also add some additional ones so if you don't want to show all of your different categories you can just select them one by one just like this otherwise it's just going to show everything if you have the uncategorized option or if you just have nothing at all okay so what we're going to do is just go back to the slider style right here and again all i'm doing is really just showing you how to use some of these modules so really easy if you want to use templates to customize your different pages but again we are going to show you how to add a page using the ux builder from scratch so now let's move on to this next row right here and talk about some additional modules so now what i want to do is just cover the icon boxes that you see right here so we can double click on this or what we can do is we can come to i believe this row right here and expand this and we should see the icon boxes right here so i'm going to double click just to open this up and this is where you can put in an icon so if you have icon images then you can upload them right here and then you can change the width you can change the positioning and the text for the headline the bottom text down here is a text module so you guys already know how to edit that and if you come down a little bit lower you can change the text size you can add some spacing and you can also link the text box to another page if you want and what the demo website has right here or the template is a three column row with some icon boxes so again you can see all of those over here in the ux builder so we have one column and then the second column right here and then the third column right here and you can always add some additional stuff so you can see in the icon box if you wanted to add a button you can click on add to icon box and then just come in here and find the button module wherever that is or you can just add a message box since this is just an example and you can see that it shows up right here and then you can format it however you want okay so i'm going to discard that and i'm going to delete this and that's pretty much how you have to edit the icon boxes super easy all you really need is to make sure that you do have some icon images if you want to use those and then you can format this section however you want so one of the things that you can also do is you can add some additional spacing so you can see right here that we have a gap module and that's just some spacing between this section and this section right here so you can see right here that it's really really easy we can just come in here and we can talk about the gap module really quickly so you can just change the height which is going to be the spacing and that's pretty much it so what i want to do here is kind of just cover everything that you see so that we can cover most of the popular modules for the ux builder but again you're probably going to just play around with this stuff and you'll learn how easy it is once you go into these but i don't want you to be afraid to explore on your own so let's go back to the main page right here and let's move on and talk about this next module right here so now what i want to do is i want to talk about this testimonial section right here so just to show you guys if we come down on the ux builder and look at our different modules you can see that they inserted a slider section and then they have different banners right here for multiple testimonials so what we want to do is if you guys want to add some additional testimonials you can do something like this you can also just add different columns and put in the modules but i'm just going to show you how to edit this testimonial module so if we double click on it you'll see the edit section right here and you can add an image for the person that's giving the testimonial if you want and you can change the image position you can put in their name right here and their company you can change the size and this is where you can change the number of stars so right now we have three stars which isn't that good i don't know why anyone would put a testimonial with three stars but i'm gonna change it to four because i think that looks better and that's pretty much it so you have your testimonial section and then what you want to do is you want to edit the text box and the testimonial module will include this but you can always just go into the ux builder over here and you can see when we expand this that we have the text box right here and you can double click on it it doesn't really matter which way you do it and then you can put in the quote right here and that's pretty much it so i'm going to click ok right here so adding testimonials really easy and again you can format them however you want the developers here just created a banner but again if you wanted to have columns you can create a new section have some rows and then just put in testimonial modules in each one of those okay so let me know if you guys have any questions the next thing that we're going to do and i think this might be the last thing for this section is we're going to show you or talk about blog post modules so let's go ahead and cover that right now so now what i want to do is really quickly just talk about the blog post module so you can see that we have our blog post right here if we double click on this you can change the layout style so you can come in here and change it to a grid style if you wanted to you can change the number of columns and you can see that it gets updated just like this and you can also change the animation you can select certain categories for blog posts just to show up or you can have all of them show up it's really up to you so it's really simple and i think you can just come in here and customize everything but if you do want to add a blog post section then you want to go and get the blog post module and again you do have the option of just using these templates so i can show you really quickly that down here i don't think we talked about this yet so let's actually do that let's talk about the flatsome studio so if you come into the elements and you'll see all of your different elements you also have the flatsome studio right here if you click on this what you can do is import a pre-designed layout so thinking back i might have actually mentioned this but what you can do is create full page layouts or select full page layouts for different pages so you have home pages about pages all those things and then you have all these different sections too if you want to add the stuff so maybe you want a different header you can come in here and then you can find the header that you want you can just import it just like this and you can click start if you want to import the demo content also and you can see that it imports really really quickly and then right here you have a new section and then you can come in click on it customize it however you want so the pre-designed templates are just an awesome way to save a bunch of time and use really professionally designed layouts to create all of your different pages so we are going to be talking about how to create mega menus a little bit later but you have everything here so go ahead and explore it you have wired frames about pages call to actions all that stuff and you can pretty much create an entire website just using the pre-designed templates and sometimes i think it's easier than customizing your own website using the ux builder but pretty much we have just learned how to create the home page that you see right here using a bunch of different modules and we're going to learn about some other modules a little bit later as we go through creating the rest of our pages and learning more about the flatsome theme so let's go ahead and just talk about these widgets really quickly and the navigation menus for our flatsome theme website so what i'm going to do is just close out of this we'll come back into the ux builder later i just want to really just try to cover everything i can so that you guys can really build an ecommerce website with the flatsome theme so i'm going to close this so what i want to do first in the second part of the flatsome theme tutorial is i want to show you how to use the ux builder to build a page that looks like this so in the first part we covered how to use the slider and create banners and everything so i wanted to do something a little different and i actually think that this home page or this ecommerce page just looks really professional so i would actually use this for my own website if i had one so let's go and create this page let's go back to the ecommerce website that maybe you're learning how to make and we want to create a new page so just go and click on new page and what i want to do is i'm just going to title this page so it doesn't matter what i type in but maybe you want to type in home or home page and in the page attributes right here i want to choose the full width option because i think that this one actually looks good for the website but you have all these different options so you can play around with these and choose which one works for you guys and we're going to publish this so just click on that and once it's published we need to turn on the ux builder so that we can use the flatsome theme page builder so click on that button and once you see the ux builder right here what we can do is insert a template with the flatsome theme so that's what we did for the first part of this flatsome theme tutorial you also have the option of importing a custom template if you have any saved so i'll show you how to create some of those a little bit later in this flatsome theme tutorial but right now what we're going to do is just add all of our elements from scratch to create this page so you can see on the demo website that this is a section right here and then below that is another section and then another section and so forth so we are going to show you really briefly how to add products but just remember this isn't a woocommerce tutorial so you should already know how to use woocommerce but if you don't you can watch one of our video tutorials but what we're doing right now is we're really just covering how to use the flatsome theme so the first thing that we want to do is add our first section so we can click on the plus button right here or the plus button right here it doesn't really matter and we're going to add our first section so click on section right here and we'll go with the default option right here and then we can always add some elements after that so just click on the default one and for the padding i think i'm going to change this to zero right here just so that there's no spacing from the top and the bottom and then we can click apply right here and now what we can do is add another section inside this section so click on add section and then what we can do is just choose the preset layout that we want so i'm going to choose the large left right here so you can see it looks like two thirds and one third and then we'll just click apply right here and we don't need to do anything in the settings right here but you can always change the padding or the alignment it's really up to you so i'm just going to click back right here and you can see when we go into this you can see that we have two columns right now so i'm going to hover over this one and click the plus button to add a text box so once i come in here i'm just going to come into the content section and click on text and you'll see that it pops up and we can choose the pre-made template that we want so i'm going to choose the headline with subtitle so i'll click on that and then click apply so we have our template right here and what we can do is click on open the text editor and once we have this this is where you can type in your text so i'm just going to paste in some text from the demo website so if you need to you can pause the video i'm probably going a little fast only because i think that you guys are probably going to watch this and then really just learn how to customize your own website on your own so what i'm trying to do is just kind of show you what you can actually do with a lot of these elements so you can customize the color the font size all that stuff over here if you want you can also do that over here so we can come in here and maybe just select this primary color and if we don't like it we can click in here and then drag this wheel to another color so that looks pretty good to me so i'm just going to click choose right there and then we can go back and now you can see that this is what we have and maybe we want to add some spacing over here and also smash this so that the tech kind of ends over here so if you want to do that when you hover over this you can see that you have this bar right here and you can actually just move this if you click on it to change the width of these two columns and then what we can do is we can add some spacing at the top over here so this is a column and this is a column so i'm going to double click on this column right here and once you come in here you can come to the padding and we can just drag this to the right and i'm going to add maybe 60 to this padding just to make it a little bit of a gap so one more right there and that looks pretty good just to give it some space and nothing is going to show up here unless you add some elements so even though you see it says add elements that's going to disappear when you go to the page so i'm going to click apply right here and now you can see that this is what we have so far and now what we can do is we can go and add our next section so if we come over here and see we have this banner section so we want to create a new section so we have our first section right here and now what we're going to do is add another section so click on section and then we'll go with the default one again and click apply and once we have this section right here if you guys want to change anything you can and i'm going to go back right here and then i'm going to add to the section what i'm going to do is add a row and it's going to be a one column row and once i add that you can see that it doesn't make it full width and we want to add a background image so you can see right here you can only add a color so what you want to do is just click in here and remember you have all these different modules that you can explore on your own and because i've used the flatsome theme so much i know that the banner option gives me an image so i'm going to click on this one right here and then you have all these different banner options so we can go with a blank one if we want or the text one with a little button and i think that's the one that i'm going to choose or maybe even this one so this one has two buttons this one has one and this one has everything centered so i'm gonna choose this one and just delete this button right here so once i choose this banner and it looks okay i'm gonna click apply and once we see our banner right here what we can do is we can change the height if we want so you have these ratio options or what you can do is just come in here and change it so i'll do something like 400 px right here and then i want to add a background image because you can see on the demo page right here we have this image so to do that we can come into this section and just click on select media and we should have some images right here but you can always go and upload your own so again remember we do have demo images and if you click on upload files click on select you can find the image that you want to use so which image was i using this one right here i'm going to click on use this image and you should see it pop up just like this and it looks pretty good you can add an overlay if you want so you can see there is a darkest gray color that just tints this image a little bit so i'm going to go into the text box right here and you can see that it just pops up the editor if i just double click on it and i'm just going to paste in the demo text and you can see the text show up right here and if we want maybe we can change the heading size to heading three and you can format the text however you want so right here we have our text and maybe we want to make it on two lines so i'm going to drag this out just like we did for the section above and if you want to push this down sometimes there's padding or margin or what you can do is click on the plus button right here and there's this element called gap if you click on that all this is just some spacing so right here it says 30px i can type in 100px so you want to make sure that you type in the px so that it actually pushes it down so you can see now we have a large gap right there we can click apply and pretty much that's all we have to do so if you want to remove a button we can come in here delete this and then we can double click on this one we can type in shop now and if you want to change the color you can do that right here and you can also change the style and you want to make sure that you put in a link right here so i'm going to type in the pound sign to make it an active link that doesn't actually go anywhere but you want to make sure that you type in a real url for your page so i'll click ok right here and we can click update just to save stuff make sure that you always go into these tabs just to check out what everything looks like and if you don't like what it looks like then what you can always do is go into the section double click on it and then at the bottom over here you have this advanced tab just remember in the visibility you can make the section only show up on certain devices or you can hide them on certain devices also and then you can make a copy or add another section and format it the correct way for the other devices and then select the visibility also and you can also do this for every module that you have okay so now we have our first two sections and what we're going to do now is create a product section and you might not have any products right now so this section will not show up unless you create products but we can add the module so if you want to do that let's go back to the flatsome theme right here and what we're going to do is add another section right below this so we can just go into our elements and we can probably just type in products right here and let's see if we can just do this we have the products right here click on that and you can see that it populates some demo products because i do have the demo content so that works for me but if you guys have your own products you can upload them or create them i'll show you how to create a product but just remember that this isn't a woocommerce tutorial it's a flatsome theme tutorial so if you need help with woocommerce or creating the ecommerce products and all that stuff you want to make sure that you watch a woocommerce tutorial also so i'm just going to click apply right here and then we can go into the products tab right here and what you can do is change the layout if you want so if you don't want a slider with a bunch of different products that can show up here and you can slide through them what you can do is come in here and change the type so maybe i'll go with the row option and you can see now that you can't actually scroll through and then what you can do is change the number of columns and you can change the spacing you can also change the number of products that show up so i'm going to go with four right there and then down here you can choose what you want to filter by so if you want to do by title or sales or date or whatever you can do that and you can also change the order and pretty much that's it so you can see right here that these are in pound so remember that is something that you change in the woocommerce settings for the currency so again we're not going to cover that but if you need any help at all with woocommerce or how to change the settings for your ecommerce website let me know in the comments section i'll now link you to the right video tutorial okay so right here these images also depend on your settings for your thumbnails and the text right here is also something that you can change in the theme settings so now what we're going to do is create another section and again what we're doing here is just remaking our demo page right here just to kind of show you how to use the ux builder from scratch so we're going to add this title section right here so let's go back to the flatsome theme and click on add elements and before we go and add our new section i do want to note that i will be showing you how to create a product just in case you need to know how to make one and that's going to probably change the look of the section because we'll be adding our own images okay so we'll do that at the end just to show you how to populate the section so in our ad elements right here what i want to do is click and add a new section and you can choose any of these if you want i'm going to go with the default one because i like to add my own stuff into these sections i'm going to click apply or the back button right here just to add the section and then we'll go in here again we'll add a row and we're going to do one column and then i'll click apply and once we have our row we should see the column right here and then what i'm going to do is just come in here click the plus button because i want to add a text box so right down here click on this and we can choose whichever one we want so maybe we'll go with the subtitle and the headline click that and i want to center this so i'm going to click center right here and then i'm going to go into the text editor and we'll just paste in some demo text right here and if you want to format it some more you can and you can see that this is what we have you can also use a headline module if you want but i'm pretty happy with this um so that's all we're gonna do super easy super simple sometimes you just need some text to break things up and we're gonna add some additional stuff down here so you can see the next thing is some of these image boxes with some buttons to go to different category pages so we'll just go back to the flatsome theme right here and i'm going to close this section and create a new section so again click on add elements and i want to add a new section so click on that and i'm going to go with the default option because i want to add a row so i'm going to click back and then click add to section and select the row option and then go with two columns like this and then click apply and i actually want two additional columns on the bottom so what i'm going to do is click back and then expand the row section and click add to row and that's going to add a new column and then click add to row again and you can see that we have two columns and these ones are one half and one half and these ones aren't so that's why they're smaller so what we can do is double click into these columns and then we can change the width to 6 by 12 so that's one half right there and then we can do the same with this other one so you can see that it just makes it larger so now we have all of our different columns right here and then we can add our image boxes to create this stuff right here so what we're going to do is just go into each one of these click on the plus button and then we can type in image box right here and select this and we'll get this pop-up right here box right here and we should have some demo images so i'm going to click on select media and just select this image right here and click use and you'll see that it shows up and you can change the height of this image if you want so there's some crazy car outside so i don't know if you can hear that but we're going to keep going anyways and you can see right here that we have 56.25 percent and that just changes the ratio for the height right here and we can scroll down a little bit and you can see if you wanted to link this image you can put in a link right here and you can also change the text for the section over here also so what i'm going to do is click back though and if we go into the image box right here now we have this text box section so what we can do is double click this to go into the text editor and we can just come in here and paste in our text and i'm going to click ok so that you can see that this is what it looks like and you can always change the line height the font size the colors all that stuff go ahead and do that on your own and what we want to do is we want to add a button down here so we can click on the plus button right here and then in the content section you can see the button so click on that and then you have all of these different options and the one that is consistent with this web page is this one right here so i'll just click that and click apply and then we'll come into this section right here and what we can do is change the text if you want so we'll just type in shop kids and you can change the letter case if you want you can also change the style the size and a bunch of other stuff here i'm just going to put in the hashtag because i don't have a real link and then we can click apply and we can click update and we can do it for these other sections too so i guess we'll just do it really quickly because sometimes i would pause the video and just edit it all in but we can run through it again so over here we're going to type in image box you can also just search for whatever element that you want i'm going to select this one and then just change the image so over here i'll select this image and just remember we do have demo images that you can use so go ahead and download those if you need to and then what was the height i think it was 56.25 so we actually want to do percents over here so i'm going to actually just type in percent right there and then just change this to 56.25 and you can see that it gets added right there and then we'll come into this text box and double click this and we can just come in here and change our text to the demo website text and click ok and then what we can do is add a button right here so we'll just do that really quickly we'll just select this button again and click apply and then we'll change the text to shop casual and if you guys want you can come down here put in your own url click apply right there and now we have this first section right here and then you can go through and add this section if you want so instead of running through the same steps again if you guys want to actually create this page then you can pause the video and do these other steps that we just did as an exercise if you want also you can just skip this section but i'm going to use the power of editing just to add these two sections so i'm going to click on the plus button right here and with the power of video editing you can see i have my two new sections right here and i just follow the same steps that we have over here so if you guys did the same that's awesome but even if you didn't that's okay because the whole goal right now is to show you that you can really use the ux builder to really customize and build any page that you want so now what we're going to do is add our next section below this and that's going to be this section right here that you see and we're going to make it full width but if you want it to be a container then you would add another row inside your section so let me just show you really quickly let's click on add elements and add a new section and this time around i'm going to choose the box left dark option so we have an image right here and then our text right there so we'll come down here click apply and in the background color right here i'm going to change this background color so i'm going to remove this and then click on this button and then just come in here and i'm going to type in this color code that you see and it has this overlay right here so i want to remove this and now all we want to do is come over here and click to add our image module so we'll come in here and then just find that module click on it click on select media you can see how easy this is to use so hopefully you guys are getting very familiar if you're just watching this or even if you're just following along that you can pretty much find everything that you need and then you can customize stuff however you want so once you see the image right here you'll notice that there is a white background and that's because we have this preset template so what we want to do is hover over the column button double click on that and i guess you'll come back to this page right here we can just click on the edit column and we want to get rid of the background color right here and then we can also make this section a little smaller by dragging this over so it's only 5 out of 12 or 5 12. okay and now we can come to this side right here and we can customize this text so we'll come in here and highlight all of this and then we'll just paste in our dummy text right here and we're going to format this all together for this entire column in just a few seconds so i'll just click ok right there and then i'll come into the button and i'm going to type in our story i guess and i'll change this to success just to change the color and if you want to align this to the left-hand side you can do it one by one but you can also see when i'm hovered over the section we're inside this column right here so if we just double click on this it should come over here and we can double click this to edit this column and then over here for the text alignment we can just move everything to the left and you can see that it moves over just like that okay so if you guys want to get rid of this little border right here what we can do is just go back into the edit column and then remove this padding right here and then that should remove it just like that one of the things that the demo web page actually has is some gap in between the top section over here so what i'm going to do is i'm just going to add this to the section so maybe we'll come in here and where is that gap right here click on that and click apply and you can see that it's down here right now if you want to move this just click and drag it to wherever we want to place it so we can move it up here and maybe place it up here just so that it pushes it down or what we can do is click and drag this to this section so that we have it up here okay so i'm going to click update right there just to save everything and that looks pretty good so now what we're going to do is show you how to insert a blog post section and then an instagram section which doesn't show up right now but i'm going to show you how to connect that with the flatsome theme so let's go and create this section really quickly and then just round out this part of the flatsome theme tutorial so back on the website right here we're going to close this and we can go and add a new element so click on that and we'll just add a new section so we're going to click on add elements so now what we're going to do is add a new section so click on this and we're going to go with the default option because we're going to add our own elements and in this section if you wanted to you can add some padding which adds some spacing to the top and bottom inside the section but i'm not going to do that i'm going to add it to the column so first we're going to add a new row so that we make this a container section and we'll go with one column right here and then once we have our row i'm going to click to add a text box for my heading area and i'm going to choose the lead paragraph so that the font is a little larger and we'll just come into the text editor and type in latest blog posts and i'll change this to heading 2 to make the font a little larger and you can see it right here and if we wanted to we can change the color we can do something a little darker based on the primary color if we want so i'll just select that and if you want to add some spacing what we can do is just double click into this column or go back right here and right here in this column just click on that and then right here in the padding you can type in whatever you want so if you want to type in 60 or let me type in 60 if i can 60 or i have to drag it actually so that's the only thing sometimes you can't just type everything in but that's okay you can see that we have some spacing right there it looks great and we're gonna add a gap underneath this so we're going to find the gap module and we'll just go with 10 or 15 px right here click apply and then we're going to add our blog post underneath so click on the plus button and you can search for it if you want you can also just type in blog at the top if i can spell it correctly and we'll go with the normal option click on that and then in the styling tab right here i think we talked about this earlier but you can change the layout so i don't want it to be a slider i want it to be a row and i want three columns and i want three blog posts just so that we don't clutter this section so i'll click apply right here and now you can see that we have our blog post section just like this so that's all we have to do for this section and there's one more thing that we're going to do which is going to be inserting our instagram feed so you can see right here that the instagram feed doesn't actually show up and that's because we have to integrate it with the flatsome theme which i'm going to show you how to do in the third part of the flatsome theme tutorial but let's go and add the section first so we're going to come in here and what i did notice is that we have a blog post and what i did notice is that we have our footer section right here so we should talk about how to customize this and i think we're going to do that in part three because on this page we don't have that so it's really up to you guys if you want to keep that or not so let's go and add that instagram section right here let's click on add elements and once you come in here let's add a new section and we'll go with the default one so i'm just going to come down here and click apply and once we have our section right here i'm going to go back and what i want to do is just add to this section so it doesn't matter which one i click i can click on the plus button here or the plus button right here i'm going to add a headline so click on the text box and we'll go with the lead paragraph again and just click on apply right here and what i want to do is i'm going to type in something like follow us on instagram so i'm going to open up the text editor and just delete this text right here and type in follow us on instagram if i can spell it correctly instagram and i'm going to change this to heading 2 and just click ok and i can center this right here and i can change the font color i should probably change it to the same color as what we had on the top but i'm just going to wing it because this is just a demo website so i'll do something like that i think that looks pretty good it looks kind of the same so we'll just do that and then we can add a little gap if we want so we'll just come over here again you don't need to add the gap i just like to do this sometimes so we'll just type in 10px and then what we're going to do is we're going to add our instagram feed so click on this and then type in instagram right here and you can see that you have the instagram feed go ahead and click on that and it's really up to you which preset you decide you can select them and then play around with them i'm gonna go with the default option just because that's the one that we're gonna use and we're gonna come back into the section when we integrate our instagram feed so right here is where you can actually type in your name so i can type in nyc tech club right there but nothing is going to show up until we integrate instagram with the flatsome theme so i'm just going to click apply right here we can come back in here and customize this section a little bit later i'm going to click update but pretty much we are done learning how to use the ux builder for the flatsome theme and now what i want to do is move on to part 3 of the flatsome theme tutorial and when i come back we'll probably talk about how to add products and also we'll create some blog posts to fill out this section okay so hopefully i see you in the third part of the flatsome theme tutorial so the first thing that we're going to do in this flatsome theme tutorial is i want to show you guys how to integrate the instagram feed with your flatsome website so if you guys want you can open up the instagram module right here to the settings and you want to make sure that your username is right here and then you can change the settings however you want so if you wanted eight images to show up or 10 whatever you want and then down here in the layout you can change this to a slider or a row and then change the number of columns that you have on each row so we're going to do five so we'll have two rows of five and we'll just see how this looks and we can always come back in here and change it or you can do it on your own so i'm gonna click apply right here and just click update to save that and once you do that what you wanna do is go to your instagram account whether it's on your phone or on your laptop and you want to make sure that you change your account to a business account and once you do that come to facebook because facebook and instagram should be connected and once you come to facebook right here you can see that this is a facebook page for nyc tech club and then over here on the left hand side i want you to scroll down to the settings and click on that and then if you come in here you're going to see a tab called instagram and what you're going to do is click on that and you'll see a button over here to connect your instagram account with facebook and you want to connect those and you can see that i already have mine connected so go ahead and do that and then once you do you're going to come back to your account over here and you want to go into the flatsome advanced tab so click on update to save everything and then we can go back to the wordpress dashboard to connect instagram so let me just close out of this and once you're on the wordpress dashboard all you're going to do is come down to flatsome and then click on the advanced tab and in the advanced options right here you should see the instagram tab and what you're going to do is log in with facebook and once you log in you're going to see this pop-up that says connect instagram business accounts and then go ahead and select your instagram account and click on connect and then what you're going to do is just click save changes right here and this is actually me at wework when i used to work out there but i have my own office now so if you guys don't know what i look like that's who is speaking to you right now and once you have everything saved then the instagram account should be connected to your website so let's go and check out our website page that we have been building so once we come back to the page that we're making if i scroll down you should magically see the instagram feed here and again you can go into the module and customize this some more if you want so you can space it out you can make it full width or anything like that but i just wanted to show you guys how to integrate this because a lot of people have problems with making their instagram feed show up okay so we're going to go back to the top up here and now what we're going to do is i want to show you how to do some additional stuff with the flatsome theme so the next thing that we're going to do in this flatsome theme tutorial is show you how to create a mega menu so you can see when i hover over one of the header items that a mega menu shows up and this is just a larger menu with a bunch of designs images and everything like that instead of just a regular drop down so this is a feature that you get with the flatsome theme so i'm going to go back to the flatsome website right here and to go and create a mega menu we want to go back to the dashboard so i'm going to exit out of this so what you want to do to create a mega menu is on the wordpress dashboard hover over ux blocks and then click on add new and once you come to the add new block this is where you can go to create a mega menu or any other type of block or template so we'll talk about custom templates a little bit later but right now all we want to do is just type in mega menu or any title name and then click on the publish button and once the block is published now what we can do is turn on the ux builder so click on this tab right over here once you're on the ux builder right here what you can do is you can create a mega menu from scratch with different sections and different modules but that's actually kind of complicated and the easiest way to do this is if you click on the flatsome studio remember this is where you have a bunch of pre-designed layouts for the flatsome theme and you have a bunch of pages and different sections and you also have the drop down mega menu option right here so if you click on this you're going to see a bunch of templates right here that are pre-made mega menus and you can preview them if you want just by clicking on this button and then you can find a design that you like and once you do all you have to do is just hover over it and then click on the import button and if you want to import the demo image just select this option you can always replace it once you import it so check out what happens when i click start right here it's going to import this mega menu right here and you're going to see that it's already populated with the modules a bunch of text and images and everything like that and what you can do is just double click into these sections and then customize this however you want and over here you have a bunch of different text links so if you click on these you can open up the text editor and you can change the text and also the links if you want and over here when you hover over these you can see that these are menu links so if i double click on this one i can change the text right here to something else so we can say sweaters and then you can change the icon if you want so maybe we'll go with the heart and then if you wanted to make this a sale label you can put a sale label right there you can link this to a post a category you can type in your your own url right here if you wanted to also so again this is just a hashtag just to make it a static link but you can always update this later and then you can change if you want this link to open up in the same page or a new page and pretty much that's it you can click apply and that's going to save it and if you have images for your mega menu you can just double click in here you can change the image to whatever you want and just remember you can always add elements so you can click here to add elements or you can go into any of these sections and you can add an element too so if we wanted to we can come in here and we can click on the image box right here and then we can just go and add a new image so maybe we want to add this one we'll click use image and you'll see it show up just like this and then you can go in and customize it however you want so what i want you guys to do is go to the flatsome studio and again that is over here in the elements and then you can go and find the mega menu that you like and then just import it into the ux builder and then customize it however you want you can add or delete anything and if you have images that you want to add go ahead and add them and then once you customize it what you can do is click on the update button right here and let me show you how you can add this to your website so we're going to close out of this and once you're back on the wordpress dashboard what you want to do is go to your menus page to add the mega menu so down here if you guys know how to use wordpress just hover over appearance and click on menus and once you're on the menus page you're going to see that i have a demo menu right here and i'm just going to remove the shop link so i'm going to come in here and just remove this and to add your mega menu i'm going to come up to the pages tab over here and select the link that i want to use so again i'm going to add a new shop link and click add to menu and you should see it get added down here and i'm just going to rearrange this really quickly and put it down over here so to add the mega menu you're going to expand this tab for whichever link that you want to be the mega menu and right here where it says flats and menu item options in the ux block drop down if you come in here you're going to see the template or the block that you just created so we have the mega menu and we can select that and now this is going to make this a mega menu but what we want to do is we want to change the design right here because if we don't it's going to be too squished up or collapsed so i like to choose the full width option right here but you can choose any of these other ones if you want to and then for the reveal you can make the mega menu show up when you hover over the link or when you click on it so it's really up to you but that's pretty much all you have to do and then what you want to do is just come up here and click on save menu and once the menu is saved now let's go and check out our web page and once we're back on the flatsome website now if i hover over the shop link you can see that we have our mega menu that we just created and just remember i selected this to be a full width menu so it goes from one side all the way to the other you can change this into a container so that it doesn't go all the way across but that's really up to you and you can do that in the menu page so again all we did was we created a new block and then we came into the flatsome studio and we came down to the mega menus selected that and then we found the template that we wanted to use and then we went in and customize it so this is the easiest way to create a mega menu but if you wanted to you can always just go and create a new block and then go into the ux builder and create it from scratch so let me know if you guys have any questions about the mega menu and if you do i can help you guys out otherwise let's move on to the next section of the flatsome tutorial and now what we're going to do in this flatsome theme tutorial is we're going to show you how to create a newsletter opt-in to collect email addresses and since we're creating an opt-in form we might as well also create a contact form so that we can use the module to insert it into a contact page so let's go back to the flatsome theme website right here and you should already have a contact plugin installed because that was recommended when we set up the flatsome theme so on the dashboard over here you should see contact and what we want to do is we want to create a new contact form so click on add new and once you're on the wordpress dashboard we have a contact form plugin already installed when we set up the flatsome theme so you should be able to hover over the contact tab over here on the left hand side and click on add new and once you come to this page right here all we have to do is create our contact form so i'm going to type in newsletter right here and then over here in the preset we should have the newsletter horizontal so that's the short code that i want so i'm going to highlight and copy this and then come to the form tab click on that and then remove this shortcode and paste in the new code for the newsletter and then just click save right here and once the opt-in form is saved we have our short code right here and what we want to do is highlight and copy this and we're going to paste it into the newsletter opt-in link in just a few seconds but before we do that i do want to note that with this contact form you do have this integration tab so you want to integrate a service like constant contact to save the email addresses when someone signs up for your opt-in form so you can walk through that by clicking on setup integration here and i will have video tutorials that show you how to do that so make sure you subscribe okay so again what we're doing right now is we have our short code highlight and copy this and then go back into the theme settings so hover over flat sum and click on theme options and once you're back on the theme settings we're going to go into the header and at the top over here you can see that we have the newsletter opt-in so it's up here also and what we want to do is just click on the newsletter module and we'll get this section right here and you can customize the label and all that stuff you can customize the text for the pop-up what we really want to do right now is just paste in the short code right here and that's going to connect the opt-in form with the opt-in form that we just created so you can also add a background image if you want and you can change the height i'm going to click publish right here just to save it and now when people click on this link they're going to get this opt-in that they can type in their email address and if you integrated a service like constant contact it'll save that email so that you can email them whenever you want okay so that's how you can integrate an opt-in form for the flatsome theme and i'm gonna close out of this now and we're going to move on and what i want to do now is show you how to create a contact page using the contact module and then also talk about the faq section where you can add an accordion feature so let's go back to the flatsome theme and what i'm going to do is just show you a demo page with the modules so first we want to create a new contact form so i'm going to click on add new under contact again and once you come to this page we're just going to create a new contact form and we don't need to add anything because there is already a contact form created for you so i'm just going to click on save right here and you should see the shortcode right here but i don't think you need to copy this because we're using a flatsome module so what i'm going to do is just show you a demo page that kind of looks like this so we'll go over the map and then the faq and how to insert a contact form so i'm going to go back to my pages and find that contact page so what i just did was opened up a demo website with a contact page right here so let me just talk to you about these different modules so you can see that i have a two row column right here and i inserted the form module so if you guys need to find that you can always go to the elements and type in form and you can see right here it's form contact form 7 and that's this module that you see right here so i'm going to close out of this and just double click on this module so you can see how we actually add this to the page so once i click on it over here where it says select form all you have to do is come in here and choose the contact form that you created on the wordpress dashboard and that's the one that's going to show up and once you do that just click apply and then you are good to go so you can see right here that we have the module and we have the contact form and you can customize the colors and the text in the contact page and also through your theme settings okay so let me know if you guys have any questions about the contact form otherwise let's move on and talk about these other modules that you see on this page so the next thing that i want to talk about is the google maps module that you see right here because i think adding a map if you have a physical location is great for your website and you can do that with the flatsome theme so again this is the map module so you can go and find it in the elements and let me show you how to edit this so you can change the text box right here just by double clicking on that but for the map you can double click into it and over here you can change the height and what i do is i go to google maps and i get the longitude and the latitude and once you add that to these two areas you're going to get a pin that shows up just like this and you can change the zoom and you can change some other settings but that's pretty much it so if you want to change the color of the map you can also do that i believe down here with the style so if i went in here i can change it to a red color or anything like that okay so adding a map is really easy just go to google maps put in your address and then get the longitude and latitude paste that in and then you should be good to go so the next thing i want to talk about really quickly is the faq section so you can add your own faq page or you can add something like this this is just a module that we added with an accordion panel so if i go into this column right here you can see that we have a text box for the title and then the subtitle and then an accordion feature which is a module and when you go in here you have your question and then you have a text box for your answer so if i clicked on this you can see that this is the accordion panel where you can add the title and then you have the text box right here where you can add the answer so what i'm going to do really quickly is just show you how to add a new one so if i have the accordion element here i can add a new accordion panel so you can see that it just shows up down here and i'll just type in demo question and then what we can do is we can go back and once we go back we can open this up and then we can add to this accordion panel right here so i'm going to click on this and all we have to do is add a text box and you can choose whichever one we want we're going to go with the regular paragraph and once we do that we have the demo text right here so i'm not going to change that but you can see down here now when i open this one up we have the dummy text which is going to be your answer okay so again super easy everything should be pretty straightforward let me know if you guys need any help i'm going to just delete this really quickly and just click update just to save everything but that's how you can add an faq section a contact form and a google map to your flatsome website so one of the things i didn't do in the other parts of the flatsome theme tutorial is show you how to create some products for the flatsome website that you're making and even though this isn't a woocommerce tutorial i do want to make sure that you do know how to create products so what i'm going to do is just walk you through how to create one so i'm going to click on this product right here and this is a demo product so there isn't an image right now but what we can do is just walk through how to add these different sections and if you do need some additional help i do have tutorials on how to use woocommerce that will show you how to create different types of products like variable products affiliate products virtual products and everything like that so what we're going to do really quickly is just click on the edit product button and once you come to the edit product page just remember you can always add a new product just by clicking on add product so this is the product title at the top and this is your long description so let me show you on the product page that over here this is the short description and then if you scroll down here this is the long description so just understand that on this page right here that the long description is over here and then at the bottom over here this is the short description and in the middle over here the product data section this is where you can go to create the different types of products that you want so you have a simple product which is a one variable product and then you have variable products over here and what you can do is add attributes and variations for your different products you also have group products and affiliate products and if you want to create a virtual or downloadable product just check these boxes for all of your products you want to put in a price and you want to set the currency in the woocommerce settings so make sure that you do that and then you don't really need to do anything else here it's really up to you for a simple product in the advanced tab you can enable the reviews if you want to and then just come down on the right hand side and this is where you add your featured image and then some additional images if you want over here and then if you want to add some product tags and some categories you can do that right here and just remember that up here this is where you add the featured product so you'll come in here and just select this box if you want to create this as a featured product and then that's going to make it show up wherever you have that module that selects to make featured products show up and pretty much that's it you can click update and then you have your product so again this isn't a woocommerce tutorial so i don't want to go into too much detail about how to create products but just remember that you have a long description section and you also have a short description section over here okay so what we're going to do right now is we're going to move on and really wrap up this flatsome theme tutorial so the next things that we're going to cover in the flatsome theme tutorial are the footer product category pages and then some shortcode stuff and then i think that's it so really quickly let me talk about the footer section so just remember if you want to customize the footer one or footer two you want to come into the widgets page and over here you have two tabs for footer one and then also for the two so you can add whatever widgets that you want and then what you want to do is go into the flat some theme options so just hover over flatsome click on theme options and you're going to come to this page right here and then you have the footer tab right here and this is where you can go to enable footer one and also footer two and you can change the number of columns that you want so if i just scroll down on this page right here you can see that we have footer two enabled and then we have the absolute footer down here so if you want to change these colors you have the background colors and then you can change the absolute footer text over here and if you want to change the footer menu right here what you want to do is go into the menus page so let me just show you really quickly once we're back on the wordpress dashboard we want to come down to menus click on that and you want to come in and select the footer and i already have one made because this is a demo website so it's just using the demo footer and then down here you want to select that the menu is for the footer menu and then that's going to show up in the footer section and you can also create a separate menu for the top bar if you want okay so that's just a quick little lesson on the footer section so that you can really customize your website so really quickly now what i want to do is i want to move on and talk about product category pages so the last thing that i want to cover in this video tutorial is just talking about product categories and how you can change the grid layout so what i'm doing right now is i'm on my pages tab and i'm using a demo page called the product categories and this was created by the flatsome developers so what i want to do is just go and edit the ux builder just to open up the flats on page builder and show you that this page is for all of your different category options so you can see that there's a simple layout a badge layout overlay and then you have this grid style down here so if i clicked on the product categories tab right here you can see that we have a certain layout and if i open this up inside the product categories when you're in the grid layout you have a bunch of different layout options so you can select whichever one that you want and you can see that we have placeholder images right here and when you change the layout you can see that it updates to show you the new layout option so i'm just going to choose a few of these just to show you that whenever you use this module you can actually come in here and customize the layout to choose whatever type of layout that you want for a shop page a product page a category page or any other page so just keep this in mind if you want to customize your product pages okay so i just wanted to show you this because this is a useful tool for people that want to customize their shop pages so pretty much that's all we're going to cover with product categories and grid layouts but let me know if you guys have any questions whatsoever on how to use the flatsome theme so pretty much we have just learned how to use the flatsome theme in the three-part series and i hope you enjoyed this video and just remember you can customize your website however you want using the modules and the ux builder and you also have the flatsome studio that allows you to import any type of pre-made template so you can create a website layout like any of these ones that you see right here so if you guys have any questions whatsoever let me know and i would love to help you guys out and just make sure to subscribe to the nyc tech club youtube channel because we're always coming out with new videos just like this and if you need any help with the flatsome theme let me know in the comment section below and i'll get back to you as soon as i can thanks for watching and i'll see you in the next video and there you have it you have just completed this video tutorial on learning how to use the flatsome theme i hope you guys enjoyed it hopefully you learned a lot and if you haven't built anything yet and you need some help building a website we do have tutorials on building ecommerce websites using the flatsome theme so i'll link you to them in the video description uh make sure to like the video if you guys liked it leave a comment if you need help or you just want to say hi and also subscribe to the nyc tech club youtube channel and just know that i appreciate you guys without you guys it would just be me my camera in my living room and i enjoy teaching i hope you guys enjoy learning and if there's anything i can do for you guys let me know in the comment section below thanks for watching and hopefully i see you in the next video

Channel: NYC TECH CLUB

Views: 39,790

Keywords: flatsome tutorial, flatsome theme tutorial, how to use flatsome, how to use flatsome theme, flatsome for beginners, flatsome

Id: FVv7Vv_G50A

Length: 106min 43sec (6403 seconds)

Published: Tue Feb 02 2021