Build A Website In 15 Minutes with Oxygen’s

1

in this blog I’m going to show you how to build a complete website with oxygen so if you’ve never used oxygen before I highly recommend watching this video to get up to speed on oxygen we’re gonna focus on building in this video not on designing so that’ll keep it quick you’ll learn how to create a header and footer that applies to all pages of your site we’ll go ahead and create a few pages we’ll set one of the pages as your site’s homepage we’ll create a menu we’ll put it in your header we’ll swap in your logo into your header and then we’ll set up a contact form so by following along with this video you’ll get a great idea of how oxygen works and where everything is okay let’s get started so when you first activate the oxygen plugin you’re gonna see this screen choose an installation type you can install a premade website if you want but for this video I’m going to choose a blank installation and then we’re gonna build

2

everything out ourselves so I’ll choose blank installed and if now it’s time to start using oxygen so the first thing I’m going to do is create a template with a header and footer so we’re gonna go oxygen templates add new template and I will just call this template main this template is going to apply to all pages of our website so I’ll click publish and then to apply it to all pages of our site I’ll go over to where does this template apply other catch-all now the template will apply to all pages of the site let’s update and now we will edit with oxygen so now let’s go ahead and add a header to our site so this video isn’t going to focus on design if you want to design it yourself you can build it out using all these elements in

 

3

oxygen but I’m gonna go ahead and just choose a header from the library so to get to the library I go add library design sets I’m going to use atomic but you can use any design set they all have headers sections and elements and then we go to headers and I will choose a header from here simply by clicking on it okay so here is my header and you notice this comes in with some social icons an example menu which we can add an email address call-to-action button so to fill in your own content here for example social icons you click the social icons and then you can specify the URLs to your social profiles here edit your phone number you just double click edit the text etc okay now that we have added a header let’s go ahead and add an inner content area inner content is going to

4

be the area of this template that is editable on all pages so we’ll be able to have different content between our header on our footer depending on the page the user is viewing so let’s go ahead and click Add go back to basics and then scroll to the bottom of basics and add an inner content element this inner content element is going to be replaced with the WordPress or oxygen design content for the post you are editing now that we’ve added an inner content element let’s add in a footer so we’ll choose from the library so add library design sets atomic sections and elements footers and let’s choose a simple footer okay now we have created our template let’s save this and then create a page so to go back to WordPress

5

after saving click back to WP and we’ll go back to the admin panel so click admin now let’s add a page to our site to do that go to pages add new and this is going to be my home page so I’ll call it home publish and now to edit with oxygen click edit with oxygen now let’s add some elements to our homepage so again I’m not going to design this myself you could if you want using the elements in oxygen but I’m gonna add some pre-built elements from the library so I’ll go to library design sets atomic sections and elements and let’s add in a hero section and some icon blocks he’s some side-by-side images and at the bottom let’s put in

6

some social proof testimonials let’s say and a call to action ok now we have created our home page let’s save this and take a look on the front Det beautiful so now we have our header and footer coming from our template and we’ve designed our home page let’s create another page we’ll call this for example about us new page about us publish and edit with oxygen okay let’s create this page just like we created the home page so go add library

7

design sets atomic sections and elements and on our about page we probably want some info about our company so let’s put in crowd with call to action let’s put in personal hero with one person and we want this on the top so to get this on the top we’ll just click and drag it to the top alright that is now in the order we want let’s add in some more information it’s add in some icons okay and here is our about page to edit the text on the page where you just click the text and type to edit it to adjust spacing simply

8

mouse over the edge of elements on the page once they’re active and drag to adjust spacing so to activate an element just click it and then drag on the edge to space it out and there are more videos that will explain how to actually design things with oxygen I just want to give you a really quick overview of this stuff okay let’s save this page and take a look on the front end okay great here is our about page now let’s go ahead and add in one more page we’ll call this one product tour edit with oxygen and for this product for page let’s go back to library design sets atomic and

9

let’s add in this hero section and then go to content and add in some statistics and content with the image and at the bottom a call to action okay excellent now we have designed three pages with oxygen now let’s go ahead and set our home page to be the home page of our site so right now if we go to pages home and view it it’s gonna show up it’s slash home but we don’t want that we just want it to show up here on the actual home page so to do that we’ll go to settings reading your home page displays a static

10

page home alright Save Changes and now when we go to the home page it’ll show as front page and when we view it it’s no longer slash home it really is the site’s home page okay now that we’ve created three pages let’s add these pages to a menu and embed that menu in our header so to do that go back to the wordpress admin panel go to appearance menus will create a new menu so I’ll call this my top menu create menu and now let’s add our pages to the menu so at home about us and product tour to the menu and then click Add to menu let’s drag these to reorder them we want home to show up first product or a second about us third save menu now that menus been saved now let’s go to oxygen

11

templates let’s go to our main template click Edit with all oxygen and now we will embed our menu in the header so it’s automatically detected our menu because it’s the only menu on the site however if we had multiple menus on the site we would click the menu and then on the menu drop-down on the left we would choose the menu since there’s only one menu on our site we don’t need to do that it automatically detects the menu great now our menus embedded now let’s swap out the logo in our header for a real logo so to do that simply click the logo image and then click browse to find another logo in the media library if you’ve already uploaded your logo to the media library it’ll show up in the media library otherwise you can click select files to upload a logo I will upload the sofly logo click select image and now

12

the logo is embedded you can adjust the height of the logo with etc by simply clicking the logo and then clicking in height and you can adjust the size so I’ll make that 36 pixels tall great now our logo is embedded in the header as well as our menu let’s save this and take a look on the front to end it so now we have a homepage product to our page and an about page now let’s set up a contact page with a contact form so the first thing I’m going to do is install a contact forms plugin so to do that go to plugins add new and let’s search for contact form and give many options for contact forms I’m going to go with contact form 7 so click install now activate and then we’ll go over to

13

contact and there’s one contact form the contact form 7 is already created for us and we get this shortcode the shortcode is how we embed the contact form in our page so click the shortcode and then copy the shortcode you have copied the shortcode now let’s go to pages add new contact edit with oxygen and let’s go to add library design sets atomic sections and elements and let’s find a good layout for our contact page okay here we go now we’re going to put the contact form right here so to do that first I’m going to delete

14

the icon the text we don’t need that and then I’m going to add a shortcode so to do that click Add go back to at home go to WordPress and then click shortcode now in full shortcode paste in the contact form shortcode so I’ve already copied it I’ll paste that in and that will display our contact form created in contact form 7 ok let’s save the page and take a look on the front and great now we have a contact page let’s now add a link to the contact page in our header set up our footer with all the links on our site and then we are Donna so to do that let’s go to the admin panel oxygen templates go to the main template edit

15

with oxygen and let’s make this free trial’ link actually link to our Contact Us page so let’s change the link text to contact us so just double click and type in contact us and then to set the link URL over here in the URL field for the link on the left side click set and choose the contact page from the list add link this will now link to the contact page now let’s adjust our footer with the contact link as well so here’s the contact us link let’s click it let’s set the URL again we click the link we click set we choose the contact page add link and this will now link to the contact page let’s save and take a look on the front end okay that is how to build a website with oxygen here is our product

Leave a Comment