I’m sure you know by now that I love playing around with CSS. I have hundreds and hundreds of snippets that I use on clients sites, and gradually I am shareing them with you here on the blog. This week, I’m going to show you how to add text highlights in Divi. I have noticed these are becoming quite the trend in web design, so I wanted to show you wonderful folks how to get on board with them. I included four styles in this tutorial, but if you have more ideas please let me know.
1. Multi-Line Text With Color Background Around Each Line
The first example of text highlights in Divi is my favorite and is fairly popular on modern websites. To create a multi-line colored background highlight like this, just add a CSS class inside the module’s Advanced Tab Custom CSS input area. In this example, we are using the class “pa-multi-line-highlight.”
Note that we are using this with an H2 in this example, so just change the H2 in your snippet to whatever you need such as H1, p, span, etc. Copy and paste one of your choice into the Divi>Theme Options>Custom CSS box.
This text callout is great for highlighitn important things in your text, such as a notice, warning, or just as a fun accent. For this one, we need to specify which word or words we want to be highlighted using <span> tags. You can add these text highlights and accents in any Divi heading or text.
WARNING!This is very important! Just kidding, but I got your attention! Do you like this? Leave a comment if you think it’s cool!
To create a callout like this, just add a CSS class inside an HTML span tag. In these examples, we are using the class “callout” and “callout-2” so that each one can have a different color or spacing. You can copy the snippet below and then change the word “EXAMPLE” which is between the opening and closing span tags.
<span class="pa-callout">EXAMPLE!</span>
There are two code snippets below, one for each of the examples. Copy and paste one of your choice into the Divi>Theme Options>Custom CSS box.
This text callout is great for highlighitn important things in your text, such as a notice, warning, or just as a fun accent. For this one, we need to specify which word or words we want to be highlighted using <span> tags. You can add these text highlights and accents in any Divi heading or text.
To create a color highlight like this, just add a CSS class inside an HTML span tag. In this example, we are using the class “pa-color-highlight.” You can copy the snippet below and then change the word “EXAMPLE” which is between the opening and closing span tags.
<span class="pa-color-highlight">EXAMPLE!</span>
Copy and paste this code snippet into the Divi>Theme Options>Custom CSS box.
See what I did there? This was is pretty cool! Add the class “pa-bold-highlight” to any module that has bold text. Once you have the CSS snippet added to your page or website, the bold text will instantly have a yellow highlight color around it. Of course, you can always change the color and opacity of the highlight.
Go ahead and copy and paste the CSS snippet into the Divi>Theme Options>Custom CSS box. (I added the “h2 strong” so that you could visually see it above, but you can remove that from the snippet.)
/*add highlight around bold text*/
.pa-bold-highlight p strong, h2 strong {
padding: 0 5px;
background-color: rgba(255,255,0,0.5);
}
Highlighted Text In General
In the comments nordie pointed out a trick to highlight text in general. This is different than what I was doing here with the bold text, but if you just want highlights, this works great!
I hope you have enjoyed learning How To Add Text Highlights, Accents, and Underlines in Divi. Please share your thoughts in the comments below. If you find value in this type of post, please subscribe because we have tons of tutorials in progress to be posted!
Subscribe
Each month we send out a roundup email newsletter with the latest tutorials, product updates, helpful resources, and any other industry or personal news. Occasionally we send an extra separate email here and there if we just can’t wait! So that’s what you will get if you subscribe, and you can always unsubscribe at any time if you just can’t take it anymore :)
Nelson is the owner of Pee-Aye Creative in the beautiful state of Pennsylvania. He loves helping small businesses, exploring outdoors, building websites with Divi, and teaching others.
Hey Robyn,
To change the color just replace rgba(255,166,60,0.75) with your color. I used an rgb color there because it is 75% opacity, but your hex color will work perfectly too!
Unfortunately, I have a problem that I can’t see the highlights on my mobile device (I can’t see it even if reduce the chrome browser here on my computer to the smaller window.) Can you advise me what I’m doing wrong? Thank you!
But I would like to use different colors in case number 3, not only one, I mean in different texts, for example one text with #fbf7ef and another with #eefeee. How can I do that?
You’re welcome, Paula! And I do that all the time, just duplicate the code and add some variation to the class like “.pa-color-highlight-red” and just have one for each color and use the matching class in the span tag.
I am using this on blog titels, and I would like to extend this to the meta info under the title. Such as the date and the category and author info. Is there a way to do that as a hole, or do I have to put a seperate css for the meta.
The meta has a css class already, offhand I think .post-meta or something similar. So however you are targeting the title, do similar for this.
brittany
on August 21, 2020 at 8:14 pm
Thank you very much for the tip, they worked great. I thought it would be easy to make a specific tweak, but I’m struggling. Is it possible to use the bold as a way of changing one link to another color? I thought maybe just taking out the ‘background’ of ‘background-color’ plus a million other variations I tried. I have somehow worked myself into a complex design solution that utilizes links as a way of having 2 different sized and coloured text in one running text box, but would like just one of them to start out in a different colour. Does that make sense?
Hi Emma,
That simply sounds like you are adding the CSS to the wrong place. Be sure to add the code to your Divi Theme Options Custom CSS or styl.css in a child theme.
Hi Nelson, thanks for your tips. I tried to work with No. 1 but want the text to align right. I have to lines of Text with some space in between. When I add align right to your code, I get a colored box without any space between the lines. Any ideas?
Love this, thank you!
I was wondering if it is possible to have every H2 in blog posts have a colorful underline. I tried the following:
————————
In the Divi Builder, in the Post Content Settings I added to the CSS Class: pa-color-highlight
In the Divi Child theme CSS I added:
/*color highlights in text*/
.pa-color-highlight h2 {
text-decoration: none;
box-shadow: inset 0 -.5em 0 rgba(136,196,221,1);
color: inherit;
}
————————-
But, it didn’t work 🙁 Any ideas?
Please try adding a Custom Class to the Blog Module by going to the Blog Module Settings > Advanced > CSS ID & Classes and then add a Custom CSS by grabbing that Custom Class. For example, the custom class that you have given is pa-blog-module.
Then go to the WordPress Dashboard > Divi > Theme Options > Custom CSS Panel and place the code given below:
.pa-blog-module article .entry-title {
text-decoration: none;
box-shadow: inset 0 -.5em 0 rgba(136,196,221,1);
color: inherit;
}
This will highlight all the h2 tags in the blog post. Please let us know if it helps. 🙂
Thank you for the suggestion.
To make it work I still need to manually add the class to every h2 text
<span class=”pa-color-highlight”>TEXT</span>
In your code, where do you state h2?
Hemant Gaba
on April 13, 2021 at 7:23 pm
.entry-title is the class that is given to all the h2 tags in the blog module. That is why I have suggested that code and it is working completely fine for me. Please try using the code given below and if that doesn’t help then please share the URL so that I could investigate further:
.pa-blog-module article .entry-title a{
text-decoration: none;
box-shadow: inset 0 -.5em 0 rgba(136,196,221,1);
color: inherit;
}
Please let me know how it goes.
Patricia Rios
on January 15, 2022 at 10:57 am
hi thank you! What if the H2 has to lines, how can I break the underline to appear below the two lines? I found a solution with box-decoration clone, but it doesnt work! thank you!
Hemant Gaba
on January 24, 2022 at 7:33 am
Hey Patricia,
Could you please share the URL of the website for me to investigate further on this?
If you already have a span tag and you want to highlight that then just give the class of your preferred style that is mentioned in the tutorial to the span tag and then paste the code in the Theme Options. You can change the color with the color that you want to give to your span. If you want to highlight the whole h1 then wrap that h1 tags in the span tags and then give that span a class mentioned above.
I’m looking for a solution to move the text in the option 1 a bit above the background. The idea is to get 3 layout, 1 with a background image, the second with the text background, then the text itself.
I did some text with text transformation and background on colomn, then offset using x/y axis. It’s working, but it’s not responsive. I tried as well with a separator, still the same issue.
I guess I would have to use box shadow ? What do you think ?
Hi Simon
You need to use the Divi Responsive Functionality and set different offset values for different screens to make it responsive or else you can use the responsive units like vw, em, rem instead of pixels.
Hello, thanks a lot for this. I’ve seen the highlight effect on some sites and it is really cool. Should we use a child theme, so that the CSS on the page settings are retained with subsequent Divi theme updates? Also, what’s the best place to add the CSS – is it within the page settings or theme options/custom css?
Many thanks, I am new and still learning Divi, so any feedback greatly appreciated.
If your CSS Code will only going to affect the elements present on a single page then you can go ahead and add the CSS in the Page Settings as it will be the best place in this scenario. If the code will going to affect more than one page then the best place to paste the code is Theme Options > Custom CSS Panel as then you will not have to place the code more than once and it will retain after the theme updates. If you want to place the code in your child theme style.css so you can as this is also equally good as the Theme options.
I’m trying to get the color highlights (#3) to work and seem to be doing something wrong. I pasted the first snippet inside the CSS ID & Classes area and added the second snippet to the theme options. What am I missing?
You need to place the first snippet under the content tab in the body text of the Module of your choice. For example, if you want to use the Text Module then add the text module and go to the Text Module Settings > Content Tab > Text and there you will see a panel (in which the dummy content will be there by default), and in that you need to place the span tag snippet. After that to place the second snippet you need to go to the WordPress Dashboard > Divi > Theme Options > Custom CSS Panel and place the code there.
In the style three, there is a span tag given. We can place the anchor tag between the span tags and provide the link to that anchor tag. Instead of just placing the span tag, place the snippet given below:
<span class=”pa-color-highlight”><a href=”Place your link here”>EXAMPLE LINK!</a></span>
Inside the href quotes, you need to place your link.
Place the span tag inside the text module and then place the anchor tags between the span tags to place the link as shown here: https://pasteboard.co/K4EBGvH.jpg
Provide the custom class to the span tag. In this case, the custom class that I have given is pa-underline.
After that go to the Divi > Theme Options > Custom CSS Panel and place the code given below:
This is what I’m looking for! Thank you! but I got some problem…
When I copy and paste the first one (Multi-Line Text With Color Background Around Each Line) to Custom CSS section, it will said “Expected RBRACE.” and “Unexpected token ‘}’.” I paste in the “Main Element” section in the Custom CSS.
Hi Catherine,
That’s actually not the correct place for code, you should go to Divi>Theme Options in the backend and scroll down and paste it there in the Custom CSS box.
I tried the multi-line highlight and it works so far. I only have my text right aligned and with your code it is on the left. How could I have my text on the right?
Thanks again for sharing this. Very helpful.
Sophie
I have checked the URL you provided and I am afraid that I am not able to find where you are facing the issue exactly. Could you please point me in the right direction so that I could help?
I have a question to No. 2 (Text Callout). If I highlight multiple lines only the beginning and the ending of the text is rounded. (The row breaks are flat) What CSS do I have to add to make the corners rounded at the beginning and end of each row of the highlighted text?
Hi thanks for this!! I love these effects. I have a quick question: In the ‘.pa-multi-line-highlight ‘ example how would you make the text align centered? ‘text-align: center;’ doesn’t seem to do it. I’m going to keep digging around but any suggestion you have would be super helpful and appreciated! This is what I’ve got so far:
.highlight h1 {
color: #00303f;
background-color: #FBC816;
line-height: 1.6em;
font-weight: 700;
text-align: center;
padding-bottom: 0px;
display: inline;
box-shadow: 20px 0 0px 0px #FBC816, -30px 0 0px 0px #FBC816;
box-decoration-break: clone;
}
I have investigated the website and the text is already aligned in the center. If you can’t see the results then, please check the website in incognito mode and see if that helps.
In this tutorial I will show you how to move the Divi Gallery module title and caption text over the image and add a nice hover effect.
Pin It on Pinterest
{"id":null,"mode":"button","open_style":"in_modal","currency_code":"USD","currency_symbol":"$","currency_type":"decimal","blank_flag_url":"https:\/\/wordpress-292293-1617718.cloudwaysapps.com\/wp-content\/plugins\/tip-jar-wp\/\/assets\/images\/flags\/blank.gif","flag_sprite_url":"https:\/\/wordpress-292293-1617718.cloudwaysapps.com\/wp-content\/plugins\/tip-jar-wp\/\/assets\/images\/flags\/flags.png","default_amount":500,"top_media_type":"none","featured_image_url":false,"featured_embed":"","header_media":null,"file_download_attachment_data":null,"recurring_options_enabled":true,"recurring_options":{"never":{"selected":true,"after_output":"One time only"},"weekly":{"selected":false,"after_output":"Every week"},"monthly":{"selected":false,"after_output":"Every month"},"yearly":{"selected":false,"after_output":"Every year"}},"strings":{"current_user_email":"","current_user_name":"","link_text":"Leave a tip","complete_payment_button_error_text":"Check info and try again","payment_verb":"Pay","payment_request_label":"Pee-Aye Creative","form_has_an_error":"Please check and fix the errors above","general_server_error":"Something isn't working right at the moment. Please try again.","form_title":"Pee-Aye Creative","form_subtitle":null,"currency_search_text":"Country or Currency here","other_payment_option":"Other payment option","manage_payments_button_text":"Manage your payments","thank_you_message":"Thank you for being a supporter! It is people like you who keep us going week after week!","payment_confirmation_title":"Pee-Aye Creative","receipt_title":"Your Receipt","print_receipt":"Print Receipt","email_receipt":"Email Receipt","email_receipt_sending":"Sending receipt...","email_receipt_success":"Email receipt successfully sent","email_receipt_failed":"Email receipt failed to send. Please try again.","receipt_payee":"Paid to","receipt_statement_descriptor":"This will show up on your statement as","receipt_date":"Date","receipt_transaction_id":"Transaction ID","receipt_transaction_amount":"Amount","refund_payer":"Refund from","login":"Log in to manage your payments","manage_payments":"Manage Payments","transactions_title":"Your Transactions","transaction_title":"Transaction Receipt","transaction_period":"Plan Period","arrangements_title":"Your Plans","arrangement_title":"Manage Plan","arrangement_details":"Plan Details","arrangement_id_title":"Plan ID","arrangement_payment_method_title":"Payment Method","arrangement_amount_title":"Plan Amount","arrangement_renewal_title":"Next renewal date","arrangement_action_cancel":"Cancel Plan","arrangement_action_cant_cancel":"Cancelling is currently not available.","arrangement_action_cancel_double":"Are you sure you'd like to cancel?","arrangement_cancelling":"Cancelling Plan...","arrangement_cancelled":"Plan Cancelled","arrangement_failed_to_cancel":"Failed to cancel plan","back_to_plans":"\u2190 Back to Plans","update_payment_method_verb":"Update","sca_auth_description":"Your have a pending renewal payment which requires authorization.","sca_auth_verb":"Authorize renewal payment","sca_authing_verb":"Authorizing payment","sca_authed_verb":"Payment successfully authorized!","sca_auth_failed":"Unable to authorize! Please try again.","login_button_text":"Log in","login_form_has_an_error":"Please check and fix the errors above","uppercase_search":"Search","lowercase_search":"search","uppercase_page":"Page","lowercase_page":"page","uppercase_items":"Items","lowercase_items":"items","uppercase_per":"Per","lowercase_per":"per","uppercase_of":"Of","lowercase_of":"of","back":"Back to plans","zip_code_placeholder":"Zip\/Postal Code","download_file_button_text":"Download File","input_field_instructions":{"tip_amount":{"placeholder_text":"How much would you like to tip?","initial":{"instruction_type":"normal","instruction_message":"How much would you like to tip? Choose any currency."},"empty":{"instruction_type":"error","instruction_message":"How much would you like to tip? Choose any currency."},"invalid_curency":{"instruction_type":"error","instruction_message":"Please choose a valid currency."}},"recurring":{"placeholder_text":"Recurring","initial":{"instruction_type":"normal","instruction_message":"How often would you like to give this?"},"success":{"instruction_type":"success","instruction_message":"How often would you like to give this?"},"empty":{"instruction_type":"error","instruction_message":"How often would you like to give this?"}},"name":{"placeholder_text":"Name on Credit Card","initial":{"instruction_type":"normal","instruction_message":"Enter the name on your card."},"success":{"instruction_type":"success","instruction_message":"Enter the name on your card."},"empty":{"instruction_type":"error","instruction_message":"Please enter the name on your card."}},"privacy_policy":{"terms_title":"Terms and conditions","terms_body":null,"terms_show_text":"View Terms","terms_hide_text":"Hide Terms","initial":{"instruction_type":"normal","instruction_message":"I agree to the terms."},"unchecked":{"instruction_type":"error","instruction_message":"Please agree to the terms."},"checked":{"instruction_type":"success","instruction_message":"I agree to the terms."}},"email":{"placeholder_text":"Your email address","initial":{"instruction_type":"normal","instruction_message":"Enter your email address"},"success":{"instruction_type":"success","instruction_message":"Enter your email address"},"blank":{"instruction_type":"error","instruction_message":"Enter your email address"},"not_an_email_address":{"instruction_type":"error","instruction_message":"Make sure you have entered a valid email address"}},"note_with_tip":{"placeholder_text":"Your note here...","initial":{"instruction_type":"normal","instruction_message":"Attach a note to your tip (optional)"},"empty":{"instruction_type":"normal","instruction_message":"Attach a note to your tip (optional)"},"not_empty_initial":{"instruction_type":"normal","instruction_message":"Attach a note to your tip (optional)"},"saving":{"instruction_type":"normal","instruction_message":"Saving note..."},"success":{"instruction_type":"success","instruction_message":"Note successfully saved!"},"error":{"instruction_type":"error","instruction_message":"Unable to save note note at this time. Please try again."}},"email_for_login_code":{"placeholder_text":"Your email address","initial":{"instruction_type":"normal","instruction_message":"Enter your email to log in."},"success":{"instruction_type":"success","instruction_message":"Enter your email to log in."},"blank":{"instruction_type":"error","instruction_message":"Enter your email to log in."},"empty":{"instruction_type":"error","instruction_message":"Enter your email to log in."}},"login_code":{"initial":{"instruction_type":"normal","instruction_message":"Check your email and enter the login code."},"success":{"instruction_type":"success","instruction_message":"Check your email and enter the login code."},"blank":{"instruction_type":"error","instruction_message":"Check your email and enter the login code."},"empty":{"instruction_type":"error","instruction_message":"Check your email and enter the login code."}},"stripe_all_in_one":{"initial":{"instruction_type":"normal","instruction_message":"Enter your credit card details here."},"empty":{"instruction_type":"error","instruction_message":"Enter your credit card details here."},"success":{"instruction_type":"normal","instruction_message":"Enter your credit card details here."},"invalid_number":{"instruction_type":"error","instruction_message":"The card number is not a valid credit card number."},"invalid_expiry_month":{"instruction_type":"error","instruction_message":"The card's expiration month is invalid."},"invalid_expiry_year":{"instruction_type":"error","instruction_message":"The card's expiration year is invalid."},"invalid_cvc":{"instruction_type":"error","instruction_message":"The card's security code is invalid."},"incorrect_number":{"instruction_type":"error","instruction_message":"The card number is incorrect."},"incomplete_number":{"instruction_type":"error","instruction_message":"The card number is incomplete."},"incomplete_cvc":{"instruction_type":"error","instruction_message":"The card's security code is incomplete."},"incomplete_expiry":{"instruction_type":"error","instruction_message":"The card's expiration date is incomplete."},"incomplete_zip":{"instruction_type":"error","instruction_message":"The card's zip code is incomplete."},"expired_card":{"instruction_type":"error","instruction_message":"The card has expired."},"incorrect_cvc":{"instruction_type":"error","instruction_message":"The card's security code is incorrect."},"incorrect_zip":{"instruction_type":"error","instruction_message":"The card's zip code failed validation."},"invalid_expiry_year_past":{"instruction_type":"error","instruction_message":"The card's expiration year is in the past"},"card_declined":{"instruction_type":"error","instruction_message":"The card was declined."},"missing":{"instruction_type":"error","instruction_message":"There is no card on a customer that is being charged."},"processing_error":{"instruction_type":"error","instruction_message":"An error occurred while processing the card."},"invalid_request_error":{"instruction_type":"error","instruction_message":"Unable to process this payment, please try again or use alternative method."},"invalid_sofort_country":{"instruction_type":"error","instruction_message":"The billing country is not accepted by SOFORT. Please try another country."}}}},"fetched_oembed_html":false}
Cool tips! So simple and good looking. Thanks Nelson 🙂
Hey Samson, glad you like these! You are welcome! 🙂
Color highlights in text!
Hi, how do I change the color on number 3 from orange to #E8ADAA?
Thank you for these tips!
Hey Robyn,
To change the color just replace rgba(255,166,60,0.75) with your color. I used an rgb color there because it is 75% opacity, but your hex color will work perfectly too!
Thank you so much! Still learning all this stuff! Happy holidays.
Hello… great blog. I used a different hex color and changed to .6 height… and it just keeps changing back to the original… have you seen this before?
Hi Mel,
I don’t think any my snippets have a height, so I’m not sure what you mean without more context.
Cool Nelson !!!!!. Thank´s again.
Guillermo
Hey Guillermo,
You are welcome! Glad you found this helpful! 🙂
Thank you, Nelson. I am learning a lot from you here. I am so appreciative.
You are welcome, Charles! Glad you can learn a lot here! 🙂
Hello my friend, so nice, thank you!
Unfortunately, I have a problem that I can’t see the highlights on my mobile device (I can’t see it even if reduce the chrome browser here on my computer to the smaller window.) Can you advise me what I’m doing wrong? Thank you!
Hi Peter, that’s pretty strange. Can you share the link so I can see?
Super useful tips. Thank you so much!
You’re welcome Ezinne, glad you enjoyed these!
Hi,
I try to do this but I cant do. I use in Gutenberg editor. <span class=“pa-color-highlight”>EXAMPLE!</span> in html but not work
I don’t see anything wrong with that code, should work whether it’s Divi or Gutenberg because it is just HTML.
Very useful, thanks Nelson!
You are welcome, Lydia!
Thanks for the tips!
But I would like to use different colors in case number 3, not only one, I mean in different texts, for example one text with #fbf7ef and another with #eefeee. How can I do that?
You’re welcome, Paula! And I do that all the time, just duplicate the code and add some variation to the class like “.pa-color-highlight-red” and just have one for each color and use the matching class in the span tag.
Thanks!! It worked! Looks amazing!
That’s great, feel free to customize it even more with color and size!
Great tips! Thank you 🙂
You’re welcome, Alex! Glad you like them!
Thank you for this it’s grat. But one question How do you apply this to Meta info
Hi Chadi,
Which one (number) are you thinking of adding to meta? Do you mean on the blog module, or somewhere else?
I am using this on blog titels, and I would like to extend this to the meta info under the title. Such as the date and the category and author info. Is there a way to do that as a hole, or do I have to put a seperate css for the meta.
The meta has a css class already, offhand I think .post-meta or something similar. So however you are targeting the title, do similar for this.
Thank you very much for the tip, they worked great. I thought it would be easy to make a specific tweak, but I’m struggling. Is it possible to use the bold as a way of changing one link to another color? I thought maybe just taking out the ‘background’ of ‘background-color’ plus a million other variations I tried. I have somehow worked myself into a complex design solution that utilizes links as a way of having 2 different sized and coloured text in one running text box, but would like just one of them to start out in a different colour. Does that make sense?
Hi Brittany,
I’m afraid I’m a little confused. Do you have an example link to show me?
Excellent tutorial. How can I make that the text is centered in option number 1? It’s always justified to the left. Thanks!
Hi Francisco,
Our code is not centering anything…that would be set in the module 🙂
this also works
<mark>highlight</mark>
That’s awesome, I had no idea!
Cool tips however number one keeps coming up with an expected RBRACE error – can you help?
.pa-multi-line-highlight h2 {
EXPECTED RBRACE
color: #ffffff;
background-color: #e03574;
line-height: 1.7em;
padding-bottom: 0px;
display: inline;
box-shadow: 10px 0 0px 0px #e03574, -10px 0 0px 0px #e03574;
box-decoration-break: clone;
}
UNEXPECTED TOKEN ‘}’
Hi Emma,
That simply sounds like you are adding the CSS to the wrong place. Be sure to add the code to your Divi Theme Options Custom CSS or styl.css in a child theme.
i love it , thanks
Great, glad you love it!
Hi Nelson, thanks for your tips. I tried to work with No. 1 but want the text to align right. I have to lines of Text with some space in between. When I add align right to your code, I get a colored box without any space between the lines. Any ideas?
Hi Rolf,
I’m not sure what, I can’t visualize what you mean. Why not try aligning it right in the module settings?
Love this, thank you!
I was wondering if it is possible to have every H2 in blog posts have a colorful underline. I tried the following:
————————
In the Divi Builder, in the Post Content Settings I added to the CSS Class: pa-color-highlight
In the Divi Child theme CSS I added:
/*color highlights in text*/
.pa-color-highlight h2 {
text-decoration: none;
box-shadow: inset 0 -.5em 0 rgba(136,196,221,1);
color: inherit;
}
————————-
But, it didn’t work 🙁 Any ideas?
Please try adding a Custom Class to the Blog Module by going to the Blog Module Settings > Advanced > CSS ID & Classes and then add a Custom CSS by grabbing that Custom Class. For example, the custom class that you have given is pa-blog-module.
Then go to the WordPress Dashboard > Divi > Theme Options > Custom CSS Panel and place the code given below:
.pa-blog-module article .entry-title {
text-decoration: none;
box-shadow: inset 0 -.5em 0 rgba(136,196,221,1);
color: inherit;
}
This will highlight all the h2 tags in the blog post. Please let us know if it helps. 🙂
Thank you for the suggestion.
To make it work I still need to manually add the class to every h2 text
<span class=”pa-color-highlight”>TEXT</span>
In your code, where do you state h2?
.entry-title is the class that is given to all the h2 tags in the blog module. That is why I have suggested that code and it is working completely fine for me. Please try using the code given below and if that doesn’t help then please share the URL so that I could investigate further:
.pa-blog-module article .entry-title a{
text-decoration: none;
box-shadow: inset 0 -.5em 0 rgba(136,196,221,1);
color: inherit;
}
Please let me know how it goes.
hi thank you! What if the H2 has to lines, how can I break the underline to appear below the two lines? I found a solution with box-decoration clone, but it doesnt work! thank you!
Hey Patricia,
Could you please share the URL of the website for me to investigate further on this?
Thank you Nelson….I am wondering….what if you already have a span style….how would that look like….
Thanks,
Mark
If you already have a span tag and you want to highlight that then just give the class of your preferred style that is mentioned in the tutorial to the span tag and then paste the code in the Theme Options. You can change the color with the color that you want to give to your span. If you want to highlight the whole h1 then wrap that h1 tags in the span tags and then give that span a class mentioned above.
Hi Nelson, thanks for the post, it helps a lot.
I’m looking for a solution to move the text in the option 1 a bit above the background. The idea is to get 3 layout, 1 with a background image, the second with the text background, then the text itself.
I did some text with text transformation and background on colomn, then offset using x/y axis. It’s working, but it’s not responsive. I tried as well with a separator, still the same issue.
I guess I would have to use box shadow ? What do you think ?
Thanks,
Simon
Hi Simon
You need to use the Divi Responsive Functionality and set different offset values for different screens to make it responsive or else you can use the responsive units like vw, em, rem instead of pixels.
Let us know how it goes. 🙂
Hello, thanks a lot for this. I’ve seen the highlight effect on some sites and it is really cool. Should we use a child theme, so that the CSS on the page settings are retained with subsequent Divi theme updates? Also, what’s the best place to add the CSS – is it within the page settings or theme options/custom css?
Many thanks, I am new and still learning Divi, so any feedback greatly appreciated.
If your CSS Code will only going to affect the elements present on a single page then you can go ahead and add the CSS in the Page Settings as it will be the best place in this scenario. If the code will going to affect more than one page then the best place to paste the code is Theme Options > Custom CSS Panel as then you will not have to place the code more than once and it will retain after the theme updates. If you want to place the code in your child theme style.css so you can as this is also equally good as the Theme options.
I’m trying to get the color highlights (#3) to work and seem to be doing something wrong. I pasted the first snippet inside the CSS ID & Classes area and added the second snippet to the theme options. What am I missing?
You need to place the first snippet under the content tab in the body text of the Module of your choice. For example, if you want to use the Text Module then add the text module and go to the Text Module Settings > Content Tab > Text and there you will see a panel (in which the dummy content will be there by default), and in that you need to place the span tag snippet. After that to place the second snippet you need to go to the WordPress Dashboard > Divi > Theme Options > Custom CSS Panel and place the code there.
Please let us know if that helps.
How to add style 3 to link text.
In the style three, there is a span tag given. We can place the anchor tag between the span tags and provide the link to that anchor tag. Instead of just placing the span tag, place the snippet given below:
<span class=”pa-color-highlight”><a href=”Place your link here”>EXAMPLE LINK!</a></span>
Inside the href quotes, you need to place your link.
Hey Nelson
How to make the link text effect like your blog, underline and highlight on hover.
Place the span tag inside the text module and then place the anchor tags between the span tags to place the link as shown here: https://pasteboard.co/K4EBGvH.jpg
Provide the custom class to the span tag. In this case, the custom class that I have given is pa-underline.
After that go to the Divi > Theme Options > Custom CSS Panel and place the code given below:
span.pa-underline a{
text-decoration: underline;
text-decoration-color: #d2007f;
transition: all 0.2s ease-in-out;
font-weight: bold;
}
span.pa-underline a:hover{
color: #fff;
background-color: #d2007f;
}
You can change the line color and the background color by changing the color value in the text-decoration-color and background-color property.
this blog is one of the best things that have ever happened to my life.
true story. if you come to South America shoot me an email! You’re so welcome!
I love hearing things like that, so happy to help!
Hello,
This is what I’m looking for! Thank you! but I got some problem…
When I copy and paste the first one (Multi-Line Text With Color Background Around Each Line) to Custom CSS section, it will said “Expected RBRACE.” and “Unexpected token ‘}’.” I paste in the “Main Element” section in the Custom CSS.
How can I fix this?
Thank you!!
Hi Catherine,
That’s actually not the correct place for code, you should go to Divi>Theme Options in the backend and scroll down and paste it there in the Custom CSS box.
Very cool. Thanks for sharing 🙂
You’re welcome, glad you like it!
Hi Nelson,
I tried the multi-line highlight and it works so far. I only have my text right aligned and with your code it is on the left. How could I have my text on the right?
Thanks again for sharing this. Very helpful.
Sophie
Hey Sophie,
I have checked the URL you provided and I am afraid that I am not able to find where you are facing the issue exactly. Could you please point me in the right direction so that I could help?
Hi,
I have a question to No. 2 (Text Callout). If I highlight multiple lines only the beginning and the ending of the text is rounded. (The row breaks are flat) What CSS do I have to add to make the corners rounded at the beginning and end of each row of the highlighted text?
Hey Aron,
Could you please share the URL for me to investigate it further?
Great article! Thanks for sharing.
for highlighted body text in general, and using this:
Your highlighted text here
How do I change the color of the highlight?
Thank you!
The color can be changed by the hex value…I’m not sure how else to answer that.
Hi thanks for this!! I love these effects. I have a quick question: In the ‘.pa-multi-line-highlight ‘ example how would you make the text align centered? ‘text-align: center;’ doesn’t seem to do it. I’m going to keep digging around but any suggestion you have would be super helpful and appreciated! This is what I’ve got so far:
.highlight h1 {
color: #00303f;
background-color: #FBC816;
line-height: 1.6em;
font-weight: 700;
text-align: center;
padding-bottom: 0px;
display: inline;
box-shadow: 20px 0 0px 0px #FBC816, -30px 0 0px 0px #FBC816;
box-decoration-break: clone;
}
Hey Dawna,
I have investigated the website and the text is already aligned in the center. If you can’t see the results then, please check the website in incognito mode and see if that helps.