The next snippet in our Divi Contact Form series is a micro-interaction for users as they enter information into the contact form fields. This can help keep the user alert and know which filed they are typing into. Take note that this snippet adds a border color on...
Contact Form
How To Left Align the Submit Button On The Divi Contact Form
Another thing we can do in our Divi Code Snippet series for the contact form is to align the button to the left. This is a preference that some of you like, and there’s no right or wrong that I can see. So if you want to align that button to the left, copy and...
How To Make Divi Contact Form Checkboxes and Radio Buttons Inline Horizontal
One thing that many people ask is how to make the Divi Contact Form checkboxes and radio buttons inline horizontal instead of stacked vertical. I agree that it is rather ugly to have a list of options and a big white space to the right, so this solution solves that. I...
How To Move Labels Above Input Fields In The Divi Contact Form
Most contact forms have the labels, such as “name,” “email,” and “message,” above the input fields. In Divi, there are actually two labels, but the ones above the fields are hidden by default. This CSS snippet turns on the labels above the Divi Contact Form Module...
How To Add A Scrollbar To The Divi Contact Form
The height of the Divi Contact Form Module message box is pretty small by default, but we changed that in another tutorial here in the Divi Code Snippet Club. I wanted to share with you another really cool way to increase the user experience of the contact form when...
How To Increase The Divi Contact Form Message Box Height
The height of the Divi Contact Form Module message box is pretty small by default, so I wanted to share with you a way to increase that. I first tried to add a min-height to the module's advanced tab settings, but of course, that doesn't work because we need to use...
WooCommerce
Style the WooCommerce Quantity Buttons In Divi
Here's what you can use. It makes the number black, adds a light grey border and removes the background colour. .woocommerce .quantity input.qty, .woocommerce-page .quantity input.qty, .woocommerce #content .quantity input.qty, .woocommerce-page #content .quantity...
Images
No Results Found
The page you requested could not be found. Try refining your search, or use the navigation above to locate the post.
Responsive
Show The Divi Secondary Menu on Mobile
By default, the secondary menu in Divi only shows up on desktop and not on mobile. This can be frustrating, especially if you want to show your menu items like email, phone, and social icons on mobile in Divi. This very short and simple CSS snippet will allow you to...
Blog
How To Change The Divi Blog “Read More” Text
By default, the Divi Blog Module has the option to enable a "read more" button on the blog feed. Depending on the situation or preference, you may need this to say something else, such as "Let's Go!" or "Continue Reading." To do this, we need to add a snippet of jQery...
Make Entire Divi Blog Module Items Clickable
By default, the Divi Blog Module makes the featured image, title, and read more link clickable. But what if you want the whole thing to be a link? This solution enables you to target each blog article in the feed and adds a pseudo class to it which is full width and...
Gallery
No Results Found
The page you requested could not be found. Try refining your search, or use the navigation above to locate the post.