Genesis - How to Make an Announcement Bar

This tutorial is for Thrive & Honeydew

Step 1: Add the Widget

1. From your dashboard, go to Appearance > Customize > Widgets

2. Click on the Before Header widget area

3. Click the + Add a widget button to add a Custom HTML widget

4. Now, let's create a div and give it a new CSS class. Copy and paste the following into the Custom HTML widget:

<div class="announcement-bar">
Get 10% off Thrive when you sign up for the newsletter on <a href="https://heartenmade.com">hearten made</a>!
</div>

5. Adjust the text and URL to add your own content to the announcement bar.

Here's how my settings look:

And here's how it looks at the top of the page in the customizer so far:

Looks BORING - we'll add some styles in the steps!

Step 2: Add the CSS styles

1. Next, click the back arrow at the top 2 times to go back to the Customizer

2. Find the Additional CSS section and open it up

3. Copy and paste the following CSS styles into the Additional CSS section:

.announcement-bar {
	color: #282828;
	background-color: #f9d6c8;
	font-size: 12px;
	text-align: center;
	padding: 10px;
}

4. Adjust the colors and font styles to your liking:

color – changes the text color
background-color – changes the background color
font-size – changes the font size in pixels
text-align – changes the text alignment
padding – adjusts the padding around the text

Use 6-digit hex codes for the color and background color. Here's a color picker tool if you need it.

5. As you change the colors and font styles, you'll see the changes live in the customizer.

6. When you're finished with your changes, click the Publish button to publish your changes!

Here's how mine looks: