Like our free content? Then you'll love our exclusive Club!
Divi Academy Membership gives you exclusive access to over 110 resources, including child themes, layouts, cheatsheets, tutorials, live training and member perks. And new content is added EVERY Monday!
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.
So let’s get cooking!
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.
Method
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.
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):
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
Hi Michelle,
When I paste the css code to the style.css page of the child theme save is failed because there are issues. Eg. in line:
@-ms-keyframes rotateWordsFirst {
the issue message is:
Unknown @ rule: @-ms-keyframes.
Could you help me what should I do to solve this issue?
You can just remove that section, its is not needed anymore this code is quite old
Hi Michelle,
Could you help me to align the sentence with the text ” Amerika Info USA4ALL’ on my site? (TXT = Sitename in WP)
Sure, but align it how?
Both starting at the same point.
Now the lines are not straight below each other.
Just set the header alignment to left for both elements in the design settings
I can’t align the sitename in WP. And got both centered. So a little adjustment is meedeed.
You would need to add the following to your custom CSS if you want them centered:
.rw-sentence {
display: table;
margin: auto;
}
Is that what you were trying to do?
Hi Shay!
That’s it! Exactly! Thanks for your reply!
No problem – I’ll send you my ranch dressing recipe to post
Yeah.. You can see my mailadress?
Yes
Thank you, Michelle for this. I have a client this works perfectly for! Using the center option and loving it!
That’s great Leona, thanks
Hi Michelle,
Got the text working great now on my laptop (although it would look better if it was situated slightly more to the right. However, when I check it on my phone the end of the words is truncated i.e. the last one or two letters are missing in the longer words. I’ve tried adjusting some of the code but messed it up completely. Now gone back to the original code from above.
So impressed with how quickly you responded to my other comments
Thanks in advance
Sue
Sorry me again! Forgot to mention, every time I attempt to add a new section the formatting of the changing text stops working. What am I doing wrong? Spent ages getting it to work
Many thanks
Sue
That is WP stripping your html tags, search the comments on this post for possible solutions
Hi,
Thanks for this. Love it!
I’m still in the design phase of my site and am a real beginner.
I’ve managed to get this working and have it right justified. However, I’ve had lots of problems with my header image and have had to mess about wit located further down the header than I’d like.
How can I locate it near the top of the image again?
Many thanks
Sue
You can adjust the position in the CSS but I would need a link to help further
Hi There,
Why doesn’t it work at my end? I imported the xml, see ) Put the .css in my child theme (left align) and ad css class. But noi animation. Do I miss something? COuld you help me out?
Its likely WP is stripping the html tags, check the rest of the comments on this post for possible solutions
hi ,
thanks for this post…
i am having a little problem, my text is overlaying each other, explored many options but can seem to fix it,
cant send u the link coz the site is in coming soon mode… but am sharing a screenshot, if it can help
http://prntscr.com/fb3qj4
appreciate the support and love the amazing content of your site..
You will either need to reduce your font sizes or increase the line height values in the CSS
And thanks
Hi Michelle
Great effect. Thanks for sharing.
I’d like to use your effect to fly in the words on to separate lines. Then I’d like to leave them there and stop the cycle once all 5 sets of words have appeared.
Is there any easy way to edit your CSS to do this?
Thanks
Line breaks within the text content should work, you can then look at animation iteration count property and set it to 1 https://www.w3schools.com/cssref/css3_pr_animation-iteration-count.asp
Very useful tips! Thank you!
Hi Michelle, thank you for this great recipe! I got it working just fine with the demo content. However, I would like to have longer text (2-4 words) instead of the single red words. Some of this longer text will then flow over two lines, were the second line lies over the black words that should be below. I managed to push down the black words by increasing the height property in .rw-words-center, but this does not look nice for those lines were the red text is only one line long, since there is a big gap between red and… Read more »
Can you post a link please Carsten and I can take a look
Hi Michelle, Thank you so much for providing what we exactly were looking for ! I have a common issue I’ve tried to solve for several hours which concerns text alignment of the words. you can see the issue here : I read all the comments, tried to re-center the header but I’m blocked… Can you please support? Thank you so much for time. Cheers from France here’s the css I put into the editor: /*————————————————-*/ /*———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… Read more »
How exactly are you wanting the text aligned?
Hi Michelle,
Thank you for your reply. I ‘d like to center everything in the middle. The 2 last lines are in the right side whereas I use the ‘center’ template.
Cheers
I am getting an error with that link Bernard?
Hi Michelle, Thanks so much for sharing this code. I am using it on a new website http://mediate-nj.com and it is working quite well on a computer screen. Not so well on an iPad 3 – the words seem to get jumbled up for the first few text instances. I was wondering it the timing could be slowed down a little? Any thoughts on how best to do this? Thanks again. Awesome effect!! BTW – website is still under development.
Alan you may want to add a media query if you are having issues, I don’t have an ipad to hand too check right now. To slow the affect this is the section you need to edit. You want to change 18 to the total duration for the effect and then divide that and change the 3, 6, 9 etc to what you want .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:… Read more »
Hi Michelle,
thanks for your Job, very helpful
installed in two sites but….. doesn’t work (text is not changing)
Before write here, searched in comments but no answer
holisticamente.es/test
sergioferrari.eu/test
Once again thank you
It looks like wordpress is stripping out the tags Sergio. If you open the module again and look at the html you will see it doesn’t look like the html in the tutorial. Check out this post I wrote on EMP to fix the tag stripping issues and then paste in the html again. https://elegantmarketplace.com/help-my-paragraphs-and-line-breaks-keep-disappearing-from-the-divi-text-module/
Wonderful Michelle! its work!!!
Tks a lot!
Hi,
I’ve been hoping to find a way to do this and coming across this is really exciting.
I’m having trouble with centering the ‘words’ while the ‘sentences’ are just fine. I’ve looked at other comments and my own CSS and can’t see any solution, although I’m pretty new at this. I’ll buy you a cuppa to say thanks…I know time is precious. If you don’t have time that’s cool too. It’s just wishful thinking here. Thanks for the awesome blog/site as well.
Cheers
Hi Bartek
Glad you like it!
Yes this is a simple fix.
Change this part of your CSS:
.rw-words-center {
width: 100%;
max-width: 1080px;
height: 100px;
-webkit-perspective: 800px;
perspective: 800px;
}
To this:
.rw-words-center {
width: 100%;
text-align: left;
max-width: 1080px;
height: 100px;
-webkit-perspective: 800px;
perspective: 800px;
}
Hey Michelle, love your work. I can’t get this header to work and I saw a post earlier about problems introduced with a Divi update. Is the solution posted on a FB group? I see it is working for everyone else.
Hi David
It should be working fine, what problems are you having? and can you post a link please.
and the code used in content area is:
learnbuildliveteachachieveinspire
You just have a little padding in this section of CSS Ross, remove it and all will be good:
.rw-wrapper {
width: 100%;
position: relative;
margin: 0 auto 0 auto;
padding: 10px;
overflow: hidden;
}
perfect thank you!
Now that I have no sentences, just rotating “r-words-1”, there is spacing I assume where the sentences once were. I am guessing above and below the rotating hashtags which are my r-words-1. How can i remove any spacing as I will not be using the sentences either by removing some of the code as it is not needed in order to resolve this? Please see rossbegbie.com, I have left it open with a button to see what I am referring to.
Hey Ross, yes you can just remove the html for the sentences you don’t want to use
i think i have figured it out but the problem now is that the fw header is no longer fw. there are white spaces on the left and right of the section. rossbegbie.com to see the result. Code i have used in divi theme options 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: lowercase; 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:… Read more »
I would like to have rotating text for hashtags in place of my subheading, not the heading text.
Nothing too fancy, just have 5-6 hashtags cycle underneathe my website tagline…
Thanks!
That’s quite easy Ross, just replace the the subheading text with your hashtags
I do not wish to have any red font or different font. I would like exactly as my fw header looks now but with the subheading text to rotate between the hashtags…
website is at rossbegbie.com
where “Life Goals. Achieve Anything.” is located, I would like to have the below hashtags rotate with a simple push animation:
#lifegoals
#achieveanything
#getahead
…sorry to be such a bother but this type of CSS is a step out of my comfort zone =p
Continue from above:
Here is the URL:
Dear Michelle,
That worked very nicely.. I’m eternally grateful.. I’ve built the site using what you teach.. It looks nice right.. Thank you very much to you.. Keep up the good work..
*high five!*
Good news Andrew, yes it looks great, I see at least four of my recipes on the homppage
Yes Michelle!! There will be more! I want to add the left and right header for other pages, and also image hover as well… I love what you do.. thank you so much for contributing so much to everyone… Thank you thank you! Take care!!
That’s very kind, thank you Andrew
Hi Michelle.. Need a small help here.. Do you know why my the text is not really centered?
It is just slightly off center to the left..
Here is the URL..
Thanks and appreciate it..
Best Regards,
Andrew
Hi Andrew
On the link you have provided you have it set to left alignment?
Dear Michelle,
Yes I changed it to left because it was causing a few issues such as making the fullwidth header not fullwidth (weird, i know, I has to use this code below to stretch the fullwidth back). Anyway, I have changed it back to center again for you to see.. The words are actually just off center.. similar to your sample.. Here is the URL again.. Thanks Michelle..
.et_pb_fullwidth_header_0.et_pb_fullwidth_header {
margin-top: -24px;
margin-left: -10px;
margin-right: -10px;
}
Found out the problem with side white lines.. it is this line of padding code..
.rw-wrapper-center{
width: 100%;
position: relative;
margin: 0 auto 0 auto;
padding: 10px; <—- this line..
overflow: hidden;
}
Great, so everything sorted for you?
Dear Michelle,
Part of it…. If you could guide me on how I can center the text, I would be grateful..
I have set the text to center alignment for you to see.. But can you notice that the text is not really center… it is just slightly off to the left… Thanks Michelle..
OK so change this
.rw-words-center {
width: 100%;
max-width: 1080px;
height: 70px;
-webkit-perspective: 800px;
perspective: 800px;
}
to this
.rw-words-center {
width: 100%;
max-width: 100%;
height: 70px;
-webkit-perspective: 800px;
perspective: 800px;
}
And this
.et_pb_fullwidth_header .et_pb_fullwidth_header_container.left .header-content {
margin-right: 6%;
margin-left: 0;
text-align: left;
}
to this
.et_pb_fullwidth_header .et_pb_fullwidth_header_container.left .header-content {
margin-right: 0;
margin-left: 0;
text-align: left;
}
Hi Michelle, Thanks for an AWESOME tutorial! And the source files are much appreciated Will this work with the full-width slider module? I was successful with implementing it on my site with the basic header, but when I try to put the effect on the full-width slider, the “center” version is showing only the first part of the sentence as centered. The remaining text is aligned to the right. When I add rw-wrapper-center as the custom class for the full-width slider, it messes up the other slide’s formatting. Do you have a workaround or any suggestions for this? It looks… Read more »
Hey Kelly. No this wasn’t developed with the slider module in mind, in fact I think from a UX perspective that would be far too much animation going on.
It could be achieved but would require adjusting timing to make it match timing of the slider and some positioning adjustments too.
Hi Michelle, Thanks for your reply. I gave up on the slider module and decided to switch to a plain full-width header with the ‘center’ alignment. But it’s still not working I am at my wits end with this code…it says this will take a max of 15 minutes to implement but I’ve exhausted about 3 hours of my time trying to fix this issue. The top text is centered, and the button is centered, but the changing words will not switch to centered. I’ve quadruple-checked my code and it matches your examples verbatim. What am I missing here? The… Read more »
Hi Michelle, Thanks for your reply. I gave up on the slider module and decided to switch to a plain full-width header with the ‘center’ alignment. But it’s still not working I am at my wits end with this code…it says this will take a max of 15 minutes to implement but I’ve exhausted about 3 hours of my time trying to fix this issue. The top text is centered, and the button is centered, but the changing words will not switch to centered. I’ve quadruple-checked my code and it matches your examples verbatim. What am I missing here? The… Read more »
Please disregard!
I saw an extra space between “:” and “center” in the text-align:center; part of the code. Removed the space (in 2 areas). Refreshed my page – voilah! …Ugh wow so much time wasted over a space! Not sure how that got messed up, maybe it was that paired with a caching issue?
Anyhow, thanks so much for your valuable resources Michelle!
All the best,
Kelly
Great, glad you got it sorted
Hi Michelle, thanks so much for this recipe and the latest extended downloads; I am loving the effect. One question, I would like the scrolling to end on the final ‘frame’ … so that the wording of the 6th sentence is remains static on the screen (i.e. sentences don’t continue scrolling through for a second time) – is there a simple fix for this that you are aware of? Regards, Sarah
Hi Sarah
Check out this article which should help you achieve what you are looking to do
https://paulund.co.uk/maintain-last-keyframe-css-animation
Hi Michelle, this is really great stuff, thank you, I love it but I experience a problem too.
I use the centered one, didn’t change anything and everything works fine until I define a Header Title for which I define the text and logo orientation also ‘center’ . Then the ‘Are you ready to’ stays centered but the changing words are moved to the right and the changing words effect are changed as if I choose the right version, not the centered one.
Do you have a solution for this?
Thanks in advance!
Hi Patrick.
That layout isn’t designed to work with adding extra text and images to the header. It would require some extensive adjustments to the CSS to have it how you want it, sorry
Thanks for your respons, I made it work by putting the header title and subtitle int the CSS code as well. Keep up the good work!
Excellent, well done you
Hi Michelle,
Great resources and thanks for sharing them.
When will you be writing about how to integrate the divi 2,7 launch animated header as in this link: http://codepen.io/andytran/pen/XdaYxv
Thanks
Hi Ram
I have no current plans for that but I will keep it in mind for when I have the time.
Thanks
Hi Michelle,
I am building a test page with this tutorial, my question is, why is there such a large spacing between the rw-words 1 and rw-words2 on this page?
http://tcsarcadia.theultimatewebmaster.com/
Much appreciated..
Hey Andrew
Try changing this css:
.rw-words-center {
width: 100%;
max-width: 1080px;
height: 100px;
-webkit-perspective: 800px;
perspective: 800px;
}
to this:
.rw-words-center {
width: 100%;
max-width: 1080px;
height: 70px;
-webkit-perspective: 800px;
perspective: 800px;
}
Dear Michelle,
That worked like a magic! Thank you very much! hugs!
Excellent
Hi Michelle, could you use this html/css in a regular section/text module?
Yes it should work fine Jennifer, although you may need to play with margins and padding
Hi Michelle,
I just update my Divi to the latest version and the effect is not working anymore for me. Do you know if there is some compatibility issue? I use a child theme, the CSS is in place, the class of the section is there. I don’t know what happened.
Thank you for all your cool tutorials.
Regards,
Gabriel
Hi Gabriel
It seems there are a few issues with the latest Divi update. I haven’t yet updated myself (I always leave it a week or so) but if you check the Divi theme Users FB group you will see a number of posts discussing it so I am sure there is some help in there
Hi Michelle,
Thank you for your reply.
Have they found a solution for this yet? My code keeps changing on me every time I place it and save.
Hey Kenny I don’t think there is a definitive solution. ET has done a lot of work to try to fix the issues but I think it is more a WP issue. The best advice I can give is: Install TinyMCE advanced and make sure the options are set in the settings not to strip p and br tags. When editing, stay in text mode rather than visual or it is likely the span tags will be removed as they appear empty even if you are editing a completely different module in visual mode. You can try changing the to… Read more »
Hi again–i am trying to make the text all lowercase. I have changed it here:
.
rw-sentence-right{
margin: auto;
text-transform: uppercase;
font-weight: 300;
text-shadow: 0 0 0 rgba(0,0,0,0.0001);
}
however it does not change. I also added !important; and nothing. Could you assist? I’m a CSS newbie.
Hi Jennifer
Just remove this from the css
text-transform: uppercase;
and be sure to clear your cache
The effect is not working for me. I have followed the instructions. One thing i did notice is that even though i copied and pasted the code into the text editor, when i saved it and then went back in, the formatting had changed. I manually edited it to look exactly as your example, but it is still not working. Could you take a look?
Nevermind—the sumome plug-in was the culprit…
Dear Michelle,
I tried a variation of this on this test site.. http://saikris.theultimatewebmaster.com/
It appears to be working fine on computer and on android devices.. however on iOS devices like smartphone, the moving words don’t seem to appear..
Would it be possible for you to have a look whenever you have the time please… I am out of ideas already.. I tried to disable all plugin and it is still the same.. it would not appear on iOS devices..
Thank you so much Michelle..
Best Regards,
Andrew
Any luck Michelle? I’m also running out of ideas to get this work on mobile iOS.. I tried to export the page to my other sites and different Divi versions.. it also won’t work there..
There is possibly not enough space to show the text or you could have a stray bit of css somewhere setting it to transparent as I can see the text is there when trying to copy/paste.
As you have modified this I really am not able to help that much but you can always try using the Divi Fixr service on Elegant marketplace if you are not able to sort it out.
Good luck
Dear Michelle,
Alright can do.. thank for trying.. Appreciate it very much.. Keep up the good work with the kitchen! Looking forward to more..
Best Regards,
Andrew
Am i missing something? I can’t copy the code–the only place i see it is in the screencap and i can’t copy anything from that.
Hi Jennifer
The code is in each of the toggles, just press the + sign next to the one you need to expand it
Clearly i hadn’t had my coffee yet!
I have followed the instructions but this is not working for me. I just get static header text, no changing of words. I am using the left-header.
Michelle
Thank you for this great tutorial and resource. I want to use it but want it look more like a ticker with different events coming up. You can see what I did here –
Is there a way to use the full size header to show moving text. For example: I want to announce the Playground build and then when that goes away I want to show the fundraising dinner. Similar to what i have done with the slider just below it but i do like the effects you have used to float the words in.
Hi Duffy
The link you have supplied is broken so I can’t check what you mean, however what you have explained is really not what this tutorial is for and would require a lot of customisation. I would suggest either looking for a tutorial closer to you needs or a ticker type plugin.
Best of luck!
What image dimensions do you use? If I try , mine is streched or cut off.
Got It!
A plug inn was bodering me!
Apologies, I forgot I exported as a page rather than a layout, it will be a new page in your site so you can save which ever version you want from the page to the library and then use it where you want
Accepted
I fixed it without the template. Is there a way to put the Topline between H1 tags? (See http://www.verenigdestaten.info )
Hi Wop, just change this part of the html to H1 instead of H2
It refers to this part of the CSS so if you want to make any styling adjustments this is where you would do it.
.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; }Hi,
I Uploaded the XML with succes to my site, but can’t find it anywhere?
It will be in page layouts, so you need to load it it from there rather than a section or module
Tx…
Should be me , But still can’t find it..
But i add it manually .. It works, but have some image issues.
I love this and plan on using it
I am pretty new to CSS, but your instructions were easy to follow!
Ran into one problem, however. We only want 4 ‘sentences’.. at the end of the rotation it pauses for several seconds before rotation starts again. What can I delete from the CSS, or change, so that it just keeps rotating smoothly through our sentences?
Hi Kim, yes you can! Delete two of these text from both the words-1 and words-2 in the html, then delete these two sections of css .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; } Then change the animation to 12 seconds as below .rw-words-1 span{ font-size: 310%; line-height: 82%; color: #da0a0a; -webkit-animation: rotateWordsFirst 12s linear infinite 0s; -ms-animation: rotateWordsFirst 12s linear infinite 0s; animation: rotateWordsFirst 12s linear infinite 0s; } .rw-words-2 span{ font-size: 120%; font-style: italic; line-height: 90%; -webkit-animation: rotateWordsSecond 12s ease-in infinite 0s; -ms-animation: rotateWordsSecond 12s ease-in… Read more »
Love the effect. Wait eagerly for the instructions to right align the text on the screen .
Hi Michelle This works really well and I will use it on a site I am building now – thanks for sharing! The only thing I have noticed so far is that it does not seem to play nice with a header that has been set as Make FullScreen – that function no longer seems to work – I don’t think the Divi JS script to size the header to adjust to the right height after load is now working – maybe there is a conflict? Would be interested to know if you/others can see this issue to or is… Read more »
Thanks Cliff, I will take a look at that if I get a chance but can’t promise anything
Hey Michelle,
Any idea when this child theme is being launched? I love the header concept, too lazy to try and do it on my own
Hi Shannon
It’s actually been delayed as I am about to launch a different theme as it was something a client needed.
That said, I am hoping to find the time to add xml files to all of my tutorials so you can either follow along or just import the layout.
make sure you subscribe to my email list so you hear when these are ready
Hi Michelle,
Thanks for this nice tip !
By default, the text inserted in the full width header is aligned to the left, but I would like to have it centered. If I use the “align text :center” option from the module, everything is not centered. Do you know how to do this ?
Hi Paul
I plan to add instructions for both center and right alignment, just need to find the time
Hi Michelle !
Thanks ! Keep us posted !
Hi Michelle. Love the effect of the header with the changing words. I am using the right aligned effect. It works great except the button remains left aligned even with this at the start of my CSS:
.rw-wrapper-right .et_pb_button {
float: right !important;
Would you have any suggestions on how to fix it?
Do you have a link Tiffany and I will take a look?
Hey Michelle, How are you? I hope all is good. Being that I am not so versed on CSS nor child themes, i have run into a small problem after following your technique. Although the “Are you ready to” is perfectly centered, i don’t know how to center align the rest of the motion text that’s following. Please Help!
Here’s my situation:
http://screencast.com/t/w0wKJhSEw
Hi there
Can you provide a link so I can take a look?
Hi Michelle, I am having the same challenge as Bzaromedia, where the “Are you ready to” (text changed) is perfectly centered, but the remainder is aligns right instead of center. My site is http://www.therathrive.com/paxa. Thank you for your help!
Hi Grace
You have this in your page css which is what is causing the issue:
.et_pb_fullwidth_header .et_pb_fullwidth_header_container.center .header-content {
width: 80%;
max-width: 800px;
margin: 20px auto;
}
If you change the margin to 0 it will center align the changing words. However it will then also move the pretext and the button to the left but as I cannot see how you have the module set up I can’t really comment. The simplest option for you is to import the demo file and then add the text you need.
Thank you so much, Michelle!
I am a beginner, and don’t yet know how to import a demo file, but will try to figure it out. Do you happen to have any tips?
I love your site and the effects of this recipe, and I really appreciate your tutorials– they are fabulous!
Grace
Hi Grace
When you download the file unzip it first and there is a pdf instruction file in there for you
And thank you for your kind words!
Hi Michelle,
Thank you for the fabulous, easy to follow instructions! I am still loving your site (I made the menu pipes recipe, worked wonderfully). I created a child theme and imported the demo file, but am still challenged by the Changing Words. The changing words look perfectly centered on Internet Explorer, but are still to the Right on Firefox, Chrome, Opera and Dolphin. By any chance do you have any ideas why it wold work on IE, but not the others? Thank you!
Hi Grace
I’m afraid I am at a loss as to why you are experiencing these issues. It works exactly the same for me on FF, Opera, Safari, Chrome and IE. A long shot but are you sure you are using the version of the header you want? The demo file includes left, right and center aligned sections?
I love the effect! When looking at it on my iPad Air 2, landscape, the (red & black) text was trundicated on several of the phrases. I am certain this was not the desired effect. I took a screen shot but do not see how to share it. Works just fine in portrait view.
Hi Jerry
You can adjust the media queries within the css to combat this. As everyone will be using different fonts at different sizes its not realistic to create a one size fits all but if you replace this part of the css
@media screen and (max-width: 1060px){
.rw-words{ height: 75px; }
.rw-words-1 span{ font-size: 280%;}
.rw-words-2 span { font-size: 160%; }
}
With this
@media screen and (max-width: 1023px){
.rw-words{ height: 75px; }
.rw-words-1 span{ font-size: 280%;}
.rw-words-2 span { font-size: 160%; }
}
It should fix the landscape issue on iPad
This is great Michelle! Thank you! I’m am very new to CSS so I have a dumb question. The text color is grey, and when I look at the script you wrote I see two places where #color can be changed. I would just like white, so replaced what you had with #ffffff and it’s still grey. Would you mind giving me some direction?
Hi Dow, no question is dumb! The colour of the first two lines are set within the CSS, so for where it says ‘Are you ready to’ you change the colour in the following section .rw-sentence span{ color: #000; white-space: normal; } For the single words in red, you change the colour in the following section .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; } The final line does not have colour set within the css so should take on the colour… Read more »
This is really strange. This works perfectly on a test page but, on my home page, it fails.
http://www.motionpub.com with GoDaddy as the host…
Any thoughts? Thanks. It’s really neat.
Solved on FB
For anyone else who has this issue, WP can strip out the tags when switching between visual and text editor. Make sure you paste the code in the text editor and save and avoid switching back and forth.
Michelle, I did put the code in the text editor, avoided switching back and forth between text and visual editor for that module and the tags are still dropping out. Any suggestions?
Did you install TinyMCE advanced and change the setting to stop removing P and br tags?
Very cool. To align the text to the right, you have to modify the CSS, right? Not the HTML in the Divi Builder editor.
You can do it both ways but better to do it via css because of that tag stripping issue with WP
How do I align them to the right? Thanks for this ssooo wonderful resource Michelle
Hi Rambo, you are most welcome
I plan to add instructions for both center and right alignment, just need to find the time