We are making a nice little series of tutorials related to the Divi Builder UI. This one is perhaps the most useful so far, as it does something simple and yet can improve one of the most common processes. Any time I’m editing text in one of the Divi Builder module’s text areas, I have to keep scrolling up and down just to make a word bold or add a link or make a blockquote. It is quite annoying! So in this tutorial I am going to show you how to solve that little frustration and make the Divi text style settings panel sticky when you scroll. I hope you enjoy this as much as I do!
Join subscribers on our YouTube channel and enjoy other Divi video tutorials!
This solution will apply to any module that has the text content area, such as the Text module, Blurb module, Person module, Testimonial module, etc. This works when the “Visual” tab is selected, and is great when styling text, adding links, making blockquotes, etc.
I have a very simple CSS snippet that targets just the right items within the Divi Builder and makes it sticky when you scroll. It took me quite a long time to figure out which CSS selector to use, so I hope you appreciate it 🙂
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.
/*make Divi Builder text style settings sticky on scroll*/
.mce-panel .mce-stack-layout-item.mce-first {
position: sticky!important;
top: -60px;
}
Be sure to watch the video to see the sticky effect demonstrated in a variety of different modules. If you think this is worth using on your websites, please let me know in the comments!
I hope you have enjoyed learning How To Make The Text Style Options Sticky Within The Divi Builder Module Text Areas. 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 for more stuff like this.
Each month we send out a roundup email newsletter with the latest tutorials, product updates, helpful resources, and any other industry or personal news. Occassionally 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.
OUR ONCE A YEAR SALE IS HAPPENING NOW!!!
25% OFF all Divi Plugins, Courses, and Child Themes!
Good Job! This worked for me for a short time and for some reason it is not sticking anymore, it was back to how it was. Not sure if I did something different.
I’ve found it works if I enter it in Customise -> Additional css, but if I add it to my child theme css it doesn’t! No idea why (and no caching plugin in use)
Directly if you place the CSS snippet in the Child Theme, it will not work. You need to place the CSS in the head and to do that please go to the functions.php of your Child Theme and place the code given below:
add_action(‘wp_head’, ‘pa_sticky_panel’);
function pa_sticky_panel() {
echo ‘ /*Place the CSS given in this guide above here between the style tags*/ ‘;
}
This will solve the issue. Let us know if that helps. 🙂
Okay, not sure what I am doing wrong but I placed in custom CSS (Appearance – Customize), I tried it in Additional CSS under Divi Theme Options, and I tried it in style.css and none of these worked in either Divi or Extra. (I am NOT using a child theme on the Divi site in question, so that is not it, either). I made sure I turned of any plugins that may affect this (Tiny MCE, classic editor, etc.) still a no-go. But I’m guessing it’s a plugin conflict based on it working for some and not for others
As I mentioned in my above comment, you need to place a PHP snippet inside the functions.php file of your child theme to get it to work. If you don’t want to use the child theme then you can place the code in the functions.php file of your main theme but then you have to place it again and again after every update which is not recommended.
I just updated to DiviVersion: 4.9.7 and am unable to get this to work? Is there any issues with the new versions of Divi? I feel certain that I have your awesome code in the correct place. Any other suggestions?
I have placed your code in the Divi>Theme Options>Custom CSS code box on three different sites that are not using a child’s theme and have been unsuccessful at getting it to work on all three sites. Any suggestions?
Each month we send out a roundup email newsletter with the latest tutorials, product updates, helpful resources, and any other industry or personal news. Occassionally 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 :)
Divi Tutorials On YouTube
Our videos have views! Join subscribers and enjoy over video tutorials!
I’m pleased to announce our next update to version 2.2 of our Divi Events Calendar plugin with a full new search and filter module!
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}
A gem of a divihack. Thank you for this practical snipplet!
You’re welcome! I certainly enjoy the simple convenience it offers!
Thanks for this! Has been frustrating me for a long time. Never thought to look into a CSS solution for it. *smacks forehead*
You’re welcome Patrick! It was a little hard to find but it is working great!
This is definitely something Elegant Themes should add natively to Divi. Very useful.
I’m glad you like it!
Good Job! This worked for me for a short time and for some reason it is not sticking anymore, it was back to how it was. Not sure if I did something different.
same here
Hi Francis,
Try placing the CSS in the head and to do that please go to the functions.php of your Child Theme and place the code given below:
add_action(‘wp_head’, ‘pa_sticky_panel’);
function pa_sticky_panel() {
echo ‘ /*Place the CSS given in this guide above here between the style tags*/ ‘;
}
This will solve the issue. Let us know if that helps.
Been waiting for this for a long time. Thank you very much!
Yes this one is so helpful, you are very welcome!
This doesn’t seem to be working
Hi David,
It definitely does work. Please try again.
I’ve found it works if I enter it in Customise -> Additional css, but if I add it to my child theme css it doesn’t! No idea why (and no caching plugin in use)
Directly if you place the CSS snippet in the Child Theme, it will not work. You need to place the CSS in the head and to do that please go to the functions.php of your Child Theme and place the code given below:
add_action(‘wp_head’, ‘pa_sticky_panel’);
function pa_sticky_panel() {
echo ‘ /*Place the CSS given in this guide above here between the style tags*/ ‘;
}
This will solve the issue. Let us know if that helps. 🙂
Okay, not sure what I am doing wrong but I placed in custom CSS (Appearance – Customize), I tried it in Additional CSS under Divi Theme Options, and I tried it in style.css and none of these worked in either Divi or Extra. (I am NOT using a child theme on the Divi site in question, so that is not it, either). I made sure I turned of any plugins that may affect this (Tiny MCE, classic editor, etc.) still a no-go. But I’m guessing it’s a plugin conflict based on it working for some and not for others
As I mentioned in my above comment, you need to place a PHP snippet inside the functions.php file of your child theme to get it to work. If you don’t want to use the child theme then you can place the code in the functions.php file of your main theme but then you have to place it again and again after every update which is not recommended.
This is the PHP snippet: https://www.codepile.net/pile/RV2R67Vg
Place the code and let me know if that helps. 🙂
I just updated to DiviVersion: 4.9.7 and am unable to get this to work? Is there any issues with the new versions of Divi? I feel certain that I have your awesome code in the correct place. Any other suggestions?
I have commented on the solution of this issue above, please follow the steps present in the comment, and your issue will get resolved. 🙂
Let us know how it goes.
I have placed your code in the Divi>Theme Options>Custom CSS code box on three different sites that are not using a child’s theme and have been unsuccessful at getting it to work on all three sites. Any suggestions?
I’m not sure, Nicole. It’s weird, it works for me. Did you try in the page CSS just to confirm?