Elementor and Astra Theme Layout Tips: Container and Grid Best Practices (07)

In our last installment, we explored theAstra Themeof some basic typography tips. Today, we're going to continue to dive into how theElementorMake better use of Container and Grid layouts in the editor to help you create more flexible and aesthetically pleasing web designs. Whether you are a beginner or an experienced designer, these tips will help you.

If you need to set up two or four or even more layouts

As shown above, you need to first add a container (Container)

Steps: Website front-end → Edit with Elementor → Layout → Container or Grid

How to choose the Container and Grid, this needs to be based on the actual situation, but it is recommended to choose the Container first!

Container can choose from a variety of layouts, of course, Grid also works, but Container can always add modules inside, while the Grid is fixed, the following chart, the red box is Container, if you need to display multiple modules, certainly Container, yellow box is Grid, the obvious results

But Grid also has its own advantages, if you already have a container, but you want to be divided into two or even four layouts, that reset the Container two layouts of the container is not able to drag the container to the first one, but the Grid can be adjusted at any time, the following chart, so we go according to the actual situation to adjust the

Next, let's talk about the setup and method of two layouts

The above is a Container two layouts, the left is a text and title module plus a text module plus a button module, the right is a single picture module

The first text module on the left why do people think it can be adjusted so small

We find the text module Edit Text Editor

Steps: Frontend → Edit with Elementor → Edit Text Editor

Need to resize the text, follow the steps I described above and the color is adjusted where the content is

That sets it up.

Button module to set the text and position on it, of course, the background color style are also adjustable

Steps: Website Frontend→Edit with Elementor→Creative Button

The image module on the right is not a full screen hog, just crop it to the right size if you need to, vertical image, not horizontal image

This is how the two layouts

Of course the four layouts are the same

After setting up the four layouts, add the title and text modules to each individual one

The background color is set black for a container

Module background is white

The module sets the width, as well as the position, and the gap

Summary:

By the end of this article, you should have a better understanding of the use of Container and Grid, and be able to choose the right layout for your actual needs. Remember, Container is suitable for more flexible layout needs, while Grid can help you quickly split the layout in existing containers. In the next installment, we will continue to bring you more practical tips and tricks about Astra theme, stay tuned.