0 Items

Divi – Handy General Divi Hacks

How Can We Help?

Divi – Handy General Divi Hacks

Created On
byrobwick
Print
← Back

Divi – Handy General Divi Hacks

1 – Closing the first element in an accordian menu

 

The 1st Divi accordion module item is set to be open by default and there is no option to set it to be closed. If you would like all your accordion items to be closed by default there is a simple trick that makes the 1st (open) item of your accordion invisible.

This method will work without using any jQuery or extra coding as it simply adds an extra accordion item to the top of your accordion and hides it using some custom CSS added within the module itself. The result is that the rest of your accordion items below this hidden (open) one will all now have the appearance of being closed as default.

 

  1. Add your Divi accordion module and add your items within it as normal.
  2. Click on Add New Accordion Item and drag it to the top of the accordion
  3. then within that new item go into the Custom CSS tab and in the Main Element box add the following code; 
    display:none;
  4. Save and preview and you will now see that all of your (visible) accordion items are closed by default.

You can read more here https://www.divithemeexamples.com/make-divi-accordions-closed-default/

 

2 – Creating a child theme in DIVI (well, one of many ways)

 

Have a look at this link which tells you just how to do create a divi child theme.

3 – Creating a DotNav Menu and custom CSS 

 

This article has some cool examples of what can be achieved using divi and the dotnav plugin. 

4 – Making Image Modules Square

If you want to create square images regardless of how they are uploaded, then use the class sqimg (Square Images) in the photos you want to alters custom css class box. Then add the following code to the divi css section.

 

/*Square Images*/
.sqimg{
    padding-top: 10%;
}
.sqimg img {
    position:relative;
	object-fit: cover;
    height: 150px;
    width: 150px;
}

5 – Making Full Width Portfolio Images Square

If you want to make the full width portfolio images square instead of the standard ratio. Add this code to your Divi css section.

/* Make portfolio images square */
.et_pb_portfolio_image {
    padding-top: 100%;
}
.et_pb_portfolio_image img {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    object-fit: cover;
    height: 100%;
    width: 100%;
}
.et_pb_portfolio_item, .et_pb_portfolio_items {
    height: auto!important;
}

6 – Changing the colour of the Divi Lightbox overlay (background colour)

If you want to change the colour of the background that shows behind and image that has been opened in a lightbox. Use this code. Alter the “transparent” element to your desired colour.

/*Change lightbox background overlay colour*/
.mfp-bg.mfp-fade.mfp-ready {
background: transparent!important;
}