Skip to end of metadata
Go to start of metadata

You are viewing an old version of this page. View the current version.

Compare with Current View Page History

Version 1 Next »

  1. Create a NOP Widget and add the following HTML.

<div class="aw-simple-footer aw-simple-footer--wrapper">
  <div class="aw-simple-footer--row">
    <div class="aw-simple-footer--column">
      <div class="aw-simple-footer--column-content">
         <h2>
          CONTACT US
        </h2>
        <span class="label">Passes</span>
        <span class="contact"><a href="tel:123-456-7890">123-456-7890</a></span>
      </div>
    </div>
      <div class="aw-simple-footer--column">
      <div class="aw-simple-footer--column-content">
        <span class="label">Reservations</span>
        <span class="contact"><a href="tel:123-456-7890">123-456-7891</a></span>
      </div>
    </div>
    <div class="aw-simple-footer--column">
      <div class="aw-simple-footer--column-content">
        <span class="contact"><a href="mailto:info@peak-resort.com">info@peak-resort.com</a></span>
      </div>
    </div>
    <div class="aw-simple-footer--column">
      <div class="aw-simple-footer--column-content logo">
         <a href="#" target="_blank" class="aw-simple-footer--logo">Peak Resort</a>
      </div>
    </div>
  </div>
</div>

  1. Update the HTML content as needed for the resort

  2. Add the HTML to the NOP Widget Markup Section

  3. Save and Assign the widget to the Footer Widget Section

  4. Create another NOP Widget for the CSS and Name it “Simple Footer CSS”

  5. Add the following CSS to the widgets markup section

<style>
.aw-simple-footer{
   width: 100%;
   font-family: var(--ads-brand-primary-fontfamily, sans-serif);
   font-weight: normal;
}
.aw-simple-footer--wrapper{
  width: 100%;
  background-color: var(--ads-plugins-simplefooter-backgroundcolor, #222);
  padding: 15px;
}
.aw-simple-footer--row{
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-content: stretch;
  align-items: flex-start;
}
.aw-simple-footer--column{
  flex: 1 1 auto;
  padding: 15px;
  align-self: stretch;
}
.aw-simple-footer--column-content{
  display:flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  height:100%;
}
.aw-simple-footer--column-content > .contact,
.aw-simple-footer--column-content > .label,
.aw-simple-footer p,
.aw-simple-footer a{
  font-size: var(--adx-font-size-16, 1rem);
  line-height: var(--adx-line-height-19, 1.1875rem);
  color: var(--ads-plugins-simplefooter-textcolor, #fff);
  display: block;
  padding-bottom:5px;
  text-decoration: none;
}
.aw-simple-footer--column-content > .label{
  font-size: .9rem;
  opacity:.7;
}
.aw-simple-footer--column-content.logo{
  flex-direction: row;
  align-items: flex-end;
}
.aw-simple-footer h2{
  font-size: var(--adx-font-size-19, 1.2rem);
  height:20px;
  color: var(--ads-plugins-simplefooter-textcolor, #fff);
}
.aw-simple-footer--logo{
  background-image: var(--ads-header-logo-image);
  background-size: contain;
  background-repeat: no-repeat;
  height: 60px;
  width: var(--ads-header-logo-width);
  font-size: 0 !important;
  display: block;
  position: relative;
  margin-right:30px;
}
</style>

  1. Save the widget and Assign it to the body_start_html_tag_after widget zone.

  2. Clear the Site cache

  3. The Footer should now be showing on the site

  4. Update the background color. The background color is controlled in Theme Designer under Plugins > Simple Footer > Background Color

  5. Update the text color if needed: The text color is controlled in Theme Designer under Plugins > Simple Footer > Text Color

  6. The footer logo will use whatever logo you set for the header under Header > Logo > Logo Image

  7. The footer logo width will match whatever you set in Header > Logo > Width

  • No labels