How to Add a Button in Your WordPress Header Menu

Do you want to add a button in your WordPress header menu?

Adding a button in the header navigation menu lets you create a more noticeable call to action. It can get more clicks to your most important pages and create a better user experience by helping your visitors take action.

In this article, we’ll show you how to easily add a button to your WordPress header menu.

Why Add a Button in WordPress Header Menu?

WordPress navigation menus are usually plain text links that all look the same. In terms of design, all the links are given the same importance and weight.

What if you wanted to add a link to an online order form, a login or sign up page link, or a buy now link? These important calls to action will look just like the rest of the links in the header menu.

Changing important links in your WordPress navigation menu into buttons will make them more noticeable. This helps users easily find them, improving their engagement and experience on your website.

By default, WordPress has options to add buttons in WordPress posts and pages using the Buttons block. However, it does not have a built-in option to add buttons in navigation menus.

Luckily, there is an easy hack to convert any link in your WordPress navigation menu into a button.

That being said, let’s take a look at how to add a button in your WordPress header menu without installing a plugin.

Adding a Button in Your WordPress Header Menu

First, you need to add the link that you want to convert into a button into your WordPress navigation menu.

Simply go to the Appearance » Menus page in your WordPress dashboard and add the link to your navigation menu.

After that, you need to click on the Screen Options button at the top. This will reveal a fly down menu with a bunch of options. You need to check the box next to the ‘CSS Classes’ option.

Now, scroll down to your menu and click to expand the menu item that you want to convert into a button.

You’ll notice a new CSS class option in the menu item settings. Here, you need to enter a class name. You can call this CSS class any unique name you want, but for the sake of this tutorial we’ll call it menu-button.

After entering a name, click on the ‘Save Menu’ button to store your changes.

Now that we have added our own custom CSS class to the menu item, we can design it by adding our own custom CSS code.

Simply go to Appearance » Customize to launch the WordPress theme customizer.

You’ll now see a live preview of your website on the right and a bunch of theme settings in the left column.

Now you need to click on the Additional CSS tab to expand it. This will show you a box where you can add your custom CSS code.

Here, you can copy and paste the following CSS code as a starting point.

.menu-button { 
background-color:#eb5e28;
border:1px;
border-radius:3px;
-webkit-box-shadow:1px 1px 0px 0px #2f2f2f;
-moz-box-shadow:1px 1px 0px 0px #2f2f2f;
box-shadow:1px 1px 0px 0px #2f2f2f;
}
.menu-button a,  .menu-button a:hover, .menu-button a:active { 
color:#fff !important;
}

As soon as you add the CSS code, the theme customizer will automatically apply it to your website preview, and you will be able to see the changes take affect.

Don’t worry, the changes won’t be live on your website until you click the Publish button.

Feel free to play around with the CSS as much as you like. You can change background color, link text color, add border, and more.

Don’t forget to click on the Publish button to save your changes.

Wasn’t this easy?

You can use this trick to not just add buttons to your header menu, but you can also use it to highlight any link in your WordPress navigation menu.

We hope this article helped you learn how to add a button in your WordPress header menu. Want to see how users interact with your buttons? See our guide on how to track conversion rate in WordPress. Next, check out our list of the best live chat software for small business.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

The post How to Add a Button in Your WordPress Header Menu appeared first on WPBeginner.

June 07, 2021 at 03:47PM

30 Best Coming Soon Page Examples + Templates (2021)

Are you looking for the best coming soon page examples?

Often business owners wait to publish their website until it’s fully complete. But that’s a mistake. You should start growing your website traffic, email list, and social followers as soon as you register your domain and hosting.

In this article, we’ll share some of the best coming soon page examples that you can use on your WordPress website.

Why You Should Create a Coming Soon Page?

When your website is under construction, users who browse your site will see an incomplete version or error page. It doesn’t look professional to display the messy look of your website to users.

This is why smart website owners create a coming soon page with information about the launch date and progress of your website. Other than that, you can also add a newsletter form to start building your email list even before your website is ready.

Once your website is complete, you can inform your email subscribers about your new site and offer a special deal to boost your sales. It’ll give you a good start and an online customer base to manage from the beginning.

Haven’t started building a website yet? See our step-by-step guide on how to make a website with no coding needed. We also cover how you can get a free domain for your site.

With that said, let’s take a look at how you can create a beautiful coming soon page.

How to Create a Coming Soon Page in WordPress

Manually creating a coming soon page can take hours. This is why we recommend using a WordPress plugin like SeedProd to quickly design and customize a beautiful coming soon page.

SeedProd is the best WordPress page builder plugin on the market. It comes with a ready-made coming soon mode that you can activate in 1-click and configure the options.

Note: You must install WordPress on a WordPress hosting service before you can setup a coming soon page for your website.

Once you have WordPress setup, you need to install and activate the SeedProd plugin. For more details, you should check out our guide on how to install a WordPress plugin.

Note: There’s also a free version of SeedProd available that you can use as well. We’re demonstrating the pro version in our tutorial to show all the powerful features.

Upon activation, you need to go to the SeedProd » Settings page to enter your license key. You can find the license key in your SeedProd account.

Next, you need to visit SeedProd » Pages where you’ll find four page types. Click on the ‘Set Up a Coming Soon Page’ button to continue.

You’ll now see the coming soon page templates. If you want to create a custom coming soon page using the SeedProd page builder, then it offers a blank template. It also comes with a simple coming soon page template with a message to users.

Below, you’ll find several other ready-made templates that you can configure in 1-click and customize with the drag and drop page builder.

To select a template, move your mouse over a template and click on the check button to open it in the SeedProd builder.

On the left side, you’ll see the Standard and Advanced blocks. While on the right side, you’ll see the live preview of your coming soon page.

You need to drag and drop a block from the left side to the right side in the preview section. It’s easy to move and change the position of any block within the live preview with simple point and click.

You can also click on any block in the preview section to customize it. Once you click on a text or form, it’ll display the options on the left side of the screen.

For a text block, it allows you to edit the text, alignment, font size, heading, and so on. If it’s an optin form or social profiles block, you can change the settings accordingly.

SeedProd allows you to customize the background of your coming soon page template. You can either select a background color or upload an image for the background. It also lets you select the width of the background display.

Once you’re satisfied with the settings, click on the ‘Save’ button from the screen’s top right corner to store your settings. You need to click on the arrow key next to the save button and click on the ‘Publish’ option.

After publishing the coming soon page, go ahead and close the SeedProd builder. It’ll redirect you back to SeedProd » Pages.

You need to activate the coming soon mode and then visit your website to see the coming soon page in action.

The coming soon page is active on your entire website, and users will see it instead of your under construction website.

Best Coming Soon Page Examples & Designs

Below, you’ll find some of the best coming soon page examples that you can import in the SeedProd page builder to launch your coming soon page quickly.

1. SeedProd Coming Soon Demo

SeedProd coming soon demo template has a built-in countdown timer and a newsletter subscription form with eye-catching colors.

2. Niyati Coming Soon

Niyati website coming soon template is a simple and minimalist design with a tagline and your website URL.

3. Serenity Fashion

Serenity Fashion is a beautiful coming soon page template for fashion websites. It has an email form and social profiles to increase your followers.

4. New Things Coming Soon

New Things coming soon page template has a dark and bold layout with CTA buttons and social icons.

5. Tapster eCommerce

Tapster is an eCommerce page template to inform your users about how your website will look after the launch.

6. PandaDoc

PandaDoc is a professional coming soon page template to let users get an invite and learn how to send documents online.

7. Dizaind

Dizaind is an artistry coming soon page template for fashion and portfolio websites. It’s customizable using the SeedProd page builder.

8. Indus Coming Soon

Indus coming soon template is colorful and offers several blocks by default to set a timer, newsletter form, and social icons.

9. Maria Mentiras

Maria Mentiras is a great-looking coming soon page template for grill houses and restaurants. You can use the optin form to add subscribers to your email marketing platform, so you can notify them about your launch when your website is ready.

10. Les Mains dans le Cambouis

Les Mains Dans Le Cambouis is an attractive coming soon template with newsletter form and social icons.

11. Astonishing Post

Astonishing Post is a coming soon page template for fashion magazines. It has eye-catching colors and fully customizable using SeedProd page builder.

12. Revista Coming Soon

Revista Coming Soon page is simple yet attractive with a percentage block, countdown timer, and email subscription form.

13. Typetalk

Typetalk is a creative coming soon page template for messaging apps or forum websites. It allows you to add a custom logo and text.

14. BirdBox Coming Soon

BirdBox is a gorgeous coming soon page template for holiday, vacation, and travel websites.

15. App Manager

App Manager is a classic coming soon page template for web and mobile applications. It features a CTA button and countdown timer to alert users about your launch date.

16. Bezar is Coming

Bezar is a coming soon page template to invite your friends and users to join you and get a discount.

17. Land Apart

Land Apart is an elegant coming soon page template for events, camping, and adventure travel websites.

18. Ethercare

Ethercare is a healthcare coming soon page with a text option and a clock widget. It allows you to add contact details like business phone number with a dark custom background.

19. Self Made

Self Made is a portfolio coming soon page template with a bold and colorful design. It gives an idea to users about the look of your website before its launch.

20. Atominx

Atominx is a simple coming soon page template to add your logo, text, and social profiles.

21. Archie Travel

Archie Travel is a modern coming soon page template for travel agencies and travelers. It has a beautiful background by default and an email newsletter subscription box.

22. Fixers Holiday

Fixers Holiday is a fascinating coming soon page template for holidays and vacation websites. It allows you to customize the background, text, and colors.

23. Backpacker Travel

Backpacker Travel is a graceful coming soon page template for travel websites. If you’re making a website for your backpacker community, this template can get you, like-minded people, to sign up before your launch.

24. WiseJack Cooking

WiseJack Cooking is a colorful coming soon page template with a video embed option and a big size logo.

25. Gator Treks

Gator Treks is a coming soon page template for a digital travel destination website.

26. CleverDever Wherever

CleverDever Wherever is a travel blog coming soon page template with custom logo, text, and newsletter form. It allows you to add your personal social profiles to increase engagement.

27. Lab Petite

Lab Petite is a lovely coming soon page template for kids’ websites. It has a countdown timer, email sign-up form, and social profiles.

28. Hosting Stars

Hosting Stars is a stunning coming soon page template with video embed and bold text. It allows you to display your logo.

29. Coffee Shop Freelancers

Coffee Shop Freelancers is a text-savvy coming soon page template to inform your visitors about your business.

30. Beet Nut

Beet Nut is a super attractive coming soon page template for food recipe blogs and restaurant websites.

31. Phloem

Phloem is a coming soon page template for footwear and apparel accessories shops. It has custom background and newsletter subscription box.

We hope this article helped you find the best coming soon page examples. You may also want to check out our complete guide on coming soon vs maintenance mode pages, and our comparison of the best business phone services to add a call button on your site.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

The post 30 Best Coming Soon Page Examples + Templates (2021) appeared first on WPBeginner.

June 04, 2021 at 03:42PM