1. PROMO Subscribe our All Access Pass @ 75% OFF & access all our 16+ premium Divi extensions: Divi Block Pro, 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

Unique Section Border

Discussion in 'Free Divi Community Forum' started by Shaunster, Jul 5, 2023.

  1. Shaunster

    Shaunster New Member

    Hi,

    I'm not sure if this is related to my last question.

    I need a unique border to surround a section as shown below. Each page will have a similar section/border in a different color with a different image (like the key).

    Thanks!

    [​IMG]
     

    Attached Files:

    #1 Shaunster, Jul 5, 2023
    1. PRO MEMBER PERKS Divi Block Pro - 30+ premade custom footer designs for you to choose from:View Demo
  2. Divi.Help

    Divi.Help Administrator
    Staff Member

    I guess you can just add a border for your section & add a image module with negative top margin, so that it will overlap with the border. Next is to add white background to the image & add some padding to it so that you can have some white space on the sides of the image. As for the white space at left & right corner, you may add an empty text module & set a height and width & set it to be white background & set it to be position absolute to place it in your desired location.
     
    #2 Divi.Help, Jul 7, 2023
  3. Shaunster

    Shaunster New Member

    Thanks!

    I was also thinking -- could I manipulate this CSS to do the trick for the top line:

    Code:
    Log In or Sign Up to view this code.
     
    #3 Shaunster, Jul 8, 2023
    1. PRO MEMBER PERKS Divi.Help Pro Layout Packs - Beautifully crafted Divi layout packs for you to kick start your Divi sites:View Demo
  4. Divi.Help

    Divi.Help Administrator
    Staff Member

    You may try that on your image module settings > Advanced > Custom CSS > Before. But change the width to 90%.

    And you will need the below CSS as well in WP Admin > Divi > Theme Options > Custom CSS:
    Code:
    Log In or Sign Up to view this code.
    **Make sure to have green-lines CSS Class for your image module settings.
     
    #4 Divi.Help, Jul 8, 2023
  5. Shaunster

    Shaunster New Member

    Hey -- thanks so much for your help.

    When I follow your instructions and the image module is open, a green line appears. but when it is closed, it disappears.
    [​IMG]


    Any ideas? is this related to the edits from the other post?

    THANK YOU
     
    #5 Shaunster, Jul 9, 2023
    1. PRO MEMBER PERKS Divi Ultimate Archive Plugin - Replace the default archive "Older Entries" with beautiful pagination:Learn More
  6. Divi.Help

    Divi.Help Administrator
    Staff Member

    Need to view it to advice further. Your URL doesn't have the key icon in it: https://wordpress-408461-3677516.cloudwaysapps.com/formulas/
    **It only has the top Formulas page header.
     
    #6 Divi.Help, Jul 9, 2023
  7. Shaunster

    Shaunster New Member

    #7 Shaunster, Jul 9, 2023
    1. PRO MEMBER PERKS Divi Ultimate Archive Plugin - Beautify your Divi archive / category page with 15 different premade blog designs:Learn More
  8. Divi.Help

    Divi.Help Administrator
    Staff Member

    It's because you set your image module to have width 12%. You will need to go to the image module settings & remove the width value.

    Then lastly, add the below CSS in Divi > Theme Options > Custom CSS:
    Code:
    Log In or Sign Up to view this code.
    If you need the key image to be smaller, then upload a smaller size of the key image.
     
    #8 Divi.Help, Jul 9, 2023
(You must log in or sign up to post here.)