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>

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>