The previous issue introduced theBasic introduction to the Elementor editorPaired with the WoodMart theme, today we're going to dive into how to use theElementor EditorPerform more advanced website design customization with the WoodMart theme. Whether you're new to design or experienced in seeking 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 in the image 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 (Flexbox) 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 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 unspoken features of 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 Functions of the PRO version (Pro)
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, Alignment, Text Color, Typography, Content align, 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!
