A Custom Single Post Layout is a Conditional Layout that only shows on Single Post Pages. So the first step is to create a Layout, and then decide which Layout Sections we want to customize on our Single Post pages…

See the Introducing Avada Layouts doc for a general overview of the Layout Builder, and Understanding Layout and Layout Sections for more information on the difference between these two parts of the Builder.

For this document, I’m going to recreate the Single Post Layout as created on the Taxi Demo.

Creating the Layout is done on the Layouts page, by simply adding a name (in this case, perhaps Single Post would be most appropriate) and then clicking on Create New Layout, as can be seen below.

The page reloads and the layout is added to Avada Layouts. At this point is has no conditions set, and no Custom Layout Sections added. Now we have the Layout, we can begin to create any Layout Sections that we will add to it. In this example, we will add a Page Title Bar Layout Section, and a Content Layout Section.

You can create Custom Layout Sections in one of two ways. You can head to the Layout Section Builder page, and create one from there, as seen below.

Alternatively, you can create one by clicking on the corresponding Layout Section in the existing Layout, and create one from there. The first method just creates a Layout Section, while the second method attaches it to a Layout at the same time.

There’s no wrong way to do this, but it’s important to note that if the layout is active (has conditions or is global) then the Layout Section would also be immediately active, and at this point would be empty. In my case, I have set no conditions as yet, and so the Layout is inactive.

So to create and add my Page Title Bar Layout Section, I would click on the Select Page Title Bar section of the Single Post Layout, and in the following dialog, under the New Section tab, I would give it a name (Single Post PTB would be appropriate) and click on Create New Section.

This creates and connects the Layout Section to the Layout, but at already mentioned, it is still empty. If we mouse over the Layout Section on the Layout, as shown below, we can click on the edit icon to design and build our Layout Section.

Now we come to the Avada Builder, and here we can create our Custom Layout Sections. You can do this in either Avada Builder or Avada Live. Please refer to Creating Layout Section Content for more information on this, but in short, you can build anything you want here.

Anything you can build in the Avada Builder can constitute the content of your Custom Page Title Bar Layout Section. You can have multiple columns, background images, dynamic data… anything. The freedom this gives is enormous. The Layout Section is literally that – a section where can create the Layout. The content itself comes from the Builder, and what you can do is only limited by your imagination.

The example below is relatively simple. It shows a dynamic Title and some Breadcrumbs, and the container itself has a background gradient and dynamic featured image. For more information on how this specific Page Title Bar was constructed, please watch the video at the top of the page.

For this example, we also want to add another Layout Section, the Content Layout Section. This will show the actual posts, and any other content we might add in the content section of the single posts layout. We go about it the same way as we did with the Page Title Bar Layout Section.

First, we create the Layout Section, and then we edit it. With the Content Layout Section, the Layout Section Elements become available. See the Avada Design Elements vs. Layout Section Elements doc and the How To Use The Layout Section Elements Video for more info on these special Elements.

For the Taxi Prebuilt Website Content Layout Section, many of the Layout Section Elements were used, including the Author, Content, Comments, Pagination, and Related Posts Elements, as well as several Design Elements. See the Content Layout Section below.

With a Conditional Layout, the last thing you need to do is to set the conditions of the layout. This is best done last, because as soon as you set the conditions, the layout is active, and if you do this after creating the Layout Sections, but before editing them, the pages displayed that fit the conditions would be empty in those sections.

To add a condition, or conditions, simply mouse over the bottom of the Layout, and choose Add A Condition. This brings up the Layout Conditions Dialog, as seen below. Please see Understanding Conditional Layouts for more information on Conditional Layouts, but for this example, as we want this layout to display on Single Posts, we just need to go to Posts and select the All Posts condition.

See below for the front end examples of the two Layout Sections added to the Single Post Layout on the Taxi Prebuilt Website. First is the Custom Page Title Bar Layout Section, and then the Content Layout Section. See this post on the Taxi prebuilt site for a live example of this Layout.

You might also want to create a Custom layout for your Blog Archives pages. Just remember, that a Custom Layout can include as little or as much as you want.

You may just want to add a Custom Page Title Bar, or Custom Footer, but you might also want to customise the Content Layout Section of the page. For this, there is the Archive Element, one of the Layout Section Elements, as well as the other Layout Section and normal design elements. See the How To Use The Layout Section Elements video for more info on this.

If you don’t set a Custom Content Layout Section, your Archives layout will be controlled from the Blog Archives Layout Options, found under the Options > General Blog tab.

With Avada Layouts, creating a custom Layout for your Single Post and Post Archive pages is not only a reality, but rather, an unlimited possibility. You can use the power of Avada Builder to create almost any Layout you can concieve of, and with the power of Conditional Layouts, have it display on all posts, a specific category, or even just a single post.

Avada Layouts is a game changer in the true sense of the word. It enables such freedom of design, and gives such flexibility in deployment, that building your website layout will simply never be the same again.

Alternatively, through the Blog Element and the Global Options, you can hide the meta information on your posts, and although the archive pages will still be generated, your users might never find them. It’s totally up to you how you present your blog posts. Have a look at the SEO demo, for example, to see a blog where all meta information has been hidden, and archive pages are hard to find.

In the image below, from the Blog Element, you can see an example of how granular the control for the Meta Information is. You can turn it off entirely, or you can choose to show any particular type of meta info on your blog. To control the Meta Info for the Archive pages, head to Avada > Options > Blog > Blog Meta, where you have the same controls for archive pages and assigned blog pages.

As discussed earlier, you add Featured images on the individual blog posts. You only need one, but you can upload up to 5 by default, and it’s possible to add a video featured image as well. See the Blog Single Posts document for more info on the options you have with uploading multiple Featured images.

This one requires some consideration. Where you wish to display the Featured Images plays a role in your considerations.

When you add a Featured Image, by default, it shows at the top of the individual blog post. This image displays at the full width of the content (site width) or the full width of the Column if using Sidebars. So if you’re going with the default, it’s important that your Featured Images are the appropriate width for your site.

If desired, the Featured Image can also be turned off on Single Blog Pages on the Avada > Options > Blog > Blog Single Post tab, and for the Archive pages on the Global Options > Blog > General Blog tab. If you take this path, the Featured Image will still show as a thumbnail on the Archive Pages, and when using the Blog, or Recent Posts Element, and possibly much larger if using the Post Slider Element.

In this case, you can use a smaller featured image size. We recommend using an image at least 700px in width, as the Recent Posts Element requires Featured Images to be at least this size for them to be uniformly cropped when the images are different aspect ratios. In any case, even if you have uploaded a larger Featured Image, Avada is smart enough to only load the image size that is necessary for the layout, rather than just loading the full-size image. Please see our How Avada Controls Responsive Images document for more information on this.

If on the other hand, you want to have Featured Images on your single post pages, or you want to use the Post Slider Element, or add the Featured Images into your posts manually, you might want to upload an image size closer to the site width, or even bigger. The bottom line here is that Avada controls responsive images for you, and so it’s better to upload a larger Featured Image than one too small.

Another thing to consider is the aspect ratio of your Featured Images. With the Blog Element, if you want consistency with layout, it’s best to use all the same size and aspect ratio for your Featured Images. However, this is not at all necessary. As seen above on the image from the Gym Demo at the top of the page, a Grid Layout with images of different aspect ratios can look great. And if you wanted to use the Masonry Layout, having images of different aspect ratios is a pretty much a necessity. So it all depends on your goals. What is important to know is how the different Elements and Layouts affect the original Featured Images.

When creating the Post Card for use with the Post Cards Element, there is an Aspect Raio option in the Post Card Image Element. Thus, when you use the Post Cards Element to display your posts, the images will adhere to whatever aspect ratio you have set when desgining your Post Card.

When using the Blog Element, most of the layouts respect the original aspect ratio of the Featured Images. The exception to this is the Medium and Medium Alternate layouts, which both crop the images to a uniform aspect ratio for a better looking layout.

With the Recent Posts Element, there is a Picture Size option in the Element Options. The choices are Fixed or Auto. Fixed means that the images will be cropped to all have the same aspect ratio, whereas if you choose Auto, it will respect the original aspect ratio. As illustrated below, if all images had the same size and aspect ratio, then it wouldn’t matter which option was chosen.

As noted above, for the Fixed option to uniformly crop all images, all the Featured Images need to be a minimum of 700px in width.

There is a range of global options that relate to Blog Featured images. See them all below.

Firstly, the General Blog Options are located at Avada > Options > Blog > General Blog, from the WordPress dashboard.

Archive pages are the automatically generated pages you get when you click on a Category, or Tag on the front end. These archive pages display according to the options chosen here. See the Blog Archive Pages documentation for more information on this.

The Blog Single Post tab is below the General Blog tab. The options here cover the default options for the Blog Single Posts, which can also be overridden on a blog post by post basis. See below for the Global options and see the Blog Post Options for more info on how to override these options on a post by post basis.

The Blog Meta tab deals with how the Blog Meta data displays on various parts of the site. As noted at the top of the page, “The on/off meta options on this tab only control the assigned blog page in “Settings > Reading” or the blog archives, not the blog element. The only options on this tab that work with the blog element are the Meta Data Font Size and Date Format options.”

There are also Blog options in the Sidebars > Blog Posts, and Sidebars > Blog Archive sections. These two sections allow you to control the display and content of any sidebars you might want on your Single Blog Posts and Blog Archive Pages.

Finally, in the Avada Builder Elements > Blog Element area of the global options, you can set the default behavior of the Blog Element, which as well can be overridden in any instance of the Element you place on a page.

View the Displaying Blog Posts On Your Site, or the Blog Element documentation for more information on how to use this Element to display your Blog posts across your site.

The Post Slider Element allows you to add a Post Sliders to your content, in a variety of layouts. To start, add the element into your desired column.

The Layout option is the first option, and here you control the appearance of the post slider. There are three layouts to choose from, including Posts with Title, Posts with Title and Excerpt, and Attachment Layout, Only Images Attached to Post/Page.

With the first two layouts, the next thing to do is choose the categories and number of slides you want to display, and the number of words for the excerpt if you choose that layout, but with the third layout option, you add individual images to your page to show in the slider.

There are 3 different Post Slider layouts to choose from:

The Recent Posts Element is a very quick and easy way to add the most recent blog posts anywhere on your site.

To start, add the element into your desired column, and then configure the Recent Posts Element to your liking. The Recent Posts Element comes with 3 different layouts for you to choose from. They can then all be customized to your liking. To view the possibilities of this element, make sure you visit the Recent Posts Element Demo page. Once you have chosen your preferred layout, go slowly down the options list, customizing its appearance to suit your wishes.

Once you have finished configuring the options, click ‘Save’ to insert the element into the page. Preview the page to view the Recent Posts element output, and remember you can come back into the element to fine-tune it.