In today’s tutorial, I want to share a fun way to add some unique design style to your Divi heading text. I’m going to show you how to add decorative lines beside your heading text. This can be on the right side of a headline, or on both. You can adjust the color and thickness of the lines however you want. These snippets work make the line width beside the text “auto-adjustable” which is pretty cool. I recommend watching the video on this one to get the full benefit of this fun Divi tutorial!
Join subscribers on our YouTube channel and enjoy other Divi video tutorials!
Add A Decorative Line On Both Sides of A Divi Heading
First, add the CSS class “pa-heading-line-both” to any module where you want the lines to appear on the heading.
Adding The Code Snippet
If you are using our free Divi child theme, place this snippet into the style.css file. Otherwise, place this in your Divi>Theme Options>Custom CSS code box. If you need help, check out our complete guide on Where To Add Custom Code In Divi.
/*center the heading and lines*/
.pa-heading-line-both h2 {
display: flex;
width: 100%;
justify-content: center;
align-items: center;
text-align: center;
}
/*add and adjust the lines*/
.pa-heading-line-both h2:before,
.pa-heading-line-both h2:after {
content: '';
border-top: 2px solid;
margin: 0 20px 0 0;
flex: 1 0 20px;
color: #666666;
}
/*add spacing between heading and lines*/
.pa-heading-line-both h2:after {
margin: 0 0 0 20px;
}
Notice that we are targeting an H2 heading, which is what we used in the video example. You can change this to H1, H3, etc.Â
Add A Decorative Line On The Right Side of A Divi Heading
If your text is left aligned, you may want to add a line to the right side of your Divi heading text. I like to do this one, and it works really well. The line will extend to the right as far as the column width. As always, feel free to change the thickness and color of the line, or change the h2 to h1, etc.
First, add the CSS class “pa-heading-line-right” to any module where you want the lines to appear on the heading.
Adding The Code Snippet
If you are using our free Divi child theme, place this snippet into the style.css file. Otherwise, place this in your Divi>Theme Options>Custom CSS code box. If you need help, check out our complete guide on Where To Add Custom Code In Divi.
/*align the heading and lines*/
.pa-heading-line-right h2 {
display: flex;
width: 100%;
justify-content: center;
align-items: center;
text-align: center;
}
/*add and adjust the lines*/
.pa-heading-line-right h2:after {
content: '';
border-top: 2px solid;
margin: 0 20px 0 0;
flex: 1 0 20px;
color: #666666;
}
/*add spacing between heading and line*/
.pa-heading-line-right h2:after {
margin: 0 0 0 20px;
}
How To Customize The CSS Heading Lines
There are several ways you can use and customize these snippets to better fit your website. For example, you can change the color, thickness, and width of the lines. We cover these scenarios much better on video, so be sure to watch the video embedded above.
Change the Line Color
You can can easily change the color of the line by replacing the hex color “#666666” with anything you want.
Change The Line Thickness
You can can easily change the thickness of the line by replacing the border-top “2px” value with something else, like “1px,” or maybe “20px.”
You could even make the thickness the same value as the font size!
I hope you have enjoyed learning How To Add Decorative Horizontal Lines Beside Heading Text 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.
Hi Kamil,
That error sounds like you are just adding it to the wrong location, like the module. Make sure to add it where it says in the tutorial and let me know how it goes!
Sorry, you can ignore me! I’m using your Divi Responsive helper plugin and had the responsive tabs open set to default.
I hadn’t realised with this option you’d need to enter the text for each view (so the content was missing in Tablet and Mobile). All working well, thanks!
Ramin Mohebian
on May 8, 2021 at 2:48 pm
I have been trying to use this snippet code with built-in icons in DIVI Blurbs. Running into issues where the lines are not showing up as i cannot identify the Icon in the CSS code.
So then i tried using the Fontawesome icons and again i cannot seem to make it work. Can anyone direct me to what i should be looking at?
I am assuming that you want to place the horizontal lines to the blurb module title. We need to use different selectors for the blurb modules to achieve that. So to add the lines please go to the Divi > Theme Options > Custom CSS Panel and place the code given below:
/*center the heading and lines*/
This code will place two horizontal lines around the title of the Blurb Module. To use any other design you can copy the properties from the above guide and use it with the selectors that I gave.
Please update the article, for example on a single page, if I want to apply horizontal line to all h2 tags. Then, horizontal line width changes with respect to the width of the text. I have updated the code in order to keep the horizontal width the same whether the text is short or long.
Thank you for this little snippet! It doesn’t work for where I want to add it though… any help would be appreciated 🙂
I’d like to add this to my all posts template only so that post content for H3’s will appear with lines (ideally a line on top of the H3)… but if I put it in the main element code box under the advanced tab for the post content module I get an “error expected rbrace”… and adding it to the styles file doesn’t do anything either. How do I target it? The main element box targets .et_pb_post_content_0.
Also, is it possible to have a short line in any colour above the H3 instead of at the side?
The Main Element box is for the snippet that is without the selectors or the snippet that contains only CSS properties and that’s why you are getting the error. Please go inside the theme builder template, then click on the settings icon at the bottom which will take you to page settings, and then go to Advanced tab > Custom CSS and place the snippet there.
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}
Nice!! You can use a fontawesome icon too!
Thanks
Nifty!
Indeed 🙂
brilliant! nice little snippet there
Thanks, glad you like it!
Hey on my website it doesn’t work. When I add the code to the I have error expected rbrace. Can you help me?
Hi Kamil,
That error sounds like you are just adding it to the wrong location, like the module. Make sure to add it where it says in the tutorial and let me know how it goes!
Hi ! Thanks for the guide.
Is it possible to have a left side line ?
Edit : Ok we just need to replace after by before !
Sounds like you got it, great!
Thanks for this. Works great on Desktop. However, when I’ve checked on my iPad/iPhone the headings aren’t appearing at all?
I’m not sure Andy, sounds weird and unrelated. I can’t test it, don’t own anything Apple as they have so many problems with their browsers.
Sorry, you can ignore me! I’m using your Divi Responsive helper plugin and had the responsive tabs open set to default.
I hadn’t realised with this option you’d need to enter the text for each view (so the content was missing in Tablet and Mobile). All working well, thanks!
I have been trying to use this snippet code with built-in icons in DIVI Blurbs. Running into issues where the lines are not showing up as i cannot identify the Icon in the CSS code.
So then i tried using the Fontawesome icons and again i cannot seem to make it work. Can anyone direct me to what i should be looking at?
I am assuming that you want to place the horizontal lines to the blurb module title. We need to use different selectors for the blurb modules to achieve that. So to add the lines please go to the Divi > Theme Options > Custom CSS Panel and place the code given below:
/*center the heading and lines*/
.pa-heading-line-both .et_pb_module_header {
display: flex;
width: 100%;
justify-content: center;
align-items: center;
text-align: center;
}
/*add and adjust the lines*/
.pa-heading-line-both .et_pb_module_header:before,
.pa-heading-line-both .et_pb_module_header:after {
content: '';
border-top: 2px solid;
margin: 0 20px 0 0;
flex: 1 0 20px;
color: #666666;
}
/*add spacing between heading and lines*/
.pa-heading-line-both .et_pb_module_header:after {
margin: 0 0 0 20px;
}
This code will place two horizontal lines around the title of the Blurb Module. To use any other design you can copy the properties from the above guide and use it with the selectors that I gave.
Let us know if that helps. 🙂
Please update the article, for example on a single page, if I want to apply horizontal line to all h2 tags. Then, horizontal line width changes with respect to the width of the text. I have updated the code in order to keep the horizontal width the same whether the text is short or long.
/*align the heading and lines*/
.pa-heading-line-right h2 {
display: flex;
width: 100%;
justify-content: flex-start;
align-items: center;
text-align: center;
}
/*add and adjust the lines*/
.pa-heading-line-right h2:after {
content: ”;
border-top: 2px solid;
margin: 0 20px 0 0;
flex: 1 0 20px;
color: #666666;
max-width:30%
}
/*add spacing between heading and line*/
.pa-heading-line-right h2:after {
margin: 0 0 0 20px;
}
Hi Naveed,
Thank you for your feedback. I saw that the max-width of 30% did the trick there. We will surely look into this and rectify the issue. 🙂
Hi,
Thank you for this little snippet! It doesn’t work for where I want to add it though… any help would be appreciated 🙂
I’d like to add this to my all posts template only so that post content for H3’s will appear with lines (ideally a line on top of the H3)… but if I put it in the main element code box under the advanced tab for the post content module I get an “error expected rbrace”… and adding it to the styles file doesn’t do anything either. How do I target it? The main element box targets .et_pb_post_content_0.
Also, is it possible to have a short line in any colour above the H3 instead of at the side?
Cheers!
Hi there,
The Main Element box is for the snippet that is without the selectors or the snippet that contains only CSS properties and that’s why you are getting the error. Please go inside the theme builder template, then click on the settings icon at the bottom which will take you to page settings, and then go to Advanced tab > Custom CSS and place the snippet there.