Create An Alert Bar / Contact Info Bar At The Top Of A Site

Helping visitors find useful information quick goes beyond the technical side of web design… it’s about creating a great user interface.

How many times have you visited a website just to find their contact details and after clicking around 10 or so pages, you still can’t find it!  How annoying, right?

There is something that can be done about it… let me show you a few examples:

Did you see the contact information at the top of the FountainBridge design?

Or the alert bar at the top of our site giving visitors a quick link to the upcoming Gravity Forms course?

That’s a contact bar or alert bar , they’re super-helpful and in this post you are going to learn how to create one!  We’ll use the alert bar from our website as an example… ready?

Let’s do this.


Step 1: Start With This CSS

Let’s start by having you copy and paste the following CSS into Genesis > Dynamik Custom > CSS

#alert {
background: #f6cc68;
padding: 10px 15px 8px 15px;
line-height: 120%;
font-size: .90em;
}

#alert a {
text-decoration: underline;
}

Once pasted in, your screen should look like this:

Notice how there are two classes there? The bottom one (the one with the a) refers to any hyperlinks that might appear in your bar… in this case we are telling the site to simply underline all hyperlinks to make them stand out a bit.

You can come back and change the background color, change the font size, etc.. later but for now move on to the next step.


Step 2: Create a hookbox

Once the CSS styling is in place you now need to create a spot to put the bar and to do that go to Genesis > Dynamik Custom > Hookboxes and create a new hookbox named alert and chose the genesis_before hook location, so your screen should look like this:

Make sure you select any/all Conditionals (that option on the left) that you want this alert bar to appear!

Once you’ve done that, it’s now onto the last step…


Step 3: Adding your content

Now that you’ve got your CSS and your hookbox now you need to add your content! Since we are using the WDA alert bar as an example, copy the HTML below:

<div id=”alert”><center><strong>NEWS: We’ll help you get way better at making forms!  Snag a few free lessons from the upcoming <a href =”http://learngforms.com/” target=”_blank”>Gravity Forms course</a>.</center></div>

and paste it into that hookbox you just created, so your screen should now look like this:

Now SAVE your changes!

When you go to the front end of your website, you should now see your fancy alert bar at the top of all pages!

Remember this is useful for all kinds of information like news, phone number, social media links, hours of operation, etc…

Your friends,
Ian & Amy Anderson

PS: Thanks to Beth for the fantastic post idea! If you’ve got a burning question that you need an answer to send us a message.