Prebuilt Pages for Content Layout Sections

13/01/2021

When building a Content Layout Section in Avada, you can start from scratch and build your own Layout from the ground up, or alternatively, you can import a Prebuilt Page into the Content Layout Section, and customize it as you wish.

There are 9 Content Layouts to import, including 3 Blog Layouts, 2 Portfolio Layouts, and 4 WooCommerce Product Layouts. Let’s take a look at how to import these, and what they offer.

Content Layout Sections > Prebuilt Pages

How To Select A Prebuilt Content Section Layout

When you first enter the Avada Builder when creating a Content Layout Section, the Starter Page displays. Here, you can click on Add Container to start building a Content Layout Section. But if you prefer to start with a template, you can click on Prebuilt Header.

Content Layout Section > Add Prebuilt Page

When you do, the Library opens to the Prebuilt Content tab. Here you can see a choice of Content Layout Section designs to import. They are clearly previewed, as you can see below.

Content Layout Sections > All Prebuilt Pages

To import one, just mouse over your selected header and click on it. This brings an Alert up, which tells you what is about to happen. Click OK to continue, and the Layout Section is loaded into the Builder, ready to be customized.

Content Layout Section > Add Prebuilt Page Warning

The Layouts

Below, are descriptions and screenshots of the nine available Content Layout Sections. Each section shows the Container and Column structure of the Layout Section and the various Elements used. See the previews above for what it might look like on the front end.

Blog Post 1

This is a simple blog post layout with an interesting header. The post’s featured image is pulled dynamically into the background of the top left column, while the title gets pulled into the column on the top right, which also features a colored background, a box shadow, and a Meta Element that pulls the number of words and the estimated reading time.

Below this is the main content section with a column pulling meta data on the left and the main post content on the right coming through the Content Element. Below this is a Related articles section.

Blog 1 Prebuilt Layout Section

Blog Post 2

Blog Post 2 is a blog layout again dominated by the header. The top Container contains a dynamically pulled Title, and the Meta Element, while the Container below this has a gradient background and uses the Featured Images Slider Element to display the posts Featured image(s).

Under this is another Container with the Content Element, a Social Sharing Element and the Author Element, while the last Container has a subtle background color and contains the Recent Posts Element.

Blog 2 Prebuilt Layout Section

Blog Post 3

The Blog 3 Layout displays as a three column layout, due to a Nested Column Element, and pulls the author image and some sharing links into the first column, the featured image and the content into the second and a typical blog sidebar into the third. Above this is the Title Element and the Meta Element displaying details of the post, and below the post content are Pagination and Comments Elements.

Blog 3 Prebuilt Layout Section

Portfolio Post 1

Portfolio Post 1 has five containers, and is best used for portfolios with multiple featured images. The top container displays the Portfolio Title at the top with the Post Terms and the Date displayed through Text Elements besides it. Under this, and coming up underneath the title due to negative margins is a full width column pulling the Featured Image via an Image Element.

The container below this has a background gradient, and displays the second featured image on the left and an Overview on the right, with a Title Element, a Text block pulling the Excerpt/Archive Descriptions, and a button under this.

The third container is full width and pulls Featured Image #3 via the Image Element. Container four displays the Project details on the left, via a Title and the Project Details Element, and on the right is the Content Element, pulling the post content. The final container has a Title, a Pagination Element, and the Related Posts Element at the bottom.

Portfolia 1 Prebuilt Layout Section

Portfolio Post 2

The Portfolio Post 2 Layout is relatively simple, but very striking. It again has five Containers, with the first one simply showing the Posts Terms and the Post Title to the left. The second Container displays the Featured Image, but in a very clever way. It pulls the image into the background of the Container via Dynamic Data, and then limits the display of the image with two slanted Section Separator Elements. Very striking!

The third Container displays a Title above the a Text Block pulling the Excerpt/Archive Description, with the Terms and Date to the right. Under this is a full width Column containing the Gallery Element, which is pulling all Featured Images into the post. Under this is a Container displaying the Content and Meta Elements, and the last Container holds a Title and the Related Posts Element, with the Pagination Element at the very bottom.

Portfolia 2 Prebuilt Layout Section

Product 1

The Product 1 Layout is a striking Product layout, with a whopping seven Containers. The top Containers just holds the Woo Notices Element in a full width Column.Under this, the second Container’s Interior Content Width set to 100% width, with two half width Columns, divided between the product image and product details. The Image is pulled dynamically in the background of the column, and on the right hand side, there are four Woo Layout Elements pulling the product details.

The third Container is a simple one with three Columns containing Title, Icon and Text Block Elements. The fourth Container has a Title Element in a full width Column, and the Woo Additional Information Element and the Content Element below this. The fifth Container contains a Gallery Element, set to pull product images into it.

The sixth Container looks busy, but on the front end it’s relatively simple. There is a Section Separator Element top and bottom of this Container, with a Title Element below the top one. There are two half columns below this with the Woo Rating Element and a Button Element, and under that, the Woo Reviews Element.

The last Container has a Title and a Text Block Element, followed by the Woo Related Products Element. All in all, this is a very versatile and striking Product Layout.

Product 1 Prebuilt Layout Section

Product 2

The Product 2 Layouts is similar in some ways to Product 1, but has some more unconventional design choices. As can be seen in the preview image, the top Container is visually aligned to the left, and the third Container down, with the Gallery Element is aligned to the right. There’s some interesting things happening in this design.

The top Container is set to 100% width, with the first 2/5ths Column pulling the Featured image into the background dynamically. The right Column however is only 1/2, and so visually, the Container is weighted to the left.

There’s also something interesting going on in the second Container. Content wise, it’s just a Title Element and the Content Element on the left, and the Woo Additional Information Element and some Nested Columns on the right. But the background of the Container has a gradient, which is cut off by a Section Separator added to the bottom of the Column. That’s an interesting combination.

Under this is the Gallery Element set up to dynamically pull Product images, in a 4/5ths Column, which is justified to the right in the holding Container. The fifth Container is just three normal Columns with Icons, Titles and Text Blocks.

The sixth Container and seventh Containers are relatively straight forward, set up to display the Woo Related Products, and the Woo ratings and Woo Reviews. There is also a clever gradient on the last Container. All in all, a striking, if slightly unconventional product layout.

Product 2 Prebuilt Layout Section

Product 3

The Product 3 layout is slightly more compact than the previous two, with only three Containers. The first one, however, is chock-a-block, with the Woo Notices Element at the top, the Breadcrumbs Element below this, and then there is a three Column arrangement with the Woo Product Images Element in the first, the Title and many Woo Elements in the middle one, including Woo Rating, Woo Price, a Button Element, Woo Stock, Woo Short Description, Woo Additional Information, and finally a Nested Column to display a Notice, coming form a Text Block Element. (The Nested Column Element is just so the column can have a background color.) In the third Column, there is the Woo Add To Cart Element and a Title with the Social Sharing Element beneath it.

The second Container has a background color, and inside it, there is a cleverly design half size column at the top, using a mix of dynamic data and the Woo Rating Element to show the number of reviews, and a simple button in the other half column, and under this, the Woo Reviews Element in a full width Column. The final Container just displays a Title Element with the Woo Related Products Element below it.

Product 3 Prebuilt Layout Section

Product 4

The Product 4 Layout is another interesting Layout, design wise. It has 6 Containers, with the top one probably being the most unique. It is split into two one half Columns, with the Product Image Element in the left one, and a range of Woo and other Element in the right. But the right Column has a background color that goes from the very top to the very bottom of the Container, and this gives this Layout a unique look.

The rest of the Layout uses a combination of Elements, very similar to the previous three, just in slightly different configurations. There is again the use of Separator Sections in one of the Containers, as well as a Dynamic Product Gallery, and the seemingly ubiquitous Related Products Element.

Product 4 Prebuilt Layout Section

Conclusion

These Prebuilt Layout Sections are a great way to get started with building Content Layout Sections. But remember, that these are simply starting points for your layouts, and can be completely customized after import. But there are some very interesting design approaches with these, and they are a very useful way to see what is possible with both the Avada WooCommerce Builder, as well as for content sections for other post types, like blogs and portfolio posts. Check them out, and remember to play with them. They have a lot of secrets to give up for the curious…