Adding Text Over Help Center Banner Image

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.

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?

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>

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

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. 

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

I was able to add text over the banner, but it is not vertically centered (see screenshot).  How can I move the text and search box up so that it appears centered?  Thank you in advance.

Hey Victoria Campagna
Is it possible to share the live URL of your HC so that I will give a exact code which help you to solves your query

Thanks
Pulkit

I'm working on creating a new theme, so it is not live yet :( 
Will seeing the code below help?

This is what is in home_page.hbs:

<section id="main-content" class="section hero">
<div class="intro-title"><h1 style="color:white;"><b>Hi. How can we help?</b></h1></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=settings.instant_search class='search search-full' placeholder='Search for answers'}}
</div>
</section>

This is what is in style.css:

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

Okay, hope you are making your theme on base of Zendesk Copenhagen theme?

Hi Pulkit,

Yes that is correct.

-Victoria