Location focused page with bootstrap

Example of the simple theme that displays a single page with location data and custom fields

Custom theme

Header code

Adds bootstrap library from a CDN and includes some Google webfonts

<!-- Bootstrap CDN -->
<link href="//stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<!-- Google Fonts -->
<link href="//fonts.googleapis.com/css?family=Merriweather+Sans:400,700" rel="stylesheet">
<link href='//fonts.googleapis.com/css?family=Merriweather:400,300,300italic,400italic,700,700italic' rel='stylesheet' type='text/css'>

CSS

Some CSS styles to customize our elements

body,
html {
  width: 100%;
  height: 100%;
}

.btn {
  font-family: "Merriweather Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

#contact {
    padding-top: 100px;
    padding-bottom: 100px;
}

Header template

<div class="navbar navbar-dark bg-dark shadow-sm">
  <div class="container d-flex justify-content-between">
    <a href="#" class="navbar-brand d-flex align-items-center">
      <strong>Example bootstrap theme</strong>
    </a>
  </div>
</div>

Footer template

Simple copyright notice for the bottom of the pages

<footer class="bg-light py-5">
<div class="container">
  <div class="small text-center text-muted">Copyright &copy; 2019 - ${business_name}</div>
</div>
</footer>

Page blocks

These page blocks will be created from a HTML Code module dragged from the module tray into the body of the page. You can stack many of these kind of blocks to construct your page. Note: you will need to activate the "Enable Jinja rendering" option under "Advanced" when you add the module to the page.

Block #1 - Location information

This example shows standard ways of outputting the location data as:

• Macros - i.e. ${location_name}

• Template variables - i.e. {{ location.street }}

{$ set location = site.locations[0] %}
<section class="jumbotron text-center">
  <div class="container">
    <h1 class="jumbotron-heading">${location_name}</h1>
    <p class="lead text-muted">
    <p>
      {{ location.street }}{% if location.street2 %}{{ location.street2 }}{% endif %}<br>
      ${city}, ${state} ${postal_code}
    </p>
    <p>
      <strong>{{ now.today().weekday()|day_name }}</strong> ${todays_hours_of_operation}
    </p>
    <p>
      <a href="tel:${phone}">${phone}</a>
    </p>
    <p>
      <a class="btn btn-primary my-2" href="https://www.google.com/maps/search/?api=1&query=${street} ${city} ${state} ${postal_code}">Get directions</a>
      <a class="btn btn-secondary my-2" href="tel:${phone}">Call now</a>
    </p>
  </div>
</section>

Block #2 - Custom field examples

This example shows how to access the custom fields as:

• Macros - i.e. ${custom_headline}

• Template variables - i.e. {{ site.custom_fields.description }}

For more examples of custom fields, view those here.

<section class="page-section" id="contact">
  <div class="container">
    <div class="row justify-content-center">
      <div class="col-lg-8 text-center">
        <h2 class="mt-0">${custom_headline}</h2>
        <hr class="divider my-4">
        <p class="text-muted mb-5">{{ site.custom_fields.description }}</p>
      </div>
    </div>
    <div class="row">
      <div class="col-lg-4 ml-auto text-center">
        <i class="fas fa-phone fa-3x mb-3 text-muted"></i>
        <div>${phone}</div>
      </div>
      <div class="col-lg-4 mr-auto text-center">
        <i class="fas fa-envelope fa-3x mb-3 text-muted"></i>
        <a class="d-block" href="mailto:${contact_email}">${contact_email}</a>
      </div>
    </div>
  </div>
</section>