Code by Day | Explore By Weekend

Contact Form

How To Highlight The Focus Input Field In The Divi Contact Form

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...

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 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.

Pin It on Pinterest

0

Your Cart