1. PROMO Upgrade to Pro Membership @ $99 / Lifetime & access all our 16+ premium Divi extensions: Divi Block, Carousel Toolkit, etc.LEARN MORE
Dismiss Notice
NEW Divi.Help Pro Carousel AI Toolkit - Magically turn your Divi design into carousel, simply by using our online toolkit. No plugins needed. Now it works with Divi 5 as well!Try our carousel AI toolkit
BEST Divi Block - A revolutionary drag & drop tool to easily mix & match 960+ premade blocks (Light & Dark) to kick start your Divi site design. Special module designs are included as well. Also newly added AI generator & color. Now it works with Divi 5 as well!
Learn More About Divi BlockFree Version ~ 340+ Free Blocks

Solved Dynamic Hover in Divi Block Section

Discussion in 'Support Forum' started by Howard Ohori, Feb 26, 2022.

  1. Howard Ohori

    Howard Ohori Member
    Pro Member Divi Ultimate Child Theme

    Hi DU:

    1. Homepage - I notice that everytime I go into the visual builder it sets me up in the Edit Header mode. I am not able to click on the individual rows. This started just shortly after I added the Dynamic Hover Section. I am not able to make changes on the front end only the backend Edit Page.
    2. Dynamic Hover Sections - The CTA background image size should likely be the same size across all images but I was not able to figure out what the size of the images used in the Divi Block json file.
    Thanks

    URL: https://butterfly.ohori.ca
    https://www.loom.com/share/a43038ced1cd4551bdfb468e9f9ffa2d
     

    Attached Files:

    #1 Howard Ohori, Feb 26, 2022
    1. PRO MEMBER PERKS Divi Block Pro - Premade horizontal timeline design for your Divi site without using any plugins:View Demo
  2. Divi.Help Pro Support

    Divi.Help Pro Support Administrator
    Staff Member

    That's weird. Couldn't replicate the issue on my side.

    But you may disable the Edit Header mode by clicking the below option:

    upload_2022-2-26_23-26-10.png
    On our demo, we are using 1000x600

    But you may use any size that you want. Though you will need to make sure that all 4 background images has the same size. For your case, your background images have different height, thus it's morphing during transition.
     
    #2 Divi.Help Pro Support, Feb 26, 2022
  3. Howard Ohori

    Howard Ohori Member
    Pro Member Divi Ultimate Child Theme

    Thanks - will apply.

    Hmmm last thing: Is it possible to use an image (logo) for each section? Instead of the Title
    • Logo sits at bottom postion (like Title)
    • Then on hover it expands with text & button.
     
    #3 Howard Ohori, Feb 26, 2022
    Last edited: Feb 26, 2022
    Divi.Help Pro Support likes this.
    1. PRO MEMBER PERKS Divi Block Pro - Premade content toggle design for your Divi site without using any plugins:View Demo
  4. Howard Ohori

    Howard Ohori Member
    Pro Member Divi Ultimate Child Theme

    Hmmm - ideally I would like to work off the front end on all pages.

    Oddly - this was not doing this previously and then later in the day the edit header section started this behaviour.

    Going to try another browser and see if that helps.
     
    #4 Howard Ohori, Feb 26, 2022
  5. Divi.Help Pro Support

    Divi.Help Pro Support Administrator
    Staff Member

    Will need some CSS hack for that.

    Here's what you need to do:
    1. Go to the CTA module settings & replace the title with a space.
    2. Then go to Advanced > Custom CSS > Promo Title & add the below:
    Code:
    Log In or Sign Up to view this code.
    **Adjust the code to fit your need.
    Have you tried to disable that option? It should prevent you from selecting the header area on front end.

    upload_2022-2-27_0-2-39.png
     
    #5 Divi.Help Pro Support, Feb 26, 2022
    1. PRO MEMBER PERKS Divi Block Pro - Powerful Divi header builder for you to mix & match premade header design, mobile menu & more:Learn More
  6. Howard Ohori

    Howard Ohori Member
    Pro Member Divi Ultimate Child Theme

    Thank you for the CSS code, I will give it a go.

    Really would be good to fix the 'Edit Header Template' so can build on front end.
    (BTW Safari has same issue)

    Do you think it is something I have done in the header (Removed the logo). I used one of the Header blocks and then deleted what I didn't need. (maybe I mistakenly added something which is making the header the whole height of the page).
     
    #6 Howard Ohori, Feb 26, 2022
  7. Divi.Help Pro Support

    Divi.Help Pro Support Administrator
    Staff Member

    We did try to delete the logo bar as well, but it still works fine on our side.

    The header took the whole height is due to the hidden fullscreen slide in menu section. But we already set it to be pointer-events: none, so that you won't be able to hover it.
    **Perhaps you may try the below CSS to totally hide the fullscreen slide in menu section in Visual Builder:
    Code:
    Log In or Sign Up to view this code.
    **Paste the above CSS at WP Admin > Divi > Theme Options > Custom CSS.
     
    #7 Divi.Help Pro Support, Feb 26, 2022
    1. PRO MEMBER PERKS Beautifully crafted custom colored 'Industrial' Divi layout for all Pro members:View Demo
  8. Howard Ohori

    Howard Ohori Member
    Pro Member Divi Ultimate Child Theme

    I think it's because I have the slider menu for mobile... yes?

    I think it is due to the fact that I have the mobile slider..... yes?
     

    Attached Files:

    #8 Howard Ohori, Feb 26, 2022
  9. Divi.Help Pro Support

    Divi.Help Pro Support Administrator
    Staff Member

    We did try your combination as well, but it still works fine on our side. And I see that you already apply the CSS. Does it help?
     
    #9 Divi.Help Pro Support, Feb 26, 2022
    1. PRO MEMBER PERKS Divi Ultimate Header Plugin - Add custom vertical navigation for your Divi site. Turns into slide in menu on mobile:Learn More
  10. Howard Ohori

    Howard Ohori Member
    Pro Member Divi Ultimate Child Theme

    Yes the added CSS helped!
    And the CSS hack for the dynamic hover using a logo worked really well.
     
    #10 Howard Ohori, Feb 27, 2022
    Divi.Help Pro Support likes this.
  11. Howard Ohori

    Howard Ohori Member
    Pro Member Divi Ultimate Child Theme

    Okay - I add another section to the Dynamic Hover - Worked like a charm, but I am missing that thin section line between the 4th and fifth column.

    Please advise.

    https://boostbutterflyball.ca
     

    Attached Files:

    #11 Howard Ohori, Apr 18, 2022
    1. PRO MEMBER PERKS Divi Block Pro - Premade content toggle design for your Divi site without using any plugins:View Demo
  12. Divi.Help Pro Support

    Divi.Help Pro Support Administrator
    Staff Member

    You just need to go to your Row Settings > 4th column settings & add a border left 1px with border color rgba(255,255,255,0.5)
     
    #12 Divi.Help Pro Support, Apr 18, 2022
  13. Howard Ohori

    Howard Ohori Member
    Pro Member Divi Ultimate Child Theme

    Excellent…. Thanks
     
    #13 Howard Ohori, Apr 19, 2022
    1. PRO MEMBER PERKS Divi Block Pro - Premade dynamic background hover design for your Divi site without using any plugins:View Demo
(You must log in or sign up to post here.)