Landing Page Layouts

Before a Content Landing Page can be created, at least one layout needs to be created. These layouts allow users to add content to defined sections of a landing page. The sections within a layout are intended to be labeled in such a way that the user will know where that content will show when the page is rendered.

For example, a layout with sections named Top Banner, Left Column, Center Column, Right Column, would help the business user know what content belongs in each section. The content stored within a landing page is returned in a Hawksearch response to the UI and will be labeled with the section names.The layouts should be created in conjunction with the technical team doing the UI integration. When the page is rendered, the UI integration will build the page and place the content according to the section names.

Navigate to Page Layouts

1) To navigate to the Landing Pages Administration section, click on the "Workbench" tab in the top navigation.

2) Next, select "Merchandising" from the left navigation. Clicking on this button will bring you to subcategories, select "Landing Pages".

3) Once on the Landing Pages Administration home page, click on the "Layouts" tab and you will see any layouts that already exist.

4) You will have the ability to perform a search by name by typing the name of a layout in the Name field.

5) After you have specified the search criteria, click the "Search" button to generate a list of results.

6) To create a new layout, click on the "Add Page Layout" link.

Adding a Page Layout

1) First, enter a descriptive name for the Page Layout. Choose a name that will be meaningful to business users who are creating Landing Page.

2) Then, upload a thumbnail image to represent the Page Layout. Here is an example:

3) In the Layout field, you will provide the names of the sections to be filled by a business user creating a Landing Page. Section names should be within double brackets and in a div tag.

Example:

<div>{{Top Banner}}</div> <br/>
<div>{{Left Column}}</div>
<div>{{Center Column}}</div><div>{{Right Column}}</div>

The names in the double brackets are what the business user will see when creating a Landing Page and defining what content will be in each section. The layout - with any HTML provided - will be used in the preview window within the Workbench.

4) To save the layout click on the "Save" button.

Following are some html templates for the layouts:

4 Example Zones

<h1>
  Hawk Search Landing Page Content Examples
</h1>
<div>
  <h4 style='color:#F47622'>
    HTML Content
  </h4>
  <div>
    {{HTML Content}}     
  </div> 
</div>
<div>
  <h4 style='color:#F47622'>
    Image Content
  </h4>
  <div>
    {{Image Content}} 
  </div> 
</div>
<div>
  <h4 style='color:#F47622'>
    Popular Searches
  </h4>
  <div>
    {{Popular Searches}}      
  </div> 
</div>
<div>
  <h4 style='color:#F47622'>
    Rich "What You See Is What You Get" Text Editor
  </h4>
  <div>
    {{Rich Text}}       
  </div>

3 Images (Top), 1 Zone (Bottom)

<div class="grid_12">
  <div class="grid_4">
    {{Image1}}
  </div>
  <div class="grid_4">
    {{Image2}}
  </div> 
  <div class="grid_4">
    {{Image3}}
  </div> 
</div>
<div class="grid_12">
  {{Zone}}
</div>

Top, Title & Bottom

<div class="grid_12">
  <div>
    {{#breadcrumb#}}
  </div>
  <p>
    {{#customhtml#}}
  </p>
  <p>
    {{#pageheading#}}
  </p>
  <div class="grid_12">
    {{Top content}} 
  </div>
  <div class="grid_12" style="margin:15px 0">
    <div style='height: 0;border-top: 15px solid #423E3D;border-right: 15px solid #FFF;border-bottom: 15px solid #423E3D;border-left: 15px solid #423E3D;background-color: #423E3D; display:inline-block'>
      <div style="  display: inline;   margin: -11px 15px 0 -5px; text-align: left; font-size:24px; color:#fff; float:left">
        {{Title}}           
      </div>            
    </div>   
  </div>
  <div class="grid_12">
    {{Bottom content}} 
  </div>
</div>

Content Landing Page

Three Column Layout

Editing an existing Page Layout

1) On Landing Pages Administration home page, you will be able to edit any existing layouts. To edit a layout, click on the pencil icon next to the layout you want to edit.

2) The "Name" of the layout is what a user will see when creating a landing page and selecting from the available layouts.

3) Image will be displayed with the name when a user is selecting a layout.

4) The "Layout" field dictates (a) the names of the sections in which the business user is to supply content and (b) the preview layout of any landing page crated with this layout.

5) After any changes are made click "Save" or click "Cancel" to exit without saving changes.