WordPress Tutorial, Elementor Tutorial

Elementor Getting Started Tutorial:Learn to build a website with Elementor from scratch

How to install Elementor?

Install via WordPress backend:

step 1,Log in to WordPress backend,Search for Elementor in the plugin bar,Click to install and activate now。

立即安装

Step 2,Create an account。If you currently only want to experience the free version,Please select skip。

Elementor创建账号

Step 3,Install theme。Elementor officially recommends Hello,It is a lightweight WordPress theme,high speed,But as far as building a website is concerned,It will be easier for novices to choose the Astra theme,It is recommended to skip。

hello主题

Step 4,Add website name,That is, the title of the homepage of the website,Skip here first,Follow-upSEO optimizationFill it out when。

添加网站名称

Step 5,Upload websiteLogo。Same as above steps,Skip if not ready,You can upload or modify it at any time later。

上传Logo

Step 6,Learn how to use Elementor。You will see two wizards,On the left is the creation page,On the right is the import template,You can click to view it yourself,If you choose to skip,Will jump to the creation page。

了解如何使用Elementor

come here,Elementor is installed,The website backend will also add relevant setting options,The next step is to become familiar with its operating interface and how to use it,and use it to create website pages。

elementor设置

Download via Elementor official website

  1. Go to Elementor.com,Then click download。
  2. In WordPress backend,Clickplug-in  >  Install plugin
  3. ClickUpload plugin,Then select the file you downloaded in Elementor。
file VelGqFbBiN

Elementor usage tutorial

UsingElementor,You don’t need to learn any programming knowledge,You can build a high-end website。but,Before building a website, it is best to learn its basic operations,Considering these,I will explain step by step how to use it。

1. Create page

step 1,First create a new page in the WordPress backend,Then click the Edit with Elementor button at the top。

使用 Elementor 编辑

Step 2,Become familiar with the structure of the editor,There are three parts in total,They are toolbar modules,Visual interface and navigator。

  • toolbar:Contains a large number of drag-and-drop modules,Such as block、picture、letter、Buttons etc.
  • Visual interface:When editing a page,Know what changes have occurred on the page in real time
  • Navigator:Displays the layout of page elements from top to bottom,Conveniently adjust the order of each module
elementor编辑器

Step 3,Click the plus sign to select the structure you want,Determine approximately how many blocks should be placed in the same row or column。

elementor区块

Then,Drag and drop the module from the left toolbar into the right block,Such as title、picture,button。

拖动elementor模块

Step 4,Click on the blue dotted box on the right,Select the module you have added,You can modify the content in the module。

编辑区块内容

Step 5,Click Settings in the lower left corner,Change page layout to full width,The width of each block can be adjusted individually later。

elementor宽度

Step 6,Use preview to see how the page will actually look,After confirming everything is correct, click Publish.。So far,The page is created successfully。

elementor发布页面

After the page is published,If this page is the homepage of the website,You can go to WordPress backend settings > read,Set this page as a static homepage,and save changes,This page will be displayed when accessing the domain name in the future.。

2. Elementor Pro

Based on the free version,Pro adds many advanced features,The most useful of these are templates andtheme generator,Also includes more modules、landing page、Pop-up windows etc.,Next I will teach you how to use Pro。

step 1,First go to the official website to buy Elementor Pro,Then add the plug-in in the backend of the website,Upload installation files,Click to install and activate now。If you think the official website is too expensive,You can also contact Yideng Genuine Authorization,Reasonable cost。

elementor pro安装文件

Step 2,Install the plug-in,You will see an activation prompt in the upper right corner,Please click the "Connect and Activate" button。

连接Elementor pro

Step 3,View activation status,Active means it has been activated,Can be updated online later,Import massive paid templates。

激活elementor pro

3. Import template

Elementor upgraded Pro version comes withLots of templates,After importing, it can greatly simplify the website building process.,This is the biggest difference between the free version and Pro,This is also the key reason why novices can build a website with zero foundation.。

step 1,Open the Elementor page editor,Click the folder icon in the lower right corner,Enter the template library。

导入模板按钮

Step 2,Select template。If you meet someone you like,You can click on the magnifying glass on the image to preview it。

预览Elementor模板

Step 3,Click the green "Insert" button,Import templates online with one click。

导入模板

Step 4,After template import,You will see a series of ready-made modules,The next thing to do is to custom design them。

导入后的Elementor模板

4. Custom design page

Every module in Elementor,You can customize them further,change its content、Typography or style,Design them how you want,The specific operation method is as follows。

Change layout

Click on the six dots above the blue dotted box,Content width checkbox,You can adjust the width of the entire block on the page。

调整内容宽度

Change structure

Click the same six points,Find the structure below the layout,The structural proportions of each module in the block can be changed。

调整结构比例

Modify text

text module,such as text and titles,Just click on the corresponding module,You can modify the text content inside。

修改文字

Edit picture

Click on the picture module to replace or delete pictures,You can also customize the image size,Alignment,Add links and subtitles。

编辑图片

Modify color

Click on the module you want to modify,There are color setting options in the style。

修改颜色

Delete module

If you encounter a block or module you don’t like,You can right-click to delete。

删除模块

response pattern

Click the fourth icon in the lower left corner,to enter response mode,Customize page layouts for tablets and mobile phones。

响应模式

Site settings

The last thing to do is click on the menu in the upper left corner,Set up basic site elements,For example, global color font、theme style、Site logo and background, etc.,Although you can also wait until the website is built before doing it,But there’s no harm in setting it up first。

站点设置

The site ID,Logo can be customized、Site name and site description。

站点标识

So far,This is the end of the introduction on how to customize the design page.,The next thing is to import the template repeatedly,keep what you want,Delete what you don’t want,and continuously improve and improve,Finally, combine the remaining modules together to make it your own。

5. Add header and footer

Design the page well,Add them into categories in your WordPress menu,Next, use the theme builder to add the header and footer of the website.,The following are detailed steps。

step 1,Click on the template in the website backend > Themebuilder (theme builder)。

主题生成器

Step 2,Click the + sign next to Header or Footer,If you encounter an error,Can be solved by changing the theme。

添加页眉和页脚

Step 3,Click on the folder icon,Add a header or footer template。

导入页眉页脚模板

Step 4,Select header and footer style,and import with one click。

选择页眉页脚模板

Step 5,Customize header and footer elements,After making changes, click Publish,and choose to display the entire site。

自定义页眉页脚

6. Elementor extension

Elementor is a great page editor,It provides many functions,But it has some imperfections in use,So we also need to install third-party theme plug-ins to further expand its ease of use.。

theme extension

I highly recommend you use Astra,A huge advantage is the ability to import complete website templates,rather than a simple single page template,It will be even better in terms of ease of use and website building speed.。

主题扩展

Plug-in extension

Elementor has many useful third-party extensions,Such as Essential Addons and Astra UAE,They come with hundreds of modules,Can help you design your website better。

插件扩展

Elementor FAQ

Is Elementor free?

Yes,it has free version,But you can also pay to upgrade to Pro,Prices range from per year 59 US dollars arrive 399 USD range。

Is Elementor fast?

it's very fast,But the premise is to match it with a good WordPress host。

Is Elementor easy to use?

Yes,The editor has an intuitive interface,Very suitable for individuals or small and medium-sized enterprises who are just learning to build websites.。

Is Elementor suitable for Google optimization?

Yes,Its code is clean and tidy,SEO friendly,Many well-known English websites are using it。

Summarize

Building a website is not an easy task,But fortunately we have Elementor to use。

Go through this tutorial,I believe you have mastered how to use it to build a website。If you have any further questions,You can contact us,Also read ourForeign trade website building tutorial:A complete guide to the entire process,The content is more systematic and complete。

About Editorial Department

kuajinggu’s editorial staff is a team of WordPress experts,Led by Dylan,In WordPress、virtual host、e-commerce、Over 10 years of experience in SEO and marketing。kuajinggu was created in 2014 Year,Currently the largest free WordPress resource website in the industry,Often referred to as the Wikipedia of WordPress。

Leave a Reply