Page Comparison

Create a NOP Widget and add the following HTML and name it Simple Footer.

Code Block

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

Update the HTML content as needed for the resort
1. You can remove columns and the column content if you want by removing a aw-simple-footer--column section and its children if you need less columns.
2. Be sure to update the mailto: for the email and the href for the phone number when updating the page content
Add the updated HTML to the NOP Widget Markup Section
Save and Assign the widget to the Footer Widget Section
Create another NOP Widget for the CSS and Name it “Simple Simple Footer CSS”CSS
Add the following CSS to the widgets markup section

Code Block

<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, 100px);
  font-size: 0 !important;
  display: block;
  position: relative;
  margin-right:30px;
}
</style>

...

Versions Compared

Old Version 1

New Version 2

Key