How to Create Custom Headers and Footers with the Elementor Header and Footer Builder

图片[1]-如何使用 Elementor 页眉和页脚生成器创建自定义页眉和页脚-光子波动网 | WordPress教程、Elementor教程与故障修复

Elementor Header and Footer Generator (EHF) is a powerful and easy WordPress plugin that lets you create layouts with Elementor and set them to header, footer or anywhere on the page.

If you only want to display the custom header template on your homepage, blog archive page or your entire website, this plugin lets you choose specific locations to display the header and footer.

Activation Plugin

  • In the navigation panel "Add New Plugin", enterElementor Header & Footer Builder, in the displayed results click onInstallationThe
  • Run the installed plug-in as a part of theactivateThe
图片[2]-如何使用 Elementor 页眉和页脚生成器创建自定义页眉和页脚-光子波动网 | WordPress教程、Elementor教程与故障修复

Configure header or footer settings

  • Appearance in WordPressmenu, clickElementor Header and Footer GeneratorThe
图片[3]-如何使用 Elementor 页眉和页脚生成器创建自定义页眉和页脚-光子波动网 | WordPress教程、Elementor教程与故障修复
  • click (using a mouse or other pointing device)Add NewTemplate and name
图片[4]-如何使用 Elementor 页眉和页脚生成器创建自定义页眉和页脚-光子波动网 | WordPress教程、Elementor教程与故障修复
  • Select whether you want to create a header or footer template. In this example, we choose "Header".
图片[5]-如何使用 Elementor 页眉和页脚生成器创建自定义页眉和页脚-光子波动网 | WordPress教程、Elementor教程与故障修复
  • Use "Add Display Rule"Select the target location to determine where the template should be displayed
图片[6]-如何使用 Elementor 页眉和页脚生成器创建自定义页眉和页脚-光子波动网 | WordPress教程、Elementor教程与故障修复
  • You can also set the user role for which the template will be displayed. Examples of user roles include editor, administrator, login, logout, etc.
图片[7]-如何使用 Elementor 页眉和页脚生成器创建自定义页眉和页脚-光子波动网 | WordPress教程、Elementor教程与故障修复
  • click (using a mouse or other pointing device)"Release."button to apply the changes.
图片[8]-如何使用 Elementor 页眉和页脚生成器创建自定义页眉和页脚-光子波动网 | WordPress教程、Elementor教程与故障修复

Design your template.

  • click (using a mouse or other pointing device)"Edit with Elementor"buttons to edit the template layout using the Elementor page builder.
图片[9]-如何使用 Elementor 页眉和页脚生成器创建自定义页眉和页脚-光子波动网 | WordPress教程、Elementor教程与故障修复

Scroll down in the sidebar and find the EHF plugin to add the following widget to the Elementor editor.

  • retinal image
  • copyright
  • navigation menu
  • page title
  • Site Title
  • Website tagline
  • look for sth.
  • Website Logo
图片[10]-如何使用 Elementor 页眉和页脚生成器创建自定义页眉和页脚-光子波动网 | WordPress教程、Elementor教程与故障修复

Attention to responsiveness

  • Another thing you need to do before returning to the WordPress dashboard is to check the responsiveness of the new header elements. The mobile menu can't really accommodate the horizontal, full-width spanning elements we use on desktop. So, customize before proceeding.
图片[11]-如何使用 Elementor 页眉和页脚生成器创建自定义页眉和页脚-光子波动网 | WordPress教程、Elementor教程与故障修复

You can design mobile versions of the header and footer templates using the responsive switches at the bottom of the widget menu:

This will give you an idea of how the new header or footer element will appear on tablets and smartphones. If you want to edit any element for a specific device screen size, look for the icon next to the element:

图片[12]-如何使用 Elementor 页眉和页脚生成器创建自定义页眉和页脚-光子波动网 | WordPress教程、Elementor教程与故障修复

Conclusion:

With the Elementor Header and Footer Builder plugin, you can choose specific locations to display these layouts, including the homepage, blog archive pages, or the entire site. Activating and configuring the plugin is easy, just install and activate the plugin in your WordPress dashboard, then create and set the template's location and user roles as needed!


Contact Us
Can't read the tutorial? Contact us for a free answer! Free help for personal, small business sites!
客服微信
Customer Service
Tel: 020-2206-9892
QQ咨询:1025174874
(iii) E-mail: [email protected]
Working hours: Monday to Friday, 9:30-18:30, holidays off
© Reprint statement
本文作者:红牛独立站
THE END
If you like it, support it.
kudos0 share (joys, benefits, privileges etc) with others
commentaries sofa-buying

Please log in to post a comment

    No comments