Check Home Hero settings

When adding the widget, the Home Hero item is added. The screen looks like the following when just created.

If you go to Widget Settings, you will find the following settings

If you go to the Appearance Settings section, you will see the values you previously set when creating the HTML Block.

The HTML code is described below for reference.

This value is the form used as the image and text in the HTML above. Is it possible to change the structure of this HTML? This part can be changed in the Appearance Definition section of the Widget Settings. Click on the item, and you will see HTML, CSS, and other items on the left side. First, open HTML and you will see the following screen.

Let's paste the HTML code listed here.

<div class="cta-vertical-container">
    <img src="{{$cta_image_url,}}" alt="{{$cta_image_alt,}}" class="cta-image lg-align-{{$cta_image_align}} sm-align-{{$cta_image_align_mobile}}" />
    <div class="cta-content-container">
        <h2 class="cta-title lg-align-{{$cta_title_align}} sm-align-{{$cta_title_align_mobile}}">{{$cta_title,}}</h2>
        <div class="cta-content lg-align-{{$cta_content_align}} sm-align-{{$cta_content_align_mobile}}">{{$cta_content}}</div>
    </div>
    <div class="cta-button-container lg-align-{{$cta_button_align}} sm-align-{{$cta_button_align_mobile}}">
        <a href="{{$cta_button_href}}" title="{{$cta_button_label}}" class="cta-button">{{$cta_button_label}}</a>
    </div>
</div>

This code looks familiar. It is the output HTML that was pasted on the page above. The code {{$cta_image_url,}} is embedded in the HTML, and the image defined in Appearance Settings is loaded and displayed.

When you go to browse CSS, you will see the following screen.

It is possible to set CSS settings according to devices such as Web and Tablet. In this way, the widget's HTML and style sheets can be managed.

Change to a new design

This time, I would like to rewrite it to look like the banner at the top of Sitecore.com. First, change the HTML code as follows

<section class="html_block" >
  <div class="hero-background">
  </div>
  <div class="hero-content">
    <div class="hero-main-content">
      <h1>{{$cta_title}}</h1>
    <div>{{$cta_content}}</div>
    </div>
  </div>
</section>

CSS is also rewritten as follows (code is shown here for Web only).

.html_block {
  padding-top: 80px;
  padding-bottom: 80px;
  position: relative;
  z-index: 1;
}
.hero-background {
  background-image: url({{$cta_image_url}});
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  z-index: -1;
}
.hero-content {
  display: flex;
  justify-content: flex-start;
  padding-left: 10%;
}
.hero-main-content {
  box-shadow: 0 0 10px 0 rgb(0 0 0 / 20%), inset 0 0 200px rgb(255 255 255 / 30%);
  border-radius: 5px;
  position: relative;
  z-index: 1;
  background: #f6f6f629;
  overflow: hidden;
  -webkit-backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  backdrop-filter: blur(24px);
  color: #ffffff;
  width: 400px;
  padding: 2em 3em;
}
h1 {
  font-size: 2.5rem;
}

After rewriting the code, click Publish to update the widget. Then the screen changes as follows.

The result would be to retrieve images, text, etc. from the parameters and output the following code.

Summary

The HTML block is prepared as a widget on the Sitecore Search side and can be embedded in the page. This article is a bit long, so in the next article, I would like to control the display of the widget by using the rules settings of this widget.

Tags

• Search