R4: Fullwidth Header with Changing Words

by | Jan 22, 2016 | Animation, Headers and Sliders

Sign up to receive all the latest themes, tutorials, tips & tricks from Divi Soup

Fullwidth Header With Changing Words

I am currently working on a new child theme and I wanted to incorporate a really eye catching header that could deliver some key messages. This effect from Tympanus.com doesn’t work with Divi right out of the box and I had to do some serious tweaking. So here is Recipe #4 in which I show you how to create a cool Fullwidth header with changing words.

UPDATE: By popular request I have now added right and center align versions for you 🙂

Click here to see the live demo and download the XML file.

Fullwidth header with changing words

So let’s get cooking!

ingredients

The Divi Theme or Divi Builder Plugin from Elegant Themes

cooking-time

This should take you around 10 – 15 minutes max.

preparation

The first thing we need to do is create our module. So add a new fullwidth section with fullwidth header.

 

Next, open up the section settings, set your background image for the header and then scroll to the bottom and give the section a custom css class of rw-wrapper, then Save & Exit.

UPDATE: I have now added support for right and center alignment, so if you want to right align the effect use the custom css class rw-wrapper-right and if you want it centered, use rw-wrapper-center.

 

 

Now let’s get onto adding our content. Open up the fullwidth header module and scroll down to the button options, if you want a CTA button in your header then add in the button text and URL here. 

fullwidth-header5

Then scroll down to the content area and add the following code in the text editor (and don’t forget to change the words to those you want to use):

fullwidth-header6

 

Choose an the option below for the alignment you want, and remember, it must match the custom css class you chose in the previous step.

Left Alignment HTML
<h2 class="rw-sentence">
<span>Are you ready to</span>
<div class="rw-words rw-words-1"><span>learn</span><span>build</span><span>live</span><span>teach</span><span>achieve</span><span>inspire</span></div>
<div class="rw-words rw-words-2"><span>the keys to success?</span><span>a business that thrives?</span><span>a life you love?</span><span>others what you know?</span><span>more than you dreamed?</span><span>others to do the same?</span></div></h2>

 

Right Alignment HTML
<h2 class="rw-sentence-right">
<span>Are you ready to</span>
<div class="rw-words-right rw-words-1-right"><span>learn</span><span>build</span><span>live</span><span>teach</span><span>achieve</span><span>inspire</span></div>
<div class="rw-words-right rw-words-2-right"><span>the keys to success?</span><span>a business that thrives?</span><span>a life you love?</span><span>others what you know?</span><span>more than you dreamed?</span><span>others to do the same?</span></div></h2>

 

Center Alignment HTML
<h2 class="rw-sentence-center">
<span>Are you ready to</span>
<div class="rw-words-center rw-words-1-center"><span>learn</span><span>build</span><span>live</span><span>teach</span><span>achieve</span><span>inspire</span></div>
<div class="rw-words-center rw-words-2-center"><span>the keys to success?</span><span>a business that thrives?</span><span>a life you love?</span><span>others what you know?</span><span>more than you dreamed?</span><span>others to do the same?</span></div></h2>

 

Be sure to paste the code as it is, if you start move the spans onto separate lines you will break the slider text. Then Save & Exit.

Now for the CSS, copy and paste the code below into your Child Theme style.css or if you aren’t using a child theme (which you really should be) then paste into the Divi Theme Options epanel custom CSS section and don’t forget to save.

Again, remember to choose the option that matches your css class.

Left Alignment CSS
/*---------Header with changing words left---------*/

.rw-wrapper{
	width: 100%;
	position: relative;
	margin: 0 auto 0 auto;
	padding: 10px;
	overflow: hidden;
}
.rw-sentence{
	margin: 0;
	text-transform: uppercase;
	font-weight: 300;
	text-shadow: 0 0 0 rgba(0,0,0,0.0001);
}
.rw-sentence span{
	color: #000;
	white-space: normal;
}
.rw-sentence > span:first-child{
	display: block;
	font-size: 100%;
}
.rw-words{
	width: 100%;
	height: 100px;
	-webkit-perspective: 800px;
	perspective: 800px;
}
.rw-words span{
	position: absolute;
	width: 100%;
	height: 100%;
	opacity: 0;
	white-space: normal;
	overflow: hidden;
}
.rw-words-1 span{
	font-size: 310%;
	line-height: 82%;
	color: #da0a0a;	
	-webkit-animation: rotateWordsFirst 18s linear infinite 0s;
	-ms-animation: rotateWordsFirst 18s linear infinite 0s;
	animation: rotateWordsFirst 18s linear infinite 0s;
}
.rw-words-2 span{
	font-size: 120%;
	font-style: italic;
	line-height: 90%;
	-webkit-animation: rotateWordsSecond 18s ease-in infinite 0s;
	-ms-animation: rotateWordsSecond 18s ease-in infinite 0s;
	animation: rotateWordsSecond 18s ease-in infinite 0s;
}
.rw-words span:nth-child(2) { 
    -webkit-animation-delay: 3s; 
	-ms-animation-delay: 3s; 
	animation-delay: 3s; 
}
.rw-words span:nth-child(3) { 
    -webkit-animation-delay: 6s; 
	-ms-animation-delay: 6s; 
	animation-delay: 6s; 
}
.rw-words span:nth-child(4) { 
    -webkit-animation-delay: 9s; 
	-ms-animation-delay: 9s; 
	animation-delay: 9s; 
}
.rw-words span:nth-child(5) { 
    -webkit-animation-delay: 12s; 
	-ms-animation-delay: 12s; 
	animation-delay: 12s; 
}
.rw-words span:nth-child(6) { 
    -webkit-animation-delay: 15s; 
	-ms-animation-delay: 15s; 
	animation-delay: 15s; 
}
@-webkit-keyframes rotateWordsFirst {
    0% { opacity: 0; -webkit-animation-timing-function: ease-in; width: 0px;}
    5% { opacity: 1; -webkit-animation-timing-function: ease-out; width: 100%;}
    17% { opacity: 1; }
    20% { opacity: 0; }
    100% { opacity: 0; }
}
@-ms-keyframes rotateWordsFirst {
    0% { opacity: 0; -ms-animation-timing-function: ease-in; width: 0px;}
    5% { opacity: 1; -ms-animation-timing-function: ease-out; width: 100%;}
    17% { opacity: 1; }
    20% { opacity: 0; }
    100% { opacity: 0; }
}
@keyframes rotateWordsFirst {
    0% { opacity: 0; -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; width: 0px;}
    5% { opacity: 1; -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; width: 100%;}
    17% { opacity: 1; }
    20% { opacity: 0; }
    100% { opacity: 0; }
}
@-webkit-keyframes rotateWordsSecond {
    0% { opacity: 0; -webkit-transform: translateZ(600px) translateX(200px);}
    8% { opacity: 1; -webkit-transform: translateZ(0px) translateX(0px);}
    17% { opacity: 1; }
    25% { opacity: 0; }
    100% { opacity: 0; }
}
@-ms-keyframes rotateWordsSecond {
    0% { opacity: 0; -ms-transform: translateZ(600px) translateX(200px);}
    8% { opacity: 1; -ms-transform: translateZ(0px) translateX(0px);}
    17% { opacity: 1; }
    25% { opacity: 0; }
    100% { opacity: 0; }
}
@keyframes rotateWordsSecond {
    0% { opacity: 0; -webkit-transform: translateZ(600px) translateX(200px); transform: translateZ(600px) translateX(200px);}
    8% { opacity: 1; -webkit-transform: translateZ(0px) translateX(0px); transform: translateZ(0px) translateX(0px);}
    17% { opacity: 1; }
    25% { opacity: 0; }
    100% { opacity: 0; }
}
@media screen and (max-width: 1023px){
	.rw-words{ height: 75px; }
	.rw-words-1 span{ font-size: 280%;}
	.rw-words-2 span { font-size: 160%; }
}
@media screen and (max-width: 560px){
	.rw-words{ height: 50px; }
	.rw-words-1 span{ font-size: 180%;}
	.rw-words-2 span { font-size: 90%; }
	.rw-sentence > span:first-child{ font-size: 80%;}
}
@media screen and (max-width: 400px){
	.rw-words{ height: 45px; }
	.rw-words-1 span{ font-size: 140%;}
	.rw-words-2 span { font-size: 70%; }
	.rw-sentence > span:first-child{ font-size: 60%;}
}

 

Right Alignment CSS
/*---------Header with changing words right---------*/

.rw-wrapper-right .et_pb_button {
	float: right !important;
}

.rw-wrapper-right{
	width: 100%;
	position: relative;
	margin: 0 auto 0 auto;
	padding: 10px;
	overflow: hidden;
}

.rw-sentence-right{
	margin: auto;
	text-transform: uppercase;
	font-weight: 300;
	text-shadow: 0 0 0 rgba(0,0,0,0.0001);
}
.rw-sentence-right span{
	color: #000;
	white-space: normal;
	text-align:right;
}
.rw-sentence-right > span:first-child{
	display: block;
	font-size: 100%;
}
.rw-words-right{
	width: 100%;
	max-width:1080px;
	height: 100px;
	-webkit-perspective: 800px;
	perspective: 800px;
	
}
.rw-words-right span{
	position: absolute;
	width: 100%;
	height: 100%;
	opacity: 0;
	white-space: normal;
	overflow: hidden;
	text-align:right;
}
.rw-words-1-right span{
	font-size: 310%;
	line-height: 82%;
	color: #da0a0a;	
	-webkit-animation: rotateWordsFirst 18s linear infinite 0s;
	-ms-animation: rotateWordsFirst 18s linear infinite 0s;
	animation: rotateWordsFirst 18s linear infinite 0s;
}
.rw-words-2-right span{
	font-size: 120%;
	font-style: italic;
	line-height: 90%;
	-webkit-animation: rotateWordsSecond 18s ease-in infinite 0s;
	-ms-animation: rotateWordsSecond 18s ease-in infinite 0s;
	animation: rotateWordsSecond 18s ease-in infinite 0s;
}
.rw-words-right span:nth-child(2) { 
    -webkit-animation-delay: 3s; 
	-ms-animation-delay: 3s; 
	animation-delay: 3s; 
}
.rw-words-right span:nth-child(3) { 
    -webkit-animation-delay: 6s; 
	-ms-animation-delay: 6s; 
	animation-delay: 6s; 
}
.rw-words-right span:nth-child(4) { 
    -webkit-animation-delay: 9s; 
	-ms-animation-delay: 9s; 
	animation-delay: 9s; 
}
.rw-words-right span:nth-child(5) { 
    -webkit-animation-delay: 12s; 
	-ms-animation-delay: 12s; 
	animation-delay: 12s; 
}
.rw-words-right span:nth-child(6) { 
    -webkit-animation-delay: 15s; 
	-ms-animation-delay: 15s; 
	animation-delay: 15s; 
}
@-webkit-keyframes rotateWordsFirst {
    0% { opacity: 0; -webkit-animation-timing-function: ease-in; width: 100%;}
    5% { opacity: 1; -webkit-animation-timing-function: ease-out; width: 100%;}
    17% { opacity: 1; }
    20% { opacity: 0; }
    100% { opacity: 0; }
}
@-ms-keyframes rotateWordsFirst {
    0% { opacity: 0; -ms-animation-timing-function: ease-in; width: 100%;}
    5% { opacity: 1; -ms-animation-timing-function: ease-out; width: 100%;}
    17% { opacity: 1; }
    20% { opacity: 0; }
    100% { opacity: 0; }
}
@keyframes rotateWordsFirst {
    0% { opacity: 0; -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; width: 100%;}
    5% { opacity: 1; -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; width: 100%;}
    17% { opacity: 1; }
    20% { opacity: 0; }
    100% { opacity: 0; }
}
@-webkit-keyframes rotateWordsSecond {
    0% { opacity: 0; -webkit-transform: translateZ(600px) translateX(-400px);}
    8% { opacity: 1; -webkit-transform: translateZ(0px) translateX(0px);}
    17% { opacity: 1; }
    25% { opacity: 0; }
    100% { opacity: 0; }
}
@-ms-keyframes rotateWordsSecond {
    0% { opacity: 0; -ms-transform: translateZ(600px) translateX(-400px);}
    8% { opacity: 1; -ms-transform: translateZ(0px) translateX(0px);}
    17% { opacity: 1; }
    25% { opacity: 0; }
    100% { opacity: 0; }
}
@keyframes rotateWordsSecond {
    0% { opacity: 0; -webkit-transform: translateZ(600px) translateX(-400px); transform: translateZ(600px) translateX(-400px);}
    8% { opacity: 1; -webkit-transform: translateZ(0px) translateX(0px); transform: translateZ(0px) translateX(0px);}
    17% { opacity: 1; }
    25% { opacity: 0; }
    100% { opacity: 0; }
}
@media screen and (max-width: 1023px){
	.rw-words-right{ height: 75px; }
	.rw-words-1-right span{ font-size: 280%;}
	.rw-words-2-right span { font-size: 160%; }
}
@media screen and (max-width: 560px){
	.rw-words-right{ height: 50px; }
	.rw-words-1-right span{ font-size: 180%;}
	.rw-words-2-right span { font-size: 90%; }
	.rw-sentence-right > span:first-child{ font-size: 80%;}
}
@media screen and (max-width: 400px){
	.rw-words-right{ height: 45px; }
	.rw-words-1-right span{ font-size: 140%;}
	.rw-words-2-right span { font-size: 70%; }
	.rw-sentence-right > span:first-child{ font-size: 60%;}
}

 

Center Alignment CSS
/*---------Header with changing words center---------*/

.rw-wrapper-center .et_pb_button {
	display: block !important;
	width: 160px; /*you may want to increase or decrease this value based on your button title*/
	margin: 0 auto !important;
	text-align: center;
}

.rw-wrapper-center{
	width: 100%;
	position: relative;
	margin: 0 auto 0 auto;
	padding: 10px;
	overflow: hidden;
}

.rw-sentence-center{
	margin: auto;
	text-transform: uppercase;
	font-weight: 300;
	text-shadow: 0 0 0 rgba(0,0,0,0.0001);
}
.rw-sentence-center span{
	color: #000;
	white-space: normal;
	text-align:center;
}
.rw-sentence-center > span:first-child{
	display: block;
	font-size: 100%;
}
.rw-words-center{
	width: 100%;
	max-width:1080px;
	height: 100px;
	-webkit-perspective: 800px;
	perspective: 800px;
	
}
.rw-words-center span{
	position: absolute;
	width: 100%;
	height: 100%;
	opacity: 0;
	white-space: normal;
	overflow: hidden;
	text-align:center;
}
.rw-words-1-center span{
	font-size: 310%;
	line-height: 82%;
	color: #da0a0a;	
	-webkit-animation: rotateWordsFirst 18s linear infinite 0s;
	-ms-animation: rotateWordsFirst 18s linear infinite 0s;
	animation: rotateWordsFirst 18s linear infinite 0s;
}
.rw-words-2-center span{
	font-size: 120%;
	font-style: italic;
	line-height: 90%;
	-webkit-animation: rotateWordsSecond 18s ease-in infinite 0s;
	-ms-animation: rotateWordsSecond 18s ease-in infinite 0s;
	animation: rotateWordsSecond 18s ease-in infinite 0s;
}
.rw-words-center span:nth-child(2) { 
    -webkit-animation-delay: 3s; 
	-ms-animation-delay: 3s; 
	animation-delay: 3s; 
}
.rw-words-center span:nth-child(3) { 
    -webkit-animation-delay: 6s; 
	-ms-animation-delay: 6s; 
	animation-delay: 6s; 
}
.rw-words-center span:nth-child(4) { 
    -webkit-animation-delay: 9s; 
	-ms-animation-delay: 9s; 
	animation-delay: 9s; 
}
.rw-words-center span:nth-child(5) { 
    -webkit-animation-delay: 12s; 
	-ms-animation-delay: 12s; 
	animation-delay: 12s; 
}
.rw-words-center span:nth-child(6) { 
    -webkit-animation-delay: 15s; 
	-ms-animation-delay: 15s; 
	animation-delay: 15s; 
}
@-webkit-keyframes rotateWordsFirst {
    0% { opacity: 0; -webkit-animation-timing-function: ease-in; width: 100%;}
    5% { opacity: 1; -webkit-animation-timing-function: ease-out; width: 100%;}
    17% { opacity: 1; }
    20% { opacity: 0; }
    100% { opacity: 0; }
}
@-ms-keyframes rotateWordsFirst {
    0% { opacity: 0; -ms-animation-timing-function: ease-in; width: 100%;}
    5% { opacity: 1; -ms-animation-timing-function: ease-out; width: 100%;}
    17% { opacity: 1; }
    20% { opacity: 0; }
    100% { opacity: 0; }
}
@keyframes rotateWordsFirst {
    0% { opacity: 0; -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; width: 100%;}
    5% { opacity: 1; -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; width: 100%;}
    17% { opacity: 1; }
    20% { opacity: 0; }
    100% { opacity: 0; }
}
@-webkit-keyframes rotateWordsSecond {
    0% { opacity: 0; -webkit-transform: translateZ(600px) translateX(0px);}
    8% { opacity: 1; -webkit-transform: translateZ(0px) translateX(0px);}
    17% { opacity: 1; }
    25% { opacity: 0; }
    100% { opacity: 0; }
}
@-ms-keyframes rotateWordsSecond {
    0% { opacity: 0; -ms-transform: translateZ(600px) translateX(0px);}
    8% { opacity: 1; -ms-transform: translateZ(0px) translateX(0px);}
    17% { opacity: 1; }
    25% { opacity: 0; }
    100% { opacity: 0; }
}
@keyframes rotateWordsSecond {
    0% { opacity: 0; -webkit-transform: translateZ(600px) translateX(0px); transform: translateZ(600px) translateX(0px);}
    8% { opacity: 1; -webkit-transform: translateZ(0px) translateX(0px); transform: translateZ(0px) translateX(0px);}
    17% { opacity: 1; }
    25% { opacity: 0; }
    100% { opacity: 0; }
}
@media screen and (max-width: 1023px){
	.rw-words-center{ height: 75px; }
	.rw-words-1-center span{ font-size: 280%;}
	.rw-words-2-center span { font-size: 160%; }
}
@media screen and (max-width: 560px){
	.rw-words-center{ height: 50px; }
	.rw-words-1-center span{ font-size: 180%;}
	.rw-words-2-center span { font-size: 90%; }
	.rw-sentence-center > span:first-child{ font-size: 80%;}
}
@media screen and (max-width: 400px){
	.rw-words-center{ height: 45px; }
	.rw-words-1-center span{ font-size: 140%;}
	.rw-words-2-center span { font-size: 70%; }
	.rw-sentence-center > span:first-child{ font-size: 60%;}
}

 

And that’s it, now you should have a fullwidth header with changing words similar to the one in my demo.

You may need to play around with the font sizes in the css depending on which fonts you are using on your set up.

If you found this helpful please leave a comment and subscribe to my newsletter for all my latest Divi related content. 🙂

Michelle X

Michelle Nunan is a multi-award winning marketer & trainer and full time Divi educator as well as a wife and mother of two beautiful girls and one cheeky Black Labrador called Harley. Michelle has been building websites since the late nineties, back in the days of GeoCities and Napster, before the web was the wonderful place it is now.
Join the Divi Soupies Facebook Group

Like us on Facebook

Categories

Archives

WP Theme FAQs
WordPress Theme Editor
Elegant Marketplace - Divi Child Themes, Plugins and Tutorials
Elegant Themes

Other recipes you might like...

If you liked this then you'll love

The Club

Find out more

Pin It on Pinterest

Share This

Enter your details below to get notified of the launch and early bird pricing

You have successfully joined the waitlist!