Creating a Personalized Website: Advanced Use of the Elementor Editor and WoodMart Theme (05)

The previous issue introduced theBasic introduction to the Elementor editorPaired with the WoodMart theme, today we're going to dive into how to use the Elementor editor with the WoodMart theme for more advanced website design customization. Whether you're new to design or experienced looking for a more refined layout, this post will provide you with practical steps and tips.

Steps: Front-end of the site → Edit with Elementor → slide to the front of the footer(or the addition of a module could be)

As shown above, there are four buttons, namely Add, template file, ai build, theme template options

Generally use the most is the first, the second template file, unless you save a module, and then want to add to a certain location, but this belongs to the high-level settings, the general novice can not be used, the third ai build is not recommended to use, the fourth theme templates, according to the theme is not the same, of course, the content is not the same, the above shows that the WoodMart Theme

When we click on add we get the following options

The style of the container shown above can be selected according to the actual situation.

They have a clear difference is that Grid (grid) is required to set the first in order to set the second grid, Flexbox (flexible box) does not need, but there will be a difference, is that if you add a flexible box began to select only the whole, not separate, select two or three, he can not select, unless re-added, but if the grid will be able to switch between the multiple formats themselves. People according to the actual situation to choose

After adding a container, there are three buttons on top of the container: Add, Edit, and Close.

Earlier in the article it was stated that any container additions are also able to add containers, except for the footer at the very bottom of the page, which can be added.

The second one is the editor, which has some options for container settings.

The third one is closed. No need to say anything.

Let's focus on the second edit, as follows

The others are inPrevious Previous post.Have introduced on not to say, as shown above, this function is generally not used by novices, but if you want to containers more beautiful or adjust the diversity must be, in fact, the translation is written very clearly, so it is easy to understand, the red box has a project, there is a direction below, the above picture shows down, because you add a container to choose is down the other are some of the orientation of the display, we go according to the actual situation to adjust!

The style is also inPrevious article.Introduced, and not much more to say here

One of the features not covered in today's narrative advanced

As shown above, in order to better understand, I use the Chinese picture to say, it should be better to understand some of the basic Chinese have explained the options, we should be "sticky" more confused, because the translation is inaccurate, in fact, on the container you can choose to fix the top or the bottom, or the meaning of not fixed!

Transform: Container (Container) of some special effects, we go according to the translation to choose, generally do not have to move!

Container point to add, you can choose the module, the left side will have the container (Layout), and the basic function (Basic), and theElementor PRO version (Pro) features

The basic functions of each theme are different, if your site has other plug-ins, it will also be in the basic function of the display

But the basic functions to meet your basic construction of a website, may not be enough beautiful, and colorful effects, then you need to Pro paid version in order to achieve, need to add what module, click on the module you need to drag to the container on the line!

Module Description:

Steps: Website front-end → Edit with Elementor → Container (Container) → Heading

Heading: title, understood as a large title, the following chart, you can set the title of the text (Title), as well as the link (link) and the size of the title (HTML Tag) as well as the direction of the title (Alignment), the title color (Text Color), the font layout (Typography) size or font style, size and so on!

Steps: Front-end of the site → Edit with Elementor → Container (Container) → Text Editor

Text Editor: text editor (if the text is more recommended to use this, such as some of the product introduction, the company's introduction, etc.) the following chart, the text content, text breakdown (Columns), can be understood as the text in the entire container occupies how much, column gap (if you do not set the text breakdown, you do not need to adjust)

As shown above, there is also a text editor style that allows you to adjust the color scheme, text orientation, text color, text header color, typography, content alignment, and content width.

Steps: Front-end of the site → Edit with Elementor → Container (Container) → Text Editor

image：Photo Gallery

Choose lmage: choose an image, you can choose to upload it from the website's media library or locally

Image Resolution: the size of the resolution of the image, you can choose from a very wide range of resolutions.

Caption: the title, can be displayed or not displayed

Link: link, can show customized links, or media links

As shown above, Alignment (picture position) Width (picture width), Max width (maximum width of the picture), Height (picture height) Normal (default state), Hover (hover state, mouse click state) two different states can be adjusted, and the other according to the translation of the understanding on the line!

Steps: Container (Container) → select the two-column layout → picture selection grid in the form of selecting two columns

As above, if you want to realize the effect of the above picture, you need to use the Advanced function of the picture (image).Please note that it is the image, not the container.In the following figure, you need to set the value of the offset in the Margin (outside the box), but please disconnect the symbols of the link, if you do not disconnect then the four directions are changed together, as shown above, a bias left down, a bias right up, in the corresponding direction to set the value on the line!

Of course there is a simple way that is to make a picture of this kind of direct insertion, will be simpler than my method, we choose according to need

Steps: Front-end → Edit with Elementor → Container → Button

Button: button, you can jump to the link button, is an essential feature, but also beautiful!

Type, generally the default, you can also choose other

Text (button name), write as appropriate

Link button jumps to a link

Icon (icon), you can set the icon or no icon, depending on the actual situation adjustment

Button lD (Button ID), generally do not need to set the

Position: the direction of the button

Typography: button layout

Text Color: Text color
Background Type
Color: Color

Normal: Default
Hover: Hover

Two different states are adjusted separately

Steps: Website front-end → Edit with Elementor → Container (Container) → Spacer

Spacer. You can understand it as a gap between the top and bottom blur or container

Steps: Website front-end → Edit with Elementor → Container (Container) → Divider

Divider.

You can set the width and color, as well as height, he and the spacer (Spacer) is the difference between the function will be a little more powerful, spacer (Spacer) function is just a gap, as shown below, divided into lines (Divider) the effect will be different

More modules

Video: Video insertion

Google Maps: map insertion

icon: icon

These settings are relatively simple to set up, so you can set them up according to the translation

In this installment, we talked about the basic features of Elementor editor and some experience sharing, through today's tutorial, we hope you can master the advanced application of Elementor editor with WoodMart theme, so as to create a website that is both beautiful and full-featured. In the next installment, we will introduce the features of the paid version of Elementor, so stay tuned for more professional tips and in-depth guidance!