[WordPress website design] Xiaobai website design process (use Elementor to visually edit the website)

1. Preparation

1. Install Elementor plugin

Enter the WordPress background, search for the plugin Elementor to install it.

If the installation fails, you can download the installation package on the official website and manually upload and install it. Refer to this article
for the installation method. Download link : https://cn.wordpress.org/plugins/elementor/

2. Install themes

Take the Astra theme as an example, enter the wordpress background, search for the theme Astra to install.

3. Install auxiliary plug-ins

According to the requirements of different themes, different auxiliary plug-ins may need to be installed to import the website template. The plug-in required by the Astra theme is Starter Templates.

Two, import the template

Click Appearance-Starter Templates , you can see some of Astra's website templates. Here we can choose a template that fits the theme of our website (click on the details to preview the page) and import it into our website.

Three, visual editing

1. Modify the website logo and logo

(1) Enter your own website interface, click Edit with Elementor at the top, and enter the editing interface of Elementor.

(2) Click on the upper left corner to enter site settings-site logo , you can modify the logo and logo of the site.


2. Modify the content

Elementor is a modular editor. It splices the website from top to bottom according to different segments. Each segment is divided into one or more columns, which can be filled with different functional modules.
(1) Modify the text: place the mouse on the text that needs to be modified, and click to modify it directly, or modify it in the edit menu on the left.

(2) Change picture: Click on the picture you want to modify, and you can see the corresponding option in the edit menu on the left. You can change the image here. You can select an existing image in the media library or upload an image. At the same time, the size and alignment of the image can be modified below. In addition, you can make more settings in the advanced settings.


(3) Change the icon: Click on the icon that you want to change. Take Read More→→ as an example. On the left, you can select the icon that already exists in the icon library, or you can upload the icon yourself.

3. Modify the layout

(1) Click the button in the middle above the section, and on the left side, you can change the layout (margin, alignment), structure (number of columns), etc. of this section.

(2) Click the small window on the upper left of each column in the paragraph to modify the layout of the internal columns.

(3) To modify the position of the segment, click the navigator under the Elementor edit menu. You can see that the outline list of the website appears on the right, and you can directly sort by dragging the corresponding segments.

4. Add section

(1) Turn to the bottom of the page or click the + above a certain paragraph to add a paragraph

(2) Add a new paragraph: select the number of column methods, and then directly drag the required function module from the Edit menu of the Elementor on the left to each Bar.


(3) Use Elementor's template, here you can select the category of the template in the upper left corner, for example, I want to add related modules of About. Insert it directly after selection.

(4) Some themes also have their own built-in modules, and the adding method is similar.

Fourth, modify the page navigation

Web page navigation is the row of navigation buttons at the top of the website, which can be modified in the appearance-menu of the WordPress backend. You can select different pages to add to the navigation menu, you can also modify the order of the navigation menu, or modify the affiliation between the pages to achieve the effect of the drop-down menu.

Guess you like

Origin blog.csdn.net/weixin_44543463/article/details/112991535