Divi help

Accordions - Make Divi Accordions Closed by Default

This article will guide you to keep all the Accordions in Closed state by default when the Page loads.

Updated this week
By default, the Divi Theme’s Accordion Module will have the first Accordion opened when the Page loads.

This will help you keep all the Accordions in a Closed state by default when the page loads.

If you want this for only specific Accordion modules then go to that Accordion Module Settings > Advance > Custom CSS Class

Use this as CSS Class:     my_accordion

Then go to WordPress Dashboard > Divi > Theme options > Integration > <head> section, add this Script there:

***

<script>
jQuery(document).ready(function() { jQuery(‘.et_pb_module.et_pb_accordion.my_accordion .et_pb_accordion_item.et_pb_toggle_open’).addClass(‘et_pb_toggle_close’).removeClass(‘et_pb_toggle_open’);
});
</script>

***

This will close the Accordion modules when the page loads for the Accordion modules in which you have used the same CSS Class: my_accordion

 

Accordions - Make Accordion Modules Closeable

Add the following jQuery code to your site, e.g. by pasting it into the “Divi > Theme Options > Integration > Add this code to the head of you blog” box.

***

https://divibooster.com/make-divi-accordion-module-closable/

***

To add a “close” icon to the open toggles, add the following CSS code to your site, e.g. by pasting it into the “Divi > Theme Options > General > Custom CSS” box.

***

.et_pb_accordion .et_pb_toggle_open .et_pb_toggle_title:before {
display: block!important;
content: "\e04f" !important;
}
Accordions - Remove Spacing Between Accordion Items

Copy code bellow

***
margin-bottom: 0 !important;
***

1-Go to Accordions module setting
2- Go Advance > Custom CSS > Module elements > Toggle > Paste de code

Image- How to Add Zoom-In Hover Effect to the Image Module

  1. Open the Image module setting by clicking on the Gear Icon

  2. Go to Advanced Tab → Custom CSS → Free Form CSS

  3. Add the following CSS code:

     

    selector.et_pb_image:hover img,
selector .et_pb_image_wrap:hover img,
selector a:hover img {
  transform: scale(1.3);
  transition: all 2s 0s ease;
}

selector,
selector a {
  overflow: hidden;
}

selector.et_pb_image img,
selector .et_pb_image_wrap img,
selector a img {
  transition: all 1s 0s ease;
}
How to Add a Dynamic Copyright Year to Your Divi Footer (Automatically Updated)

How to add auto-updating footer copyright using Dynamic Content

Step 1: Add a Text Module

Add the auto-updating footer copyright. Open it using the Divi Builder and then add a text module

Step 2: Click on “Use Dynamic Content” and select “Current Date”

Now, go into the “Text Module settings.” Inside, hover your mouse over the Body area that displays the written text. Click on it, and then select “Current Date” from the list of available options.

A new pop-up window will appear asking you to enter the “After” and “Before” text.

Insert the line “Copyright ©” in the “Before” text field if you want the notification to appear like this – Copyright © 2021.

Note: If you don’t know how to get the Copyright logo, just copy and paste it from this article.

Once done, go to the “Date Format” section and select “Custom.” Now, enter “Y” (remember to write in caps) in the Custom Date Format field.

Now, just hit the “green tick” to confirm your selections and that’s it! You now have an auto-updating footer copyright notice that’ll always showcase the current year. NOTA: Custom date format section put “Y” on capital letter

This work only creating Global Footer