Footers

The footer appears at the bottom of all pages and can contain links, text and images.

Simple footer with custom links and language selector
View code
<footer class="footer mt-6{{#is settings.footer_shape 'none'}}{{#is settings.bg_color settings.bg_color_footer}} border-top{{/is}}{{/is}}" id="footer">

  {{~#isnt settings.footer_shape 'none'}}
    {{!------------
       SVG dividers
       ------------}}
    <svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none"
      {{~#is settings.footer_shape 'book'}}class="svg-shape" viewBox="0 0 1200 120"{{/is~}}
      {{~#is settings.footer_shape 'curve'}}class="svg-shape rotate-180" viewBox="0 0 100 100"{{/is~}}
      {{~#is settings.footer_shape 'curves'}}class="svg-shape top-0" viewBox="0 0 240 24"{{/is~}}
      {{~#is settings.footer_shape 'diagonal'}}class="svg-shape top-0" viewBox="0 0 1000 100"{{/is~}}
      {{~#is settings.footer_shape 'hills'}}class="svg-shape top-0 rotate-180" viewBox="0 0 240 24"{{/is~}}
      {{~#is settings.footer_shape 'mountains'}}class="svg-shape top-0" viewBox="0 0 1000 100"{{/is~}}
      {{~#is settings.footer_shape 'rays'}}class="svg-shape top-0" viewBox="0 0 2600 130.1"{{/is~}}
      {{~#is settings.footer_shape 'triangle'}}class="svg-shape top-0" viewBox="0 0 1000 100"{{/is~}}
      {{~#is settings.footer_shape 'wave'}}class="svg-shape top-0" viewBox="0 0 1000 100"{{/is~}}
      {{~#is settings.footer_shape 'waves'}}class="svg-shape top-0" viewBox="0 0 283.5 27.8"{{/is~}}
      {{~#is settings.footer_shape 'zigzag'}}class="svg-shape top-0" viewBox="0 0 1000 100"{{/is~}}>
      <use xlink:href="#shape-{{settings.footer_shape}}" />
    </svg>
  {{~/isnt}}

  <div class="container py-7{{~#is settings.back_to_top_link_style 'footer'}} relative{{/is}}">

    <nav class="nav font-size-md
      {{~#is settings.footer_layout 'links-stacked'}} mb-4{{/is~}}
      {{~#is settings.footer_layout 'links-right'}} justify-content-end{{/is~}}
      {{~#is settings.footer_layout 'links-center'}} justify-content-center{{/is~}}">

      {{!------------
         Custom links
         ------------}}
      {{~#if settings.footer_link_1_text}}
        <a class="nav-link" href="{{settings.footer_link_1_url}}" target="_blank">
          {{~#if settings.use_translations}}
            {{dc settings.footer_link_1_text}}
          {{else}}
            {{settings.footer_link_1_text}}
          {{/if~}}
        </a>
      {{/if~}}
      {{~#if settings.footer_link_2_text}}
        <a class="nav-link" href="{{settings.footer_link_2_url}}" target="_blank">
          {{#if settings.use_translations}}
            {{dc settings.footer_link_2_text}}
          {{else}}
            {{settings.footer_link_2_text}}
          {{/if}}
        </a>
      {{/if~}}
      {{~#if settings.footer_link_3_text}}
        <a class="nav-link" href="{{settings.footer_link_3_url}}" target="_blank">
          {{#if settings.use_translations}}
            {{dc settings.footer_link_3_text}}
          {{else}}
            {{settings.footer_link_3_text}}
          {{/if}}
        </a>
      {{/if~}}

    {{~#is settings.footer_layout 'links-stacked'}}
    </nav>

    <nav class="nav font-size-md{{#is settings.footer_layout 'links-right'}} justify-content-end{{/is}}">
    {{/is~}}

      {{~#if alternative_locales}}
        {{!-----------------
           Language selector
           -----------------}}
        <div class="relative" x-data="Widgets.dropdown" @click.away="close">
          <button class="nav-link not-a-button {{settings.nav_breakpoint}}:h-full{{#isnt settings.nav_style 'slide-in'}} w-full{{/isnt}}" aria-haspopup="true" :aria-expanded="isExpanded" x-ref="toggle">
            {{current_locale.name}}
            <svg class="svg-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12" aria-hidden="true" :class="{ 'rotate-180': isExpanded }">
              <use xlink:href="#icon-chevron-down" />
            </svg>
          </button>
          <div class="z-dropdown absolute my-2 bg-white border border-radius shadow-md min-w-dropdown" x-ref="menu" x-cloak x-show="isExpanded">
            <div class="py-2 {{settings.nav_breakpoint}}:font-size-sm {{settings.nav_breakpoint}}:text-left">
              {{#each alternative_locales}}
                <a class="dropdown-item" href="{{url}}" dir="{{direction}}" rel="nofollow">
                  {{name}}
                </a>
              {{/each}}
            </div>
          </div>
        </div>
      {{/if~}}

      {{!------------
         Social links
         ------------}}
      {{~#if settings.facebook_link}}
        <a class="nav-link" href="{{settings.facebook_link}}" target="_blank">
          <svg class="svg-icon fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12" aria-hidden="true">
            <path d="M6 0a6 6 0 01.813 11.945V7.63h1.552l.244-1.585H6.812v-.867c0-.658.214-1.242.827-1.242h.985V2.55c-.173-.024-.538-.075-1.23-.075-1.444 0-2.29.767-2.29 2.513v1.055H3.618v1.585h1.484v4.304A6.001 6.001 0 016 0z"></path>
          </svg>
        </a>
      {{/if~}}
      {{~#if settings.twitter_link}}
        <a class="nav-link" href="{{settings.twitter_link}}" target="_blank">
          <svg class="svg-icon fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12" aria-hidden="true">
            <path d="M12 2.184a4.83 4.83 0 01-1.415.397 2.52 2.52 0 001.083-1.396 4.87 4.87 0 01-1.564.612A2.428 2.428 0 008.308 1c-1.36 0-2.463 1.13-2.463 2.524 0 .198.023.39.065.576C3.863 3.994 2.05 2.99.835 1.46a2.564 2.564 0 00-.332 1.27 2.54 2.54 0 001.094 2.102 2.413 2.413 0 01-1.115-.316v.032c0 1.224.849 2.243 1.974 2.476-.363.1-.743.115-1.112.042.314 1.002 1.223 1.734 2.3 1.754A4.857 4.857 0 010 9.866 6.83 6.83 0 003.774 11c4.528 0 7.005-3.847 7.005-7.182 0-.11-.003-.22-.007-.327.482-.358.898-.8 1.228-1.308z"></path>
          </svg>
        </a>
      {{/if~}}
      {{~#if settings.linkedin_link}}
        <a class="nav-link" href="{{settings.linkedin_link}}" target="_blank">
          <svg class="svg-icon fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12" aria-hidden="true">
            <path d="M10.8 0A1.2 1.2 0 0112 1.2v9.6a1.2 1.2 0 01-1.2 1.2H1.2A1.2 1.2 0 010 10.8V1.2A1.2 1.2 0 011.2 0h9.6zM8.09 4.356a1.87 1.87 0 00-1.598.792l-.085.133h-.024v-.783H4.676v5.727h1.778V7.392c0-.747.142-1.47 1.068-1.47.913 0 .925.854.925 1.518v2.785h1.778V7.084l-.005-.325c-.05-1.38-.456-2.403-2.13-2.403zm-4.531.142h-1.78v5.727h1.78V4.498zm-.89-2.846a1.032 1.032 0 100 2.064 1.032 1.032 0 000-2.064z"></path>
          </svg>
        </a>
      {{/if~}}
      {{~#if settings.instagram_link}}
        <a class="nav-link" href="{{settings.instagram_link}}" target="_blank">
          <svg class="svg-icon fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" aria-hidden="true">
            <path d="M224.1 141c-63.6 0-114.9 51.3-114.9 114.9s51.3 114.9 114.9 114.9S339 319.5 339 255.9 287.7 141 224.1 141zm0 189.6c-41.1 0-74.7-33.5-74.7-74.7s33.5-74.7 74.7-74.7 74.7 33.5 74.7 74.7-33.6 74.7-74.7 74.7zm146.4-194.3c0 14.9-12 26.8-26.8 26.8-14.9 0-26.8-12-26.8-26.8s12-26.8 26.8-26.8 26.8 12 26.8 26.8zm76.1 27.2c-1.7-35.9-9.9-67.7-36.2-93.9-26.2-26.2-58-34.4-93.9-36.2-37-2.1-147.9-2.1-184.9 0-35.8 1.7-67.6 9.9-93.9 36.1s-34.4 58-36.2 93.9c-2.1 37-2.1 147.9 0 184.9 1.7 35.9 9.9 67.7 36.2 93.9s58 34.4 93.9 36.2c37 2.1 147.9 2.1 184.9 0 35.9-1.7 67.7-9.9 93.9-36.2 26.2-26.2 34.4-58 36.2-93.9 2.1-37 2.1-147.8 0-184.8zM398.8 388c-7.8 19.6-22.9 34.7-42.6 42.6-29.5 11.7-99.5 9-132.1 9s-102.7 2.6-132.1-9c-19.6-7.8-34.7-22.9-42.6-42.6-11.7-29.5-9-99.5-9-132.1s-2.6-102.7 9-132.1c7.8-19.6 22.9-34.7 42.6-42.6 29.5-11.7 99.5-9 132.1-9s102.7-2.6 132.1 9c19.6 7.8 34.7 22.9 42.6 42.6 11.7 29.5 9 99.5 9 132.1s2.7 102.7-9 132.1z"></path>
          </svg>
        </a>
      {{/if~}}
      {{~#if settings.youtube_link}}
        <a class="nav-link" href="{{settings.youtube_link}}" target="_blank">
          <svg class="svg-icon fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" aria-hidden="true">
            <path d="M549.655 124.083c-6.281-23.65-24.787-42.276-48.284-48.597C458.781 64 288 64 288 64S117.22 64 74.629 75.486c-23.497 6.322-42.003 24.947-48.284 48.597-11.412 42.867-11.412 132.305-11.412 132.305s0 89.438 11.412 132.305c6.281 23.65 24.787 41.5 48.284 47.821C117.22 448 288 448 288 448s170.78 0 213.371-11.486c23.497-6.321 42.003-24.171 48.284-47.821 11.412-42.867 11.412-132.305 11.412-132.305s0-89.438-11.412-132.305zm-317.51 213.508V175.185l142.739 81.205-142.739 81.201z"></path>
          </svg>
        </a>
      {{/if~}}

      {{~#if settings.show_credit_link}}
        {{!-----------
           Credit link
           -----------}}
        <a class="nav-link{{#is settings.footer_layout 'links-left'}} ml-auto{{/is}}{{#is settings.footer_layout 'links-stacked'}} ml-auto{{/is}}" href="https://www.zenplates.co" target="_blank">
          <span class="sr-only">Zendesk </span>Theme by Zenplates
        </a>
      {{/if~}}

    </nav>

    {{~#isnt settings.back_to_top_link_style 'none'}}
      {{!----------------
         Back to Top link
         ----------------}}
      <div
        class="{{#is settings.back_to_top_link_style 'footer'}}absolute top-0 right-0{{else}}fixed bottom-0 left-0{{/is}}"
        data-element="back-to-top"
        data-template="back-to-top-link"
        data-threshold="{{#is settings.back_to_top_link_style 'footer'}}0{{else}}250px{{/is}}">
      </div>
    {{/isnt~}}

  </div>
</footer>
4-column with company statement
View code
<footer class="footer py-6 mt-6 border-top" id="footer">
  <div class="container">
    <div class="row">
      <div class="md:col-6 lg:col-3">
        <svg class="mt-5 mb-4 w-auto fill-current" width="112px" height="23px" viewBox="0 0 112 23" xmlns="http://www.w3.org/2000/svg">
          <path d="M10.244,17.342 L10.244,14.456 L4.394,14.456 L10.14,7.176 L10.14,4.784 L0,4.784 L0,7.67 L5.668,7.67 L0,14.872 L0,17.342 L10.244,17.342 Z M18.902,17.654 C21.086,17.654 22.8106667,17.0733333 24.076,15.912 L24.076,15.912 L22.62,13.78 C22.2386667,14.1613333 21.723,14.4646667 21.073,14.69 C20.423,14.9153333 19.8206667,15.028 19.266,15.028 C18.2433333,15.028 17.4113333,14.7506667 16.77,14.196 C16.1286667,13.6413333 15.756,12.948 15.652,12.116 L15.652,12.116 L24.986,12.116 L24.986,11.388 C24.986,9.32533333 24.4053333,7.657 23.244,6.383 C22.0826667,5.109 20.566,4.472 18.694,4.472 C16.8046667,4.472 15.249,5.10466667 14.027,6.37 C12.805,7.63533333 12.194,9.19533333 12.194,11.05 C12.194,13.026 12.8266667,14.6206667 14.092,15.834 C15.3573333,17.0473333 16.9606667,17.654 18.902,17.654 Z M21.788,9.88 L15.6,9.88 C15.6866667,9.152 15.99,8.50633333 16.51,7.943 C17.03,7.37966667 17.758,7.098 18.694,7.098 C19.682,7.098 20.4316667,7.384 20.943,7.956 C21.4543333,8.528 21.736,9.16933333 21.788,9.88 L21.788,9.88 Z M30.68,17.342 L30.68,8.892 C31.3906667,7.904 32.344,7.41 33.54,7.41 C35.0826667,7.41 35.854,8.19 35.854,9.75 L35.854,9.75 L35.854,17.342 L39.156,17.342 L39.156,8.476 C39.156,7.228 38.8136667,6.24866667 38.129,5.538 C37.4443333,4.82733333 36.426,4.472 35.074,4.472 C33.2366667,4.472 31.772,5.122 30.68,6.422 L30.68,6.422 L30.68,4.784 L27.378,4.784 L27.378,17.342 L30.68,17.342 Z M45.734,22.126 L45.734,15.73 C46.7393333,17.0126667 48.0306667,17.654 49.608,17.654 C51.2546667,17.654 52.5936667,17.0646667 53.625,15.886 C54.6563333,14.7073333 55.172,13.0953333 55.172,11.05 C55.172,9.00466667 54.6563333,7.397 53.625,6.227 C52.5936667,5.057 51.2546667,4.472 49.608,4.472 C48.0133333,4.472 46.722,5.10466667 45.734,6.37 L45.734,6.37 L45.734,4.784 L42.432,4.784 L42.432,22.126 L45.734,22.126 Z M48.568,14.716 C48.048,14.716 47.515,14.5773333 46.969,14.3 C46.423,14.0226667 46.0113333,13.6846667 45.734,13.286 L45.734,13.286 L45.734,8.84 C46.0113333,8.44133333 46.4186667,8.10333333 46.956,7.826 C47.4933333,7.54866667 48.0306667,7.41 48.568,7.41 C49.5213333,7.41 50.2883333,7.748 50.869,8.424 C51.4496667,9.1 51.74,9.97533333 51.74,11.05 C51.74,12.142 51.4496667,13.026 50.869,13.702 C50.2883333,14.378 49.5213333,14.716 48.568,14.716 Z M60.892,17.342 L60.892,-1.13686838e-13 L57.59,-1.13686838e-13 L57.59,17.342 L60.892,17.342 Z M67.73,17.654 C69.4806667,17.654 70.8066667,17.1166667 71.708,16.042 L71.708,16.042 L71.708,17.342 L75.01,17.342 L75.01,9.23 C75.01,7.54866667 74.4986667,6.33533333 73.476,5.59 C72.4533333,4.84466667 71.136,4.472 69.524,4.472 C67.3573333,4.472 65.5286667,5.13066667 64.038,6.448 L64.038,6.448 L65.286,8.658 C66.3606667,7.67 67.5826667,7.176 68.952,7.176 C69.784,7.176 70.4513333,7.36666667 70.954,7.748 C71.4566667,8.12933333 71.708,8.64066667 71.708,9.282 L71.708,9.282 L71.708,10.972 C70.8413333,9.94933333 69.5153333,9.438 67.73,9.438 C66.5686667,9.438 65.5503333,9.776 64.675,10.452 C63.7996667,11.128 63.362,12.142 63.362,13.494 C63.362,14.794 63.8083333,15.8123333 64.701,16.549 C65.5936667,17.2856667 66.6033333,17.654 67.73,17.654 Z M69.056,15.418 C68.38,15.418 67.8166667,15.2533333 67.366,14.924 C66.9153333,14.5946667 66.69,14.144 66.69,13.572 C66.69,12.9826667 66.9153333,12.519 67.366,12.181 C67.8166667,11.843 68.38,11.674 69.056,11.674 C70.2866667,11.674 71.1706667,12.038 71.708,12.766 L71.708,12.766 L71.708,14.326 C71.1706667,15.054 70.2866667,15.418 69.056,15.418 Z M82.498,17.654 C83.7286667,17.654 84.6473333,17.3853333 85.254,16.848 L85.254,16.848 L84.552,14.352 C84.3093333,14.5946667 83.928,14.716 83.408,14.716 C83.0613333,14.716 82.784,14.586 82.576,14.326 C82.368,14.066 82.264,13.7366667 82.264,13.338 L82.264,13.338 L82.264,7.67 L84.812,7.67 L84.812,4.784 L82.264,4.784 L82.264,1.352 L78.936,1.352 L78.936,4.784 L76.856,4.784 L76.856,7.67 L78.936,7.67 L78.936,14.222 C78.936,15.3313333 79.2393333,16.1806667 79.846,16.77 C80.4526667,17.3593333 81.3366667,17.654 82.498,17.654 Z M92.976,17.654 C95.16,17.654 96.8846667,17.0733333 98.15,15.912 L98.15,15.912 L96.694,13.78 C96.3126667,14.1613333 95.797,14.4646667 95.147,14.69 C94.497,14.9153333 93.8946667,15.028 93.34,15.028 C92.3173333,15.028 91.4853333,14.7506667 90.844,14.196 C90.2026667,13.6413333 89.83,12.948 89.726,12.116 L89.726,12.116 L99.06,12.116 L99.06,11.388 C99.06,9.32533333 98.4793333,7.657 97.318,6.383 C96.1566667,5.109 94.64,4.472 92.768,4.472 C90.8786667,4.472 89.323,5.10466667 88.101,6.37 C86.879,7.63533333 86.268,9.19533333 86.268,11.05 C86.268,13.026 86.9006667,14.6206667 88.166,15.834 C89.4313333,17.0473333 91.0346667,17.654 92.976,17.654 Z M95.862,9.88 L89.674,9.88 C89.7606667,9.152 90.064,8.50633333 90.584,7.943 C91.104,7.37966667 91.832,7.098 92.768,7.098 C93.756,7.098 94.5056667,7.384 95.017,7.956 C95.5283333,8.528 95.81,9.16933333 95.862,9.88 L95.862,9.88 Z M105.976,17.654 C107.674667,17.654 109.005,17.277 109.967,16.523 C110.929,15.769 111.41,14.8026667 111.41,13.624 C111.41,12.8266667 111.228,12.1506667 110.864,11.596 C110.5,11.0413333 110.040667,10.6383333 109.486,10.387 C108.931333,10.1356667 108.333333,9.919 107.692,9.737 C107.050667,9.555 106.452667,9.42066667 105.898,9.334 C105.343333,9.24733333 104.884,9.113 104.52,8.931 C104.156,8.749 103.974,8.51933333 103.974,8.242 C103.974,7.878 104.156,7.579 104.52,7.345 C104.884,7.111 105.360667,6.994 105.95,6.994 C106.695333,6.994 107.401667,7.13266667 108.069,7.41 C108.736333,7.68733333 109.269333,8.034 109.668,8.45 L109.668,8.45 L110.994,6.188 C109.555333,5.044 107.865333,4.472 105.924,4.472 C104.329333,4.472 103.072667,4.85333333 102.154,5.616 C101.235333,6.37866667 100.776,7.31466667 100.776,8.424 C100.776,9.204 100.962333,9.85833333 101.335,10.387 C101.707667,10.9156667 102.167,11.3013333 102.713,11.544 C103.259,11.7866667 103.857,11.9946667 104.507,12.168 C105.157,12.3413333 105.755,12.4713333 106.301,12.558 C106.847,12.6446667 107.306333,12.7876667 107.679,12.987 C108.051667,13.1863333 108.238,13.442 108.238,13.754 C108.238,14.17 108.060333,14.4993333 107.705,14.742 C107.349667,14.9846667 106.825333,15.106 106.132,15.106 C105.386667,15.106 104.598,14.9326667 103.766,14.586 C102.934,14.2393333 102.275333,13.8406667 101.79,13.39 L101.79,13.39 L100.36,15.704 C101.018667,16.3106667 101.846333,16.7873333 102.843,17.134 C103.839667,17.4806667 104.884,17.654 105.976,17.654 Z" fill-rule="nonzero"></path>
        </svg>
        <p class="text-gray-600">
          We build software that lets you deliver the best possible experience to your customers.
        </p>
        <div class="my-5 text-gray-500 font-size-lg">
          <ul class="share">
            {{~#if settings.facebook_link}}
              <li>
                <a class="share-facebook" href="{{settings.facebook_link}}" aria-label="Facebook">
                  <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" focusable="false" viewBox="0 0 12 12">
                    <path fill="currentColor" d="M6 0a6 6 0 01.813 11.945V7.63h1.552l.244-1.585H6.812v-.867c0-.658.214-1.242.827-1.242h.985V2.55c-.173-.024-.538-.075-1.23-.075-1.444 0-2.29.767-2.29 2.513v1.055H3.618v1.585h1.484v4.304A6.001 6.001 0 016 0z"></path>
                  </svg>
                </a>
              </li>
            {{/if~}}
            {{~#if settings.twitter_link}}
              <li>
                <a class="share-twitter" href="{{settings.twitter_link}}" aria-label="Twitter">
                  <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" focusable="false" viewBox="0 0 12 12">
                    <path fill="currentColor" d="M12 2.184a4.83 4.83 0 01-1.415.397 2.52 2.52 0 001.083-1.396 4.87 4.87 0 01-1.564.612A2.428 2.428 0 008.308 1c-1.36 0-2.463 1.13-2.463 2.524 0 .198.023.39.065.576C3.863 3.994 2.05 2.99.835 1.46a2.564 2.564 0 00-.332 1.27 2.54 2.54 0 001.094 2.102 2.413 2.413 0 01-1.115-.316v.032c0 1.224.849 2.243 1.974 2.476-.363.1-.743.115-1.112.042.314 1.002 1.223 1.734 2.3 1.754A4.857 4.857 0 010 9.866 6.83 6.83 0 003.774 11c4.528 0 7.005-3.847 7.005-7.182 0-.11-.003-.22-.007-.327.482-.358.898-.8 1.228-1.308z"></path>
                  </svg>
                </a>
              </li>
            {{/if~}}
            {{~#if settings.linkedin_link}}
              <li>
                <a class="share-linkedin" href="{{settings.linkedin_link}}" aria-label="LinkedIn">
                  <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" focusable="false" viewBox="0 0 12 12">
                    <path fill="currentColor" d="M10.8 0A1.2 1.2 0 0112 1.2v9.6a1.2 1.2 0 01-1.2 1.2H1.2A1.2 1.2 0 010 10.8V1.2A1.2 1.2 0 011.2 0h9.6zM8.09 4.356a1.87 1.87 0 00-1.598.792l-.085.133h-.024v-.783H4.676v5.727h1.778V7.392c0-.747.142-1.47 1.068-1.47.913 0 .925.854.925 1.518v2.785h1.778V7.084l-.005-.325c-.05-1.38-.456-2.403-2.13-2.403zm-4.531.142h-1.78v5.727h1.78V4.498zm-.89-2.846a1.032 1.032 0 100 2.064 1.032 1.032 0 000-2.064z"></path>
                  </svg>
                </a>
              </li>
            {{/if~}}
          </ul>
        </div>
      </div>
      <div class="md:col-6 lg:col-9">
        <div class="row">
          <div class="col-6 lg:col-3">
            <h3 class="tracking-wider uppercase font-size-md">
              Products
            </h3>
            <ul class="list-unstyled">
              <li>
                <a class="nav-link px-0 py-2" href="#">
                  Themes
                </a>
              </li>
              <li>
                <a class="nav-link px-0 py-2" href="#">
                  Extensions
                </a>
              </li>
              <li>
                <a class="nav-link px-0 py-2" href="#">
                  Patterns
                </a>
              </li>
            </ul>
          </div>
          <div class="col-6 lg:col-3">
            <h3 class="tracking-wider uppercase font-size-md">
              Services
            </h3>
            <ul class="list-unstyled">
              <li>
                <a class="nav-link px-0 py-2" href="#">
                  Branding
                </a>
              </li>
              <li>
                <a class="nav-link px-0 py-2" href="#">
                  Customization
                </a>
              </li>
            </ul>
          </div>
          <div class="col-6 lg:col-3">
            <h3 class="tracking-wider uppercase font-size-md">
              Company
            </h3>
            <ul class="list-unstyled">
              <li>
                <a class="nav-link px-0 py-2" href="#">
                  About
                </a>
              </li>
              <li>
                <a class="nav-link px-0 py-2" href="#">
                  Blog
                </a>
              </li>
              <li>
                <a class="nav-link px-0 py-2" href="#">
                  Partners
                </a>
              </li>
            </ul>
          </div>
          <div class="col-6 lg:col-3">
            <h3 class="tracking-wider uppercase font-size-md">
              Legal
            </h3>
            <ul class="list-unstyled">
              <li>
                <a class="nav-link px-0 py-2" href="#">
                  Privacy
                </a>
              </li>
              <li>
                <a class="nav-link px-0 py-2" href="#">
                  Terms
                </a>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    <p class="text-gray-600 font-size-md mt-6">
      © 2022 Zenplates Ltd.
    </p>
  </div>
</footer>
Dark 4-column with social links
View code
<footer class="footer py-6 mt-6 border-top" id="footer">
  <div class="container">
    <div class="row">
      <div class="col-6 lg:col-3">
        <h3 class="text-white">
          Products
        </h3>
        <ul class="list-unstyled">
          <li>
            <a class="nav-link px-0 py-2" href="#">
              Themes
            </a>
          </li>
          <li>
            <a class="nav-link px-0 py-2" href="#">
              Extensions
            </a>
          </li>
          <li>
            <a class="nav-link px-0 py-2" href="#">
              Patterns
            </a>
          </li>
        </ul>
      </div>
      <div class="col-6 lg:col-3">
        <h3 class="text-white">
          Services
        </h3>
        <ul class="list-unstyled">
          <li>
            <a class="nav-link px-0 py-2" href="#">
              Branding
            </a>
          </li>
          <li>
            <a class="nav-link px-0 py-2" href="#">
              Customization
            </a>
          </li>
        </ul>
      </div>
      <div class="col-6 lg:col-3">
        <h3 class="text-white">
          Company
        </h3>
        <ul class="list-unstyled">
          <li>
            <a class="nav-link px-0 py-2" href="#">
              About
            </a>
          </li>
          <li>
            <a class="nav-link px-0 py-2" href="#">
              Blog
            </a>
          </li>
          <li>
            <a class="nav-link px-0 py-2" href="#">
              Partners
            </a>
          </li>
        </ul>
      </div>
      <div class="col-6 lg:col-3">
        <h3 class="text-white">
          Legal
        </h3>
        <ul class="list-unstyled">
          <li>
            <a class="nav-link px-0 py-2" href="#">
              Privacy
            </a>
          </li>
          <li>
            <a class="nav-link px-0 py-2" href="#">
              Terms
            </a>
          </li>
        </ul>
      </div>
    </div>
    <div class="flex justify-content-between my-6 pt-6 border-top border-top-gray-800">
      <p class="text-gray-600 font-size-md mb-0">
        © 2022 Zenplates Ltd.
      </p>
      <ul class="share text-gray-400">
        {{~#if settings.facebook_link}}
          <li>
            <a href="#" class="share-facebook" aria-label="Facebook">
              <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" focusable="false" viewBox="0 0 12 12">
                <path fill="currentColor" d="M6 0a6 6 0 01.813 11.945V7.63h1.552l.244-1.585H6.812v-.867c0-.658.214-1.242.827-1.242h.985V2.55c-.173-.024-.538-.075-1.23-.075-1.444 0-2.29.767-2.29 2.513v1.055H3.618v1.585h1.484v4.304A6.001 6.001 0 016 0z"></path>
              </svg>
            </a>
          </li>
        {{/if~}}
        {{~#if settings.twitter_link}}
          <li>
            <a href="#" class="share-twitter" aria-label="Twitter">
              <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" focusable="false" viewBox="0 0 12 12">
                <path fill="currentColor" d="M12 2.184a4.83 4.83 0 01-1.415.397 2.52 2.52 0 001.083-1.396 4.87 4.87 0 01-1.564.612A2.428 2.428 0 008.308 1c-1.36 0-2.463 1.13-2.463 2.524 0 .198.023.39.065.576C3.863 3.994 2.05 2.99.835 1.46a2.564 2.564 0 00-.332 1.27 2.54 2.54 0 001.094 2.102 2.413 2.413 0 01-1.115-.316v.032c0 1.224.849 2.243 1.974 2.476-.363.1-.743.115-1.112.042.314 1.002 1.223 1.734 2.3 1.754A4.857 4.857 0 010 9.866 6.83 6.83 0 003.774 11c4.528 0 7.005-3.847 7.005-7.182 0-.11-.003-.22-.007-.327.482-.358.898-.8 1.228-1.308z"></path>
              </svg>
            </a>
          </li>
        {{/if~}}
        {{~#if settings.linkedin_link}}
          <li>
            <a href="#" class="share-linkedin" aria-label="LinkedIn">
              <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" focusable="false" viewBox="0 0 12 12">
                <path fill="currentColor" d="M10.8 0A1.2 1.2 0 0112 1.2v9.6a1.2 1.2 0 01-1.2 1.2H1.2A1.2 1.2 0 010 10.8V1.2A1.2 1.2 0 011.2 0h9.6zM8.09 4.356a1.87 1.87 0 00-1.598.792l-.085.133h-.024v-.783H4.676v5.727h1.778V7.392c0-.747.142-1.47 1.068-1.47.913 0 .925.854.925 1.518v2.785h1.778V7.084l-.005-.325c-.05-1.38-.456-2.403-2.13-2.403zm-4.531.142h-1.78v5.727h1.78V4.498zm-.89-2.846a1.032 1.032 0 100 2.064 1.032 1.032 0 000-2.064z"></path>
              </svg>
            </a>
          </li>
        {{/if~}}
      </ul>
    </div>
  </div>
</footer>
Stacked with language selector
View code
<footer class="footer mt-6" id="footer">
  <div class="bg-gray-100 border-top py-3">
    <div class="container">
      <div class="row">
        <div class="nav flex-1 flex-column my-1 md:flex-row">
          {{~#if settings.footer_link_1_text}}
            <a class="nav-link" href="{{settings.footer_link_1_url}}" target="_blank">
              {{~#if settings.use_translations}}
                {{dc settings.footer_link_1_text}}
              {{else}}
                {{settings.footer_link_1_text}}
              {{/if~}}
            </a>
          {{/if~}}
          {{~#if settings.footer_link_2_text}}
            <a class="nav-link" href="{{settings.footer_link_2_url}}" target="_blank">
              {{#if settings.use_translations}}
                {{dc settings.footer_link_2_text}}
              {{else}}
                {{settings.footer_link_2_text}}
              {{/if}}
            </a>
          {{/if~}}
          {{~#if settings.footer_link_3_text}}
            <a class="nav-link" href="{{settings.footer_link_3_url}}" target="_blank">
              {{#if settings.use_translations}}
                {{dc settings.footer_link_3_text}}
              {{else}}
                {{settings.footer_link_3_text}}
              {{/if}}
            </a>
          {{/if~}}
          {{~#if alternative_locales}}
            <div class="relative" x-data="Widgets.dropdown" @click.away="close">
              <button class="nav-link not-a-button" aria-haspopup="true" :aria-expanded="isExpanded" x-ref="toggle">
                {{current_locale.name}}
                <svg class="svg-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12" aria-hidden="true" :class="{ 'rotate-180': isExpanded }">
                  <path fill="none" stroke="currentColor" stroke-linecap="round" d="M3 4.5l2.6 2.6c.2.2.5.2.7 0L9 4.5"/>
                </svg>
              </button>
              <div class="dropdown-menu invisible" :aria-expanded="isExpanded" x-ref="menu" x-show="isExpanded">
                {{#each alternative_locales}}
                  <a class="dropdown-item" href="{{url}}" dir="{{direction}}" rel="nofollow">
                    {{name}}
                  </a>
                {{/each}}
              </div>
            </div>
          {{/if~}}
        </div>
      </div>
    </div>
  </div>
  <div class="border-top py-3">
    <div class="container">
      <div class="row align-items-baseline">
        <nav class="nav share mr-auto">
          {{~#if settings.facebook_link}}
            <a href="#" class="nav-link px-3 flex align-items-center share-facebook" aria-label="Facebook">
              <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" focusable="false" viewBox="0 0 12 12">
                <path fill="currentColor" d="M6 0a6 6 0 01.813 11.945V7.63h1.552l.244-1.585H6.812v-.867c0-.658.214-1.242.827-1.242h.985V2.55c-.173-.024-.538-.075-1.23-.075-1.444 0-2.29.767-2.29 2.513v1.055H3.618v1.585h1.484v4.304A6.001 6.001 0 016 0z"></path>
              </svg>
            </a>
          {{/if~}}
          {{~#if settings.twitter_link}}
            <a href="#" class="nav-link px-3 flex align-items-center share-twitter" aria-label="Twitter">
              <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" focusable="false" viewBox="0 0 12 12">
                <path fill="currentColor" d="M12 2.184a4.83 4.83 0 01-1.415.397 2.52 2.52 0 001.083-1.396 4.87 4.87 0 01-1.564.612A2.428 2.428 0 008.308 1c-1.36 0-2.463 1.13-2.463 2.524 0 .198.023.39.065.576C3.863 3.994 2.05 2.99.835 1.46a2.564 2.564 0 00-.332 1.27 2.54 2.54 0 001.094 2.102 2.413 2.413 0 01-1.115-.316v.032c0 1.224.849 2.243 1.974 2.476-.363.1-.743.115-1.112.042.314 1.002 1.223 1.734 2.3 1.754A4.857 4.857 0 010 9.866 6.83 6.83 0 003.774 11c4.528 0 7.005-3.847 7.005-7.182 0-.11-.003-.22-.007-.327.482-.358.898-.8 1.228-1.308z"></path>
              </svg>
            </a>
          {{/if~}}
          {{~#if settings.linkedin_link}}
            <a href="#" class="nav-link px-3 flex align-items-center share-linkedin" aria-label="LinkedIn">
              <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" focusable="false" viewBox="0 0 12 12">
                <path fill="currentColor" d="M10.8 0A1.2 1.2 0 0112 1.2v9.6a1.2 1.2 0 01-1.2 1.2H1.2A1.2 1.2 0 010 10.8V1.2A1.2 1.2 0 011.2 0h9.6zM8.09 4.356a1.87 1.87 0 00-1.598.792l-.085.133h-.024v-.783H4.676v5.727h1.778V7.392c0-.747.142-1.47 1.068-1.47.913 0 .925.854.925 1.518v2.785h1.778V7.084l-.005-.325c-.05-1.38-.456-2.403-2.13-2.403zm-4.531.142h-1.78v5.727h1.78V4.498zm-.89-2.846a1.032 1.032 0 100 2.064 1.032 1.032 0 000-2.064z"></path>
              </svg>
            </a>
          {{/if~}}
        </nav>
        <div class="m-3 md:ml-auto font-size-md text-gray-600">
          © 2022 Zenplates Ltd.
        </div>
      </div>
    </div>
  </div>
</footer>
Simple centered footer
View code
<footer class="footer py-6 mt-6 border-top" id="footer">
  <div class="container flex flex-column align-items-center">
    <nav class="nav justify-content-center mb-4" role="menu">
      {{~#if settings.footer_link_1_text}}
        <a class="nav-link" href="{{settings.footer_link_1_url}}" target="_blank">
          {{~#if settings.use_translations}}
            {{dc settings.footer_link_1_text}}
          {{else}}
            {{settings.footer_link_1_text}}
          {{/if~}}
        </a>
      {{/if~}}
      {{~#if settings.footer_link_2_text}}
        <a class="nav-link" href="{{settings.footer_link_2_url}}" target="_blank">
          {{#if settings.use_translations}}
            {{dc settings.footer_link_2_text}}
          {{else}}
            {{settings.footer_link_2_text}}
          {{/if}}
        </a>
      {{/if~}}
      {{~#if settings.footer_link_3_text}}
        <a class="nav-link" href="{{settings.footer_link_3_url}}" target="_blank">
          {{#if settings.use_translations}}
            {{dc settings.footer_link_3_text}}
          {{else}}
            {{settings.footer_link_3_text}}
          {{/if}}
        </a>
      {{/if~}}
    </nav>
    <nav class="share font-size-lg text-gray-500">
      {{~#if settings.facebook_link}}
        <a class="inline-flex share-facebook" href="{{settings.facebook_link}}" target="_blank">
          <svg class="svg-icon fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12" aria-hidden="true">
            <path d="M6 0a6 6 0 01.813 11.945V7.63h1.552l.244-1.585H6.812v-.867c0-.658.214-1.242.827-1.242h.985V2.55c-.173-.024-.538-.075-1.23-.075-1.444 0-2.29.767-2.29 2.513v1.055H3.618v1.585h1.484v4.304A6.001 6.001 0 016 0z"></path>
          </svg>
        </a>
      {{/if~}}
      {{~#if settings.twitter_link}}
        <a class="inline-flex share-twitter" href="{{settings.twitter_link}}" target="_blank">
          <svg class="svg-icon fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12" aria-hidden="true">
            <path d="M12 2.184a4.83 4.83 0 01-1.415.397 2.52 2.52 0 001.083-1.396 4.87 4.87 0 01-1.564.612A2.428 2.428 0 008.308 1c-1.36 0-2.463 1.13-2.463 2.524 0 .198.023.39.065.576C3.863 3.994 2.05 2.99.835 1.46a2.564 2.564 0 00-.332 1.27 2.54 2.54 0 001.094 2.102 2.413 2.413 0 01-1.115-.316v.032c0 1.224.849 2.243 1.974 2.476-.363.1-.743.115-1.112.042.314 1.002 1.223 1.734 2.3 1.754A4.857 4.857 0 010 9.866 6.83 6.83 0 003.774 11c4.528 0 7.005-3.847 7.005-7.182 0-.11-.003-.22-.007-.327.482-.358.898-.8 1.228-1.308z"></path>
          </svg>
        </a>
      {{/if~}}
      {{~#if settings.linkedin_link}}
        <a class="inline-flex share-linkedin" href="{{settings.linkedin_link}}" target="_blank">
          <svg class="svg-icon fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12" aria-hidden="true">
            <path d="M10.8 0A1.2 1.2 0 0112 1.2v9.6a1.2 1.2 0 01-1.2 1.2H1.2A1.2 1.2 0 010 10.8V1.2A1.2 1.2 0 011.2 0h9.6zM8.09 4.356a1.87 1.87 0 00-1.598.792l-.085.133h-.024v-.783H4.676v5.727h1.778V7.392c0-.747.142-1.47 1.068-1.47.913 0 .925.854.925 1.518v2.785h1.778V7.084l-.005-.325c-.05-1.38-.456-2.403-2.13-2.403zm-4.531.142h-1.78v5.727h1.78V4.498zm-.89-2.846a1.032 1.032 0 100 2.064 1.032 1.032 0 000-2.064z"></path>
          </svg>
        </a>
      {{/if~}}
      {{~#if settings.instagram_link}}
        <a class="inline-flex share-instagram" href="{{settings.instagram_link}}" target="_blank">
          <svg class="svg-icon fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" aria-hidden="true">
            <path d="M224.1 141c-63.6 0-114.9 51.3-114.9 114.9s51.3 114.9 114.9 114.9S339 319.5 339 255.9 287.7 141 224.1 141zm0 189.6c-41.1 0-74.7-33.5-74.7-74.7s33.5-74.7 74.7-74.7 74.7 33.5 74.7 74.7-33.6 74.7-74.7 74.7zm146.4-194.3c0 14.9-12 26.8-26.8 26.8-14.9 0-26.8-12-26.8-26.8s12-26.8 26.8-26.8 26.8 12 26.8 26.8zm76.1 27.2c-1.7-35.9-9.9-67.7-36.2-93.9-26.2-26.2-58-34.4-93.9-36.2-37-2.1-147.9-2.1-184.9 0-35.8 1.7-67.6 9.9-93.9 36.1s-34.4 58-36.2 93.9c-2.1 37-2.1 147.9 0 184.9 1.7 35.9 9.9 67.7 36.2 93.9s58 34.4 93.9 36.2c37 2.1 147.9 2.1 184.9 0 35.9-1.7 67.7-9.9 93.9-36.2 26.2-26.2 34.4-58 36.2-93.9 2.1-37 2.1-147.8 0-184.8zM398.8 388c-7.8 19.6-22.9 34.7-42.6 42.6-29.5 11.7-99.5 9-132.1 9s-102.7 2.6-132.1-9c-19.6-7.8-34.7-22.9-42.6-42.6-11.7-29.5-9-99.5-9-132.1s-2.6-102.7 9-132.1c7.8-19.6 22.9-34.7 42.6-42.6 29.5-11.7 99.5-9 132.1-9s102.7-2.6 132.1 9c19.6 7.8 34.7 22.9 42.6 42.6 11.7 29.5 9 99.5 9 132.1s2.7 102.7-9 132.1z"></path>
          </svg>
        </a>
      {{/if~}}
      {{~#if settings.youtube_link}}
        <a class="inline-flex share-youtube" href="{{settings.youtube_link}}" target="_blank">
          <svg class="svg-icon fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" aria-hidden="true">
            <path d="M549.655 124.083c-6.281-23.65-24.787-42.276-48.284-48.597C458.781 64 288 64 288 64S117.22 64 74.629 75.486c-23.497 6.322-42.003 24.947-48.284 48.597-11.412 42.867-11.412 132.305-11.412 132.305s0 89.438 11.412 132.305c6.281 23.65 24.787 41.5 48.284 47.821C117.22 448 288 448 288 448s170.78 0 213.371-11.486c23.497-6.321 42.003-24.171 48.284-47.821 11.412-42.867 11.412-132.305 11.412-132.305s0-89.438-11.412-132.305zm-317.51 213.508V175.185l142.739 81.205-142.739 81.201z"></path>
          </svg>
        </a>
      {{/if~}}
    </nav>
    <p class="text-gray-600">
      © 2022 Zenplates Ltd.
    </p>
  </div>
</footer>
3-column with top border
View code
<footer class="footer py-6 mt-6 border-top" id="footer">
  <div class="container">
    <div class="row">
      <div class="md:col-6 lg:col-3">
        <svg class="mt-5 mb-4 w-auto fill-current" width="112px" height="23px" viewBox="0 0 112 23" xmlns="http://www.w3.org/2000/svg">
          <path d="M10.244,17.342 L10.244,14.456 L4.394,14.456 L10.14,7.176 L10.14,4.784 L0,4.784 L0,7.67 L5.668,7.67 L0,14.872 L0,17.342 L10.244,17.342 Z M18.902,17.654 C21.086,17.654 22.8106667,17.0733333 24.076,15.912 L24.076,15.912 L22.62,13.78 C22.2386667,14.1613333 21.723,14.4646667 21.073,14.69 C20.423,14.9153333 19.8206667,15.028 19.266,15.028 C18.2433333,15.028 17.4113333,14.7506667 16.77,14.196 C16.1286667,13.6413333 15.756,12.948 15.652,12.116 L15.652,12.116 L24.986,12.116 L24.986,11.388 C24.986,9.32533333 24.4053333,7.657 23.244,6.383 C22.0826667,5.109 20.566,4.472 18.694,4.472 C16.8046667,4.472 15.249,5.10466667 14.027,6.37 C12.805,7.63533333 12.194,9.19533333 12.194,11.05 C12.194,13.026 12.8266667,14.6206667 14.092,15.834 C15.3573333,17.0473333 16.9606667,17.654 18.902,17.654 Z M21.788,9.88 L15.6,9.88 C15.6866667,9.152 15.99,8.50633333 16.51,7.943 C17.03,7.37966667 17.758,7.098 18.694,7.098 C19.682,7.098 20.4316667,7.384 20.943,7.956 C21.4543333,8.528 21.736,9.16933333 21.788,9.88 L21.788,9.88 Z M30.68,17.342 L30.68,8.892 C31.3906667,7.904 32.344,7.41 33.54,7.41 C35.0826667,7.41 35.854,8.19 35.854,9.75 L35.854,9.75 L35.854,17.342 L39.156,17.342 L39.156,8.476 C39.156,7.228 38.8136667,6.24866667 38.129,5.538 C37.4443333,4.82733333 36.426,4.472 35.074,4.472 C33.2366667,4.472 31.772,5.122 30.68,6.422 L30.68,6.422 L30.68,4.784 L27.378,4.784 L27.378,17.342 L30.68,17.342 Z M45.734,22.126 L45.734,15.73 C46.7393333,17.0126667 48.0306667,17.654 49.608,17.654 C51.2546667,17.654 52.5936667,17.0646667 53.625,15.886 C54.6563333,14.7073333 55.172,13.0953333 55.172,11.05 C55.172,9.00466667 54.6563333,7.397 53.625,6.227 C52.5936667,5.057 51.2546667,4.472 49.608,4.472 C48.0133333,4.472 46.722,5.10466667 45.734,6.37 L45.734,6.37 L45.734,4.784 L42.432,4.784 L42.432,22.126 L45.734,22.126 Z M48.568,14.716 C48.048,14.716 47.515,14.5773333 46.969,14.3 C46.423,14.0226667 46.0113333,13.6846667 45.734,13.286 L45.734,13.286 L45.734,8.84 C46.0113333,8.44133333 46.4186667,8.10333333 46.956,7.826 C47.4933333,7.54866667 48.0306667,7.41 48.568,7.41 C49.5213333,7.41 50.2883333,7.748 50.869,8.424 C51.4496667,9.1 51.74,9.97533333 51.74,11.05 C51.74,12.142 51.4496667,13.026 50.869,13.702 C50.2883333,14.378 49.5213333,14.716 48.568,14.716 Z M60.892,17.342 L60.892,-1.13686838e-13 L57.59,-1.13686838e-13 L57.59,17.342 L60.892,17.342 Z M67.73,17.654 C69.4806667,17.654 70.8066667,17.1166667 71.708,16.042 L71.708,16.042 L71.708,17.342 L75.01,17.342 L75.01,9.23 C75.01,7.54866667 74.4986667,6.33533333 73.476,5.59 C72.4533333,4.84466667 71.136,4.472 69.524,4.472 C67.3573333,4.472 65.5286667,5.13066667 64.038,6.448 L64.038,6.448 L65.286,8.658 C66.3606667,7.67 67.5826667,7.176 68.952,7.176 C69.784,7.176 70.4513333,7.36666667 70.954,7.748 C71.4566667,8.12933333 71.708,8.64066667 71.708,9.282 L71.708,9.282 L71.708,10.972 C70.8413333,9.94933333 69.5153333,9.438 67.73,9.438 C66.5686667,9.438 65.5503333,9.776 64.675,10.452 C63.7996667,11.128 63.362,12.142 63.362,13.494 C63.362,14.794 63.8083333,15.8123333 64.701,16.549 C65.5936667,17.2856667 66.6033333,17.654 67.73,17.654 Z M69.056,15.418 C68.38,15.418 67.8166667,15.2533333 67.366,14.924 C66.9153333,14.5946667 66.69,14.144 66.69,13.572 C66.69,12.9826667 66.9153333,12.519 67.366,12.181 C67.8166667,11.843 68.38,11.674 69.056,11.674 C70.2866667,11.674 71.1706667,12.038 71.708,12.766 L71.708,12.766 L71.708,14.326 C71.1706667,15.054 70.2866667,15.418 69.056,15.418 Z M82.498,17.654 C83.7286667,17.654 84.6473333,17.3853333 85.254,16.848 L85.254,16.848 L84.552,14.352 C84.3093333,14.5946667 83.928,14.716 83.408,14.716 C83.0613333,14.716 82.784,14.586 82.576,14.326 C82.368,14.066 82.264,13.7366667 82.264,13.338 L82.264,13.338 L82.264,7.67 L84.812,7.67 L84.812,4.784 L82.264,4.784 L82.264,1.352 L78.936,1.352 L78.936,4.784 L76.856,4.784 L76.856,7.67 L78.936,7.67 L78.936,14.222 C78.936,15.3313333 79.2393333,16.1806667 79.846,16.77 C80.4526667,17.3593333 81.3366667,17.654 82.498,17.654 Z M92.976,17.654 C95.16,17.654 96.8846667,17.0733333 98.15,15.912 L98.15,15.912 L96.694,13.78 C96.3126667,14.1613333 95.797,14.4646667 95.147,14.69 C94.497,14.9153333 93.8946667,15.028 93.34,15.028 C92.3173333,15.028 91.4853333,14.7506667 90.844,14.196 C90.2026667,13.6413333 89.83,12.948 89.726,12.116 L89.726,12.116 L99.06,12.116 L99.06,11.388 C99.06,9.32533333 98.4793333,7.657 97.318,6.383 C96.1566667,5.109 94.64,4.472 92.768,4.472 C90.8786667,4.472 89.323,5.10466667 88.101,6.37 C86.879,7.63533333 86.268,9.19533333 86.268,11.05 C86.268,13.026 86.9006667,14.6206667 88.166,15.834 C89.4313333,17.0473333 91.0346667,17.654 92.976,17.654 Z M95.862,9.88 L89.674,9.88 C89.7606667,9.152 90.064,8.50633333 90.584,7.943 C91.104,7.37966667 91.832,7.098 92.768,7.098 C93.756,7.098 94.5056667,7.384 95.017,7.956 C95.5283333,8.528 95.81,9.16933333 95.862,9.88 L95.862,9.88 Z M105.976,17.654 C107.674667,17.654 109.005,17.277 109.967,16.523 C110.929,15.769 111.41,14.8026667 111.41,13.624 C111.41,12.8266667 111.228,12.1506667 110.864,11.596 C110.5,11.0413333 110.040667,10.6383333 109.486,10.387 C108.931333,10.1356667 108.333333,9.919 107.692,9.737 C107.050667,9.555 106.452667,9.42066667 105.898,9.334 C105.343333,9.24733333 104.884,9.113 104.52,8.931 C104.156,8.749 103.974,8.51933333 103.974,8.242 C103.974,7.878 104.156,7.579 104.52,7.345 C104.884,7.111 105.360667,6.994 105.95,6.994 C106.695333,6.994 107.401667,7.13266667 108.069,7.41 C108.736333,7.68733333 109.269333,8.034 109.668,8.45 L109.668,8.45 L110.994,6.188 C109.555333,5.044 107.865333,4.472 105.924,4.472 C104.329333,4.472 103.072667,4.85333333 102.154,5.616 C101.235333,6.37866667 100.776,7.31466667 100.776,8.424 C100.776,9.204 100.962333,9.85833333 101.335,10.387 C101.707667,10.9156667 102.167,11.3013333 102.713,11.544 C103.259,11.7866667 103.857,11.9946667 104.507,12.168 C105.157,12.3413333 105.755,12.4713333 106.301,12.558 C106.847,12.6446667 107.306333,12.7876667 107.679,12.987 C108.051667,13.1863333 108.238,13.442 108.238,13.754 C108.238,14.17 108.060333,14.4993333 107.705,14.742 C107.349667,14.9846667 106.825333,15.106 106.132,15.106 C105.386667,15.106 104.598,14.9326667 103.766,14.586 C102.934,14.2393333 102.275333,13.8406667 101.79,13.39 L101.79,13.39 L100.36,15.704 C101.018667,16.3106667 101.846333,16.7873333 102.843,17.134 C103.839667,17.4806667 104.884,17.654 105.976,17.654 Z" fill-rule="nonzero"></path>
        </svg>
        <p class="text-gray-600">
          We build software that lets you deliver the best possible experience to your customers.
        </p>
        <div class="my-5 text-gray-500 font-size-lg">
          <ul class="share">
            {{~#if settings.facebook_link}}
              <li>
                <a class="share-facebook" href="{{settings.facebook_link}}" aria-label="Facebook">
                  <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" focusable="false" viewBox="0 0 12 12">
                    <path fill="currentColor" d="M6 0a6 6 0 01.813 11.945V7.63h1.552l.244-1.585H6.812v-.867c0-.658.214-1.242.827-1.242h.985V2.55c-.173-.024-.538-.075-1.23-.075-1.444 0-2.29.767-2.29 2.513v1.055H3.618v1.585h1.484v4.304A6.001 6.001 0 016 0z"></path>
                  </svg>
                </a>
              </li>
            {{/if~}}
            {{~#if settings.twitter_link}}
              <li>
                <a class="share-twitter" href="{{settings.twitter_link}}" aria-label="Twitter">
                  <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" focusable="false" viewBox="0 0 12 12">
                    <path fill="currentColor" d="M12 2.184a4.83 4.83 0 01-1.415.397 2.52 2.52 0 001.083-1.396 4.87 4.87 0 01-1.564.612A2.428 2.428 0 008.308 1c-1.36 0-2.463 1.13-2.463 2.524 0 .198.023.39.065.576C3.863 3.994 2.05 2.99.835 1.46a2.564 2.564 0 00-.332 1.27 2.54 2.54 0 001.094 2.102 2.413 2.413 0 01-1.115-.316v.032c0 1.224.849 2.243 1.974 2.476-.363.1-.743.115-1.112.042.314 1.002 1.223 1.734 2.3 1.754A4.857 4.857 0 010 9.866 6.83 6.83 0 003.774 11c4.528 0 7.005-3.847 7.005-7.182 0-.11-.003-.22-.007-.327.482-.358.898-.8 1.228-1.308z"></path>
                  </svg>
                </a>
              </li>
            {{/if~}}
            {{~#if settings.linkedin_link}}
              <li>
                <a class="share-linkedin" href="{{settings.linkedin_link}}" aria-label="LinkedIn">
                  <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" focusable="false" viewBox="0 0 12 12">
                    <path fill="currentColor" d="M10.8 0A1.2 1.2 0 0112 1.2v9.6a1.2 1.2 0 01-1.2 1.2H1.2A1.2 1.2 0 010 10.8V1.2A1.2 1.2 0 011.2 0h9.6zM8.09 4.356a1.87 1.87 0 00-1.598.792l-.085.133h-.024v-.783H4.676v5.727h1.778V7.392c0-.747.142-1.47 1.068-1.47.913 0 .925.854.925 1.518v2.785h1.778V7.084l-.005-.325c-.05-1.38-.456-2.403-2.13-2.403zm-4.531.142h-1.78v5.727h1.78V4.498zm-.89-2.846a1.032 1.032 0 100 2.064 1.032 1.032 0 000-2.064z"></path>
                  </svg>
                </a>
              </li>
            {{/if~}}
          </ul>
        </div>
      </div>
      <div class="md:col-6 lg:col-9">
        <div class="row">
          <div class="col-6 lg:col-3">
            <h3 class="tracking-wider uppercase font-size-md">
              Products
            </h3>
            <ul class="list-unstyled">
              <li>
                <a class="nav-link px-0 py-2" href="#">
                  Themes
                </a>
              </li>
              <li>
                <a class="nav-link px-0 py-2" href="#">
                  Extensions
                </a>
              </li>
              <li>
                <a class="nav-link px-0 py-2" href="#">
                  Patterns
                </a>
              </li>
            </ul>
          </div>
          <div class="col-6 lg:col-3">
            <h3 class="tracking-wider uppercase font-size-md">
              Services
            </h3>
            <ul class="list-unstyled">
              <li>
                <a class="nav-link px-0 py-2" href="#">
                  Branding
                </a>
              </li>
              <li>
                <a class="nav-link px-0 py-2" href="#">
                  Customization
                </a>
              </li>
            </ul>
          </div>
          <div class="col-6 lg:col-3">
            <h3 class="tracking-wider uppercase font-size-md">
              Company
            </h3>
            <ul class="list-unstyled">
              <li>
                <a class="nav-link px-0 py-2" href="#">
                  About
                </a>
              </li>
              <li>
                <a class="nav-link px-0 py-2" href="#">
                  Blog
                </a>
              </li>
              <li>
                <a class="nav-link px-0 py-2" href="#">
                  Partners
                </a>
              </li>
            </ul>
          </div>
          <div class="col-6 lg:col-3">
            <h3 class="tracking-wider uppercase font-size-md">
              Legal
            </h3>
            <ul class="list-unstyled">
              <li>
                <a class="nav-link px-0 py-2" href="#">
                  Privacy
                </a>
              </li>
              <li>
                <a class="nav-link px-0 py-2" href="#">
                  Terms
                </a>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    <p class="text-gray-600 font-size-md mt-6">
      © 2022 Zenplates Ltd.
    </p>
  </div>
</footer>

All of our themes come with a highly customizable page footer that you can configure using theme settings. You can change the overall color scheme, layout and add custom links without having to edit the code. Alternatively, you can use an existing pattern as a starting point to create a custom footer layout.

The following settings, found within the Footer elements setting group, are available in the to use in every theme when customizing the page footer:

Setting Description
Footer layout The layout to apply to links within the default page footer.
Footer shape divider The optional shape divider to display above the default page footer.
Footer link color The color to use for links in the page footer.
Footer background color The background color to use for the page footer.
Footer link 1 text The text to display for the first footer link.
Footer link 1 URL The URL of the first footer link.
Footer link 2 text The text to display for the second footer link.
Footer link 2 URL The URL of the second footer link.
Footer link 3 text The text to display for the third footer link.
Footer link 3 URL The URL of the third footer link.
Footer link 4 text The text to display for the fourth footer link.
Footer link 4 URL The URL of the fourth footer link.
Facebook URL The URL of your Facebook page (if applicable).
Twitter URL The URL of your Twitter page (if applicable).
LinkedIn URL The URL of your LinkedIn page (if applicable).
Instagram URL The URL of your Instagram page (if applicable).
Pinterest URL The URL of your Pinterest page (if applicable).
YouTube URL The URL of your YouTube page (if applicable).
Credit link An optional (and greatly appreciated) link to the designer’s website.

To create a completely custom footer layout to match a design or existing website you can copy-and-paste one of our footer patterns into your theme’s footer.hbs template, replacing just the <footer> element and its contents. Each pattern provides a starting point from which you can build a footer to match your company brand.

<footer class="footer ..." id="footer">
  ...
</footer> 

You should leave the rest of the footer.hbs template intact as it contains important scripts and micro-templates used throughout the theme.

Related patterns

Dividers

Dividers

14 patterns

Headers

Headers

4 patterns