If you use the theme divide and its layout designer you will have already verified that plugins that incorporate buttons of some kind, such as contact forms and similar, these do not look anything like Divi buttonsand in reality they tend to be quite basic buttons in terms of design, almost always very ugly.
But, everything has a solution in this life, so If you want all the buttons of any plugin you install on your website to look like those of Divi, there is a trick that always, always, always works.
The only thing you have to do is add this code to the Divi options integration section, in the box related to the <body>:
<!-- Boton no Divi con aspecto de boton divi -->
<script>
jQuery(document).ready(function($){
$('.CAMBIAR-ESTA-CLASE-CSS').addClass("et_pb_button");
});
</script>
//Tienes que reemplazar .CAMBIAR-ESTA-CLASE-CSS con una cadena CSS del boton que quieras sustituir
As I indicate in the code, the script will not work as is, you have to change the part of the CSS class for the one that uses the button of the plugin that we want to improve their appearance.
Here are some examples of what the code would look like with the most popular contact form plugins:
Contact form 7
<!--Contact Form 7-->
<script>
jQuery(document).ready(function($){
$('.wpcf7-submit').addClass("et_pb_button");
});
</script>
Forms of gravity
<!-- Gravity Forms -->
<script>
jQuery(document).ready(function($){
$('.gform_button').addClass("et_pb_button");
});
</script>
trainer
<!-- Forminator -->
<script>
jQuery(document).ready(function($){
$('.forminator-button').addClass("et_pb_button");
});
</script>
Kettle shapes
<!-- Caldera Forms -->
<script>
jQuery(document).ready(function($){
$('.btn-default').addClass("et_pb_button");
});
</script>
WP Forms
<!-- WP Forms -->
<script>
jQuery(document).ready(function($){
$('.wpforms-submit').addClass("et_pb_button");
});
</script>
formidable shapes
<!-- Formidable Forms -->
<script>
jQuery(document).ready(function($){
$('.frm_button_submit').addClass("et_pb_button");
});
</script>
I don’t know what CSS to put in the code, the one from the plugin I use is not listed
If the plugin whose button you want to replace does not appear in the previous list (quite scarce, it is only an example) you can identify it using your browser’s inspector, which is accessed by right-clicking on the page to be inspected.
Once the browser inspector is open, select the arrow tool at the top and click on the exact element you want to display its CSS code for.
Sometimes you will have doubts about which CSS class you should use, but it is just a matter of trying two or three at most.
Once the code is applied, which is the important thing, the button will look much better, Divi style, and in line with the rest of the buttons on your website.
Did you like this article? You can’t imagine what you’re missing a youtube!
