In today’s post, I want to show you how to create a simple hello bar in WordPress using the amazing Generatepress theme. You could use the space for a site-wide call to action.

This hello bar is unobtrusive but does a great job of alerting your readers to your offer.

The great news is that you can do this all inside GeneratePress without having to install an additional plugin to do it. Plus, you can do it with just the free version of GeneratePress. If you have Generatepress Premium, then you have a few more styling options at your fingertips.

Here is how it could look:

The top bar does not stick at the top as you scroll, but if you want to do that, you could add some simple CSS which I will show you how to do lower down this post.

Step 1 – Add widgets to the top bar

1. Pop over to Appearance->Widgets
2. Drag a text widget into the Topbar widget area

3. Type your call to action text, adding a link.
4. Click the Save button

Now when you view the page your text appears in the top

Step 2 – Style the top bar

Now lets style it.

Changing the appearance with GeneratePress – free version.

1. Go to Appearance->Customize
2. Choose Layout
3. Choose Top Bar

You can use the options to change the alignment and whether the top bar is full width.

Changing colours with GeneratePress Premium

If you have the Premium version of GeneratePress, then you have more freedom to change the colour scheme of the top bar.

Before you start, make sure you have enabled the Colours and the Spacing modules in the GeneratePress settings.

You can check that by going to Appearance->GeneratePress and then checking that the modules are activated.

Now we are sure the colours module is enabled. Go back to the customiser and to change the colours.

1. Goto Appearance->Customise
2. Click Colours
3. Click Top Bar
4. Select the colours you prefer for the background, text and links

With GeneratePress Premium you can also control the spacing around the top bar by selecting Layout->Top Bar.

Bonus: How to make the GeneratePress top bar stick to the top

You can make the top bar stick to the top of your page. This is a great idea if you want your call to action visible all the time.

To make this happen all you need to do is add a snippet of CSS.

1. Go to Appearance->Customise
2. Click on Additional CSS
3. Enter this CSS code into the box

.top-bar {
	position: sticky;
	top: 0;
	z-index: 99;
}

4. Click Publish

Wrapping up

In this article, I have shown you how to add a top bar to your GeneratePress themed website (also known as a ‘hello bar’).

All you really need to do is add a widget into the top bar widget area, and the top bar magically appears on your website.

You can style your top bar in the WordPress customiser, and if you have GeneratePress premium, you have a few more styling options.

The post How to Create A Simple Hello Bar In GeneratePress appeared first on WPkind.