The FAQ Element allows you to add a customized range of your FAQ Custom Post Type items anywhere into your content.

For this element to work, you must have previously created FAQ items in the FAQ Custom Post Type, found on your main WordPress menu. Once you have FAQs, (and these can also be sorted into categories) you can use the FAQ Element to quickly place them throughout your content. You can add a single category or multiple categories, or you can exclude categories. There are also various ways of sorting the FAQs, and they can be treated as Toggles or Accordions. There are also a number of other styling options about size, color, icons, and alignment.

Once you have completed styling your FAQ Element, remember to save your changes.

Read below for a detailed description of all element options.

Technically, a Custom Portfolio Post Layout is a Conditional Layout that only shows on Single Portfolio Pages. So the first step is to create a Layout, and then decide which Layout Sections you want to customize for your Single Portfolio Posts…

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

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

Avda 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.

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.

* Not available when using an Avada Layout for Portfolio Posts.

Each Portfolio post you create allows you to set the width of the Featured Image’s column. This option is called the ‘Width (Content Columns for Featured Image)’ option and you can set it to be Full Width or Half Width. You can also set the entire Portfolio post to display 100% of the browser width.

The Featured Image you upload to each post will show the full image ratio on the single post page by default. The width of the featured image will be set to the site width or the column width if you’re using a Half Width layout and the height is set to auto so it displays the original height. In addition to this, you can set a custom featured image width and height to control the size of the image. This is useful in specific situations when you need a custom featured image size.

The ‘Featured Image Dimensions’ option (Image width and height) is located in the Avada Page Options > Portfolio section of the posts page. Values are set in pixels or percentage, ex: 100% or 100px. Or Use “auto” for automatic resizing if you added either width or height.

You can also upload a Youtube or a Vimeo video to be displayed in the Featured Image section of the portfolio post. You can even have a combination of videos and images, displayed as a slideshow on the portfolio single post page. Read below to learn how to upload a Youtube or a Vimeo video.

Step 1 – Go to the ‘Portfolio’ tab on your WordPress admin sidebar and clicking ‘Add New’ to add a new post.

Step 2 – Give your portfolio post a title and add your content as normal.

Step 3 – In the Avada Page Options box, switch to the ‘Portfolio’ tab, then find the ‘Video Embed Code’ option.

Step 4 – Enter the Youtube or Vimeo embed code into the provided field. You can find the embed code by clicking the ‘Embed’ option on Youtube, and the ‘Share’ option on Vimeo.

Step 5 – Click ‘Save Draft’ or ‘Publish’.

The Project Description section is any content you insert in the WordPress Content Editor. This is usually the text description of the project, but it can also contain any of our elements. This is where you can put any descriptive content detailing your project. The Project Title Description option on the Portfolio tab allows you to add the Project Title automatically at the top of the content added in the Editor.

The Show Project Details option shows the meta information relating to the project. For Full-Width layouts, the Project Details are placed in a sidebar next to the Project Description. For Half-Width layouts, they’re displayed below the Project Description.

The information shown in the Project Details consists of the Project categories, Skills and Tags added to each Portfolio Post, as well as the Project URL & URL Text, and the Copyright URL & URL Text.

The key to understanding the Portfolio Single Post page is to understand how the various areas of the page contribute to the end result, and how you can use the Portfolio tab of the Avada Page Options to override the Single Post Global Options set in the Avada Global Options.

Once you have your Portfolio items created, you can think about how to display the Portfolio as a whole, which is done with the Portfolio Element. But before we do that, let’s have a deeper look at how the Global and Local Options affect the various parts of the Portfolio system.

The first thing to understand about setting up a portfolio is that the Portfolio is a custom post type in Avada, in the same way the Blog or FAQ is. So, setting up a Portfolio requires you to create Portfolio items, and then you display them on your site in various ways, much like we create individual blog posts and then use the Post Card Element or the Blog Element to display them on our pages.

The Portfolio Custom Post Type is similar to the ‘Post’ Post Type in WordPress. It gathers your portfolio items together and provides options for Categories, Skills, and Tags, which allow for further filtering and sorting down the track. Categories and Skills can also be customized with language files if you want to have your own personalized headings.

The Portfolio Custom Post Type, together with Avada Layouts and Post Cards offers you the most up to date way of setting up a Portfolio in Avada.

In the other documents in the Portfolio Category, we break down the process of setting up a Portfolio into their individual steps, but in broad terms, to create a Portfolio on your Avada site using the most current methods, you will follow this general process:

Make sure you read the remaining Portfolio docs to see how this great system can work for you.

If you wish to disable the Portfolio Post Type entirely, just head to Options > Advanced > Post Types, and here you can turn the Portfolio post types off. This will disable the Post type and remove it from the menu.