Comprehensive analysis of Avada theme homepage layout and container setting tips (04)

When using Avada theme, many newbies may be confused about its homepage layout, especially in the selection and setting of containers and modules. Compared with other page builders such as Elementor and WPBakery Page Builder, Avada theme's built-in editor provides a more intuitive and efficient way of layout. In this post, we will explain in detail how to do homepage layout in Avada to help you quickly get started and master the skills of container and module settings.

Steps: Website Frontend→Edit Live→ADD COLUMNS

On the first page we can see this symbol placed in the center and on the right, so how do we choose it?

If you are adding the line you have now, click on Add in the center

If you want to add is below, click on Add Symbol on the right hand side

If you want to set the current settings for the containers in this column, select the pen symbol on the right side

Then there will be a corresponding container settings, such as width, style, spacing and what device to display ah and so on

As shown above, Avada theme comes with the editor, for the outer frame and inner frame adjustment he is visualized, for elmentor and WPBakery Page Builder editor, you also need to click and then set up the advanced inside, can be too much convenience!

On the way blue is the inner frame, purple is the outer frame, is directly pullable, both up and down or on both sides, this point is still very well done

Then after adding it, a popup will appear to select the container style (as shown below)

I think it's also a good design, he doesn't allow modules to stand alone, a container has to control the module, but elmentor and the WPBakery Page Builder editor are the ones that allow modules to stand alone

style basically covered, do not need to manually set up the arrangement again, the advantage is that there is no need to worry about their own containers will have a bad arrangement of the effect, I'm talking about if there are more than four columns or more, where basically covered, there is no need to go to manually set up the container, but the elmentor and the WPBakery Page Builder editor is that you can add more containers, of course! There are also more uncontrollable, such as the arrangement of the distortion or front-end display is not neat, of course, this customization of the space higher

As shown above, we add is a 1/1 container, also on a container layout, and then we click Add Module, (as shown below)

Is not the feeling that there are too many modules, then if you are a certain level of proficiency, you can try the search in the upper right corner, of course, newcomers are recommended to still look for this page, more operations

This is the text block, or text module, which is also the most used

Click on the pen symbol in the center (edit) Note that all the side ones are container settings, if it's a module click on the center one

Steps: Frontend→Edit Live→ADD COLUMNS→Text Block

Then there are a number of settings, text content, text position, and device presentation

This is not recommended, it might ruin the layout

Click on the question mark will also have the corresponding explanation, if you want to get a column of more than one, directly with the container of the multi-column layout on the line, this is more compatible, there will be no front-end settings are not compatible with the situation!

Of course in Design (design) will also have the color background and inner distance settings, according to you is the actual situation to

Pushbutton Module

Steps: Frontend→Edit Live→ADD COLUMNS→Button

Then we can set some information of the button on the left side, such as the link, button text, and the format of the button jump, etc. (as shown below)

If you don't understand what each setting means, you can check the corresponding question marks are explained, this is the details of a good theme!

Design: Here you can set the style of the button, as well as the icon, button size, etc.

Steps: Frontend→Edit Live→ADD COLUMNS→image

Image Module

Click Edit, then replace the image, upload it in the media library or locally, and add the link to complete the basic image jump!

In Design (design) processing can be adjusted to the maximum width and position, etc., there is a picture can be set outside, you can understand a container control picture, is a mask, or quite interesting!

You can also set the position of this mask, the size, and whether the image is duplicated, etc.

Caption, you can also design a caption for the image.

There are many types with different header positions, you choose according to your actual situation

Red because the background color is set to red

As shown above, it is possible to change the

All modules are animated in the last setting (Extras)

The following can be left alone, some modules do not have this

summarize

With this tutorial, I'm sure you've gained a more in-depth understanding of the Avada theme's homepage layout. From the selection of containers to the setup of modules, we see how the Avada editor simplifies the layout operation. If you find this installment helpful, welcome to stay tuned with us, and we will continue to explain more tips and tricks about Avada theme in the next installment to help you build a professional website with more flexibility.