The default Holler Box is subtle and stylish, but you might want to customize it.
In this post, we’ll look at how to make a Holler Box with your site colors and logo, and a very nice looking button.
First create a new Holler Box, or go into an existing one.
You can add your logo by inserting it into the content editor, the same way you would add an image to a post. I’d recommend keeping the image fairly small, 300px wide or so. Add any text you’d like below the image. To add a button like mine, switch your editor to text mode, and add a link with the class of hwp-button. For example:
<a class="hwp-button" href="https://hollerwp.com/pro/">Learn More.</a>
The easiest way to start customizing colors is with the color pickers. You can choose a background, text, and button color:
In my case, I want a yellow background and white text, so I set those in the color pickers and saved. At this point my box looks like this:
I can’t see the text because it’s white, and the background is white too. Let’s fix that.
First, activate your Holler Box on all pages so you can see it on the front end. Next, open up the theme customizer (Appearance => Customize). Click on the “Additional CSS” section so we can add custom CSS. This next part may be a bit tricky if you aren’t familiar with CSS.
We are going to add the custom CSS to add a custom background and make our text show up. Here’s what mine looks like:
#hwp-215 {
background: url('//cdn-6209f0d2c1ac188840a09561.closte.com/wp-content/uploads/2017/06/box-bg.png') center top;
border:none;
}
#hwp-215 .hwp-row {
background: transparent;
text-align: center;
}
You’ll notice I am using the ID of my Holler Box to make sure this only applies to the box I’m looking at. To get the ID of your Holler Box, you can visit your Holler Box editor in the admin area, and look at the url. It should look like this “https://hollerwp.com/wp-admin/post.php?post=215&action=edit”. The number after post=, in this case 215, is the ID.
You can copy/paste my CSS into your customizer, and just change the ID and background image url. If we save, our box should now look like this:
Looking good!
Conversions will be tracked when people click our button so we can see how well our message is doing. Optionally, we could remove the button and add an email opt-in.
Customize away, have fun.
