Elementor Editor In-Depth Analysis: Creating a Personalized WoodMart Theme Website (04)

In the last installment we talked about how to set upWoodmart-themed posters(banner), this installment we talk about Elementor editor to renovate Woodmart theme, we will dive into how to use Elementor editor to further customize and optimize your WoodMart theme. With this tutorial, learn how to utilize Elementor's multi-functional modules to create a website front-end that is both beautiful and functional.

Enter edit mode as above

Each template will have different modules inside, as shown below, this is a screenshot of one of the modules, but the actual application does not mean that every module is appropriate

Below, this is the same template, but with a different effect

Doesn't it look much better, not so monotonous but with its own personality

Next we'll talk about the effects of each feature of the Elementor editor and how to do it exactly.

We first explain the entire layout of the template above, we enter the template to the right of the edit page will see the entire layout, as follows

Layout as shown above are Container (container) composition, container inside the various modules

As shown above, for example, by the title and classification module two realized, on the right will correspond to the display, Elementor editor, more suitable for novices, but if you want to adjust the more beautiful and better looking, but also need some experience!

Let's take two of the more specialized modules, for example, as follows

From the picture above, this is a poster or picture plus a product display module right, the layout is 1:3, in fact, it is the two containers inside the module added

First look at the left side, the following picture box symbol is the container (Container), the pen symbol is the module editor, which is a Promo Banner (promotional banner) module

Steps: Website front-end → select the corresponding module → box (container) Container

Entering the container, we can see some settings of the container as follows

There are three main settings, as follows

Layout: Layout

Style

Advanced: Advanced settings (advanced)

Container Layout: the style of the container, divided into flexible boxes and grids (red boxes).

Content Width: the layout of the container, divided into center and full width, full width is full screen, according to the translation and the actual effect can be understood (yellow box)

Width: the width of the entire container. (blue box)

Min Height: height of the entire container (blue box)

You can see the blue box to adjust the back can be adjusted according to the percentage of adjustment or pixel adjustment, but there are others, a total of four formats, the most commonly used or I said that the two, we adjust according to the actual situation, but also see the device pattern, indicating that it is possible to adjust according to each device individually, if the adaptive is not ideal, you can go to adjust the

Gaps: columns, understood as gaps before the container (green boxes)

Style, as shown above.

Here the container to adjust the Background (background) color, the other temporarily do not need to move!

As shown above.Advanced: Advanced settings (advanced)

Layout→Margin: adjust the offset of the outer frame

Layout→Padding: adjust the offset of the inner frame

Generally do not need to adjust, if you need to style is not the same, or fill the need to adjust, that is, the need for better results, but do not recommend that novices get, may lead to the computer side of the feeling of good, but the other devices appear to be messed up feeling!

Responsive: responsive, you can make this module, in so the device to display, or only display in a device, very flexible, and even you can set up two of the same, but for different devices, has arrived at a very good effect, but also to avoid self-adaptation or adjust to the effect of a solution!

The above is the container (Container) The basic use of the container basics are pretty much the same, there will be subtle differences, but not the module, the difference will be great!

Let's talk about the module

General: In general, this module displays the ability to insert links.

Background.

Source: Background sources

choose imae: choose image, but only if your source is choose image, you can go to media library or upload image

Banner height: the height of the module

Image Position: position of the displayed image

As shown above, Content

Corresponding to the location of the right module, this is relatively simple not to tell the same, you can also be based on the translation to understand the

Style: style, here you can deal with the style of each component, is to make them more beautiful, such as the title of the description of the button, as well as more effects of the module, we go according to the translation to understand the

Advanced: advanced settings (advanced), basically the same as containers, but novices don't need to tweak them

Next, we'll talk about the right side.

Steps: Website front-end → corresponding container (box icon) or module (pen symbol)

As shown in the image above, he is made up of a container with a title module and a button module added inside, and a product module added underneath the container

As shown above, touching the title will bring up the pen symbol to enter the editor, and the same goes for the button module, as shown below

As the picture above, the meaning is very well understood according to the translation. Through the detailed introduction in this issue, I believe you have a more in-depth understanding of the application of Elementor editor in customizing WoodMart theme. We showed how to enhance the visual effect and functionality of your website with different modules and containers. Stay tuned for our next article where we will continue to explore more tips on using basic modules and containers to help you further enhance your website design. Thank you for reading and we'll see you in the next installment!