Video Tutorial: Building a Page in WordPress with the Avia Layout Builder in Enfold
This video tutorial shows you how to make a rad looking pages in WordPress with columns, images, text, and all sorts of cool bells and whistles. But these features are not all built into WordPress itself. Most of what we show in this video is coming from the Enfold WordPress theme, which you can buy for $59 on Themeforest.net. We use the Enfold on every website design as the framework for our custom child themes. Enfold has so many amazing features that we can limit the need for other plugins. The Avia Layout Builder is incredibly easy to use for us and our clients. Frankly we’re obsessed. $59 may seem like a big investment, but trust us. This could be the last WordPress theme you will ever buy.
Learn why WordPress is the best website platform.
Building a Page in WordPress
Video transcription:
Now that we have our images ready, it’s time to begin building the home page. In this step you will see how the enfold theme will blow you away with the amazing number of possibilities, and you’ll also see why it’s definitely worth the extra money. To add a new page, however over pages and click Add New. You’ll notice that the screen looks a lot like when we were building a blog post earlier. It’s got the same visual editor and mostly the same options on the right sidebar. The thing that makes Enfold the most amazing theme we’ve ever worked with, is this advanced layout editor. I’m going to click on this, and now you’ll see the options in this Avia layout builder that are only options with this Enfold theme. You would not see this if you had a different theme. So much like our post, we’re going to add a title to the page.
This is our home page so that’s what I’m going to call it. Then let’s take a look at the Avia layout builder and some of the things that you’ll be using. In the layout elements tab, you’ll see various column sizes that you can use. The color section is the one we’re going to be using the most on the home page and you’ll see what that does later. Under content elements, you’ll see a variety of options here. The one that we’lll be using the most is this text block, but you wanna play around with a lot of these different options to see what they do. There is an amazing number of things you can do with no coding and just basic customization. In the media elements tab we’re going to be using the image and the easy slider on the home page. You may be using some of these other elements on different inside pages. So let’s get started building.
All of these elements are drag-n-drop, so the first thing I’m going to do is minimize my screen a little bit and bring up the home page mockup that I had designed earlier, and just get that so I can see them side by side. So, the first thing I want have on my homepage is a big slide show. For all of the homepage sections were going to start with this colored section I’m going to drag and drop it into the editor. Now the colored section gives a lot of flexibility with the background so that’s why we always want to start with a colored section. Now we’re going to go to the media elements and grab the easy slider. You’ll notice any time you’re using one of these Avia layout builder blocks, when you’re not hovering over it you don’t see the options, but when you hover over it you can see this edit option and the clone element. The clone element will be handy when we create the columns below. For now I’m going to click on it “edit element.” All of the Avia layout builder options have customization available once you click to edit them. They will all look slightly different, but if you just read the instructions on the right, or hover over things that you’re not sure what they do, you should be able to figure it out because it’s all very intuitive. For now I’m going to click on “add multiple images,” and this takes us into our media library where in the last video we prepared the images for the slide show. So, I’m just going to control click on all of these, so all three of them you’ll notice have a check mark here, and insert images now. Under the slideshow image size there are a bunch of different options I’m going to leave it at the featured image size for now. If you decide to change any of these things later you can always do so. Slideshow transition, I’m going to have the pictures fade in and out and auto rotation I want, yes, I want it to automatically start going through the slideshow when the user gets on the page. This option if you wanted to stop the last slide you can check that; I’m going to leave it so it continually rotates. The slideshow duration, five seconds is fine. If you have text or something that people need to read you might want it longer than that. Then the slideshow control styling, I’ll leave it at default, but if you want to hide the controls so the user can’t advance through the slideshow you can do that here. If you want captions you can check this box, I’m going to click save.
Now the nice thing about the colored sections is that when you click on this edit button, you can customize your website design with a lot of different things. You can use a background image, a background video or just a background color. There are some other options for size and padding; I’m going to leave all of these as the default, except for under this section, top borders styling I’m going to click display a small styling shadow at the top of this section. Now click on the tab up here, “section background,” and it will automatically give you some options from our previous Enfold theme color sections, but I want to do something more specific. I’ve got my swatches here open, I want it to be a light gray background, so I’m just going to copy and paste my hex code in here, and click off of that, and you’ll see here this is where you could do a background image or even a background video, but for now we’re going to leave that plain. Click save.
Let’s take a look at our wire frame again; the next thing I want is a welcome text, so again I’m going to go under layout elements in grab another colored section and this colored section I’d like to make light olive green. So I’m going to copy and paste that, click on section background and paste it into the select color area and click Save. And now I’m going to go into the content elements and drag and drop a text block. The dragging and dropping can be a little bit tricky but if you misplace something you can always drag it into a new position later just by clicking on it and dragging. I’m going to click edit, and I’ve prepared some text from my home page here so I’m going to just copy this and delete the sample text and paste this text in here. I’m going to highlight this all and make it into a heading 3; I just want it to be a little bit bigger and easier to read, and I think I’m going to want this centered, so I’m just going to highlight it and click align center. If we want to change the text size you can do that here, for now I’m going to leave it and see what it looks like. If you want to change the text color, you can do that here as well; and note that when you’re using any of the WordPress visual editors, what you’re seeing here is not necessarily what you’re going to see on the front. So you always need to save things and then look at it on the front end.
I’m going to scroll down just a little bit and then take a look at my mock up; now it’s time for these three columns, so I’m going to put everything in, again, a colored section; and this time I’m going to use section background image. By clicking on section background, insert image; and I’m gonna grab the blurry garden picture that I had made earlier. This is an important step over here, automatically just showing the last size that I inserted, so I’m going to choose full-size, which is the 2000 pixels wide one. This is because I want it to fill up the whole screen. I’m going to click Insert, and there are some other options in here, most of them I’m going to leave as default, but I am going to center this in the top in case someone is using a really big monitor, at least the background picture will be centered behind the text. I’m going to leave this on “no repeat.” If you had a repeating pattern you could do repeat all, or horizontal and vertical. I don’t usually recommend stretching to fit because that might distort the quality of the picture. In the case of this, it’s a blurry picture so the quality isn’t important, but typically you’re going to not want to choose that. I’m going to click Save.
Ok, now the colored section is ready. We’re gonna grab third columns and use those for our column structures. Typically if you’re doing columns it’s easier to build one out and then clone the next one. so I’m going to go ahead and click on content elements in grab a text block, drag it down into my third column and then I also need an image block. So, scrolling up under media elements, grab an image and drag it down here above the text block. Click on that once and now I’m going to insert the image; so this one’s gonna be my vegetable garden column. So I’ve got the picture loaded in here; now over here under the size you have lots of different options. For this one I’m going to choose a square. WordPress automatically is gonna crop a square out of the picture I uploaded and then I want the image center aligned, and this is a really cool feature of Enfold; you can actually choose some animation for pictures which users will really enjoy. We’ll try left to right and image styling, this is another really cool thing, I might actually use the circle and you will see what that looks like when we preview it on the front end. For the hover effect I’m gonna click no, but you can have a slightly different hover effect on an image if you want to; It just add another layer of animation, and I’m gonna click save.
Now at this time I’ve done quite a bit of work so I want to save a draft. WordPress does automatically save for you every few minutes, so if you forget to save it does have your back and you can go to a past revision if you mess something up. But, for now I’m going to click save draft and then preview. Wow, you can already tell we’re making some major progress on our homepage! Let’s expand this and take a look at what we’ve got. So you can see here we’ve got a giant slide show which looks beautiful because we have some really nice high quality images that were using, and when you hover over it you can see these are the controls that we were talking about. You could hide those if you would prefer.
Scrolling down we’ve got some nice text here on a light green background. I really like that looks; and then this is really exciting, we’ve got this image here in the background and you can see that Enfold has made this into a circle and the only problem I’m seeing here is you can’t really read that text, so we’re going to take care of that. Down here you’ll notice there’s some blank white space and our sidebar; so we’re gonna want to take care of that. And another thing I want to do is actually get rid of the page title and breadcrumbs on the homepage. We’ll want to have those on almost all the other pages but for the home page it’s very obvious that we’re on the home page. So let’s take care of that by scrolling down here under sidebar settings, I’m going to say no sidebar and under title bar settings I’m going to say hide both. I’m going to save draft and go over here and refresh my page. Ok you can see that now we’ve removed that title bar and we’ve gotten rid of all of that white space at the bottom so it’s looking really good. Back over here I’m going to add a couple little tweaks to these sections, so I’m just going to click edit and then under border styling I’m going to click “Display a small styling shadow” at the top of the section and I’m going to click “Display a small arrow” that points down to the next section down here, and you’ll see what that looks like. I’m going to add my text that I have prepared under the column. I’m going to copy and delete that and paste in the text. I’m going to make this into a heading 3. I think I want all of that text centered and let’s go ahead and save this and to take a look at what it looks like now that we’ve made some of those changes. Refresh the page.
Ok, this is looking cool, you can see it added a little arrow to the bottom of that section, and this is looking better but you can see we still can’t read that text. Ok, so I’m going to go in here, edit this text block and under the colors tab here I’m going to define a custom color and it’s showing a white swatch. If you needed to copy and paste and different color in here you could do that, but the white is probably gonna work so I’ll click save and save draft. Refresh my page, and that looks a lot better. So that’s all set up here, the only other thing we need to add under there is a link to “read more.” Because we don’t have any of those pages ready yet, we’ll add that in later step. Now that we’ve got one formated how we want, this is where it’s much easier just to duplicate the entire column than to start over. So, then we could just go in here and edit and you can cross out that picture and insert a new one.
This is going to be our flowers column, so we’ve got this already pre-cropped and we want to choose the square, and click insert. These are already saving our other settings from before with the circle and the animation, so we can just click save and then edit. Go back and get our text here. Ok we’ll just delete that and paste and now we’ll need to reformat that. This is again I believe a header 3 and the font is already saved as white, so we’ll click save and duplicate. Go in here in here and switch that image out to our tree image; click under square, insert and save.
We’re making some really good progress now. Delete that text, center it and change that to heading 3. Ok, now let’s save this draft. Go ahead and refresh. Alright! You can see that animation moving in there and now this is looking really amazing. Scrolling up I don’t think we have many other changes other than those buttons to do on the homepage content. You’ll notice down here we still have some footer issues. We’re going to deal with those in the video about widgets.
The last thing I want to show you is that Enfold actually has a demo site up. Go to “Enfold Demo Theme” and click on this top one; Kriesi.at demo theme, and then click on Enfold default demo, this will give you a lot of ideas of what the Enfold theme can do. You can see here, there’s animated slideshows, different columns with icons, little dividers, portfolio areas; so if you want to play around with it on your own you can do so, or you can come in here to this and take a look at some of the features and options available to you. This will give you a great idea of how you can build those inside pages.
