move toggle to left or middle
/**************************** toggle custom 1 **************************/ .toggle_custom_1 { border: none; } .toggle_custom_1.et_pb_toggle.et_pb_toggle h5 { padding-left: 45px; } .toggle_custom_1 .et_pb_toggle_title:before { right: 92% !important; font-size: 40px;...
create 2 buttons next to each other
Overlap Sections
Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.Your content goes here. Edit...
change the submit button text
A child theme is required to properly implement this customization. If you are not currently using a child theme, you can download one using the following link: https://www.dropbox.com/s/ut4dkjq5n7j9nkz/divi-child-theme-0.1.1.r20.zip?dl=1 Add the first code snippet...
add an overlay to a text module
Add this code to the before section of the modules' settings content:""; display: block; height: 100%; position: absolute; top: 0; left: 0; width: 100%; background-color: rgba(58, 60, 69, .6);
Add a line under the menu
About Me Projects Official WPML Contractor Blog Get in Touch Testimonials Sitemap Search … Divi Theme Code Snippets How to add a colored line under Divi Main Navigation How to add a colored line under Divi Main Navigation by George Nicolaou | 22 November, 2018 | Divi...
center submit button in Divi
/*submit button center*/ .et_contact_bottom_container{ display: flex; align-items: center; justify-content: center; width: 100% !important; } /*submit button center end*/
create 2 buttons for fullwidth divi slider
https://www.dirtriverdesign.com/divi-fullwidth-slider-add-two-buttons/How to Add two Buttons the Divi Fullwidth SliderFor now it isn’t easy to add a second button on the fullwidth slider, but I expect Elegant Themes will eventually add it as a feature....
css tips for mobile
CSS Tips to Enhance Divi Mobile Experienceby Ania Romańska | Quick Divi Tips | 44 comments These are some CSS snippets I use all the time. Reverse column order on smaller screen sizes, center-align the text – you can’t go wrong with that.. I used this...
expanding section on scroll
How to Create an “Expanding” CTA like Elegant ThemesPosted on May 13, 2017 by Jason Champagne in Divi Resources | 20 commentsElegant Themes recently changed the design of their website to include some features worth imitating. In earlier posts, I wrote...
gradient buttons
How to Create Gradient Buttons in DiviBY JOHN WOOTENLearn how to create transition gradient buttons in Divi. Gradient buttons are becoming a popular design...
Custom Tabs with images
How to add icons to Divi Tabs? How to add different module inside Divi Tab?Instead of adding icons to Divi Tabs Module or looking for a way to display another module inside each tab I took a different approach and created custom tabs layout using Blurbs as tabs titles...
promobar on top of page
11/22/17: Update! We just launched Divi Bars— the brand new plugin version of this tutorial with LOADS of features & templates! This tutorial and the promo bar generator will always remain free, however support is limited. We highly recommend checking...
Animated Button in Menu
Add code to header.php1. Open header.php file located in your child theme folder.* If you do not have header.php file in you child theme folder, then copy it from parent Divi theme and paste to your child theme folder.2. Add the following code...
Divi Blurbs 1
some text here Read More some text here Read More some text here Read More
Stack Order
some text here
Images oN Hover
image Thick border
mp-image overlays
/* Make sure our absolute positioned overlay doesn't cover more than we want it to... */ .overlay-one { position: relative; } .overlay-one:after { position: absolute; content: ''; background: url('newimagepath/overlay.png'); background-size:...
Invert Images
Invert Images
Slider Transitions
SOMTHING HERE SOMTHING HERE AGAIN Changing the description transition .et-pb-active-slide .et_pb_slide_description {animation-name: fadeBottom;} Changing the side image or video transition .et-pb-active-slide .et_pb_slide_image, .et-pb-active-slide...
Excerpt Reveal on Hover Fullwidth Blog Grid
Day 1 - Excerpt Reveal on Hover Fullwidth Blog Grid Demo json file download
Video Display 4
Our Most Popular Courses Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed molestie, velit ut eleifend sollicitudin, neque orci tempor.
Add Button to Menu
How to Create a Call To Action Button for the Menu /*---------------Menu CTA Button---------------*/ #top-menu li a:hover {opacity: 1!important;} .menu-cta a { border: 2px solid #ffffff4f!important; padding: 12px!important;...
Back To Top Button
How To Customize the Back To Top Button /*----------Custom Back To Top Button----------*/ .et_pb_scroll_top.et-visible { opacity: 1; -webkit-animation: fadeInBottom 1s 1 cubic-bezier(.77,0,.175,1); -moz-animation: fadeInBottom 1s 1...
Customize Dropdown Button
How to Customize the Menu Dropdown Icon /*-----------------Menu Dropdown Icon---------------- */ #et-secondary-nav .menu-item-has-children>a:first-child:after, #top-menu .menu-item-has-children>a:first-child:after { content: "\45"; } ...
Customize top header
How to Customize the Top Header in Divi /*----------Customized Top Header----------*/ #top-header .et-social-icons { display: inline-block; float: right; } .top-phone { width: 124px!important; } .top-phone a { color: white!important; font-size:...
Equal Column Heights
How to Set Equal Column Heights using Flexbox
Floating Publish Button
Floating Publish Button
full screen hero
ALMONDS