Design a custom landing page: How to use the landing page HTML widget template

What is it? 

The custom landing page HTML configuration is one of two options to design the home page of your application. The configuration provides you with the ultimate flexibility to create the landing page you want to have. More inspirations are available under the article on how to help users navigate the platform from their first second.

Learn more about:

How does it work?

For full flexibility on the landing page, you can create and combine different types of widgets, such as custom widgets using HTML code and basic CSS, banner widgets to make use of the banner functionality of the standard landing page, and explorer widgets to integrate element information into your custom landing page. Within the "Widget Configurator", you can split your homepage into different sections. You will find the Widget Configurator, if activated by your Customer Innovation Success Manager, from the Settings Wheel > System Administration > Landing Page > Widget Configuration.

 

WC.png

 

You will first land on the "Landing Page Configuration" tab. Click on Add Widget to create a new widget.

 

Add_widget.png

Define a widget title for the different system languages, set a tooltip, and choose the widget type. You can choose between three types of widget: Custom, Banner, and Explorer.

Screenshot 2024-01-18 at 16.35.11.png

Creating a custom widget

For a custom widget, you can enter your HTML code fragment and basic CSS for full flexibility on the landing page.

Screenshot 2024-01-18 at 16.37.03.png

Please note that when using custom styles, do not use general class names but provide specific names to avoid any problem, e.g.,  instead of ".content" use a prefix like ".pre_content"

Example HTML code widgets

In this example, the homepage consists of 7 sections made up of 7 HTML widgets:

HTML_widget_template_2.png

HTML_widget_template_3.png

 

Let's take a look at each section and how you can customize the default layout to suit your needs.

 

01_Section--Header

The header section contains 2 components: 

1. Hero image (banner) - You can add an image that has been uploaded to your system either as a profile image of an element or as a reference attachment to an element. In both cases you can access the image address by the right click, then copy the address and paste it in the background: url() property. Make sure your image is 3x1 ratio (three times as wide as it is tall).

2. Headline - You can change the text color from the h1 style properties.

 

<head>
<style>
h1 {
       line-height: 1.35;
       color: #ff3399; 
       font-size: 70px; 
       font-weight: bold;
     }
</style>
</head>
<body>
 <div style="padding: 200px 60px; text-align: center; background: url(###);
background-repeat: no-repeat; background-size: cover; height: 500px;">

    <h1>Innovation Software for Everyone</h1>
 </div>
</body>

 

02_Section--Text-Block

The text block section is a plain text container. There you can configure a heading h5 and paragraph p.

 

<head>
<style>
.text-container--content {
       font-size: 17px;
       max-width: 1175px;
       margin-left: auto;
       margin-right: auto;
       padding-top: 30px;
       padding-bottom: 15px;
     }
</style>
</head>
<body>  
  <section
       style="position: relative; padding-bottom: 0px;
background-color: #fff">

       <div class="text-container--content">
         <h5
           style="font-size: 21px; font-weight: bold; align-self: center">
           Lorem ipsum dolor sit amet, consectetur adipiscing elit.
         </h5>
         <p>
           Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed
do
eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim
ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut
 aliquip ex ea commodo consequat.
         </p>
       </div>
  </section>
</body>

 

03_Section--Grid-1x2

This grid section represents the pair of an image and a text box on the 1x2 dimension. (It means that the space for image img is two times less than the space for text).

  • You can add an image that has been uploaded to your system either as a profile image of an element or as a reference attachment to an element. In both cases you can access the image address by the right click, then copy address and paste it in the img src="” property.
  • Text box contains two child Elements h5  and p
  • The section also includes a button button that can be linked to any other location in the system. This could also be used for external URLs. To do this, you can paste it in the a href="”.

<head>
<style>
.grid__layout-1x2 {
       display: grid;
       grid-template-columns: 1fr 2fr;
       gap: 60px;
       max-width: 1175px;
       margin-left: auto;
       margin-right: auto;
     }
.grid-img {
       width: 100%;
       border-radius: 3px;
     }
.grid__text {
       align-self: center;
       justify-self: center;
       width: 70%;
       font-size: 14px;
     }
.grid__text-title {
       font-size: 21px;
       margin-bottom: 15px;
     }
.btn__grid-CTA {
       display: inline-block;
       background-color: #fff;
       color: #ff3399;
       font-family: inherit;
       border: 2px solid #ff3399;
       border-radius: 3px;
       cursor: pointer;
       box-shadow: 0 3px 5px 0 #d5dbe1;
     }
.btn__grid-CTA:hover {
       border: none;
       background-color: #ff3399;
       color: #fff;
     }
</style>
</head>
<body>
<div
     style="
       position: relative;
       padding-bottom: 0px;
       background: #f7f7f7;
padding: 30px 30px;">
  <div class="grid__layout-1x2">
<!-- Text - right; Image - left -->
    <img src="###" class="grid-img" />
    <div class="grid__text" style="width: 100%;">
       <h5 class="grid__text-title">Something to highlight</h5>
       <p  style="margin-bottom: 20px;">
                   Lorem ipsum dolor sit amet consectetur adipisicing elit.
Unde
 alias sint quos? Accusantium a fugiat porro reiciendis
saepe
 quibusdam debitis ducimus.  
       </p>
       <button
               class="btn__grid-CTA"
               style="font-size: 17px; height: 40px; padding-left: 16px;
padding-right: 16px; ">

         <a
                 href="##”
                 target="_blank" style="text-decoration: none; color: inherit;
font-size: 14px;">View more</a>

       </button>
    </div>
  </div>
</div>
</body>

 

04_Section--Grid-2x1

This grid section represents the pair of an image and a text box on the 2x1 dimension. (It means that the space for image img is two times greater than the space for text).

  • You can add an image that has been uploaded to your system either as a profile image of an element or as a reference attachment to an element. In both cases you can access the image address by the right click, then copy address and paste it in the img src="” property.
  • Text box contains two child elements h5 and p

The section also includes a button button that can be linked to any other location into the system, could be also used for external URLs, paste it in the a href="”.

<head>
<style>
.grid__layout-2x1 {
       display: grid;
       grid-template-columns: 2fr 1fr;
       gap: 60px;
       max-width: 1175px;
       margin-left: auto;
       margin-right: auto;
     }
.grid__text {
       align-self: center;
       justify-self: center;
       width: 70%;
       font-size: 14px;
     }
.grid__text-title {
       font-size: 21px;
       margin-bottom: 15px;
     }
.btn__grid-CTA {
       display: inline-block;
       background-color: #fff;
       color: #ff3399;
       font-family: inherit;
       border: 2px solid #ff3399;
       border-radius: 3px;
       cursor: pointer;
       box-shadow: 0 3px 5px 0 #d5dbe1;
     }
.btn__grid-CTA:hover {
       border: none;
       background-color: #ff3399;
       color: #fff;
     }
.grid-img {
       width: 100%;
       border-radius: 3px;
       box-shadow: 0 3px 5px 0 #d5dbe1;
     }
</style>
</head>
<body>
<div
     style="
       position: relative;
       padding-bottom: 0px;
       background: #f7f7f7;
padding: 30px 30px;">
 <div class="grid__layout-2x1" style="margin-top: 30px;">
   <div class="grid__text" style=" width: 100%;">
       <h5 class="grid__text-title">Something to highlight</h5>
       <p style="margin-bottom: 20px;">
         Lorem ipsum dolor sit amet consectetur adipisicing elit.
Unde
alias sint quos? Accusantium a fugiat porro reiciendis
saepe
quibusdam debitis ducimus. Lorem ipsum dolor sit amet
consectetur adipisicing elit. Unde
alias sint quos?
Accusantium a fugiat porro reiciendis saepe
quibusdam
debitis ducimus. Lorem ipsum dolor sit amet consectetur
adipisicing elit. Unde
 alias sint quos? Accusantium a fugiat
porro reiciendis saepe
 quibusdam debitis ducimus.
       </p>
       <button
       class="btn__grid-CTA"
       style="font-size: 17px; height: 40px; padding-left: 16px;
padding-right: 16px; ">

        <a
         href="###” 
         target="_blank" style="text-decoration: none; color: inherit;
font-size: 14px; ">View more</a>

       </button>
   </div>
   <img src="###” alt="Grid Image" class="grid-img" />
 </div>
</div>
</body>

 

05_Section--Call-To-Action

This section contains 2 components:

1. Headline h3

2. CTA button that can be linked to any other location into the system, could be also used for external URLs, paste it in the a href="”

<head>
<style>
.section__text-CTA {
       background-color: #fff;
       border-top: none;
       border-bottom: none;
       text-align: center;
       padding: 30px 30px;
     }
.btn__text-CTA {
       display: inline-block;
       background-color: #ff3399;
       color: #f7f7f7;
       font-family: inherit;
       font-weight: 500;
       border: none;
       border-radius: 3px;
       cursor: pointer;
       box-shadow: 0 3px 5px 0 #d5dbe1;
     }
.btn__text-CTA:hover {
       border: 2px solid #ff3399;
       background-color: white;
       color: #ff3399;
     }
</style>
</head>
<body>
<div
     style="
       position: relative;
       padding-bottom: 0px;
       background: #f7f7f7;">
  <section class="section__text-CTA">
    <div>
      <h3
             style="
               font-size: 36px;
               line-height: 1.3;
               font-weight: 500;
               margin-bottom: 20px;">
             Lorem ipsum dolor sit amet, consectetur adipiscing elit nunc.
      </h3>
    </div>
     <button
           class="btn__text-CTA"
           style="font-size: 14px; height: 40px; padding-right: 16px;
padding-left: 16px;">

       <a
             href="###" target="_blank" style="text-decoration: none;
color: inherit;">Submit idea!</a>

     </button>
  </section>
</div>
</body>

 

06_Section--Cards

This section has three identical cards and the card itself contains of the following components:

  • Background div class="card__layout"
  • Image img. You can add an image that has been uploaded to your system either as a profile image of an element or as a reference attachment to an element. In both cases you can access the image address by the right click, then copy address and paste it in the img src="” property.
  • Title h4
  • Paragraph text p

You can link cards to any location in the system, or to any external pages. Paste the URL in the a href="” tag at the beginning of each card, right after <!-- Card #N -->

<head>
<style>
.grid__layout {
       display: grid;
       grid-template-columns: 1fr 1fr 1fr;
       gap: 48px;
       max-width: 1175px;
       margin-left: auto;
       margin-right: auto;
     }
.card__layout {
       border-radius: 3px;
       background-color: rgb(255, 255, 255);
       display: grid;
       box-shadow: 0 3px 5px 0 #d5dbe1;
     }
.card__layout:hover {
       border: 1px solid #ff3399;
     }
.card-img {
       width: 100%;
       height: auto;
       border-radius: 3px;
     }
h4 {
         font-size: 17px;
     }
p {
         font-size: 14px;
     }
</style>
</head>
<body>
<div
     style="
       position: relative;
       padding-bottom: 0px;
       background: #f7f7f7;
     padding: 30px 30px;">
 <div class="grid__layout">

<!-- Card #1 -->
   <a
           href="###”
           target="_blank" style="text-decoration: none; color: inherit;">
    <div class="card__layout" style="height: 400px">
     <img
               src="###”
               alt="Card Image"
               class="card-img"
               style="height: 250px"/>
     <div style="padding: 20px;"">
      <h4 style="color: #ff3399">Trend-Box</h4>
      <p>
       Lorem ipsum dolor sit amet consectetur adipisicing elit.
      </p>
     </div>
    </div>
   </a>

<!-- Card #2 -->
   <a
           href="###”
           target="_blank" style="text-decoration: none; color: inherit;">
    <div class="card__layout" style="height: 400px">
     <img
               src="###”
               alt="Card Image"
               class="card-img"
               style="height: 250px"/>
     <div style="padding:20px;">
      <h4 style="color: #ff3399"">Trend-Box</h4>
      <p>
           Lorem ipsum dolor sit amet consectetur adipisicing elit.
      </p>
     </div>
    </div>
   </a>

<!-- Card #3 -->
   <a
           href="###”
           target="_blank" style="text-decoration: none; color: inherit;"">
    <div class="card__layout" style="height: 400px">
      <img
               src="###”
               alt="Card Image"
               class="card-img"
               style="height: 250px"/>
       <div style="padding:20px;">
        <h4 style="color: #ff3399"">Trend-Box</h4>
        <p >
                 Lorem ipsum dolor sit amet consectetur adipisicing elit.
        </p>
       </div>
      </div>
     </a>
   </div>
</div>
</body>

 

07_Section-Footer

You can change the background color of the footer section by inserting a suitable color property background-color:

<body>
  <footer style="padding: 20px 20px; background-color: #333">
    <p style="font-size: 14px; color: #aaa; text-align: center">
         &copy; Copyright by
      <a
           target="_blank"
           href="https://www.itonics-innovation.com/”
           style="color: #eee; text-decoration: none; font-size: 14px;"
           >ITONICS GmbH
      </a>
    </p>
 </footer>
</body>

Creating a banner widget

Choose the banner widget type to easily incorporate banner images into your custom landing page to, i.e. prominently promote upcoming events, running campaigns, or other important topics.

You can configure the following options for the banner widget type:

  • Choose whether to actively “Show the title” of the banner on the banner itself.
  • Set the “Status” of the widget as in-/active to make it available for selection or not.
  • Set the “Background Color” of the banner widget. Use this option to, i.e. align the background color of the widget with the color used for another custom or explorer widget to seamlessly integrate the banner widget into your existing custom landing page content.
    • Note: the banner widget can be placed as a full-page and half-page widget in the view configuration of the landing page configuration, however, the background color option is only applicable for the full-page banner widget.
  • Add up to three “Images” for the banner widget, which will automatically be rotated through.
  • Add additional content via the “Abstract” field to be displayed over the underlying images.

Save your configuration of the banner widget by clicking the “Save” button. If “active”, the saved widget will then be available for selection and placement in the view configuration of the landing page configuration.

Screenshot 2024-01-18 at 16.38.44.png

Creating an explorer widget

Choose the explorer widget type to dynamically incorporate element information into your custom landing page. Select one entity type to be displayed on the particular explorer widget. Note: that if a user does not have the permission to see an entity type, the respective content will not be visible.

You can configure the following options for the explorer widget type:

  • Firstly, choose the entity type for the particular widget.
    • Depending on the selection, the respective entity type-specific filters and the general filters will be available for selection to further filter down the actual elements to be displayed on the widget.
  • Define the sorting mode of the elements on the widget.
  • Choose between ascending and descending ordering of the elements on the widget.
  • Choose whether to actively “Show the title” on the explorer widget itself.
  • Importantly, decide on the “View type” of the explorer widget.
    • Grid: this view type makes use of the standard Explorer element cards and shown up to four element cards on the widget
    • List: this view type arranges the element information in a list form on the widget, while up to 8 elements are displayed on one widget based on the underlying filter selection.
  • Check the “Show more” option to add an Explorer redirect to the widget. Clicking the “show more” button will redirect the user to the Explorer with the underlying filters of the widget applied, allowing to assess further elements that apply to the filter selection of the widget.
    • Note: the individual element cards/list entries themselves are clickable with a detail page redirect.
  • Set the “Background Color” of the explorer widget. Use this option to, i.e. align the background color of the widget with the color used for another custom or banner widget to seamlessly integrate the explorer widget into your existing custom landing page content.
    • Note: the explorer widget can be placed as a full-page and half-page widget in the view configuration of the landing page configuration, however, the background color option is only applicable for the full-page banner widget.

Save your configuration of the explorer widget by clicking the “Save” button. If “active”, the saved widget will then be available for selection and placement in the view configuration of the landing page configuration.

Screenshot 2024-01-18 at 16.55.21.png

Placing your widgets in the view configurator

After creating your widgets, you need to position them according to your needs within the View Configurator. Please note that you can place a single widget full-width, or place two widgets next to each other. Custom widgets can only be placed as single widgets with full-width. Widgets placed on the sidebar to the right are not displayed on the landing page.

Screenshot 2024-01-18 at 16.41.14.png

Configuring multiple landing pages

You can configure multiple landing pages and make the tailored content available to different stakeholder groups or audiences. Note that a single user can have access to multiple landing pages.

On the View configurator, per default, the Feed tab is active as the default landing page. It is possible to change the title of the Feed, while this particular landing page is static and cannot be deactivated. However, there is the option to define the Feed as the default landing page for all users. If checked, no matter any other configured landing pages, every user will see the Feed landing page and its content per default. If the checkbox option is not checked, the Feed landing page functions as a “fallback” option for the case that a particular user is not included in the visibility restrictions of any other landing page.

Besides the Feed tab, additional tabs, respectively landing pages can be configured via the Add Tab button. Clicking on the button opens a new modal, where both the title for and the access to the landing page can be configured. You can define the access for individual users, user groups, roles, or context, i.e. to provide a tailored landing page for users of different departments. Note that if no visibility restriction is configured for a tab, the respective landing page will be displayed to all users.

Additionally, if the checkbox to define the Feed as the default landing page for all users is not checked, while a user is included in the visibility of another tab, the respective user will not see the Feed, but the other landing page(s). Note that the Application Owner role is displayed and has access to all configured landing pages.

Screenshot 2024-01-18 at 16.43.00.png

Using images on the landing page

To make your landing page attractive, it might make sense to include images on your landing page. To reflect the images on your landing page, you will need to set the address of such images in your HTML code, e.g., 

Background-image URL:

https://academy.demo.itonicsit.de/downloading/file?file=private%253A%252F%252Fb80c6c17f741413d0ccb2f2eaafcf678f25dfacd.jpg&decode=1

To find the address of an image, you have different options:

1. Use public web images: If you want to embed an image from another website, go to that website and copy the exact URL of the image. You can then paste the image URL into your HTML code snippet.

Images entered from another website will not be cached.

2. Add an image to your system from an element's reference section: If you want to reference to an image that is stored in your ITONICS system, hit the create button in the main navigation menu and select any entity. Scroll down to the "References or URL" section and upload your image. Once the image is uploaded, it will be stored in your application and an image URL will be created, even though you do not finish the creation of the element. 

Use a right mouse click and extract the image URL.

 

save_image_from_reference.png

3. Add an image to your system from the login background page:

Similar to option 2, you can upload a respective image from the Settings Wheel > System Administration > Login Page Background. Use the Add-button and upload the respective image(s) to your application. Set the status to inactive (otherwise the picture will be used as your login page background. Click right on the image to get the image URL in the system.

manage login background.png

You can then paste the image URL into your HTML code snippet.

Was this article helpful?
3 out of 3 found this helpful