HomeНаука и техникаRelated VideosMore From: Divi Dude

Divi Tutorial: Add Buttons to Text Fields Inside Modules

123 ratings | 12960 views
My website: http://www.dividude.com. In this video, I show you how to use inspect to identify Divi's button class id and then to use that button class id to add a button to a module inside its text field. Afterwards, I demonstrate a quick way to center the button and add a custom color to it. If you've never used Divi, you can use my affiliate link to get it here: http://www.elegantthemes.com/affiliates/idevaffiliate.php?id=27404 If you like the video, please consider supporting me by using this link the next time you purchase something from Amazon. (thanks, you're awesome!) https://amzn.to/2JiKjCJ More videos: Divi 3: Using Visual Editor to Build Page - Video 01 https://youtu.be/QQTnMRyQdhc Divi 3: Theme Options and Customizer - Video 02 https://youtu.be/XAdUoWnlfZM Divi 3: Customize Footer - Video 03 https://youtu.be/F-q266zIMa0 Divi 3: Add Gradient to Module - Video 04 https://youtu.be/WP93BbrUBkQ Divi 3: Add Child Theme - Video 05 https://youtu.be/Vpmgx1ilEGQ Divi 3: Add Border Between Sections - Video 06 https://youtu.be/XXP3gdmLKM4 Divi Dropcap Shortcode Tutorial - Make Your Blog Pop https://www.youtube.com/watch?v=6ZT-zT7Q4Cs Divi Tutorial: Import / Export Site Including Theme Options and Customizer (free plugin) https://youtu.be/mMNHOl36-bs Divi Tooltip Shortcode Tutorial https://youtu.be/ylJnzSwN4Vs
Html code for embedding videos on your blog
Text Comments (38)
Kieran Kelly (2 months ago)
Thanks Divi Dude.
James Hayward (3 months ago)
great video
James Hayward (3 months ago)
@Divi Dude There was one thing I noticed when I created the button. The mouse on hover changed from Arrow to cursor around the text area. On the side /edge of button the arrow remains. Is this some CSS styling trick that needs to be added to fix.
Divi Dude (3 months ago)
Thank you.
Aniket Joshi (4 months ago)
Wow literally cool
Mark Shrigley (1 year ago)
This helped me a lot. Very cool video! Thx Divi Dude!
Sami Burnette (1 year ago)
I just watched this tutorial. Thank you so much! You saved me so much time. You are awesome!
Jordan Azizian (1 year ago)
Where's part 2 you slacker?!?!?!?!
Cecille Thompson (1 year ago)
Thank you...this was very helpful! It seems to have negated the "Equalize Column Heights" setting in the row that contain the two text boxes I added the buttons to. Any suggestions?
cody w (1 year ago)
Sooooo helpful! Thanks for breaking it down. from the use of the inspector to how to center, just well done.
Sondra Barker (2 years ago)
I'm also having the same problem where the styling goes away on all the other pages that don't have the buttons.
Sondra Barker (2 years ago)
This was so helpful. When I copy and paste the code the button works great, however the size has changed. Do you know how to modify the size of the button?
Tracy Gibson (2 years ago)
Thanks for this!!! So helpful!
Divi Dude (2 years ago)
Glad it helped!
This was really really helpful. Thanks.
Divi Dude (2 years ago)
You're welcome. Glad you found it helpful.
Russ Tanner (2 years ago)
Great tutorial. The problem I'm having is that I create a button, I copy the code in Inspect, paste it into the text module, save it, and then delete the original button, and all of the styling goes away on the button in the text field. It seems like the button in the text field is dependent on the actual button still existing. Does that make sense?
Quantization (1 year ago)
The workaround I used for this was to make a custom CSS class for the "fake" one or extra button if you will. I called it .hideButt, and then I put display none in the CSS for that class to remove it. See my example; https://i.imgur.com/sPIKke7.png
Peter Blumtritt (1 year ago)
Ok but how do I stop this "extra button" from appearing in the front end?
Mariana Marinescu (1 year ago)
To stop the Button styling (fonts & colours) from getting deleted – just follow the video tutorial EXCEPT THAT you Do Not delete the Button Module in the back end of Divi. It's as simple as that. You can make your button customisations in the Button Module and the style will be seen on the font end whilst also appearing inside the module you choose, as long as the Button Module isn't deleted from the back end.
Divi Dude (2 years ago)
I have not had a chance to make the video. I'll try and do one this weekend and I will post a link here for you. Thanks.
NJD People Consulting (2 years ago)
Hi, I am having the exact same issue! Did you manage to make another video to explain? In the mean time i think I have got around it by just leaving the button at the bottom of the page but without a url link or a title, so it doesn't appear on the page but still impacts on the other buttons. Hopefully that wont cause too many problems while I try and understand the explanation given to Debbie below!
Peter Lewis (2 years ago)
This was extremely helpful, thank you!
Divi Dude (2 years ago)
You're welcome. Glad it helped.
Tanya Kucey (2 years ago)
can i do this for a text widget?
Tanya Kucey (2 years ago)
Divi Dude thanks. will give it a go
Divi Dude (2 years ago)
You should be able to add the html code -- <a class="et_pb_button et_pb_button_0 et_pb_module et_pb_bg_layout_light" href="#">Button</a> -- to a text module and get the same results.
Debbie S (2 years ago)
DiviDude! Thank you so much for this! I had a little problem, though - when I deleted the original button from the page, the button I pasted in the text module's appearance changed. When I put it back on the page it goes back to the original appearance. Any way around this?
Divi Dude (2 years ago)
Glad it worked. I'll be doing a part 2 to this video soon inspired by your issue and my lack of foresight. :)
Debbie S (2 years ago)
That worked! I also had to go into the button module's CSS settings tab and add the code I had put there - like height, width, font and top padding for text. Thank you SO MUCH! Divi Dude Rocks!
Divi Dude (2 years ago)
Hi Debbie. Sleep will wait. The tutorial I made was just for the basics and it didn't dawn on me someone might customize the button with the advanced settings tab. That's what you did, right?  In that case, you need to add the custom CSS that you added. When you right click on the button module button (where you made the custom settings) and Inspect, look in the Styles panel. You will see code under the .et_pb_button or .et_pb_button_X that has a border-radius. You need to cut and paste that code into your custom stylesheet or Theme Option panel (wherever your custom CSS resides).  It will look something like this:  .et_pb_button_0 {     border-radius: 15px;     letter-spacing: 0px;     font-size: 20px; } Of course, the numbers and attributes will be different depending on your settings. If each button needs to have different settings, then make sure the _0 part of the button is its own number. You change it in the text module where you pasted the button code, and then add it to the custom CSS styles. I know this is a little confusing. If this doesn't help, then go to http://www.dividude.com and shoot me an email and I'll try and help and then post the solution here in case someone else has an issue.
Debbie S (2 years ago)
Yes, please get some sleep! I posted screenshots of what happens. Hopefully that will help you understand. https://postimg.org/gallery/2ruif8rsm/
Divi Dude (2 years ago)
Hi Debbie. I'm sorry, I'm not following. Maybe it's too late for me and my brain isn't working. Are you saying you followed my steps, and when you deleted the button module it changed the appearance of the button you pasted in the text module? (I'm not sure what the page you are referring to is). Can you restate the issue and maybe I can make better sense of it after a good night's sleep? Thanks.
Desde20 (2 years ago)
Great! Just what I searched for so badly :D
Divi Dude (2 years ago)
Glad it helped. :)
Maxsch (2 years ago)
Hey! Thanks for your tutorial, but I need some more help :/ I'm using the Divi 3.0 Page Builder and would like to position my buttons so I can move them inside the element.. do you know how do to that? So I have 2 Buttons which should be more together .. but theres no custom distance I can put in numbers.. Thanks again, Max
Divi Dude (2 years ago)
Thanks for the feedback. I'm not sure if this is exactly what you're asking, but have you tried adjusting the margin in the custom CSS panel of the button module? Say you have two buttons side by side, then in the left hand button module go to the Custom CSS panel and in the Main Element section put something like margin-right:-50px; (adjust to your liking). Also be sure to adjust the alignment of the buttons (left, center, right).  Sorry, if I misunderstood your question.

Would you like to comment?

Join YouTube for a free account, or sign in if you are already a member.