Category: CSS Tutorial
Customize the Default WordPress Footer Layout with CSS Grid
The default footer area in WordPress can feel a bit cumbersome. Even if you're using a theme with footer layout options like Divi has that still won't give you full control (and better responsiveness) like CSS Grid can, and you can't add rows if you need...
Use the Divi Builder Inside WooCommerce Single Product + Free Layout
If you've ever wanted to use the Divi builder on your WooCommerce single product pages without a plugin and without touching child files this will help you get started, I'm only using CSS to accomplish this. Here are a few use case scenarios where I could...
Free Divi Blog Grid Look + Category, Tag, Search Results
This is sort of half free layout and half CSS snippet, it's a blog grid look I came up with when experimenting for a future Divi child theme. Who knows when that will be done though lol, so figured I'd just share this look now. It's simple and clean,...
Custom Image Hover Boxes Using the Divi Code Module
I was cleaning up one of my demo installs and came across this hover box I made one of the many times I was playing around with code. It's a simple hover effect with a button, a grid of these could link to different shop category pages (like the example...
Custom Side / Vertical Tabs Section Layout for Divi
I had this side/vertical tabs section I made for a Divi project and thought it might be useful for others. Would be great to feature different services or small chunks of info, I've used wedding photography session types as an example. Some basic CSS...
Change “Submit a Comment” Title and Add Extra Copy
There was a question I answered in one of the many Divi FB groups I'm in asking if it was possible to change the "Submit a Comment" text at the bottom of blog posts, and to also add a bit of extra text underneath it. Figured this would be a good snippet...
Reorder WooCommerce Product Title and Price
If you've ever wanted to move your product title (or price) above your product images this CSS will help you do that. It affects the shop module, default shop page, and related products. css code The CSS can go in your child stylesheet OR appearance >...
Customize the WooCommerce Shop Grid (Look 2)
This tutorial provides some CSS code for customizing your WooCommerce shop/product grid. The first look is here and I just wanted to add another option. If you're using my code for the single product pages this look would tie in well with the bordered...
Customize WooCommerce Cart, Checkout, and Account Pages
This tutorial provides some CSS code for changing your WooCommerce cart, checkout, and account pages to match the rest of your site and customize it a bit. I've added comments to the code to help guide what changes what but you might find it a bit...
Make WooCommerce Product Images Fullwidth
This is a quick CSS snippet that will make the top part of your WooCommerce single product pages into one column instead of two, making the images and pricing info fullwidth. If you want more focus on your images than the two-column layout allows this may...
Divi + WooCommerce Single Product Page CSS Styling
If you'd like to style your WooCommerce single product pages on your Divi store to match the rest of your site these code snippets will help get you started. Use the provided CSS and tweak to your needs to achieve a look you like, all on your own! The...
Capitalize WooCommerce Headings and Buttons
With these CSS code snippets you can change the Woo headings and buttons to be capitalized — if it bugs you like it bugs me that they're not There are a couple cases where technically all the words shouldn't be capitalized (like the shipping address...
WooCommerce Shop Grid CSS Styling (Look 1)
Would you like to customize your Woo shop grid but you're just not sure how to get the code to do it? If you understand some basic CSS (the basics are easy, I promise!) you can use my code snippets to customize your Divi / WooCommerce shop grid to change...
Remove Divi Hover Arrows from All WooCommerce Buttons
Do you use the Divi hover icons (like the default arrows) on your buttons throughout your Divi online store but find that on some of the WooCommerce pages those icons don't always look like they should when you hover? Examples: Also notice how the 'update...
Custom Pricing Tables Using Images and Font Awesome 5
I recently had to make some custom pricing tables for a project and thought something similar might be useful for others, so I've created a pricing tables section for you to download and customize to match your site. I've added images and Font Awesome...
Gravity Forms CSS Styling – Misc. Looks
I love creating different styles for Gravity Forms using CSS so I've curated a few in this post so you can quickly access the code and view the demos. When I have new ones I'll add them to this post!For all of these the CSS can go in your Divi theme...
Caldera Forms CSS Styling – Misc. Looks
I love creating different styles for Caldera Forms using CSS so I've curated a few in this post so you can quickly access the code and view the demos. When I have new ones I'll add them to this post, hopefully they'll come in handy Even though I work in...
Make Your Entire Divi Site Wider on Mobile
This is from my #diviquicktip CSS snippet series in which I post different quick CSS fixes on my Facebook page whenever I come across some of the most common pesky Divi quirks. Example: default 80% width Problem: Have you ever wanted your whole site to be...
Make Your Divi Slider Wider on Mobile
This is from my #diviquicktip CSS snippet series in which I post different quick CSS fixes on my Facebook page whenever I come across some of the most common pesky Divi quirks. Example: before Problem: Have you noticed on mobile your slider looks too...
Stop Button Text From Showing Up Divi Blue
This is from my #diviquicktip CSS snippet series in which I post different quick CSS fixes on my Facebook page whenever I come across some of the most common pesky Divi quirks. Example: before Problem: Have you ever noticed that even when you have the...
Add Text to Monarch Popup
This is from my #diviquicktip CSS snippet series in which I post different quick CSS fixes on my Facebook page whenever I come across some of the most common pesky Divi quirks. Example: Problem: Are you a Monarch user like me? I love it and it's my go-to...
Hide Elements That Stretch Your Website
This is from my #diviquicktip CSS snippet series in which I post different quick CSS fixes on my Facebook page whenever I come across some of the most common pesky Divi quirks. Example: Problem: Do you ever have elements in your design that "stretch" your...
Center Align Divi Fullwidth Header Buttons on Mobile
This is from my #diviquicktip CSS snippet series in which I post different quick CSS fixes on my Facebook page whenever I come across some of the most common pesky Divi quirks. Example: Problem: When using the fullwidth header module the second button has...
Coming Soon Layout – Background Hero Slider with Bloom
I had a visitor request that I tweak a previous layout I posted to have a slider in the background, so I made it, and then thought it might work well as a coming soon page. You can invite people to sign up and then you can email them when you launch....
Bottom of Page Sticky Bloom Optin (incl. Mobile On-Click Version)
This Divi freebie makes a skinny Bloom signup that sticks to the bottom of your site. This feature can be great for conversions and it's not terribly intrusive or too distracting (depending on your colors I guess). This includes the 2 Bloom optins (desktop and mobile)...
Blog Grid with Categorized Colors (Background or Top Border)
This tutorial came about because of a question that came up in a Facebook group that I'm in. I only know how to do this because of the help of my good friend and super-awesome web developer Terry Hale of Mizagorn, Ink. He pointed me in the right...
Side By Side Customizable HTML Buttons
Divi's button modules are great, but sometimes you want them side by side in the same column, or maybe you just need a whole row of several buttons. The specialty section can be a solution in some cases but I prefer just using some simple HTML and CSS to...
Fullscreen Hero & Sticky Bottom Row with Bloom
This Divi section layout is for the header (aka hero) area. I love the look of it, I think it's pretty snazzy and my clients seem to love it. It's fullscreen and the bottom row is sticky on the appropriate device sizes. A matching Bloom optin is included....
Social Media Follow on Left Sidebar (like Monarch)
Have you ever wanted your social media links on the left side of your site like Monarch, not to share but just to link out? In this quick tut there's a little snippet to put the social media follow module fixed to the left side of your site (instead of...
Use a Blurb as a Fixed Click-To-Call Button for Mobile
A question came up in one of the Facebook groups I'm in (please join if you're not a member!). Someone was asking for suggestions for a plugin to put a click-to-call button on the lower right corner of their site, but only when viewing on mobile. This...
Using Bloom for an Image or Text Pop Up with a CTA Button
I posted about using Elegant Theme's Bloom plugin to make a pop up with no signup in the Facebook groups and a few people asked how to do it. I realized instead of my answer getting lost in the weeds I should make a quick blog post that can be bookmarked....