Instead of using a traditional image slider, like the Avada Slider, Slider Revolution or Layer Slider, this section was built in with Avada Layouts. Created for the Page Title Bar area using Conditional Layouts, it’s set it to display on the Home/Front Page.
It is designed using a Container with two 1/2 (50% width) Columns. The Left Column contains a Title Element, Text Block Element and a Button Element and the Right Column contains an Image Element.
Read this help file for more information on Conditional Layouts. You can also see the backend structuring by clicking this link.
Services – CTA
This section pretty straightforward and easy to replicate. It starts with a Container. Added to the container are three (1/4 – 25% width, 1/2 – 50% width and a 1/4 – 25% width) Columns with a Title Element in the Middle Column.
Below that row there are three (1/3 – 33.33%) width Columns, each containing a Link URL, set in the General settings tab of the Column settings, to redirect to the specific service page once clicked. All the Columns contain an Icon Element, Title Element, Text Block Element, and a Button Element.
– You can choose to show or hide a Container, column, or Element on small, medium, or large screens, and you can select more than one at a time. Each of the three sizes has a custom width setting on the Avada Builder Elements tab in the Global Options. Read more here
– You can set specific styling options independently for different screen sizes. Responsive styling allows you to control settings that correspond to three dimensions, Large (Desktop), Medium (Tablet), and Small (Phone). Read more here
– Flexbox is a CSS3 layout model that provides a more efficient way to design, align and distribute space for Columns inside of any Container. Read more here
More Information CTA – Global
For this example, the CTA section is built using the Avada Library by creating a Column Element that is set to Global. Take a look at this help file for an overview on the Avada Builder Global Library Elements.
This section has a single 1/2 (50% width) Column and is aligned to center position. The Column has a Title Element’s, a Text Block Element, and a Button Element.
You can see the backend structuring by clicking this link.
Note: The alignment of the Global Column is determined by setting your Container’s Column Justification to your requirements. In this example, the specific Container’s Justification is set to Center.
CTA – Call to Action
A standard Call-to-action (CTA) is illustrated below and is set up with two (1/2 – 50%) Columns, a Title Element, a Text Block Element, and a couple of Button Elements on the Right With an Image Element on the Left.
Depending on the marketing goal, CTA’s can drive a variety of different actions and results for your website visitors. Check this article for some CTA inspiration, 39 Call-to-Action Examples You Can’t Help But Click.
Here is another example of a section that’s pretty straightforward and easy to replicate. It starts with a Container. Added here are three (1/4 – 25% width: Left, 1/2 – 50% width: Middle, and a 1/4 – 25% width: Right) Columns, with the Middle Column containing a Title Element.
Below you will find another three (1/3 – 33.33% width) Columns with each of them containing a Title Element, Image Element, and two Text Block Elements.
For this example, this section is built using a Container and a single 1/1 (100% width) Column with six Image Elements.
From the backend view, the Image Elements are located below one another, however, to have the images displayed next to each other, you can turn on “Content Wrap” in the General tab of the Column settings. This forces the content of the column into one line.
Nested Columns – Global Container
For this example, this section is built using the Avada Library by creating a Container Element that is set to Global. Take a look at this help file for an overview on the Avada Builder Global Library Elements.
Added to the Global Container Element is a single 1/1 (100% width) Column with the versatile Nested Column Element, and simply put are Columns within Columns.
The Nested Columns Element has two (2/5 – 40% width: Left and a 3/5 – 60% width: Right) Columns. The Left Column contains a Title Element and a Content Box Element and the Column on the Right contains an Avada Form Element.
The Form Builder is very flexible and allows you to create many types of forms that you can use on your Avada website. For any form that you create, you can add them to a page or post as a single instance or you can set the form to display globally across the website, which then allows you to manage one form. If a form is showing on all pages, for example, and you edit the form, the same changes show across all form instances.