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. Added to the container are two (45% Left – 55% Right) width Columns with an Image Element added to the Left Column and Title, Text, and a Button Elements added to the Right Column.
Services – CTA
This section pretty straightforward and easy to replicate. It starts with a Container. Added to the container are three (1/3 – 33.33%) width Columns are added to the container, with the left and middle displaying an Icon Element, Title Element, Text Block Element, and a Button Element.
The last column contains a background image and Separator Element with marginal spacing set to 22VW above and below the 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 & Parallax Scrolling
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 built in a Container with background image with the Background Parallax set to a fixed position. You can read more about Parallax Scrolling in this help file.
The Container has a single 2/3 (66.67% width) Column on the left. Here you will n Image Element is added to the left Column. In the right Column you will see couple of Title Element’s, a Text Block Element, and a Button Element.
CTA – Call to Action
A standard Call-to-action (CTA) is illustrated below and is set up with two (1/2 – 50%) Columns, a couple of Title Element’s, a Text Block Element, and a Button Element on the Right and 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.
This section is a single 1/1 (100% width) Column with a Blog and Button Element. The Blog Element is setup to display the 3 latest posts published, with a CTA Button redirecting you to the Resources page.
Appointment Form & Parallax Scrolling
For this example, this section is built in a Container with background image with the Background Parallax set to a fixed position. You can read more about Parallax Scrolling in this help file.
The Container has a single 1/3 (33.33% width) Column on the right. Here you will a Title Element, a Text Block Element, and 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.
More Information – CTA
For this example, the CTA section is made up of two (1/2 – 50%) Columns side by side. An Image Element is added to the right Column. In the left Column you will see couple of Title Element’s, a Text Block Element, and a Button Element.
The section was created using a container with a single 1/1 (100% width) Column that holds a Section Separator. Instead of using an image to create this effect, the Section Separator Element comes with several styling options to choose from. For this example, the Paint style was selected set to display vertically at the bottom and the background color of the element is set to match the area above.
For more information on the available, check out the Section Separator Feature Page.
CTA – Call to Action
Another standard Call-to-action (CTA) is illustrated above and is set up with two columns. The left is a 2/5 (40% width) Column and one on the right is a 3/5 (60% width) Column. On the Left we have an Image Element and on the Right you will find a Title Element, a Text Block Element, and a Button Element.
This section uses a Container with three 1/3 (33.33% width) Columns. Each of these containing a single Text Block Element. This is a great way to add snippets of information to your page relating to your Business or Services.
More Information – CTA
A standard Call-to-action (CTA) is illustrated below and is set up with two (1/2 – 50%) Columns, a couple of Title and Text Block Element, and a Button Element on the Right with a Background Image set for the Left Column.
Depending on the marketing goal, CTA’s can drive a variety of different actions and results for your website visitors.
This section uses a single Container with three 1/3 (33.33% width) Columns, each containing a Person Element.
The Person Element allows you to add a personal profile, replete with image, name, title, description, and a whole bunch of styling options.