Avada: How To Build A Custom Single Post Layout

Published On: April 15th, 2023Categories: Avada, Video Training3642 words18.2 min read

How To Build A Custom Single Post Layout

Transcript:

Hi everyone! Today, I will be showing you how to build a custom single post layout using Avada Layouts. In this video, I will look at the basic principles of Avada layouts, and then show you how to build a fully custom post layout for your website from the ground up.

Avada Layouts can be found at Avada > Layouts or from the Layouts tab on the Avada dashboard. To quickly understand and get started with this tool, it’s useful to understand Layouts and Layout Sections and how they work together. Check out the linked Avada Layouts docs to read more on this, but it is easiest to think of a Layout as simply a container that holds the page content, with the content itself coming from the Layout Sections.

Avada Layouts opens on the Layout Builder Page. Here you can see the Global Layout and any conditional Layouts that have been created. Here, on the Taxi Demo, a couple of conditional Layouts have been created – a News Articles Layout, and a 404-page Layout.

A page layout is comprised of content coming from four layout sections: a header section, a Page Title Bar section, a content section, and a footer section. This is how Avada is constructed, and normally, the content of the various sections is generated through a combination of the Global Options and the pages you build.

What Avada Layouts allows you to do …

What Avada Layouts allows you to do though is to create and set your own custom layouts throughout your website. This can be done globally, by adding custom Layout Sections to the Global Layout, or you can create your own conditional Layouts, like this News Article Layout here. So let’s delete this existing layout and create it again from the ground up to see how it was designed.

But before we do that, let’s just now look at a single post to see the default post layout. OK, this one is pretty minimalist, with pagination, comments, and recent posts, etc all turned off in the global options, and just the main content section showing.

Make sure you subscribe to our YouTube channel to keep up with all the latest videos, like this one. And if you don’t want to miss one, click the bell icon to get notifications of all new videos on our channel. OK, let’s begin! So, now let’s look at the options we have for building a layout for single posts using Avada Layouts.

Back in Avada Layouts, the first thing to do is to create the New Layout. I’ll just give the new layout a name here and then click on Create New Layout (you can also just hit Enter). The new Layout is then added, but at this point, it has no conditions to determine when it should be used, and no custom content. As it’s a Conditional Layout, the Layout will first become active when we set the conditions, so let’s build the Layout Section first.

Let’s start with the Page Title Bar Layout Section …

Let’s start with the Page Title Bar Layout Section. I’ll click on the Select Page Title Bar section, and here I will create a New Layout Section. I’ll just give it a name and hit enter. OK, so now, let’s mouse over it and edit it to start the building process. I’ll just go into Avada Live as my preferred builder.

The first thing I’m going to do is head to the Layout Section tab on the Layout Section Options tab in the sidebar and set the preview options for Dynamic content. I want to view the dynamic content as a post, as it’s a single post layout I’m building here, and I’ll also just choose a post to use for the preview. I’ll just click Preview.

OK, so now we’re ready to build. I’ll start with a Container with a one/one column, and I’ll just start by editing the Container. On the Design tab, I’ll set 0px top margin and 12% top and bottom padding. Now I’ll head to the Background tab. I actually want to add a color, a gradient, and an image to the background of this container.

Let’s start with the color. This will be a half-transparent black. Now to the gradient tab. I want to add a gradient to help blend this Page Title Bar Section into the header above it, and so I’m going to add some black at the top here. I’ll set black as the color for the Gradient Start Color, and I’ll set the gradient to end about halfway down. I’ll leave the gradient type and angle as they are.

Now for the image …

Now for the image. Here I will use the dynamic Content option to pull the main featured image from the post.

At the bottom here, I’ll also just set the Background Blend Mode to Overlay. OK, now for some content. I’ll just edit the column and remove that bottom margin. And now I’ll add a Title Element. I’ll use the Dynamic Content option to pull the title automatically, and on the design tab, I’ll center it and override the font size to 70px. I’ll also head to the Extras tab and set an animation. This one will be Fade, from Top, at a speed of 1 second.

OK, under this, I’ll add a Breadcrumbs Element. I’ll just turn off visibility for mobile, and then on the design tab, I’ll align it to the center, give it a font size of 18px, set the text color to white, and the text hover color to yellow. This will also have an animation. I’ll head to the Extras tab, and this one will be Fade, from Bottom, at a speed of 1 second. OK, that’s my Page Title Bar. Let’s save that and head back to the Layout.

So now it’s time to make a Content Layout Section. This is the Content part of the page. I’ll just quickly make a content layout section and open it in Avada Live. Now I’m going to build this content layout section from the ground up, but to save time, there are also prebuilt templates you can use. If we click on the Prebuilt Content button, we can see a range of content layout sections, including 3 blog post layouts. You can just click on one of these to load it into the builder and then you could customize it further or just save it.

In my case, I’ll just cancel out of this. Please see the Prebuilt Pages for Content Layout Sections documentation for more details on that, linked below. OK, to start, I’ll just set my Dynamic Content Preview options, and in the Content tab, I’ll just set 0px top and bottom padding. All right. Let’s add a container. I’ll add a container with a two-third one-third column combo here.

I’ll edit the container, and on the design tab, I’ll set 6% top padding and 3% bottom padding. And on the Background tab, I’m going to go to the gradient tab and add a very subtle gradient. The Start color will be this very light grey. I’ll just change the gradient angle to 0 degrees, which in effect will mean the page slowly graduates to the grey as we get to the bottom. As I said, very subtle.

I will also just adjust the columns while I’m here, as I need to add an animation on this left column. So I’ll edit that column and head to the extras tab. This one will be Fade, from the Left, at a speed of 1 second. And on the other column, I just need to change the Content Alignment to center. OK, let’s add our content.

In the first column, I just need the Content Element. That’s going to pull the main content from the post, and the default options here are just fine. OK, so now I need to add some content into the one-third column. This one’s going to be a bit more complex with three nested columns. I’ll start with a nested one/one column, and on the design tab of the nested column, I’ll set 50px bottom margin and 30px padding top, right and left. And I’ll also add a 6px border radius all around.

I’ll also head to the background tab …

I’ll also head to the background tab and the Image tab, and set a background image. I’ll just choose this image here. Finally, I’ll head to the Extras tab and set an animation again. I’ll choose Fade, from the right, at a speed of 1 second.

OK, now for some content. I’ll add a Text block Element and add my content. I’ll center it here, and on the design tab, I’ll set the font size to 20px. With the font family, I’ll just search here for Poppins and choose the Medium 500 variant. And at the bottom, I’ll change the font color to white. Now I’ll break this text into a few lines. I’ll just shift enter here just before the word Save, again before 10%, and again before On.

OK, and now I’m going to do a bit of inline editing to customize some individual words. I’ll start by selecting just the word Save.

The inline editor appears, and here I’ll go into Typography. I’ll set the font size to be 50px and the line height to be the same, and then under the family tab, I’ll set the variant to be semi-bold 600. Now I’ll select 10%, and this time in Typography, I’m going to set 100px as both the font size and the line height and again, under the family tab, change the weight to 600. I’ll just click the tick symbol to come out of that, and now I’ll click on the color icon and drag this color right down from white to black. To finish up, I’ll also head to the Extras tab and set an animation on this text block as well. I’ll choose Fade from the top this time and again at a speed of 1 second.

Next, I need to add a button element. I’ll link it to the App page and call it DOWNLOAD OUR APP, and I will align it to the center. On the design tab, I’ll override the default style and make the Button Gradient Top and Bottom Colors black, with a dark grey rollover color #303030 on the Button Gradient Top Hover Colors. Then, I’ll just change the text and hover text color to white.

I’ll also scroll down to the bottom here and add a 30px bottom margin to the button. Now to the Extras tab, and again, I will set a Fade animation, this time from the bottom, at 1 second.

My last element in this nested column …

My last element in this nested column will be an Image Element. I’ll find my image in the media library and add it. Yeah, that’s the one. I’ll also just head to the Extras tab and set an animation on the image as well. This last one will be Fade from the bottom at 1 second. Now I can close my nested column.

So now to the second nested column. Again I’ll add a one/one nested column. I’ll edit the nested column, and on the design tab, I will set a 50px bottom margin and add 40px padding all around. I’ll also add 8px border radius all around and set up a box shadow on this column. I’ll set Vertical to 10 and Horizontal to 0, and I’ll set the Box Shadow Blur Radius to 23 and the Box Shadow Color to an almost transparent black.

For the content, I’ll add a Title Element. This one will be called About the Author. On the Design tab, I’ll just set it to be an H2 and override the font size to 20px. I’ll also set the font family to Poppins and the variant to Bold 700. I’ll also set a 0px bottom margin. Now let’s add the Author Element. I’ll just Hide the Headings, change the Avatar to Circle and set a 30px bottom margin.

Now under this, I need to add another Button Element. This one will just say Buy Avada now, and I will center it. On the design tab, I’ll just set the Button Span to yes. That’s enough there. Let’s just close that Nested column.

I need a final Nested Column under this, but I can save a bit of time here by copying this nested column and then pasting it below. That at least gives me the box shadow and the title, which I need. I’ll just change this title to say Subscribe today, and I’ll center it and change the bottom margin back to 30px. I’ll delete the Author Element and instead add a Text Block Element. This one is going to have some text about subscribing, so I’ll paste that in, and I’ll just center it.

So, to do that, I’ll add a full-width column from the top of this second column, and then add the Pagination Element. With that, the content layout section is complete. I’ll save it and head back to the page layout to continue building the rest of the page.

And now we’re done with the first container! …

And now we’re done with the first container! Moving on to the second container, I’ll add another content layout section and open it in Avada Live. Here, I’ll start by adding a Title Element and set it to say “Latest Posts”. On the design tab, I’ll set it to be an H2, and override the font size to 20px, and the font family to Poppins. I’ll also set a 30px bottom margin.

Now, I need to add a Posts Element to display the latest posts. I’ll choose the style “Grid,” and set the number of columns to 3. I’ll also set the Image Size to “Large.” On the design tab, I’ll just set the content alignment to center. And on the Extras tab, I’ll set a Fade animation from the bottom at a speed of 1 second.

To finish this container, I’ll just add a full-width column and insert the Pagination Element. And with that, we’ve completed the second container. Finally, I’ll add a third content layout section for the footer. Here, I’ll add a container and open it in Avada Live. In the container, I’ll add a Text Block Element and paste in the copyright information. I’ll also center it, set the font size to 16px, and change the font color to light grey.

And that’s it! I’ve completed the basic design for the website using Avada Live. Of course, there are many other customization options available in Avada, and I can continue tweaking the design until I’m happy with it. But for now, this is a good starting point, and I can start adding my own content to the pages.

I’m going to leave the Layout on Text, and I will add 40px top margin.

So now to the next Container. This one is going to have a two third one third column combo, and again, it’s going to have 6% top and bottom padding.

So, I’ll just edit the container to add that… and I’m also going to give it a one pixel top and bottom border.

In the first column, I’ll add a Title Element… And this will say Discussion… It will be a H2, at 40px. And again, I’ll change the font family to Poppins.. and the variant to Bold 700. I’ll also set 10px as the bottom margin.

Next is the Comments Element …

Next is the Comments Element. I’ll just change the Comment Avatar to be a Circle, but otherwise, that’s pretty good.

Now in the other column, I want another testimonial. I’ll edit the column first and add 70px top margin to push it down a little bit. And then I will give it 30px padding all around. On the background tab and the image tab, I’m going to add this image here to the background of the column.

OK, so now I’ll add the content. I’ll start with a Title Element. This will just say Testimonials. I will center it. Set it to a H3, override the font size to 30px, and set the font color to white.

Next is a text block Element, which will contain some Lorem Ipsum. I’ll just align it to the center, and make the font white.

Then I need an Image Element… and I’ll add this guy here. I’ll just align it to the center. I’ll also add 20px bottom margin.

Under here, I want a final text block, so I will duplicate this one. I’ll change the text to Mike Smith Brooklyn NY, and now I’ll do a bit of inline editing. I’ll select the lot and first I’ll go to Typography and change the font size to 16px. I’ll make it bold, and then I’ll just select the location and change the color to the site yellow. OK, that’s that container.

Under this, we are going to have another Container, this time with Related Posts. I’ll start with a container with a full-width column. I’ll edit the container and add 6% padding top and bottom, and then move to the Background tab. Here, I’ll add a subtle almost transparent whitewash that’s going to act as an overlay to an image.

And now, on the image tab, I’ll add this background image and set the Background Blend mode to overlay. Our column is good to go with the defaults, so I’ll start adding my Elements. First up is a Title Element. It’s going to share most of its properties with the one in the container above, so I might just copy that and paste it in here. I’ll just change the title to Related Posts and center it, but otherwise, it’s good. I’ll add a Text block Element under this and paste my content in: “If you enjoyed reading this, then please explore our other articles below.” And just center align it.

Next, I’ll add the Related Posts Element …

Next, I’ll add the Related Posts Element. I’ll change the Layout to Title Below image and set the Number of Related Posts to six with the Maximum Columns to be four. I’ll change the column spacing to 20 and set the Scroll Items to 1. On the design Tab, I’ll also just turn this Enable Heading Setting to No and set 40px bottom margin. Finally, for this container, I’ll add a Button Element. This one will say “Back to News,” which would, of course, be linked to the News page. Finally, I just need to Center it.

One more container, but this one is already in the library. I’ll add a new Container and go to the Library Containers Tab. Here, I want to add the Global Book Online Or Call container. Okay, awesome. Let’s just save all that work. That was a reasonable amount of work, but now we have our own customized template that we can use on all single posts.

To do that, we just have to add the conditions to the Layout. Let’s head back to the Layouts page. If we mouse over the bottom of the layout box, we can see that this is where we add conditions to the layout. I’ll just click on that, and here we can see the Layout Conditions dialog.

In this case, we want this layout only to be used on single posts, so we need to set those conditions. Under the Posts tab, I will include the All Posts condition by selecting the tick box. This turns green, and we can see in the right column that we have now included the All Posts condition to the layout. If we wanted to, we could just select posts from specific categories, or we could also exclude certain posts or categories, etc. The conditions can be as simple or as complex as you need them to be.

For example, if I didn’t want this layout on posts within the Announcements category, I would click the x button to exclude that category from the layout. It then gets added to the Conditions in the right-hand column. I want all posts to use this particular layout, so I’ll remove that exclusion. The dialog auto-saves with my changes, so we can now just close it to return to the layout.

So now, at the bottom of our News Articles Layout, we can see that it has a condition of All posts, so this layout will now be used on single posts.

Let’s return to our default blog post …

Let’s return to our default blog post, and now refresh that page… And here we can see the post using our new Layout. There were some nice animations there on load. At the top is our nice Page Title Bar, and as we scroll down we can see our content layouts sections and how it keeps
animating. Under that is the Discussion area, and the Related Posts, and finally the Call to action and the global footer.

If I just navigate to a different post, we can see the layout in action with different content, pulling different featured images, titles, comments, etc.

OK, that’s just one example of how to build a custom single post layout using Avada Layouts. The power of this method is in its flexibility. Using the full power of conditional layouts and the Avada Builder, you can create any single post layout you want!

OK, this concludes our video on “How To Build A Custom Single Post Layout”. Make sure you subscribe to our YouTube channel to keep up with all the latest videos, and if you have any questions or need assistance, please create a support ticket and our team will gladly assist you. As always, we want to thank you for choosing Avada.

Don’t miss this ...

We don’t spam! Read our privacy policy for more info.

Table of Content

Recent Posts

Don’t miss this
...

We don’t spam! Read our privacy policy for more info.