How to Customize Your Genesis eNews Widget

So you want to make changes to your eNews widget but you don't know how? Well, you come to the right developer and I'm going to show you how step by step. Because what is better for eye-popping opt-in that a badass looking newsletter sign up.

Okay so check it, my Macaron Pro Theme is a simple opt-in with a greyish background. Total snooze fest and I don't blame you for wanting to jazz it up. First I would NOT recommend that you don't edit the file directly in WordPress. Second I would recommend a text editor like Codeanywhere, Brackets, Sublime Text 2 or use the notepad on your computer to make these changes. Third back the site up (no seriously you should always backup your site when you're making changes). Onward!


Let's start with the background. 

Note: Don't forget to upload to themes/yourtheme/images when using a photo background. You can watch a short video here.

.sidebar .widget .enews-widget {
background-image: url('images/Background.jpg');


.enews-widget {
background-color: #ee55b2;

Now let's change the color of the opt-in button!

.enews-widget input[type="submit"] {
background-color: #27ccb2;

Don't forget the hover for the button!

.enews-widget input[type="submit"]:hover {
background-color: #ced51a;

Wanna get really fancy by adding a border? Border code will look something like border: 1px solid #ffa4a3; and instead of solid you can make the border dotted, dashed or with a double line.

Now for the most important part, don’t forget to save your work! Hope this makes your site pretty!

Post Written by:

Katrina / Web developer at Riot Customs that  provides tools, resources and tutorials to keep your business or blog together using Genesis WordPress.


Website / Instagram / Pinterest / Twitter