Getting Started

Downloading

First of all you will need to log in to your Themeforest account.

After that goto your downloads page

ThemeForest Downloads Page

From there locate the Divinity template click the download button and then select All files & documentation ThemeForest Downloads Page

Congratulations. You now have a shiny new copy of Divinity

Unzipping

You should now have a file that looks something like this.

divinity-1.0.0.zip

In order to get at the goodness inside you will need to unzip this file.

Zip Contents

Once you have unzipped the Divinity zip file you will find the following folders have been created.

Folder / File	Description
docs/	The docs your are looking at now
html/	Copy of the demo site
psds/	Contains the templates PSD file
source	Copy of the template source with Gulp development server

HTML or Gulp

This template was built using the Nunjucks templates which are compiled into HTML using Gulp.

We provide both the plain HTML files and the full Nunjucks source code with this template.

So you can either dive in and edit the HTML files that are inside the /html folder or install Gulp and get started using the Nunjucks templates which are in the /source folder.

HTML

File Structure

When you open the html folder from the .zip file that you downloaded you will find the following file structure

Folder / File	Description
assets/	Contains all the necessary styling and logic for your website
assets/css/	Contains the CSS that the theme uses
assets/fonts/	Contains the fontawesome font files
assets/images/	Contains all the images of the theme
assets/js/	Contains all javascript files that the theme needs
contact_mailer.php	Used by the contact forms in the theme to send the form email
*.html	The html files that render the theme pages

HTML Structure

The structure for the html pages that Divinity uses is the following

    <html>
        <head>
            <title>Page Title</title>
            Scripts and Styles go here
        </head>
        <body>
            <section>
                <div class="section-background">
                    Set a background image or video(optional)
                </div>
                <div class="section-content">
                    <div class="container">
                        <div class="row">
                            <div class="col-md-12">
                                Section content
                            </div>
                        </div>
                    </div>
                </div>
            </section>
                .
                . (more sections)
                .
            <footer>
                Add your footer widgets
                Add your subfooter
            </footer>
        </body>
    </html>

Deploying

Deploying your website on a server requires that you have the necessary ftp credentials provided by your hosting provider. All you need to do is copy your files over to your server using an ftp client such as Filezilla. Make sure that you upload all the files from your /html folder.

Gulp Setup

The source files

Once you have downloaded and unzipped the main template download zip, you will find a folder called /source. This folder contains all the source code you will need to build the template.

The template uses gulp to build the source files into HTML / CSS and JS files that you can then deploy to your server.

The build system also uses bower to manage loading all the templates' dependencies.

Prerequisites

Before you start to set up the template development server you will need to install nodejs and bower.

Installing Node.js

We recommend installing the latest version of node. At the time of writing this was (0.12.15).

You can download the latest of node.js from here alternatively there are guides on how to install using a package manager.

Checking node

Once you have node.js installed on your system you should be able to go to your command line and type

node --version

and see something like this

v4.1.2

Installing bower

If you do not have bower installed you should go to your command line and type

npm -g install bower

Note - You will need git installed for bower to work. Visit Git website

Checking bower

Once you have node.js installed on your system you should be able to go to your command line and type

bower --version

you should see something like this

1.5.2

Setup Development Server

Use the source

To start off you will need to open the /source folder contained in the download.

Installing node packages

Open a command prompt and change directory to the one created when you unzipped the source folder and run this command

npm install

Note - This may take some time to install all the packages.

Installing Git

You will also need to install the Git source control system on your machine. Check out this guide on how to install on Windows, Mac and Linux.

Installing bower packages

Open a command prompt and change directory to the one created when you unzipped the source folder and run this command

bower install

This will install all the components that the template needs.

Note - You will need git installed for bower to work.

Running the development server

First make sure you have gulp-cli installed globally

npm -g install gulp-cli

Divinity comes shipped with different demos that you can choose from. To start working on a desired demo, named i.e genesis, type

gulp serve-genesis

This should automatically open up a browser window with the template running.

Check the available demos here

Browsersync

Once the development server is up and running any changes you make to the HTML & JS & SASS files will be auto updated in your browser window.

Production build

Running a production build

Once you are happy with your site you can initiate a build that will create a copy of the template that you can FTP to your web server.

Divinity comes shipped with different demos that you can choose from. To initiate a build with a demo named i.e genesis, run the command

gulp build-genesis

This will initiate a build, once it has finished you will find your built files in a folder called dist that will have been created for you.

Check the available demos here

Available Demos

The name of the demos that you can use are the same as the folder name that they are located in. Check src/ folder for the list of available demos.

Currently available

Demos	Located at
Genesis	src/genesis
Psalms	src/psalms

Logo

The code for changing the header logo is located inside source/html/partials/headers/default.html file. In order to change the logo of the website you need to look inside the <div class="dvt-nav-brand"> tag for the code

<a href="index.html">
    <img src="assets/images/logo.png" alt="">
</a>

Change the src attribute of that image to point to your logo.

Change header logo

Setting the logo link url

From the code used in the previous section

<a href="index.html">
    <img src="assets/images/logo.png" alt="">
</a>

changing the href="index.html" to point to the page that you wish should set the logo link url.

Fonts

Default fonts

The default fonts that Divinity is using is Alegreya Sans, with the styles Thin 100, Light 300, Normal 400, Normal 400 Italic, Bold 700, Bold 700 Italic, Bold 800, Ultra-Bold 900. Also, Divinity is using Playfair Display, with the styles Normal 400, Normal 400 Italic, Bold 700, Bold 700 Italic, Ultra-Bold 900. The fonts are set inside <head> using the link that Google Fonts provide.

It should look like

<link href="https://fonts.googleapis.com/css?family=Alegreya+Sans:100,300,400,400i,700,700i,800,900|Playfair+Display:400,400i,700,700i,900" rel="stylesheet">

Changing the site fonts

If you want to change the site fonts, you need to load them first. To do that, should you want to use Google Fonts, you need to visit the Google Fonts page and create the import link that you will use inside the <head>.

If you are new to Google Fonts, follow these simple steps to create the new import link:

Choose: Search or browse hundreds of font families, then add the ones you like to your Collection.
Review: Compare and refine your Collection, even see the styles in a dynamic sample layout.
Use: Grab the code prepared and you’re ready to add the Collection to your website!

Once you have the new link, replace the default one with the new one in the <head>.

In order for the new font to be applied to the body of Divinity, make sure that you edit /source/assets/scss/skins/divinity.scss and set line 14 that looks like

    $font-family-base:  'Alegreya Sans';

to use the font that you want. Now your font is applied to the body. To change the font for the headings check line 20 that looks like

    $headings-font-family: 'Playfair Display';

Typography

Headings

To add a border on the left of a heading, use the dvt-heading-bordered class. For example

<h2 class="dvt-heading-bordered text-capitalize">
    <small class="text-muted font-italic">Featured</small> Sermon
</h2>

Bordered heading

Font Weight

To add a special font weight to your text you need to apply the dvt-font-weight-n class, where n=100, 200, ..., 900, depending on the font weights that your font loads, remember the font import at the Fonts section. For example

<span class="pull-xs-right dvt-font-weight-700">$2000 total</span>

Line height

To change the line-height property of an element you can use the following classes:

dvt-line-height-small: sets the line height to 1
dvt-line-height-normal: sets the line height to whatever value is set in the skin. Check the skin variable $line-height-base inside /source/assets/scss/skins/divinity.scss
dvt-line-height-big: sets the line height to twice the size of dvt-line-height-normal

Light Text Color

You can set an alternative light color for your text that changes the default text colors, in case you are using background colors on elements that do not match the default text colors. For example, when you have a black background color and your text color is dark as well, using a light text will make the text stand out. Check out the variables inside /source/assets/scss/skins/divinity.scss, lines 124-130

// Light colored elements
$o-light-color: #f8f2e6;
$o-light-headings-color: #f8f2e6;
$o-light-link-color: #f8f2e6;
$o-light-link-hover-color: #f8f2e6;
$o-light-text-muted: #f8f2e6;
$o-light-border-color: #f8f2e6;

To add the light color style to your elements use the dvt-text-breakpoint-light class by replacing the breakpoint notation to either xs, sm, md, lg or xl for Extra small, Small, Medium, Large or Extra Large container widths. Bootstrap 4 grid system

Colors

Changing the site colors

To change the colors of the website, you need to edit /source/assets/scss/skins/divinity.scss and change the variables that define the colors of the website, i.e

    $link-color: #121823;

Note: You need to build your files for the new CSS to take effect

To use the demo menu this is the suggested markup

<div class="dvt-nav dvt-nav-float dvt-nav-sticky dvt-nav-layout-logo-c-menu-lr">
    <div class="dvt-nav-container">
        <!-- Logo -->
        <div class="dvt-nav-brand">
            <a href="index.html">
                <img src="assets/images/logo.png" alt="">
            </a>
        </div>
        <!-- Mobile menu toggle button -->
        <div class="dvt-nav-mobile">
            <a id="nav-toggle" href="#">
                <span></span>
            </a>
        </div>
        <!-- Menu One -->
        <nav class="dvt-nav-menu">
            <ul class="dvt-nav-list">
                <li>
                    <a href="#">About</a>
                    <ul class="dvt-nav-dropdown closed">
                        <li>
                            <a href="about.html">About Us</a>
                        </li>
                        <li>
                            <a href="team-list.html">Staff</a>
                        </li>
                          .
                          .(more links)
                          .
                    </ul>
                </li>
                  .
                  .(more menu items)
                  .
            </ul>
            <div class="dvt-nav-widget"></div>
        </nav>
        <!-- Second menu is ONLY used if you want the logo in the center splitting the menu into two -->
        <!-- Menu Two -->
        <nav class="dvt-nav-menu">
            <ul class="dvt-nav-list">
                <li>
                    <a href="#">Events</a>
                    <ul class="dvt-nav-dropdown closed">
                        <li>
                            <a href="events-calendar.html">Calendar</a>
                        </li>
                        <li>
                            <a href="events-day.html">Day View</a>
                        </li>
                    </ul>
                </li>
                <li class="active">
                    <a href="contact.html">Contact</a>
                </li>
                  .
                  .(more menu items)
                  .
            </ul>
            <div class="dvt-nav-widget"></div>
        </nav>
    </div>
</div>

The following classes are added to the outer div of the menu, giving the user the option to choose from 6 different layouts:

dvt-nav-layout-logo-r-menu-l: Logo left menu right
dvt-nav-layout-logo-l-menu-r: Logo right menu left
dvt-nav-layout-logo-c-menu-lr: Logo center menu left and right
dvt-nav-layout-logo-tl-menu-b: Logo top left menu below
dvt-nav-layout-logo-tr-menu-b: Logo top right menu below
dvt-nav-layout-logo-tc-menu-b: Logo top center menu below

To make the menu fulwidth, add the class dvt-nav-fluid to the outer div as in

<div class="dvt-nav dvt-nav-float dvt-nav-fluid"> ...

To make the menu scroll with the page, add the class dvt-nav-sticky to the outer div as in

<div class="dvt-nav dvt-nav-float dvt-nav-sticky"> ...

To make the menu work on-hover, add the class dvt-nav-hover to the outer div as in

<div class="dvt-nav dvt-nav-hover"> ...

To make it work on-click, use the dvt-nav-click class.

To make the menu transparent, add the class dvt-nav-transparent to the outer div as in

<div class="dvt-nav dvt-nav-transparent"> ...

To make the menu appear as if it is floating at the top of the page, add the dvt-nav-float class, as in

<div class="dvt-nav dvt-nav-float"> ...

The footer of Divinity is consisted of three columns. The code for the columns is wrapped inside

    <footer id="footer">
        <section class="section p-t-30 p-b-9 m-t--30">
            <div class="section-background">
                <div class="section-bg-image section-bg-image-size-xs-cover section-bg-image-position-xs-top dvt-demo-bg-image-11-footer section-bg-image-paralax"></div>
            </div>
            <div class="section-content">
                <div class="container">
                    <div class="row">
                      Place your widgets here...
                    </div>
                </div>
            </div>
        </section>
    </footer>

Footer

For each of the widgets that are placed inside the footer, for a 3-column footer layout use .col-md-4, as in

    <div class="col-md-4">
        <div class="dvt-widget widget_text">
            <h4 class="dvt-widget-header">About Us</h4>
            <p>Why do the nations rage, and the peoples plot a vain thing? </p>
            <p>The kings of the earth take a stand, and the rulers take counsel together.</p>
        </div>
    </div>

To use the already styled widgets for Divinity, use the code provided in source/html/partials/widgets/ folder. There you will find the HTML used to render the following widgets: Categdvtes, Events, Menu, Recent Posts, Search, Social, Tags and Text.

What we need to add a widget is firstly a title. Use this markup to add a title as an <h4>

    <h4 class="dvt-widget-header">About Us</h4>

Everything that is considered as the content of the widget can either be a list or not. If it is a list, like a list of products for example, we need to wrap it inside

    <ul>
        <li>...</li>
        <li>...</li>
        <li>...</li>
    </ul>

If it is not a list, we need to wrap it inside

    <p>
        content
    </p>

We can add there as a content anything we like, images, text, icons etc.

You can add a mini footer if you use markup similar to the footer

    <section class="section">
        <div class="section-content">
            <div class="container">
                <div class="row">
                    <div class="col-sm-6 text-sm-left">
                        Add your widget code
                    </div>
                    <div class="col-sm-6 text-sm-right">
                        Add your widget code
                    </div>
                </div>
            </div>
        </div>
    </section>

This will render a subfooter section split into two columns, each holding one widget. Use that code before closing the main footer to add a subfooter at the end of your pages.

Subfooter

Layout

Page Layout

The layout of the pages on Divinity is defined in default.html inside the source/html/layouts folder. If you take a look at this file, the main components are

<head>: is consisted of some meta data and the imports for the fonts and css.
<body>: this is the main content of the page. First, we define the header. You can choose your header from the source/html/partials/headers folder
```
  {% block header %}
      {% include "partials/headers/default.html" %}
  {% endblock %}
```

Now is the time to add your pages' content

    {% block content %}{% endblock %}

Add your footer

    {% block footer %}
        {% include "partials/footer.html" %}
    {% endblock %}

To end with, before you close the <body>, you need to import your scripts.

    <script src="assets/js/theme.js" charset="utf-8"></script>
    {% block extrajs %}{% endblock %}

Page Sections

In order to create a section, just create a div and give it a class section. You can insert grids inside sections in order to populate them with content. The content has to be wrapped by a section-content container, as in the example below:

    <section class="section">
        <div class="section-content">
            <div class="container">
                <div class="row">
                    <h1>A header inside a section!</h1>
                </div>
            </div>
        </div>
    </section>

Besides using grids to insert content into sections as we saw above, you can customize your sections and give them unique colors and background images.

Create a section with a color background

We will build on the example code that we previously used, and we will add some colouring. To add a background color to a section, you need to add a class that defines a background color to the outer section wrapper. This class should exist inside a file named custom-css.css inside assets/css/ folder for the built version or /source/assets/scss/ folder for the source version. Feel free to create your own classes, such as

.dvt-demo-bg-1 {
  background: #e8e2d7;
}

The code that renders the section with a background color is

<section class="section dvt-demo-bg-1">
    <div class="section-content">
        <div class="container">
            <div class="row">
                <div class="col-md-6 offset-md-3 p-y-10 text-xs-center">
                    <h1>Section Title</h1>
                    <h2 class="h5 dvt-line-height-normal">
                        Section subtitle
                    </h2>
                </div>
            </div>
        </div>
    </div>
</section>

Create a section with an image background

Sections can have background images. Add a div with an section-background class before your content. Then, inside that div add another div with the class section-bg-image and an extra class such as dvt-demo-bg-image-1 that loads the class which will load the background image(to avoid inline styles). The class that loads that image should be inside a file named custom-css.css inside assets/css/ folder for the built version or /source/assets/scss/ folder for the source version. Feel free to create your own classes, such as

.dvt-demo-bg-image-1 {
  background-image: url('../images/divinity/divinity-01-1600x1000.jpg');
}
The code that render the section with a background image is
<section class="section">
    <div class="section-background">
        <div class="section-bg-image dvt-demo-bg-image-1"></div>
    </div>
    <div class="section-content">
        <div class="container">
            <div class="row">
                your content
            </div>
        </div>
    </div>
</section>

Section background image position

You can configure the alignment of the background image using one of the following classes: section-bg-image-position-xs-top, section-bg-image-position-xs-middle and section-bg-image-position-xs-bottom. Add one of those classes to the section-bg-image div that holds your background image. For example the following code will align the background image at the bottom:

<section class="section">
    <div class="section-background">
        <div class="section-bg-image section-bg-image-position-xs-bottom dvt-demo-bg-image-1"></div>
    </div>
    <div class="section-content">
        <div class="container">
            <div class="row">
                your content
            </div>
        </div>
    </div>
</section>

Note: The above classes can be grid-specific, allowing different alignment for different screen sizes. Just tweak the section-bg-image-size-breakpoint-bottom class by replacing the breakpoint notation to either xs, sm, md, lg or xl for Extra small, Small, Medium, Large or Extra Large container widths. Bootstrap 4 grid system

Create a section with a parallax background

You can give a parallax effect to your section background images by adding the section-bg-image-paralax class to the section-bg-image div.

<section class="section">
    <div class="section-background">
        <div class="section-bg-image section-bg-image-paralax dvt-demo-bg-image-1"></div>
    </div>
    <div class="section-content">
        <div class="container">
            <div class="row">
                your content
            </div>
        </div>
    </div>
</section>

Section background image sizes

Section background images can have different image sizes that define how the image will fit in the section. Add one of the following classes to the section-bg-image div that holds your background image: section-bg-image-size-md-100, section-bg-image-size-md-cover and section-bg-image-size-md-contain. Explaining those classes below:

section-bg-image-size-md-100: The image resizes until it reaches the width of its container, keeping its aspect ratio
section-bg-image-size-md-cover: The image resizes until both the width and height of its container are reached, keeping its aspect ratio
section-bg-image-size-md-contain: The image resizes until either the height or the width of its container is reached, keeping its aspect ratio

<section class="section">
    <div class="section-background">
        <div class="section-bg-image section-bg-image-size-md-cover dvt-demo-bg-image-1"></div>
    </div>
    <div class="section-content">
        <div class="container">
            <div class="row">
                your content
            </div>
        </div>
    </div>
</section>

Note: The above classes can be grid-specific, allowing different alignment for different screen sizes. Just tweak the section-bg-image-size-breakpoint-cover class by replacing the breakpoint notation to either xs, sm, md, lg or xl for Extra small, Small, Medium, Large or Extra Large container widths. Bootstrap 4 grid system

Section background image repeat

If you want the background image to repeat - suitable for small images - use the section-bg-image-repeat class in the section-bg-image div that holds your background image:

<section class="section">
    <div class="section-background">
        <div class="section-bg-image section-bg-image-repeat dvt-demo-bg-image-1"></div>
    </div>
    <div class="section-content">
        <div class="container">
            <div class="row">
                your content
            </div>
        </div>
    </div>
</section>

Section background image fixed

If you want the background image to be fixed as the user scrolls down or up the page, use the section-bg-image-attachment-fix class in the section-bg-image div that holds your background image:

<section class="section">
    <div class="section-background">
        <div class="section-bg-image section-bg-image-attachment-fix dvt-demo-bg-image-1"></div>
    </div>
    <div class="section-content">
        <div class="container">
            <div class="row">
                your content
            </div>
        </div>
    </div>
</section>

Cards

Card Components

A card is consisted of three main blocks, the card-block where you set the content of the card, the card-img-container where you set the image and its overlay and the card-footer where you can add extra information such as social links.

A card can also be a Hero card if you add the card-hero class to the main div. A hero card behaves the same as a small card, it just adds more padding to the sides making it bigger.

To make your card load the primary color as background color which will make the card stand out use the card-inverse class in the main div.

A card can make use of all the available Utility classes. Check them out in the Utilities section.

Card Layout

The basic layout that a card can have is

<div class="card dvt-shadow-2 dvt-shadow-hover-8 dvt-transition m-x-1 m-t-1">
    <div class="card-block">
        <h3 class="card-title"><a href="single-post.html">Header & Subtitle</a></h3>
        <h6 class="card-subtitle font-italic text-muted">By <a href="staff-single.html">Christos</a> on May 1977</h6>
    </div>
    <div class="card-img-container">
        <img class="card-img-top" src="assets/images//divinity/divinity-08-800x600.jpg" alt="Card image cap">
    </div>
    <div class="card-block">
        <p class="card-text">Blessed is the man who doesn't walk in the counsel of the wicked, nor stand in the way of sinners, nor sit in the seat of scoffers;</p>
    </div>
    <div class="card-footer">
        <div class="dvt-icon-set dvt-icon-set-expandable dvt-transition pull-xs-right">
            <a class="dvt-icon-set-item dvt-transition dvt-icon-set-item-trigger text-muted" href="#">
                <i class="fa fa-share-alt"></i>
            </a>
            <a class="dvt-icon-set-item dvt-transition dvt-icon-set-item-close " href="#">
                <i class="fa fa-close"></i>
            </a>
            <a class="dvt-icon-set-item dvt-transition text-muted" href="#">
                <i class="fa fa-instagram"></i>
            </a>
            <a class="dvt-icon-set-item dvt-transition text-muted" href="#">
                <i class="fa fa-facebook"></i>
            </a>
        </div>
    </div>
</div>

Card Layout

Let's break down those blocks

Card block

A card can have many card blocks as you can see from the above example. Inside those blocks you can have text if you put it in a paragraph with the class card-text, as in

<div class="card-block">
    <p class="card-text">Your text</p>
</div>

To add a card title inside the card block use

<h3 class="card-title"><a href="single-post.html">Header & Subtitle</a></h3>

To add a card subtitle inside the card block use

<h6 class="card-subtitle">By <a href="staff-single.html">Christos</a> on May 1977</h6>

Image container

To add an image to the card you need to add a

<div class="card-img-container">
    <img class="card-img-top" src="your_image.jpg" alt="Card image">
</div>

inside the main card div.

You can also add an image overlay to the card if you use

<div class="card-img-overlay">
    <h4 class="card-title">Card Image</h4>
    <p class="card-subtitle">Text on the top</p>
</div>

To add a fading effect to the overlay you can use the following classes:

card-img-overlay-fade-to-bottom : The fading effect starts from top to bottom
card-img-overlay-fade-to-top : The fading effect starts from bottom to top

To enable the overlay only when the user hovers on the image, use the card-img-overlay-on-hover class. When the user hovers on the image an overlay will show with the above contents. You can also set the alignment of the text in the overlay if you use the following classes:

card-img-overlay-top : Aligns the text to the top of the container
card-img-overlay-center : Aligns the text to the center of the container
card-img-overlay-bottom : Aligns the text to the bottom of the container
card-img-overlay-left : Aligns the text to the left of the container
card-img-overlay-right : Aligns the text to the right of the container

For example

<div class="card-img-overlay card-img-overlay-center card-img-overlay-on-hover  dvt-transition">
    <h4 class="card-title dvt-transition">Card Image</h4>
    <p class="card-subtitle dvt-transition">Text on the top</p>
</div>

Card Footer

The card footer can be used to provide extra information regarding your card's content. For example

<div class="card-footer">
    <div class="dvt-icon-set dvt-icon-set-expandable dvt-transition pull-xs-right">
        <a class="dvt-icon-set-item dvt-transition dvt-icon-set-item-trigger text-muted" href="#">
            <i class="fa fa-share-alt"></i>
        </a>
        <a class="dvt-icon-set-item dvt-transition dvt-icon-set-item-close " href="#">
            <i class="fa fa-close"></i>
        </a>
        <a class="dvt-icon-set-item dvt-transition text-muted" href="#">
            <i class="fa fa-instagram"></i>
        </a>
        <a class="dvt-icon-set-item dvt-transition text-muted" href="#">
            <i class="fa fa-facebook"></i>
        </a>
    </div>
</div>

The classes dvt-icon-set-expandable and the first two links of the above code make the list of icons expandable when the user clicks on the share button.

There is a vast diversity of choices on how to create a card based on the above options. To get a better view of those, make sure that you check out our demo page on html/cards.html.

Utilities

On scroll animations

To add an animation to an element, you need to assign the dvt-os-animation class to it. In addition, you need to define the type of animation and when it is going to kick in. These are set from the two data attributes data-os-animation and data-os-animation-delay. An example

<h1 class="dvt-os-animation" data-os-animation="fadeIn" data-os-animation-delay=".3s">
    <small>Dont miss</small> Upcoming Event
</h1>

To view the full set of the available animations visit Animate.css

Set the data-os-animation-delay attribute in seconds, i.e data-os-animation-delay="0.5s", for half a second. This means that the animation takes place half a second after the related item shows on the page.

Margin

Adding margin to an element is a matter of using the appropriate classes. The following classes are provided:

m-y--30 : Adds 300px of negative margin to the top and bottom(y-axis) of an element.
This class has variations that grow up to zero margin and continue up to m-y-30, which adds 300px. Classes scale by 10px for each index increase. You can use m-y-29, m-y-28, ..., m-y-0, m-y--1, m-y--2, ..., m-y--30.
m-x--30 : Adds 300px of negative margin to the left and right(x-axis) of an element. Variations follow the same pattern as above.
m-t--30 : Adds 300px of negative margin to the top of an element. Variations follow the same pattern as above.
m-l--30 : Adds 300px of negative margin to the left of an element. Variations follow the same pattern as above.
m-r--30 : Adds 300px of negative margin to the right of an element. Variations follow the same pattern as above.
m-b--30 : Adds 300px of negative margin to the bottom of an element. Variations follow the same pattern as above.

Note that m-y-30 adds margin whilst m-y--30 adds negative margin.

Margins For All Devices

To add even more control over the top/bottom margins on different screen sizes, we have introduced a set of rules that define different margins on different devices. The classes are set as dvt-m-breakpoint-t-n or dvt-m-breakpoint-b-n where n = -30, -29, ..., 29, 30(each number adds/removes 10px) and replacing the breakpoint notation to either xs, sm, md, lg or xl for Extra small, Small, Medium, Large or Extra Large container widths. Bootstrap 4 grid system

Padding

Adding padding to an element is a matter of using the appropriate classes. The following classes are provided:

p-y-1 : Adds 10px of padding to the top and bottom of an element.
This class has variations that scale up to 300px padding. Classes scale by 10px for each index increase. You can use p-y-1, p-y-2, ..., p-y-30.
p-x-1 : Adds 10px of padding to the left and right of an element. Variations follow the same pattern as above.
p-t-30 : Adds 300px of padding to the top of an element. Variations follow the same pattern as above.
p-l-30 : Adds 300px of padding to the left of an element. Variations follow the same pattern as above.
p-r-30 : Adds 300px of padding to the right of an element. Variations follow the same pattern as above.
p-b-30 : Adds 300px of padding to the bottom of an element. Variations follow the same pattern as above.

Opacity

Setting the opacity level for an element in Divinity is a matter of using the appropriate classes. The following classes are provided:

dvt-opacity-0 : Completely transparent.
This class has variations that scale up to 10. Classes scale by 1 each. You can use dvt-opacity-1, dvt-opacity-2, dvt-opacity-3, ..., dvt-opacity-10.
dvt-opacity-10 : Not transparent.

Shadow

Setting the shadow level for an element in Divinity is a matter of using the appropriate classes. The following classes are provided:

dvt-shadow-0 : No shadow.
This class has variations that scale up to 20. Classes scale by 1 each. You can use dvt-shadow-1, dvt-shadow-2, dvt-shadow-3, ..., dvt-shadow-20.
dvt-shadow-20 : Maximum shadow effect.

Shadow applied when the user hovers over an element.

dvt-shadow-hover-0 : No shadow.
This class has variations that scale up to 20. Classes scale by 1 each. You can use dvt-shadow-hover-1, dvt-shadow-hover-2, dvt-shadow-hover-3, ..., dvt-shadow-hover-20.
dvt-shadow-hover-20 : Maximum shadow effect.

Shadow applied when an element is focused.

dvt-shadow-focus-0 : No shadow.
This class has variations that scale up to 20. Classes scale by 1 each. You can use dvt-shadow-focus-1, dvt-shadow-focus-2, dvt-shadow-focus-3, ..., dvt-shadow-focus-20.
dvt-shadow-focus-20 : Maximum shadow effect.

Smooth transitions

To achieve a smooth transition whenever a CSS property of an element changes, the dvt-transition class is used. For example, if an element has a shadow of 8px and on-hover the shadow becomes 16px, the dvt-transition class will make that transition run smoothly rather than instantly. Example in code

<div class="card dvt-shadow-8 dvt-shadow-hover-16 dvt-transition">
    <div class="card-img-container">
        <img class="card-img-top" src="/divinity/divinity-05-640x800.jpg">
    </div>
    <div class="card-block">
        <h3 class="card-title">Card With Image</h3>
    </div>
</div>

Text

To break the text into columns use the dvt-col-count-n classes, where n=1-6. To add extra borders between the columns also use the dvt-col-count-bordered.

Only works for screens larger than sm(≥544px)

Example code

<div class="dvt-col-count-2 dvt-col-count-bordered">
    <p>
        Why do the nations rage, and the peoples plot a vain thing? The kings of the earth take a stand, and the rulers take counsel together, against Yahweh, and against his Anointed, saying, «Let's break their bonds apart, and cast their cords from us.» He who sits in the heavens will laugh.
    </p>
    <p>
        I will tell of the decree. Yahweh said to me, «You are my son. Today I have become your father. Ask of me, and I will give the nations for your inheritance, the uttermost parts of the earth for your possession.
    </p>
    <p>
        Serve Yahweh with fear, and rejoice with trembling. Give sincere homage to the Son, lest he be angry, and you perish in the way, for his wrath will soon be kindled. Blessed are all those who take refuge in him.
    </p>
    <p>
        Yahweh, how my adversaries have increased! Many are those who rise up against me. Many there are who say of my soul, «There is no help for him in God.» But you, Yahweh, are a shield around me, my glory, and the one who lifts up my head. I cry to Yahweh with my voice, and he answers me out of his holy hill. I laid myself down and slept.
    </p>
</div>

Text columns

Image filters

To add a special filter on an image of a card you can use dvt-photo-filter-name class by replacing the name notation with the following effects: none, grayscale, line-rotate, sepia or blur so that the class will be for example dvt-photo-filter-sepia.

The same pattern goes for the dvt-photo-filter-hover-name, which applies the filter when the user hovers over the card.

Example code

<div class="card dvt-transition dvt-photo-filter-sepia dvt-photo-filter-hover-grayscale dvt-transition">
    <div class="card-img-container">
        <img class="card-img" src="assets/images/divinity/divinity-05-800x500.jpg" alt="Card image">
    </div>
    <div class="card-img-overlay card-img-overlay-bottom card-img-overlay-fade-to-top">
        <h3 class="card-title">
            <a href="#">Achieving Serenity</a>
        </h3>
        <h6 class="card-subtitle font-italic">By <a href="#">Christos</a> on May 1977</h6>
    </div>
</div>

Image Filter

Blog

Blog List

The Blog list page can be with left sidebar, right sidebar or no sidebar blog list. Also, you can have a wide layout where there is less padding on the sides, or a Small layout with a masonry-like layout. Our Blog page is consisted of a header section, the blog list and the pagination at the bottom.

In order to create the Blog list page with no sidebar, we use a col-md-8 column with an offset offset-md-2, leaving no space for a sidebar. The general layout for the blog list is

<section class="section">
    <div class="section-background">
        <div class="section-bg-image dvt-demo-bg-image-13"></div>
    </div>
    <div class="section-content">
        <div class="container">
            <div class="row">
                <div class="col-md-8 offset-md-2">
                    <h3 class="h2 dvt-heading-bordered">
                        <small class="text-muted font-italic">Latest</small> News from our Blog
                    </h3>
                </div>
            </div>
            <div class="row">
                <div class="col-md-8 offset-md-2">
                    <!-- Blog List markup -->
                    <div class="card card-hero> ... </div>
                        .
                        . (more posts)
                        .
                </div>
            </div>
        </div>
    </div>
</section>

No sidebar blog

To create a blog list with a sidebar, we need to divide the layout to two parts/columns. One for the sidebar and one for the blog list. To do so, this layout is suggested

<section class="section">
    <div class="section-background">
        <div class="section-bg-image dvt-demo-bg-image-13"></div>
    </div>
    <div class="section-content">
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <h3 class="h2 dvt-heading-bordered">
                        <small class="text-muted font-italic">Latest</small> News from our Blog
                    </h3>
                </div>
            </div>
            <div class="row">
                <div class="col-md-9 push-md-3">
                    <!-- Blog List markup -->
                    <div class="card card-hero> ... </div>
                        .
                        . (more posts)
                        .
                </div>
                <div class="col-md-3 pull-md-9 sidebar">
                    <!-- Code for the sidebar -->
                </div>
            </div>
        </div>
    </div>
</section>

The right sidebar layout is the same as Left Sidebar layout, only to change the order of the sidebar and blog list content.

<section class="section">
    <div class="section-background">
        <div class="section-bg-image dvt-demo-bg-image-13"></div>
    </div>
    <div class="section-content">
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <h3 class="h2 dvt-heading-bordered">
                        <small class="text-muted font-italic">Latest</small> News from our Blog
                    </h3>
                </div>
            </div>
            <div class="row">
                <div class="col-md-9">
                    <!-- Blog List markup -->
                    <div class="card card-hero> ... </div>
                        .
                        . (more posts)
                        .
                </div>
                <div class="col-md-3 sidebar">
                    <!-- Code for the sidebar -->
                </div>
            </div>
        </div>
    </div>
</section>

Blog List Small

To create a blog list with a masonry style, use the following markup

<section class="section">
    <div class="section-background">
        <div class="section-bg-image dvt-demo-bg-image-13"></div>
    </div>
    <div class="section-content">
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <h3 class="h2 dvt-heading-bordered">
                        <small class="text-muted font-italic">Latest</small> News from our Blog
                    </h3>
                </div>
            </div>
            <div class="row">
                <div class="col-md-12
                    <div class="card-columns m-b-9">
                        <!-- Single post markup -->
                        <div class="card> ... </div>
                            .
                            . (more posts)
                            .
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

Blog List Small

The partial file that holds the sidebar content is located in source/html/partials and is named sidebar.html. If you want to edit a widget or add a new one, take a look at the code inside source/html/partials/widgets folder. Each widget has its own file. If you want to add a new widget you need to edit the file sidebar.html.
All widgets are wrapped inside an dvt-widget class and are usually lists with a title. For example,

<div class="dvt-widget widget_tag_cloud">
    <h4 class="dvt-widget-header">Tags</h4>
    <ul>
        <li>
            <a href="blog-list-wide.html">faith</a>
        </li>
        <li>
            <a href="blog-list-wide.html">bible</a>
        </li>
    </ul>
</div>

Checkout the sidebar.html to get an idea of what sort of different widgets you can create.

Adding a post to the list

Adding a post to the list is a matter of adding another

<div class="card> ... </div>

to the blog list section.
In order to create a new post, see this section.

Single Post

Create a new post

When you create a post use a Card. The layout for the post is

<div class="card card-hero dvt-shadow-8 dvt-shadow-hover-16 dvt-transition">
    <img class="card-img" src="the_post_featured_image.png" alt="Card image">
    <div class="card-block">
        <h2 class="card-title m-b-2">
            <a href="single-post.html">Your post title</a>
        </h2>
        <h6 class="card-subtitle font-italic text-muted m-b-3">By <a href="#">author</a> in <a href="#">Some categdvtes</a> on Date</h6>
        <p class="card-text">Your posts text</p>
    </div>
    <div class="card-footer">
        <small class="text-muted"><i class="fa fa-tag"></i> <a href="#" class="text-muted">holy</a>, <a href="#" class="text-muted">mary</a>
        <a href="single-post.html" class="text-uppercase text-muted pull-xs-right">Read More</a></small>
    </div>
</div>

Single Post Page

The single post page is consisted of a card which is used for the post content, navigation below the post, another card for the author of the post, a related posts section, the comments list and a comment form.

Single Post

The layout for the single post page is

<section class="section">
    <div class="section-background background-media">
        <div class="section-bg-image section-bg-image-size-lg-contain section-bg-image-position-xs-top section-bg-image-paralax dvt-demo-bg-image-14"></div>
    </div>
    <div class="section-content">
        <div class="container">
            <div class="row">
                <div class="col-md-8 offset-md-2">
                    <!-- Card -->
                    <!-- Navigation -->
                    <!-- Author Card -->
                    <!-- Related Posts -->
                    <!-- Comments List -->
                    <!-- Comment Form -->
                </div>
            </div>
        </div>
    </div>
</section>

The card for the post content is the same as described in the Create a new post section. For the post navigation arrows, you can use

    <!-- Navigation -->
    <div class="col-md-4 offset-md-2 col-xs-6">
        <h4 class="dvt-heading-bordered text-capitalize m-b-9">
            <a href="#">
                <small class="text-muted font-italic">&larr; Previous</small> God's Peculiar Ways
            </a>
        </h4>
    </div>
    <div class="col-md-4 col-xs-6">
        <h4 class="dvt-heading-bordered dvt-heading-bordered-reversed text-capitalize m-b-9">
            <a href="#">
                <small class="text-muted font-italic">Next &rarr;</small> The Beast & the Book
            </a>
        </h4>
    </div>

Tha author card could use the markup

<!-- Author Card -->
<div class="card  card-hdvtzontal dvt-shadow-8 dvt-shadow-hover-16 dvt-transition m-b-9  dvt-flex-items-md-strech">
    <div class="row">
        <div class="col-md-4">
            <div class="card-img-container">
                <img class="card-img" src="author_image.jpg" alt="author image">
            </div>
        </div>
        <div class="col-md-8">
            <div class="card-block">
                <h3 class="card-title font-italic">
                    <span class="text-muted">Author : </span>
                    High Pastor Bob Ross
                </h3>
                <p class="card-text">Author card text.</p>
            </div>
        </div>
    </div>
</div>

For the Related Posts section you can use this markup for each post

<div class="col-md-4 offset-md-2">
    <div class="card dvt-shadow-8 dvt-shadow-hover-16 dvt-transition m-b-9 dvt-photo-filter-hover-grayscale dvt-transition" >
        <div class="card-img-container">
            <img class="card-img" src="featured_image.jpg" alt="Card image">
        </div>
        <div class="card-img-overlay card-img-overlay-bottom card-img-overlay-fade-to-top">
            <h3 class="card-title">
                <a href="#">Achieving Serenity</a>
            </h3>
            <h6 class="card-subtitle font-italic">By <a href="#">Christos</a> on May 1977</h6>
        </div>
    </div>
</div>

For the comments list use this markup

<!-- Comments List -->
<ul class="media-list m-b-9">
    <li class="media m-t-3">
        <div class="media-left">
            <a href="#">
                <img class="media-object img-circle img-fluid" src="author_avatar.jpg" alt="comments author">
            </a>
        </div>
        <div class="media-body">
            <h5 class="media-heading font-italic">Don Johnson - <small class="text-muted">June 11th, 2017 <a href="#" class="pull-xs-right">reply</a></small></h5>
            <p>Comment text</p>
            <!-- Nested media object -->
            <div class="media m-t-3">
                <a class="media-left" href="#">
                    <img class="media-object img-circle img-fluid" src="author_avatar.jpg" alt="comments author">
                </a>
                <div class="media-body">
                    <h5 class="media-heading font-italic">Peter Chur Chlington - <small class="text-muted">June 11th, 2017 <a href="#" class="pull-xs-right">reply</a></small></h5>
                    Comment text
                </div>
            </div>
        </div>
    </li>
</ul>

For the comment form use this markup

<!-- Comment Form -->
<form>
    <div class="form-group row">
        <div class="col-md-4 offset-md-2">
            <input type="text" class="form-control dvt-shadow-2 dvt-shadow-focus-4 dvt-transition " id="lgFormGroupInput" placeholder="Your Name">
        </div>
        <div class="col-md-4">
            <input type="email" class="form-control dvt-shadow-2 dvt-shadow-focus-4 dvt-transition " id="smFormGroupInput" placeholder="Your Email">
        </div>
    </div>
    <div class="form-group row">
        <div class="col-md-8 offset-md-2">
            <textarea rows="8" class="form-control dvt-shadow-2 dvt-shadow-focus-4 dvt-transition " id="smFormGroupArea" placeholder="Your Comment"></textarea>
        </div>
    </div>
    <div class="form-group row m-t-2">
        <div class="col-md-3 offset-md-2">
            <input type="submit" value="Post Comment" class="form-control btn btn-primary dvt-shadow-2 dvt-shadow-focus-4 dvt-transition ">
        </div>
    </div>
</form>

Left Sidebar Post Page

In order to create a left sidebar single post page, the only difference is that we need to break the posts section to two columns

<section class="section">
    <div class="section-background background-media">
        <div class="section-bg-image section-bg-image-size-lg-contain section-bg-image-position-xs-top section-bg-image-paralax dvt-demo-bg-image-14"></div>
    </div>
    <div class="section-content">
        <div class="container">
            <div class="row">
                <div class="col-md-9 push-md-3">
                    <!-- Card -->
                    <!-- Navigation -->
                    <!-- Author Card -->
                    <!-- Related Posts -->
                    <!-- Comments List -->
                    <!-- Comment Form -->
                </div>
                <div class="col-md-3 pull-md-9 sidebar">
                    <!-- Code for the sidebar -->
                </div>
            </div>
        </div>
    </div>
</section>

Right Sidebar Post Page

Similarly for the right sidebar single post page

<section class="section">
    <div class="section-background background-media">
        <div class="section-bg-image section-bg-image-size-lg-contain section-bg-image-position-xs-top section-bg-image-paralax dvt-demo-bg-image-14"></div>
    </div>
    <div class="section-content">
        <div class="container">
            <div class="row">
                <div class="col-md-9">
                    <!-- Card -->
                    <!-- Navigation -->
                    <!-- Author Card -->
                    <!-- Related Posts -->
                    <!-- Comments List -->
                    <!-- Comment Form -->
                </div>
                <div class="col-md-3 sidebar">
                    <!-- Code for the sidebar -->
                </div>
            </div>
        </div>
    </div>
</section>

Contact

Changing the contact form

The contact form used on source/html/contact.html uses this markup

<form action="contact_mailer.php" class="contact-form" id="contactForm">
    <div class="row row text-xs-center">
        <div class="col-md-6">
            <input type="text" id="name" name="name" class="form-control dvt-shadow-0 dvt-shadow-focus-2 dvt-transition" placeholder="Name">
        </div>
        <div class="col-md-6">
            <input type="email" id="email" name="email" class="form-control dvt-shadow-0 dvt-shadow-focus-2 dvt-transition" placeholder="Your Email">
        </div>
        <div class="col-md-12">
            <textarea id="message" name="message" rows="8" class="form-control dvt-shadow-0 dvt-shadow-focus-2 dvt-transition m-y-3" placeholder="Your Comment"></textarea>
            <input type="submit" value="Post Comment" class="btn btn-primary dvt-shadow-2">
        </div>
    </div>
</form>

Contact Form

Map

Create a new map

In order to add a new map to a page, you need to create a section and add the html required for the map to be drawn.

<div class="google-map" id="map" style="height:450px"></div>

Do not forget to assign the id="map" and class="google-map" so that the javascript kicks in.

Note: the height of the map is set as an inline style style="height:450px"

Make sure that you import the necessary contact.js file for the contact form to work, as in
<script type="text/javascript" src="assets/js/contact.js"></script>

Create an API Key

To use the Google Map you need to get an API Key which will activate the Google Maps JavaScript API and any related services automatically. To get the key, visit the Google Docs here. On that page click on the GET A KEY button

page options From the next screen, if logged into your Google account, click on the Continue button with the Create a project option picked from the select dropdown. From the next screen, once the project is created, give a name to your key and click Create. A popup will show up with the key. We will use that key to import the Google Maps API in the next section.

Imports for the map

In order to have a fully functional map, you need to make sure that you import the Google Maps API using the API key that you created as instructed on the previous section. You need to add

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.26&key=YOUR_API_KEY"></script>

to the beginning of the contact page, before the map options.
Make sure that you replace YOUR_API_KEY with your actual API key. You also need to add the following code that will setup the setings for the map.

<script>
window.map = {
    map_type: 'ROADMAP',
    auto_zoom: 'manual',                                       // set to 'manual' to set the zoom manually. Leave empty for auto zoom
    map_zoom: 7,                                               // set the zoom if auto_zoom is set to
    map_scrollable: 'on',                                      // makes the map draggable
    map_style: 'retro',                                   // if set to blackwhite it takes a black/white saturation
    addresses: ['London', 'Paris',],                           // addresses separated by comma. Addresses are picked up first
    latlngs : ['51.511084, -0.133202','51.506623, -0.111916'], // Lat/Lng separated by comma. if no addresses are set these coordinates will get used
    labels: ['London', 'Paris'],                               // labels that will be added to the markeres respectively. Keep the same number as markers
    auto_center: 'auto',                                       // center the map 'auto' or 'custom'
    center_latlng: '',                                         // centers the map to this point, unless it is set to auto
    show_markers: 'on',                                        // shows/Hides the markers
    markerURL: 'assets/images/marker.png',                     // the marker URL
};
</script>

An explanation of the above options follows.

Changing the map options

In order to change the location of the map you need to edit source/html/contact.html. Inside that file locate the code for the map options

    <script>
        window.map = {
            map_type: 'ROADMAP',
            auto_zoom: 'manual',
            map_zoom: 7,
            map_scrollable: 'on',
            map_style: 'retro',
            addresses: ['London', 'Paris',],
            latlngs : ['51.511084, -0.133202','51.506623, -0.111916'],
            labels: ['London', 'Paris'],
            auto_center: 'auto',
            center_latlng: '',
            show_markers: 'on',
            markerURL: 'assets/images/marker.png',
        };
    </script>

The available options are

map_type : ROADMAP, SATELLITE, TERRAIN or HYBRID.
auto_zoom : set to 'manual' to set the zoom manually. Leave empty for auto zoom
map_zoom : the amount of zoom that you wish to have (1-20), if auto_zoom is set to 'manual'
map_style : blackwhite, retro or regular
map_scrollable : on or off for the map to be draggable
show_markers : on or off.
labels : Set the text that will show as the markers label. If multiple markers are added, make sure that you have set the same number of labels as well.
addresses : Set the addresses of the map's markers. Be careful of the syntax that is being used here. It has to be an array of comma-separated single quotes. Inside the quotes put the addresses separated by comma. Leave empty if you want to use lat/lng. Example for 3 addresses ['address 15 New York','address 22 New Orleans','address 3 Amsterdam']
latlngs : Set the latitude and longitude of the map's location. Be careful of the syntax that is being used here. It has to be an array of comma-separated single quotes. Inside the quotes put the latitude and longitude separated by comma. Example for 3 markers ['lat1, lng1','lat2, lng2','lat3, lng3']
auto_center : Set to auto if you want the map to be centered automatically, fitting all the markers that you have inserted or custom if you want to set the center of the map
center_latlng : Set the lat/lng according to which you want the map to be centered at, unless auto_center is set to auto
markerURL : Set the URL of the marker's icon.

Advanced

PHP Contact Form

The contact form uses the PHPMailer, which is a full-featured email creation and transfer class for PHP. For more about PHPMailer please visit the official website http://phpmailer.worxware.com/.

Connecting the Contact Page to PHPMailer

For your contact page to connect to PHPMailer, you need to make sure that your form has an action set to call contact-mailer.php on the server, as in

    <form action="contact-mailer.php" class="contact-form" id="contactForm">

Also, you need to make sure that there is a folder named vendor in the root of the theme. This is the PHPMailer plugin. For the ajax call to take place, it is also vital that you assign the contact-form class to the form, which triggers the related javascript.

For the contact form to work properly, you need to add to the related page

    <script type="text/javascript" src="assets/js/contact.js"></script>

Setup PHPMailer

To setup your contact form you will need to edit the contact-mailer.php file in the main theme folder. The first 62 lines can be modified to customise your contact form.

Set the main host. It is by default set to smtp.gmail.com if you are using a GMail account. Other options are
- Hotmail => smtp.live.com
- Yahoo => smtp.mail.yahoo.com
- Lycos => smtp.mail.lycos.com
- AOL => smtp.aol.com
Set the SMTP username and password. This is the email account that PHPMailer will use to send the email. Change some_email@email.com to the email that you want to use and secret to the password of that email, from lines 16, 17.
Set the address that the email of the form will be delivered to. Change the receiver@mail.com from line 21 to the address that you want.
Set the company name - When a message arrives in your inbox it will have a subject with your company name inside. To change this edit line 26 and change the your_company to your company name.
Set which fields are required - to change which fields are required in your form you can edit the following
```
 $field_rules = array(
  'name' => 'required',
  'email' => 'required|valid_email',
  'message' => 'required'
 );
```
Remove the lines of the fields you do not want to be required.

Change error validation messages - to change the error messages that popup on the forms change the following section

 $error_messages = array(
  'required' => 'This field is required',
  'valid_email' => 'Please enter a valid email address'
 );
 // select where each inputs error messages will be shown
 $error_placements = array(
  'name' => 'top',
  'email' => 'top',
  'subject' => 'right',
  'message' => 'right',
  'submitButton' => 'right'
 );

$error_messages - defines the messages shown in the popups.

$error_placements - defines where the popups will appear on (top|bottom|left|right).

Keep in mind that you need to include the <script src="assets/js/contact.js"></script> at the end of the <body>.

Troubleshooting

If you have done all of the above as instructed and you still have issues with the contact form, please do the following:

Contact your host and ask them if PHP is enabled and if outgoing connections are enabled.
Check if the vendor folder exists on your server.

Enable debug mode on PHPMailer and get more info on the problem. You can enable debug mode if you add the following line to the beginning of contact-mailer.php, after

 $mail = new PHPMailer;
 $mail->SMTPDebug  = 2; // enables SMTP debug information (for testing)
                // 1 = errors and messages
                // 2 = messages only

Follow the instructions provided by PHPMailer troubleshooter here.

Technologies

Thank You for purchasing the Divinity Bootstrap 4 HTML template!

Bootstrap 4

Divinity is built on top of a few fantastic technologies. Bootstrap is the most popular HTML, CSS, and JS framework in the world for building responsive, mobile-first projects on the web. Bootstrap makes front-end web development faster and easier. It's made for folks of all skill levels, devices of all shapes, and projects of all sizes.

Getting Started

Downloading

Unzipping

Zip Contents

HTML or Gulp

HTML

File Structure

HTML Structure

Deploying

Gulp Setup

The source files

Prerequisites

Installing Node.js

Checking node

Installing bower

Checking bower

Setup Development Server

Use the source

Installing node packages

Installing Git

Installing bower packages

Running the development server

Browsersync

Production build

Running a production build

Available Demos

Logo

Changing the header logo

Setting the logo link url

Fonts

Default fonts

Changing the site fonts

Typography

Headings

Font Weight

Line height

Light Text Color

Colors

Changing the site colors

Header

Basic Menu markup

Menu Layout

Fullwidth Menu

Sticky Menu

On Hover Menu

Transparent Menu

Floating Menu

Footer

Footer structure

Adding a widget to the footer

Adding a sub footer

Layout

Page Layout

Page Sections

Create a section with a color background

Create a section with an image background

Section background image position

Create a section with a parallax background

Section background image sizes

Section background image repeat

Section background image fixed

Cards

Card Components

Card Layout

Card block

Image container

Card Footer

Utilities

On scroll animations

Margin

Margins For All Devices

Padding

Opacity

Shadow

Smooth transitions

Text

Image filters

Blog

Blog List

No Sidebar