In this article, it will be explained in detail how to use the Elementor Free Edition respond in singing ElementsKit Plugin(a free Elementor header and footer builder) to create and customize the Elementor Header and FooterThis is done entirely through a visual interface.
![图片[1]-如何使用 Elementor 免费版和 ElementsKit 创建自定义页眉页脚](https://www.361sale.com/wp-content/uploads/2024/12/20241231143416651-image.png)
Step 1: Install Elementor
First, make sure that your WordPress The site has the Elementor plugin installed and enabled. Install it by following the steps below:
- In the WordPress backend, go to plug-in (software component) → Add New PluginThe
- Search for "Elementor".
- strike (on the keyboard) Installation, and then enable the plug-in.
![图片[2]-如何使用 Elementor 免费版和 ElementsKit 创建自定义页眉页脚](https://www.361sale.com/wp-content/uploads/2024/12/20241231142449249-image.png)
Attention: The free version of Elementor offers great functionality, but for more advanced customization, you may need the Elementor ProThe
Step 2: Install ElementsKit Plugin
To create and customize headers and footers, install the ElementsKit Plugin is a good choice. This plugin is designed for Elementor User-designed with rich header and footer templates and customization options.
- In the WordPress backend, go to plug-in (software component) → Add New PluginThe
- Search for "ElementsKit".
- strike (on the keyboard) Installation, and then enable the plug-in.
![图片[3]-如何使用 Elementor 免费版和 ElementsKit 创建自定义页眉页脚](https://www.361sale.com/wp-content/uploads/2024/12/20241231135508749-image.png)
Step 3: Create a Custom Elementor Header or Footer
After installing Elementor and the ElementsKit plugin, you can start creating a custom Elementor header or footer.
Creating and Customizing Elementor Headers
- In the WordPress backend, click ElementsKit → Header FooterThe
![图片[4]-如何使用 Elementor 免费版和 ElementsKit 创建自定义页眉页脚](https://www.361sale.com/wp-content/uploads/2024/12/20241231135730164-image.png)
- strike (on the keyboard) Add new template, name the new template.
![图片[5]-如何使用 Elementor 免费版和 ElementsKit 创建自定义页眉页脚](https://www.361sale.com/wp-content/uploads/2024/12/20241231140110119-image.png)
- In the template settings select typology because of Headerand select the header to display prerequisite(e.g., displayed throughout the site, on individual pages, or on specific archive pages).
![图片[6]-如何使用 Elementor 免费版和 ElementsKit 创建自定义页眉页脚](https://www.361sale.com/wp-content/uploads/2024/12/20241231140240750-image.png)
- strike (on the keyboard) activate After that, click on the Editorial contentYou can customize it by going into the Elementor editor.
![图片[7]-如何使用 Elementor 免费版和 ElementsKit 创建自定义页眉页脚](https://www.361sale.com/wp-content/uploads/2024/12/20241231140314315-image.png)
In the Elementor editor, you can quickly add headers using the widgets and templates provided by ElementsKit.ElementsKit provides several beautifully designed header templates that can be selected and further customized according to your needs.
![图片[8]-如何使用 Elementor 免费版和 ElementsKit 创建自定义页眉页脚](https://www.361sale.com/wp-content/uploads/2024/12/20241231140720804-image.png)
Creating and Customizing Elementor Footers
The steps for creating a footer are similar to those for a header, except that you need to select the Footer as the template type.
- exist ElementsKit In the plug-in, select Header Footer Module.
- strike (on the keyboard) Add new contentSettings typology because of FooterThe
- After setting the conditions (selecting the location of the footer display), click the activateThe
![图片[9]-如何使用 Elementor 免费版和 ElementsKit 创建自定义页眉页脚](https://www.361sale.com/wp-content/uploads/2024/12/20241231141242142-image.png)
As with headers, footers can be customized in the Elementor editor using the templates and widgets provided by ElementsKit, by adding a footer such as theContact Information,social link,Copyright Informationetc.
![图片[10]-如何使用 Elementor 免费版和 ElementsKit 创建自定义页眉页脚](https://www.361sale.com/wp-content/uploads/2024/12/20241231141743823-image.png)
Step 4: Customize and Edit Header and Footer
After creating a header or footer template, it can be further customized using Elementor's visual editor:
- Click next to the template compiler button to enter the Elementor editing interface.
- utilization ElementsKit The widgets, such as thenavigation menu,search box,buttons,icon (computing)etc., to create a header or footer that matches yours.
![图片[11]-如何使用 Elementor 免费版和 ElementsKit 创建自定义页眉页脚](https://www.361sale.com/wp-content/uploads/2024/12/20241231142003363-image.png)
- For the header, you can add Mega Menu,Shopping cart icon(for e-commerce sites) and other enhancements; for footers, you can add Social Media Links,copyright statement,Site Map and other information.
ElementsKit provides several design templates, so you can choose a suitable one and customize it.
Step 5: Activate and Display Custom Header and Footer
When you are done editing, you can preview and save the header or footer template directly:
- Once you have completed the design, click on the bottom right corner of the save (a file etc) (computing) Button.
- return to Header Footer Admin page to make sure your template is activated.
- Your customized Elementor header or footer will be automatically applied to the location of your choice (for example:Entire website, specific pages or articles).
![图片[12]-如何使用 Elementor 免费版和 ElementsKit 创建自定义页眉页脚](https://www.361sale.com/wp-content/uploads/2024/12/20241231142214923-image.png)
summarize
By using the Elementor The free version and ElementsKit PluginWith ElementsKit, you can easily create and customize your website's header and footer. The entire process is done through Elementor's intuitive drag-and-drop interface, and customization is easy and flexible with the wide range of templates and widgets provided by ElementsKit.
Link to this article:https://www.361sale.com/en/32294The article is copyrighted and must be reproduced with attribution.
No comments