How to Create One Page WordPress Site with Visual Composer – 2016

Hello and welcome in this video I’m going to show you exactly how to make neat looking one-page website in WordPress using WordPress default in 2016 and a visual composer plugin as you can see here I already made an example of the website that we’re going to build so this is a very neat looking web website with different sections neat little icons that are added right here then we have another section which is called our portfolio and we have some milestones rich here this is actually a page wide slider where you can spread a message about your company and the work that you’ve achieved so far and then the final section of this one page website will be a contact form that people can fill out to send you an email and in the bottom we have some social links and then this neat little button to scroll to the top and if you click the menu buttons the page will automatically slide to the relevant section of your website so although this looks very professional already way better than most of the websites that are on the Internet and the cool thing is that you can build this website in under one hour and you basically need to have no technical knowledge or you don’t need to write a single line of code so this is as easy as it’s going to get you also don’t need to purchase a premium team all you need to pick up our two plugins but I will talk about that more in the future ok so stay tuned so for this tutorial I’m actually going to install this WordPress myself on a localhost but all the steps that I take here will also work on a hosted website the reason I do this with the local host is because it’s a little bit slower faster at me so I wanted to keep this video as short as possible so if you see my website here on top of coop you see what you need for this tutorial is a hosting account child team which you can download this is for subscribers of my website only so you will need to fill out your email address and then you will see and then you need a visual composer tool and the ultimate Adam for visual composer so I will put a link to this page in the description and then you can find out more information so what I have here is a clean installation of WordPress and as you can see I have all the different elements that we will need later for this website already have it here okay so let’s get started so the first thing that we want to do is we want to install the 2016 shouting so this is a child team that I have customized myself and it will fit perfectly with the tutorial so once you have uploaded the child team you can activate it and then you’re good to go so now we’re going to install a couple of plugins first we’re going to clean up here so we’re going to delete these plugins and now we can add a new plugin and here we can search in a WordPress repository and then the first one is contact form 7 so you can download and install this package and then activate the plug-in okay so then we click add new and then we will add another player this plugin is called dynamic to top this was the little arrow that lets you scroll automatically to the top of the page so we can also activate this plugin and then we’re going to add another plug-in and ditch plug-in is page scroll to ID which lets us scroll to different sections in our web page when we click one of the menu items so you’re also going to install this one and then activate now for the last two plugins this is the visual composer page builder and the ultimate add-on these we need to upload because they come from code Canyon so you need to download them yourself from code Canyon and then you need to upload them to your WordPress installation and then you can activate them okay so here it says physio composure now we’re going to add the ultimate add-on and then we also activate this blocking and then that’s finished so now we are all set to go now the next step is what we want to do is we want to clean up this simple page and we want to add a homepage you we can click over this message and then home and then we publish so no need to worry about the content now we just want to upload home page now we go to settings into general and then we remove the tagline in here the other settings will leave the way they are and then we’re going to save the changes so now we’re going to go to reading and then front page displays a static post and then home page and then save the next step is we have to clean some pre-installed widgets so as you can see the sidebar is full of widgets so we’re going to select every widget and we’re going to delete it so the entire sidebar is empty because this will automatically load the page wide the full width page sorry okay now once we have done that we can make a menu the menu name will be healthier menu then we create this menu we add the home to this matting and then we add custom links and we’ll be – about Anna link text about then the second one will be – services and then the link text services that we add then the URL for the third one is there’s portfolio portfolio and for the last one will be contact and then add to menu then make sure that on team locations you select primary menu and then save this menu if we go to visit our website as it looks right now you can see that we already created the neat-looking manually so that’s perfect and the page the rest of the page is empty so that’s good so now what we need to do is now we need to start adding our homepage so what we will start is by adding an element so here you can see all the different elements as facial composer calls them that you can add to this page builder but we want to start by adding a row then we click the little pen for the row settings and then row stretch stretch row and content no pettings and then for them design options we need to select an image here so this is the images that we download from the content from the picture pack that you can also download on Tropico up so we’re going to add these to our media library and of course your free to use your own images but these images already have I already reshaped them I resize them and I also made sure that they’re small enough to load fast okay so we can set this is the background image and then we can move on so what we want to do is we want to start by adding an empty space find the empty space element set it to 250 and then add then the second thing is we want to add a custom heading and the text of this custom heading will be pure awesomeness then we scroll down this element tech we set it to h1 text align set in the center search need in the center and here we can set the font size which will be 45 and the text color FF f which means is white basically and then font family we will choose lobster man from Styles okay then we add another custom heading and this one will be called encoded and unique design then the element tech age to believe it we Center it and then the font will be and then this text color will also be and then this font family will be Roboto so once we’ve finished that we can click Save Changes then the last element of this first section of the homepage will be an icon so we will add an icon and we will use the font awesome library then we click here and we search for arrow and now we search the arrow that we want to add and then first I want to change the color I want to have it white so it’s consistent with the other headings and then size large and in the center and then the URL will be – about so when people click it they will automatically go to the About section and I want to have some CSS to have it appear from Center and then I can click Save Changes and then we are finished with the first section of our homepage so you can see that was very easy to do that so quickly and if we now go to our website the way it looks now you can already see that we already have the first part of the website and it’s starting to look really good now so what we want to do now is we want to go to the sidebar menu and then we go to ultimate Google Fonts first we need to install google fonts here and then I want to add the font or layout script so I’m going to find it in the list editor the collection and then click update font now we can go back to the homepage so what we will do now is now we will add another row and we will use all the default settings for this row but we need to go to the row settings anyway for the row ID and the row ID will be about so this about here the row ID relates to the – about that we have set in the custom manual so now what we now want to do is we want to add a custom heading and the text will be about us and then this has to be in the center the font size has to be 34 the text color is 4 F 4 F 4 F and then the font-family will be a lay-oh script and the rest is standard and this will be the custom heading that we will use also for other sections within this one-page website so we will add a separator here which is a little line we want to have this the same color as the custom heading then we want to have a dash style and a border width of 3px so three pixels in the resistant and then we want to give a little subtext here so we’re going to add another custom heading and I’m going to go to the instructions on my page because here I already have the text so we can easily copy it and put it right in here in a custom heading settings so this text also has to be aligned in the center and then the phone sighs we have to set to 24 text color will be default so we don’t have to change anything here and then a font family we also set this to about because we don’t want to have too many different font types in our website because that makes the whole piece not seem as coherent and consistent so now we add another empty space which will be 20 pixels and then that’s that so now we want to do is we want to add another row so we have a row in a row which is really great for this if we want to have two different columns so to the left column we’re going to add an empty space first and this one will also be of 20px and then we’re going to add a textblock right here and then I’m going to go back to my own website here and I’m going to copy this text block and I’m going to put it right here and actually this is bulb but we don’t want it’s always change that could be check here okay here is not bold so we’re good to go okay so now to the right column we want to add an element that is called and info list so I cannot find it as quickly so we can actually use the search function right here and there you go info list is right there so this is the info list element so we can change all the settings right here and all the settings look okay and for the icon color this color we will set it to for f4f also and then the connector we set it to white so you don’t see it okay and then we can add an enforced to this item now the first one will be of the title simple and clean design and then we can find a suitable icon and we use this little checkmark here okay so that’s perfect so now we can scroll down and then we can add a short description here in the short description here is very clean and minimal design for your WordPress site putting the focus on your brand ok that’s it and then Save Changes and then we can copy this info list so we have all the default settings already and we only need to change the text so the second one will call the title no technical skills required and then in the description below we will put another description that says absolutely no technical experience is required to set up your own website just follow the steps from the tutorial and you’re good to go okay i misspelled website there but luckily have grammerly installed so always easy to catch these typos and then Save Changes so then we need to change the last list item and this title will be drag-and-drop and then for description will be simply drag-and-drop elements that you wish to add to your website no need to write a single line of code and I wrote website wrong again okay and Save Changes okay so that’s that for the about page so now what we want to do is we want to add another row so as you can see it’s really easy so we will add another row here and the name of this row this row settings the row stretch we will do it stretch row and then we have to insert a row idea here which will be services and then for background we will set a background to a single color and then the single color will be three 3b 17a which is a kind of greenish color so that’s perfect and I copy this code because we will need it later on so first thing that I want to do is I want to start off with some empty space so I’m going to end at some empty space of 5 pixels here and then I’m going to do custom heading again but actually it is easier if I just copy a previous custom head because then I have all the font font settings I already have it automatically and I only need to change the text to our services and I have to change the color of this text because we made the background green so the black won’t the gray is black bone show us nice so we change it to white okay so that’s that now what we want to do is we want to add another row here and this row has three columns so in the first column we want to add an icon and the icon will be from the font awesome library which by the way is also really awesome yeah and then for icon I want to add a rocket and then I want this rocket to be the same color as the background so I choose custom color and then I copied the hex code that I copied earlier I will copy it right here and then for the background shape I need some sort of background otherwise of course you cannot see it so I will choose a circle and then the background white so that makes it very clean and then the size I want it to be extra large and then the icons should be aligned in the center and that’s it about the options and so now what we want to do is we want to add a textblock and in this text block I’m first going to do a title first have to toggle the toolbar and then heading to and then the title will be lightning fast and then I put here your new website is lightning fast and others text you can also find it on the instruction page or put your own website your own text here I want to Center this text and then make it white so it also stand off good against the greenish background okay so what we need to do now is now I will copy this icon two times and then help also try to yes there you go put it in the different columns and then I can do the same for the textbook yes there you go and there you go so now the only thing I need to do is I need to change the icon itself and the text in the text block because all the other settings are already correct there so the second icon will be a chart so I’m going to save the changes and then if I switch to the text editor it’s because the text is white otherwise of course you won’t see it but if I change it to the text editor I can see the HTML so it’s easier to edit so I change the head into a future growth and then the text we will change it you okay and then we can save and then we will do the third icon so the third icon will be money so I want to have a little dollar bill there and then I’m going to change the text block so switch to the text and change the heading and then add the little text here and then there you go so now I want to add some empty space here because if I would immediately enter a second layer of icons then maybe there would be on different heights because some Texas is longer than others so I put the empty line there to sort of even everything out okay so then I add another column with free another row with free columns and then I’m also going to copy this one in oh oops yeah so sometimes it’s a little bit tricky to do it in a proper way but yeah there you go and then I’m also going to copy this two times and then also already put it here and yes there you go the space is a little bit limited sometimes it’s a little bit complicated to get it right but other than that it’s very easy to use this drag-and-drop page builder okay so we do the same with the text block and now what we have to do is we have to change the icons so the first one will be desktop and then we have to change the text so we do this basically the same as the previous one you and then change the text also you you and now we do the same tool the next icon this one we will change it to a paintbrush and then we also change the text block you and of course you can change these to any type of text that you may wish you and then the last one and then change the textbook as well you Oh you and then add the plastics and this is true okay and then there you go and I want to close it off by adding some empty space of ten pixels and then that’s that now the next step is I first want to see what it looks like and as you can see that already looks really neat but yeah but I noticed there was something wrong with the image so if you set a background like this you should always set it to cover because otherwise like we saw it repeats itself so so we fix that now we will do the next section of this website so the next section of this website we set it to stretch row and then row ID will be portfolio and then that’s it you and we will copy custom heading so this one is similar in style and color so from about so we will copy it and drag it down to the correct row and then we will change it because this of course is our portfolio yeah and what we want to do then is also add a separator so this will be a custom color so it corresponds with the heading so also dashed and three pixels and we set this to 50% because this will be a full width row and if we set it to 100% it will be too white this separator so it looks a little bit out of shape compared to other things so here we will add some subtext see some of our work below and this also has to be centered 24 pixels as font-size text color will be default and then Roboto and then that’s it now what we will do is a unique feature of the ultimate add-ons we will add an element called advanced carousel settings so we will set it slider type horizontal one at a time and then items to show one on every different type of device so then the next step that we want to edit is the navigation so we will all use these default settings but we don’t want to have the dots because we will have really slim headers images here and then the dots will be 2d to bacon a distraction so once we have that we can add any type of element in this offense carousel so the first we will add an info banner the title awareness and then description embrace your environment and every day full of new opportunities okay that’s that then information should be in the center so that’s correct okay then we set a banner image so this will be portfolio one we already uploaded them and we set them in the center you and then we set the minimum high to 350 because that’s the height of the pixels of the images that I use then for typography we use a layer script and then for a title I want to have it bold and then font size I want to have the 30 pixels and then thought font color should be white and then for description I also want to use a Lego script for this one and then this one italic and then the front sighs I want it to be 26 pixels and then the font color also wide for this one and then button we don’t have a button so we can just save this setting now I see yeah I made a typo awareness okay so now we can copy this two times because we have three slides in total so we can just only edit the title the description and the image so this title we spread the love and then the description is build communities of value and together we triumph okay and then we have to delete this image and then choose the second image and then save the settings and then we do the same thing for the third banner so this title will be give back and we also change the description of this one and then also delete this image and then select the third image and then we’re ready to go you so now we will add another row and this row will consist of six different columns so I’m into ignore the first column but I will start with the second column on the left and then I’m going to add an element called counter so I can select an icon here and then I can choose the size of the icon here but I’m going to keep it like that the color I will also leave it like this at the moment hi composition at the top and then I have to add a counter title and then a counter value so I’m just going to put happy customers and then 500 here and this will all be default settings the default typography settings so the font we’ll be 18 and this will be 28 and then save settings so now I’m going to update the page and see how this looks so this looks good Oh looks okay but I see I made a mistake here I miss it should be full width so the counter looks ok but I see that I forgot something here so I’m very sorry about that but we have to go back to the row settings here and then we have to stretch the row and content so no pettings and then I notice that there was also an extra white space here so we should delete the space between two items and then it should be good to go so I’m going to quickly use the preview function to make sure it’s correct now and as you can see that perfect that looks very good yeah you so I do think that the space is a little bit too limited so I want to add an empty space here also to give it to give this custom heading a little bit more room to breathe so I’m going to set this to 5 pixels and then we’re good to go you okay so now we can continue so now we can add another counter here and there are this and this counter will be a heart and yet there you go and then this our default counter title and then successful projects you and then countervalue 1250 and this already is the correct sizes so for the phone so what I did in the in the first counter actually I didn’t have to do it because that was double so I changed this icon here because I don’t want to have the hard double so then for the next icon I want to have a flag here this is sort of like a mouse tone I want to share so I use all the default settings and then the counter title will be audience reached and then I set this to 5000 and then the last counter that we will add is I want something like a map yeah or a map marker it’s also perfect and then the counter title will be country’s active in actually this also can be something else but I will just keep it like this just for the sake of the example now we can preview this and now we can see this looks very good already so we got a little slider here yeah that looks perfect so now we’ll move on to the fifth row fifth and final row so this one will be default settings and we stretch this row because it will also have a background color and the row ID will be contact and then for background we set it to a single color and then the code for this background will be e8 e8 e8 yeah there you go and then that’s finished and then I want to start by adding an empty space of five pixels here so I will copy this custom heading and then I will change it to contact us I’ll leave the color for this one on the type of light gray that I’ve chosen for the background this should still work out just fine so now I’m going to add a separator with the standard custom heading color the border we change it to dashed and then the border width should be changed to three pixels and then we can save these changes okay so we will save the page this is very important because we need to do something another part within our WordPress content manager so I have to wait until this page to load okay so I go to content contact in the left menu and then I have a default contact form so here you can see all the different items so make sure here you have the right email address in here you can change all the settings of your contact form so and here the automatic return messages that you get okay so I will use the default one but you can also edit your own be sure to save it because you will need it later on because we will also recall the contact form directly from our visual composer so we scroll down again and then we add an element and then we have here contact form seven so contact form one that’s the only one I have and then we are going to edit at this one and then we can update this page and now we can view a page to make sure that all the different sections of this page are indeed correct so I’m quickly going to have a look here and that all looks perfect very clean very professional and I’m looking at the timer we are a little bit over 45 minutes in this video now so I think we did pretty good so far so I’m going to go to settings page scroll to ID and then I’m going to copy this link attribute and then offset I’m going to set the offset to 30 pixels and then I’m going to save the changes right here so this link attribute is very important so we will go back to our menu and then in screen options we make sure that we tick this box for link relationship and then we can open the custom menus and then we will copy the link relationship that we copied we can copy it right here and then you can see we have this little – and this – services or portfolio actually relates to the row ID of the different sections that we defined earlier in the official composer so that is how the plug-in and and also the browser in the future is able to recognize – which section we should be going so now I’m going to quickly show you how you can make a social menu so I’m going to use custom links so this is just an example but of course you can add your own custom links actually the link text is not important it mainly focuses on the URL so in this example I add Facebook for example and then if the theme notices that it’s a Facebook or a Twitter or an Instagram URL it will automatically later show you the icon that corresponds with this social media so this also works for plus for example so again the link text is not important it’s only for yourself to see but be sure to tick this box social links menu and then click to save the menu okay so that’s that so the last thing that I want to change is the two top plug in so I change it to the bottom right and then here I’m going to use a custom color now I should not forget to put the dash in front of this Oh close you and there you go and then we can save the changes so now we go back to the side and as you can see we have successfully created the one-page website our little icon works we can click all the different menu sections and everything works splendid so I hope you liked this tutorial be sure to subscribe to Tropico up for future newsletters be sure to subscribe to my channel on YouTube and like my video so other people that are interested in this can also see this thank you for watching let me know if you have any questions in and/or comments and your awesome and thank you for watching and good luck with your own online websites ok bye bye

As found on Youtube

(Visited 2 times, 1 visits today)

About The Author

You Might Be Interested In