πŸš€ Black Friday Sale: Save up to 40% on WP Rocket– Boost Your Website’s Speed & Core Web Vitals! πŸƒβ€β™‚οΈ

How to Add Phone Number and Email in GeneratePress Header?

In this tutorial, we’ll learn how to add phone number and email in GeneratePress header section.

Here I am going to use the GenerateBlocks plugin and GenerateBlocks Elements Module to add a phone number and email address with an icon on the top bar of the GeneratePress Theme.

Prerequisites:

  • GeneratePress Theme installed and activated (Premium)
  • GenerateBlocks plugin installed and activated (Free)
How to Add Phone Number and Email in GeneratePress Header?

Steps to Add Phone Number and Email in GeneratePress Header

Having your contact information on the above-the-fold section of the website significantly improves user experience and makes it easier for visitors to reach out to you.

This simple tweak can enhance your site’s overall experience and easy to contact the website owner.

Step 1: Install GeneratePress Premium Plugin

If you are using a free theme, adding a phone number and email address in the top section might be impossible, so get yourself a pro version of GeneratePress Theme.

Step 2: Activate Elements Module in GeneratePress Theme

Go to Appearance > GeneratePress > Elements > Activate

Activate Element Module in GeneratePress Theme

Step 3: Add a Block using the New Element Section

Now, go to Appearance > Elements > Click on Add New Element >Choose Element Type as Block. Add the title and start designing the top bar.

Step 4: Design the top bar section in GeneratePress Theme

  • First, add a Container Block.
  • Inside the Container Block, add a two-column Grid with 20 Horizontal and Vertical Gap
  • Now, go inside the grid container, add the Generateblocks Button on both containers and also remove the colors
  • Now, add a phone number to the left side with an icon and an email on the right side and make them clickable. You can get an SVG Inline icon at iconmonstr or any other site.
  • The final step and important step here is you need to adjust the Layout > Display. For Desktop: Set Display to Flex and Justify Content flex-start for phone number and Set Display to Flex and Justify Content flex-end for email address. For Mobile Devices: Set Display to Flex and Justify Content Center for both phone number and email
Top Bar Section in GeneratePress Theme

Step 5: Manage Display Rules

Go to Display Rules and select Location as Entire Site.

Now go to the Element tab on the sidebar. Select Element Type as Hook and Hook Name as before_header.

GeneratePress Hook Before Header

Step 6: Hit the Publish Button

Finally, go to your homepage and see the top bar with your phone and email address at the top of your website.

Conclusion

By following the steps outlined above, you can effectively add phone number and email in GeneratePress header of your WordPress website.

Besides these, you can add any other stuff like affiliate marketing text and buttons, any notification bar, etc in the top section of GeneratePress Theme with the help of the Generateblocks plugin.

Share:

I am obsessed with WordPress and write articles about WordPress Speed Optimization, SEO, and Blogging. I mostly publish tutorials on GeneratePress, Astra, Kadence, and GenerateBlocks.

Leave a Comment