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

Solved yellow lines in construction

Discussion in 'Basic Support Forum' started by Sander Noorman, Oct 25, 2017.

  1. Sander Noorman

    Sander Noorman New Member
    Divi Ultimate Child Theme

    can you tell me how you created the yellow lines in the call to action (second section) in construction? I see a class free-header-border-bottom with some inline styling.
    But how did you manage it to let the yellow line appear between title and content.

    thanks,
    Sander
     
    1. PRO MEMBER PERKS Divi.Help Pro Layout Packs - Modern & powerful Agency Divi layout pack, featuring team carousel, sliding menu, etc.View Demo
  2. Divi.Help Pro Support

    Divi.Help Pro Support Administrator
    Staff Member

    For CTA, it's separated into 3 parts:

    1. Title
    2. Content
    3. Button

    For this case, we don't use the button part.
    1. Title
    2. Content

    Title don't accept HTML coding in it, so we use the content to insert the yellow lines.

    So, at the top of the content, we add the yellow line HTML & CSS, so that it will show right below the title.
    <div class="free-header-border-bottom" style="height: 3px;width: 80px;margin: 32px 0 20px 0!important;"></div>

    And for the content, we put it right below the yellow line HTML. Remember to use p tag so that your content will be full width, and will not be affected by the yellow line.
    **Cause the yellow line is using display: inline-block; & your content will continue at the end of the yellow line if you didn't use p tag.
    <p>Your Content</p>

    So, the end result is that the yellow line is between the Title & Content.
     
  3. Tanya

    Tanya New Member
    Divi Ultimate Child Theme

    Hello could you please tell me how to change the yellow colour to blue? Thanks
     
    1. PRO MEMBER PERKS Divi Block Pro - Premade slide in bar design for your Divi site without using any plugins:View Demo
  4. Divi.Help Pro Support

    Divi.Help Pro Support Administrator
    Staff Member

    For v3.0 & above, you just need to go to Theme Customizer -> Divi Ultimate -> Global Styling -> Header Border Color
     
  5. Tanya

    Tanya New Member
    Divi Ultimate Child Theme

    1. PRO MEMBER PERKS Divi Ultimate Footer Plugin - Custom global Divi footer (20 premade styles) + Revealing footer effect:Learn More