10 Powerful Divi CSS Snippets for Stunning Websites

It’s no secret that we LOVE Divi here at Cobalt Graphics. Out of the box, it can handle and do so much. Saving us an immense amount of time. However, we built custom websites, and there are specific layouts that we need to achieve the Visual Builder simply cannot handle on its own. Thats why we have created our own little library of Divi CSS snippets that help us cross the finish line and wow our clients.

Let’s get creative!

What Are Divi CSS Snippets and Why Should You Use Them?

Divi CSS snippets are small pieces of custom CSS code that you can add to your Divi-themed WordPress website to enhance its design and functionality. These snippets are incredibly useful for both beginners and experienced developers alike. Here’s why you should consider using them:

• Time-saving: Instead of writing complex CSS from scratch, you can use pre-written snippets to quickly implement design changes.
• Design flexibility: Snippets allow you to go beyond Divi’s built-in customization options, giving you more control over your site’s appearance.
• Consistency: By reusing snippets across your site, you can maintain a consistent look and feel.
• Learning tool: For those new to CSS, snippets provide a great way to learn and understand how CSS works with Divi.

Divi already comes with powerful built-in CSS capabilities, but snippets can take your design to the next level. You can easily add custom CSS through Divi’s Theme Options or directly in the Divi Builder for specific elements.

Essential Tools for Working with Divi CSS Snippets

To effectively work with CSS snippets in Divi, you’ll need a few key tools:

• Code editors: Visual Studio Code, Sublime Text, or Atom are excellent choices for editing CSS files.
• Browser developer tools: Chrome DevTools or Firefox Developer Tools are essential for inspecting and testing your CSS changes in real-time.
• Divi’s Custom CSS options: Utilize the built-in Custom CSS fields in Divi’s Theme Options and Divi Builder for easy implementation.
• CSS validation tools: W3C CSS Validator or CSS Lint can help you catch errors and ensure your CSS is valid.

These tools will make it easier to implement, test, and troubleshoot your CSS snippets.

Snippet #1: Create Eye-Catching Hover Effects

Hover effects can add interactivity and visual interest to your Divi website. Here’s a simple snippet to create a zoom effect on images:

.et_pb_image_wrap img {
  transition: transform 0.3s ease-in-out;
}

.et_pb_image_wrap:hover img {
  transform: scale(1.1);
}

To use this snippet:

1. Add it to your Divi Theme Options > Custom CSS
2. Adjust the scale value to control the zoom intensity
3. Modify the transition property to change the animation speed

This effect works great for product images, team member photos, or portfolio items. Keep in mind that excessive use of hover effects can impact performance, so use them judiciously.

Snippet #2: Responsive Typography Magic

Creating responsive typography ensures your text looks great on all devices. Here’s a snippet for fluid typography:

body {
  font-size: calc(14px + (18 - 14) * ((100vw - 300px) / (1600 - 300)));
}

@media screen and (max-width: 300px) {
  body {
    font-size: 14px;
  }
}

@media screen and (min-width: 1600px) {
  body {
    font-size: 18px;
  }
}

This snippet uses viewport units (vw) to scale the font size based on the screen width. It sets a minimum font size of 14px and a maximum of 18px. You can adjust these values to suit your design needs.

To test your responsive typography, use browser developer tools to simulate different screen sizes and ensure your text remains readable across devices.

Snippet #3: Custom Sticky Header Styles

A sticky header can improve navigation on long pages. Here’s a snippet to create a sticky header in Divi:

.et_fixed_nav #main-header {
  position: fixed;
  top: 0;
  width: 100%;
  transition: all 0.4s ease-in-out;
}

.et_fixed_nav #main-header.sticky {
  background-color: rgba(255, 255, 255, 0.9);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

To implement this:

1. Add the CSS to your Divi Theme Options > Custom CSS
2. Create a simple JavaScript function to add the ‘sticky’ class on scroll

jQuery(window).scroll(function() {
  if (jQuery(this).scrollTop() > 100) {
    jQuery('#main-header').addClass('sticky');
  } else {
    jQuery('#main-header').removeClass('sticky');
  }
});

3. Add this JavaScript to Divi > Theme Options > Integration > Add code to the < head > of your blog

Note that sticky headers may not work consistently across all browsers, especially on older versions. Test thoroughly and consider providing fallback styles for better compatibility.

Snippet #4: Stylish Social Media Icons

Customize Divi’s social media icons with this snippet:

.et_pb_social_media_follow li a.icon {
  border-radius: 50%;
  transition: all 0.3s ease;
}

.et_pb_social_media_follow li a.icon:hover {
  background-color: #333;
  color: #fff;
}

This snippet:

• Makes icons circular
• Adds a smooth hover transition
• Changes icon color and background on hover

To create a floating social media bar:

.floating-social {
  position: fixed;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 9999;
}

.floating-social .et_pb_social_media_follow li {
  display: block;
  margin-bottom: 10px;
}

Remember to consider accessibility when styling icons. Ensure there’s enough contrast between the icon and its background, and maintain a reasonable size for easy clicking on mobile devices.

Snippet #5: Stunning Full-Width Backgrounds

Create eye-catching full-width background images with this snippet:

.full-width-bg {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: 100px 0;
}

.parallax-bg {
  background-attachment: fixed;
}

To use this:

1. Add the ‘full-width-bg’ class to your Divi section
2. Set your background image in the Divi Builder
3. Add ‘parallax-bg’ class for a parallax effect

For better performance, consider these tips:

• Optimize your images before uploading
• Use appropriate image sizes for different devices
• Consider using the ‘srcset’ attribute for responsive images

For mobile-friendly backgrounds, you might want to adjust the background position or use a different image altogether:

@media (max-width: 768px) {
  .full-width-bg {
    background-image: url('mobile-optimized-image.jpg');
    background-position: top center;
  }
}

NOTE: You can use something similar by adding a background image to a Section inside of Visual Builder.

Snippet #6: Attention-Grabbing Call-to-Action Buttons

Create standout CTA buttons with this CSS:

.custom-cta-button {
  background-color: #ff6b6b;
  color: #fff;
  padding: 12px 24px;
  border-radius: 30px;
  font-weight: bold;
  text-transform: uppercase;
  transition: all 0.3s ease;
}

.custom-cta-button:hover {
  background-color: #ff8787;
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

To add a subtle animation:

@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.05); }
  100% { transform: scale(1); }
}

.custom-cta-button:hover {
  animation: pulse 1s infinite;
}

When designing CTA buttons:

• Ensure high contrast for visibility
• Make buttons large enough for easy tapping on mobile
• Use action-oriented text (e.g., “Get Started” instead of “Submit”)

Consider A/B testing different button styles, colors, and placements to optimize your conversion rates.

NOTE: You can use something similar, such as the Transform and mobile state options inside Visual Builder.

Snippet #7: Creative Image Hover Overlays

Add engaging hover effects to your images with this snippet:

.image-hover-overlay {
  position: relative;
  overflow: hidden;
}

.image-hover-overlay img {
  transition: transform 0.3s ease;
}

.image-hover-overlay .overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0,0,0,0.7);
  color: #fff;
  opacity: 0;
  transition: opacity 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.image-hover-overlay:hover img {
  transform: scale(1.1);
}

.image-hover-overlay:hover .overlay {
  opacity: 1;
}

To use this:

1. Wrap your image in a div with the class ‘image-hover-overlay’
2. Add another div inside with the class ‘overlay’ for your hover content

For accessibility:

• Ensure the overlay text has sufficient contrast
• Consider using aria-labels for screen readers
• Avoid relying solely on hover for important information

Snippet #8: Custom Footer Layouts

Create a multi-column footer with this CSS:

#main-footer .footer-widget {
  float: left;
  width: 22%;
  margin-right: 4%;
}

#main-footer .footer-widget:last-child {
  margin-right: 0;
}

@media (max-width: 980px) {
  #main-footer .footer-widget {
    width: 47%;
  }
}

@media (max-width: 479px) {
  #main-footer .footer-widget {
    width: 100%;
    margin-right: 0;
  }
}

For a sticky footer:

#main-footer {
  position: fixed;
  bottom: 0;
  width: 100%;
}

#main-content {
  padding-bottom: 300px; /* Adjust based on your footer height */
}

Remember to test your footer on various screen sizes and adjust the CSS accordingly for optimal mobile responsiveness.

Snippet #9: Elegant Form Styling

Enhance your Divi contact forms with this CSS:

.et_pb_contact_form input,
.et_pb_contact_form textarea {
  background-color: #f7f7f7;
  border: none;
  border-radius: 5px;
  padding: 15px;
}

.et_pb_contact_form input:focus,
.et_pb_contact_form textarea:focus {
  box-shadow: 0 0 5px rgba(81, 203, 238, 1);
}

.et_pb_contact_submit {
  background-color: #2ecc71;
  color: #fff;
  border: none;
  padding: 10px 20px;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.et_pb_contact_submit:hover {
  background-color: #27ae60;
}

To style form validation messages:

.et_pb_contact_form .et_pb_contact_error {
  border: 1px solid #e74c3c;
}

.et-pb-contact-message {
  color: #e74c3c;
  font-weight: bold;
}

For multi-step forms, you can use CSS to show/hide different form sections based on user interaction. This usually requires some additional JavaScript to manage the form state.

Snippet #10: Advanced Grid Layouts

Implement advanced grid layouts in Divi using CSS Grid:

.custom-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  grid-gap: 20px;
}

.custom-grid .et_pb_module {
  margin-bottom: 0 !important;
}

For a masonry-style layout:

.masonry-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  grid-auto-rows: 0;
  grid-gap: 20px;
}

.masonry-grid .et_pb_module {
  break-inside: avoid;
}

Note that masonry layouts often require JavaScript for precise control over item placement.

To make your grid responsive:

@media (max-width: 768px) {
  .custom-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 480px) {
  .custom-grid {
    grid-template-columns: 1fr;
  }
}

Remember that while CSS Grid is powerful, it’s important to test thoroughly across different browsers and devices to ensure compatibility.

Conclusion

With these CSS nuggets in your toolkit, you’re well on your way to creating stunning, unique websites that will make your visitors go, “Wow!” Remember, the key to mastering these snippets is practice and experimentation. CSS Snippets can level-up your designs, especially when you find the limitations of the builder. We always recommend that your push the builder as far as it will go before you start adding your own custom CSS or code to the website.

If you haven’t gathered it by now, test everything on different screen sizes. What might look good on your desktop won’t look or work well on a tablet or phone.

Happy styling!

P.S. – Want help customizing your Divi website? Schedule a call with us.

FAQs