Instead of using a traditional image slider, like the Avada Slider, Slider Revolution or Layer Slider, as the above-the-fold hero section, this prebuilt site uses a Container with a Background Image. Added to the container is a 2/3 (66.67% width) Column with two Title Elements, a Text Block Element, and two Button Elements.
Below this you will find a 2/3 (66.67% width) Column on the Left with one 1/3 (33.33% width) Column on the right. The Left Column contains two Title Elements, a Text Block Element, and two Button Elements and the Column on the Right has two Image Elements, a Title Element and Text Block Element.
Important to note here is that the Left Column’s Column Visibility is set to “Small Screen”. For this example, the Column will only be displayed once the screen size is smaller than 780px. This is set under Avada > Options > Responsive > Element Responsive Breakpoints. See this help file for more information.
This section starts with a Container. In here you will see a single row of three 1/3 (33.33% width) Columns, each containing the Nested Columns Element, holding one 1/3 (33.33% width) column on the Left and one 2/3 (66.67% width) Column. The Left Column for each has an Image Element and a Title Element and two Text Block Element in the Right.
Some useful functionality to highlight:
– 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
A Call-to-action (CTA) is a marketing method designed to prompt an immediate response or encourage a direct sale from your website visitors. There is no hard and fast rule about how you should create them, other than being an attraction and conversion point on your website. Using the Avada Design Elements, you can make any CTA style that you feel will work for your online business.
For this example, the CTA section is made up of three (40% – Left, 10% – Middle and 50% – Right width) Columns side by side. An Image Element, Title Element, Text Block Element, Section Separator Element and Button Element is added to the Left Column, with the Image Element, Element Visibility, set to “Small Screen”. The Middle Column has an Image Element and the Right Column set with only a Background Image.
CTA – Call to Action
This section pretty straightforward and easy to replicate. It starts with a Container. Two (1/2 – 50%) width Columns are added to the container, which displays a Title Element on the Left and a Text Block Element, linking to the Recipes page, on the Right.
Below this row are two more rows, each containing four (1/4 – 25%) Columns, each with an Image Element, Title Element and a Text Block Element. For each of these Columns, a Link URL is added, in the Column’s General settings tab, to redirect you to the recipe page for that specific Column.
Subscription Form & Parallax Scrolling
For this example, the section is built in a Container with background Image with the Background Parallax set to “Down (moves down on desktop and mobile)”. You can read more about Background Parallax Scrolling in this help file.
The Container has a single 5/6 (83.33% width) Column in the middle. Here you will find the Nested Columns Element. Simply put, Nested Columns are Columns within Columns. The Nested Columns contains one 2/5 (40% width) Column that has a Title Element and a Text Block Element, and one 3/5 (60% width) Column containing the Avada Form Element.
The Avada Form Builder is used to design and build this appointment form. 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.
In this section, more information is provided. It has a container with two rows of columns, separating the information and structuring for easy editing.
In the first row, there are three Columns. One 1/5 (20% width) Column on the Left, one 3/5 (60% width Column in the Middle and another 1/5 (20% width) Column on the right. The only Column containing any Elements is the Middle Column with a Title Element and a Text Block Element.
The second row of Columns are three 1/3 (33.33% width) Columns, each with an Image Element, Title Element and a Text Block Element. For each of these Columns, a Background Color is set, which creates visual separation of the Column content.
Using images as a way to highlight a call-to-action or for advertizing and promotion reasons is standard practice, and the Avada Website Builder makes this task even easier for you. To create this section, a Container Element is added to the page content. To create the style, two 1/2 (50% width) Columns are added to the Container, and each Column then has an image selected as the background overlay. Each Column houses a Title Element, a Text Block Element, and then a Button Element. Padding and margin options are set for each Column to create that visual placement.
The final point to highlight is that each of the two columns is a clickable area by enabling the Link URL option within the Column Element settings.
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.
This section is also straight forward. It starts off with a Container and two 1/2(50% width) Columns. A Title Element on the Left and a Text Block Element on the Right.
The products are listed below in a separate container with 1/1 (100% width) Column holding the Woo Product Carousel Element. This Element is set to adjust the picture size automatically, including all the categories and showing the latest four products displaying the Title below the image.
More Information – CTA
A standard Call-to-action (CTA) is illustrated above and is set up with two (45% Left – 55% Right width) Columns, a couple of Title Elements, a Text Block Element, and a Button Element on the Right and a Background Image on the Left.
Following this is one 1/1 (100% width) Column with a Section Separator Element which creates separation from the CTA following on, below.
Notice the red underline that accentuates the title word “nutrition“, the Title Element has a great selection of styling and animation options that will enhance any title. Check out the examples below:
More Information – CTA
Another standard Call-to-action (CTA) is illustrated above and is set up with two (55% Left – 45% Right width) Columns, a couple of Title Elements, a Text Block Element, and a Button Element on the Left and an Background Image on the Right.
The same red underline accentuates the title word “diet“, as seen in the previous section. The Title Element has a great selection of styling and animation options that will enhance any title allowing you to select the Before Text, Highlighted Text and After Text.
This section starts off with a Container and two 1/2(50% width) Columns. A Title Element on the Left and a Text Block Element on the Right.
In the next row we have two more 1/2 (50% width) Columns. There is an Icon Element in the Left with a Background Image. In this example, the Column settings for the Link URL, in the General tab, is set to open the relevant page that contains the full information of this section. In the third row, there is a single 1/1 (100% width) Column with a Section Separator Element. For the Last row, three 1/3 (33.33% width) Columns are used. Each of them represents a Nested Columns Element, Title Element and a Text Block Element.
Using the versatile Nested Column Element, you have one 1/1 (100% width) Columns with an Icon Element and a Background Image. In this example the method is used to overlay a Background Image for a single Element without it effecting the main Column.