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.
----------------------------- 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! -----------------------------
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 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.
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. 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... (10) 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. 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 customise 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 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.
OK, 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. Yeah, that looks good. 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.
OK, now 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 just 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.
And then I ll just change the text and hover text color to white.
I ll also scroll down to the bottom here and adda 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. OK, 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. OK,
now I can close my nested column. So now to the second nested column ...So 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 I ll also 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.
OK, 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 a 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. And on the design tab, I ll just set the Button Span to yes.
OK, 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. OK, so 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. OK, finally under this, I ll add an instance
of the Avada Form Element.. I need to choose the Form I want to display,
and here I want the Subscribe Form... and that loads into the page.
OK, all good so far. Let s close that. OK, to finish this first Container, I just
need to add a full width column... from the top of this second column... and add the Pagination
Element. 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 Ill 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.
OK, 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 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.
OK, 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. I ll 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...
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. And 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. OK, one more container, but this one is already
in the library. I ll add a new Container, and go to the Library Containers Tab, and
here I want to add the Global Book Online Or Call container.
OK, 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 is has a condition
of All posts, so this layout will now be used on single posts.
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.
