In this video post, you’ll learn how to use CSS to add transparent headings with a colored outline for your website.
Welcome back to the screencast peeps, let’s get started.
One of my favorite elements to style on a webpage are headings. With a little creativity, you can make your website headings pop out using some simple CSS.
Not only do creative headings look great but they can be really useful for boosting conversions.
First of all, I’m doing this all inside of Oxygen Builder since this is one of the plugins that I use for building WordPress websites. However, you do not need to own Oxygen to make this work on your website.
Whichever theme you’re using, you can simply add your own CSS by finding the dedicated CSS sandbox (if your theme comes with one). Or you can go to Appearance > Customize > Additional CSS.
Just remember to save any changes, and clear the cache if you’re using a WordPress caching plugin like Super Cache.
WPCodeBox Plugin
If you enjoy adding a lot of CSS customizations to your WordPress website, I recommend checking out WPCodeBox. This is the plugin that I use for all of my website projects, and it’s a great way to store and use custom code on your website. Click here to learn more.
Right then, let’s get started.
Below you’ll find the short video tutorial for this little hack. In addition, I’ve included the CSS snippet that you can copy and paste into your website. Feel free to tweak the code any way you wish.
CSS Code Snippet
Below is the CSS you need to make this work. Don’t forget to give your heading element a custom class name. I’ve simply used the class .heading-outline in the tutorial.
.outline-heading {
font-weight: 900;
line-height: 1em;
color: transparent;
-webkit-text-stroke: 1px #ffffff;
}
That’s it. Nice and short and I hope you enjoyed this tutorial. Don’t forget to check out more of my WordPress and CSS hacks here.
Web Design Video Course
If you’re interested in learning how to design a beautiful WordPress website like mine, check out my WordPress + Oxygen Builder, and Bricks Builder Web Design Video Courses. You can signup here.