Adding Text Over Help Center Banner Image

7 Comments

  • Wes Drury

    Hi Kristen.  This should be possible by just modifying your HomePage.hbs template along with some CSS.

    Below is a sample however you may need to modify in order to work in your custom theme.

    Homepage.hbs (default Copenhagen with added div class called "intro title".

    <section class=" hero">
    <div class="hero-inner">
    <div class="intro-title">How can we help?</div>
    {{search submit=false instant=settings.instant_search class='search search-full'}}
    </div>
    </section>

    CSS for the intro-title div, I'm adjusting the text depending on screen size

    .intro-title {
    margin-bottom: 48px;
    font-size: 24px;
    font-weight: 300;
    line-height: 1.1;
    color: #fff;
    text-align: center;
    }

    @media (min-width: 768px) {
    .intro-title {
    font-size: 28px;
    }
    }

    @media (min-width: 992px) {
    .intro-title {
    margin-bottom: 48px;
    font-size: 32px;
    }
    }

    Hope this helps a little and gets you going in the right direction.  If you have further questions just let me know.

    1
  • Amie Barder

    Kristin: Are the words "Help Center" after your logo in the header part of the logo image, or did you add that via code? If code, could you share how you accomplished that?

    0
  • Brett Bowser
    Zendesk Community Team

    Hey Amie,

    It looks like one of our Community Moderators replied to your question here: Adding text to header in Help Center

    Hope this helps!

    0
  • Ivey Kilmon

    Hello, I followed this example. It seemed to work, but it pushed the search icon out of the search bar.

    Attached is the example of how it winds up looking as well as the code. I haven't adjusted anything in the Coppenhaggan theme on this page. Just added the header title...

     

    <section id="main-content" class="section hero">
    <div class="hero-inner">
    <div class="intro-title">How can we help?</div>
    <h2 class="visibility-hidden">{{ t 'search' }}</h2>
    <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" focusable="false" viewBox="0 0 12 12" class="search-icon" aria-hidden="true">
    <circle cx="4.5" cy="4.5" r="4" fill="none" stroke="currentColor"/>
    <path stroke="currentColor" stroke-linecap="round" d="M11 11L7.5 7.5"/>
    </svg>
    {{search submit=false instant=true class='search search-full' placeholder='Find anything (e.g. Integrations, Workspace Basics, How to Write a Campaign)'}}
    </div>
    </section>
    0
  • Pulkit Pandey
    Community Moderator

    Hi Ivey Kilmon

    Simply move the intro title block outside the hero inner or replace your code with the below code 

    <section id="main-content" class="section hero">
    <div class="intro-title">How can we help?</div>
    <div class="hero-inner">
    <h2 class="visibility-hidden">{{ t 'search' }}</h2>
    <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" focusable="false" viewBox="0 0 12 12" class="search-icon" aria-hidden="true">
    <circle cx="4.5" cy="4.5" r="4" fill="none" stroke="currentColor"/>
    <path stroke="currentColor" stroke-linecap="round" d="M11 11L7.5 7.5"/>
    </svg>
    {{search submit=false instant=true class='search search-full' placeholder='Find anything (e.g. Integrations, Workspace Basics, How to Write a Campaign)'}}
    </div>
    </section>

    Then add the following CSS to the intro title 

    .intro-title {
          position: relative;
          top: 33%;
    }

    Let me know if it solves your issue 

    Thanks

    Pulkit

    Team Diziana

    0
  • Raeanna Skinner

    This has been very helpful! I was able to get my to intro title to turn out accurately with the steps above. How would we enable translation of that text for our default languages? I was thinking using dynamic content, but not exactly sure where that gets added. 

    0
  • Pulkit Pandey
    Community Moderator

    Hi Raeanna Skinner

    Happy to help you here, Just create a DC for your welcome message then call it in a place of your welcome message text on your code.

    Are you using any custom theme or just the default Copenhagen theme

    I am attaching a screenshot for the same

    You have to call your DC like this {{dc 'YOUR DC NAME'}} in the place where you have written your welcome message text.

    Please, let me know if you have any issue 

    Thank You 

    Pulkit

    Team Diziana

    0

Please sign in to leave a comment.

Powered by Zendesk