How to use the landing page HTML widget template

Create your first custom widget

⬆️  This article will guide you through the basics of custom widgets.

Alternatively, you can also use the custom widget templates to quickly set up your own landing page.

01_Section--Header

02_Section--Text-Block

03_Section--Grid-1x2

04_Section--Grid-2x1

05_Section--Call-To-Action

06_Section--Cards

07_Section-Footer

HTML_widget_template_2.png

HTML_widget_template_3.png

Let's look at each section and how to change the provided layout, to suit your needs.

01_Section--Header

The header section contains 2 components: 

  • Hero image (banner) - You can add an image that is uploaded to your system as either 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).

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 is uploaded to your  system as either 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 is uploaded into the system as either 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:

  • Headline h3
  • CTA 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>
.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 is uploaded into the system as either 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 pasting a proper 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>

 

 

 

 

 

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