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 HTML configuration provides you with the ultimate flexibility to create the landing page you want to have. Below, you will find one example and the corresponding code snippets. 

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?

Creating a custom widget

For full flexibility on the landing page, you can create a custom widget using HTML code and enhance it with basic CSS. 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, set a tooltip, select the widget type "Custom," and enter your HTML code fragment.

 

widget_popup.png

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>


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. Widgets placed on the sidebar to the right are not displayed on the landing page.

LPC.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.

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?
2 out of 2 found this helpful