episoda | Documentation

1. Getting started -
top

We assume you have basic knowledge of HTML / CSS and JS. In this doc, you will not learn how to code but you will learn how to setup, use and customize this template. Before you begin to make sure you have a code editor, you can use a code editor like Notepad++ will be enough.

Features

All in this wonderful template is prepared for easy setup and use it:

fully responsive
clean, creative and modern design
based on bootstrap 4
web friendly fonts
cross-browser compatibility
pop-up window
background music
and more...

File/Folder structure

Within the download, you'll find the following file structure, logically grouped common assets.

Once downloaded, unzip the compressed folder to see the structure of the template. You'll see something like this:

episoda/
├── audio/
├── css/
├── fonts/
├── img/
├── js/
├── libs/
├── index.html
└── other files

audio: this folder contains audio files for background music.
css: this folder contains all style files or stylesheets.
fonts: this folder contains all the fonts used for in the template.
img: this folder contains all the images
js: this folder contains all the JS scripts
libs: this folder contains all the scripts and all style files or stylesheets separate auxiliary libraries
index.html: this main HTML file of this template

2. HTML Structure -
top

On opening the main index.html file. You can see the full HTML structure of the template. Every part of the template is properly commented so you can see which code starts/ends.

Let's consider how to edit and create the main elements of a page. Smaller elements of the page are edited according to similar principles. For example, you want to do one of the following:

Setting the color scheme

The template has two color schemes.

- episoda-orange-color-scheme

- episoda-green-color-scheme

Now set the first, orange, color. If you want to change the color, find the following code:

...
<body id="episoda-body" class="episoda-orange-color-scheme">
...

You need to rewrite the attribute value, for example in this way class="episoda-green-color-scheme"

Editing preloader

It's easy to change the information you need.

<!-- Start Preloader -->
<div id="preloader" class="episoda-preloader">
    ...
    <div class="episoda-preloader-title">
        <h3>Hi, I'm Mark!</h3>
    </div>
    <div class="episoda-preloader-text">
        <p>I love to travel. I've been to really amazing places...</p>
        ...
</div>
<!-- End Preloader -->

In the<h3>tag, write your greetings or phrase. In the<p>tag, write some more information. Now this information will be displayed in the preloader.

The preloader can also be configured so that it itself disappears after downloading the template, or after performing a particular action by the user. This is discussed below, in the JavaScript section.

Also on the background of the preloader, you can set the image. All you need to do is add a special class img-background and a path to the image. And it will look something like this:

<!-- Start Preloader -->
<div id="preloader" class="episoda-preloader img-background"  style="background-image: url('img/your-img-path.jpg');">
    ...

Ok, next step!

Editing Header / Slider

Editing information in header is very simple.

Preparation and change image. You can easily change image with some simple steps

Prepare your image, resize it to 1920px width, save as a .jpg file (quality 70%) for the optimal image size to have a fast loading page.
Copy your image to /img folder.
Find the appropriate section code and change image URL in the HTML markup (src attribute).

These actions apply to all photos for your template.

Want to change the background image in slide? Open in the editor index.html. Find this code and change image URL:

<!-- Start Header -->
<header class="episoda-header">
...
    <!-- header slider -->
    <section id="episoda-header-slider" class="episoda-slider owl-carousel">

        <!-- slide -->
        <div class="episoda-slide" data-hash="1">

            <!-- slide img -->
            <img class="episoda-slide-img" src="img/some-slide-1.jpg" alt="header slide image">
            <!-- end slide img -->
...

URL for the image is placed in this attribute src="img/some-slide-1.jpg" Set the name of the image you need.

Please note that when switching slides, the hash changes in the URL of the browser. This is done so that your users can easily send each other URL with the right photo from your gallery.

This line of code corresponds to this action <div class="episoda-slide" data-hash="1"> Change the value of this attribute data-hash

This can be the number that corresponds to the sequence number of your slide, or it may look like this data-hash="my-best-photo"

Do you want to change the text in the slide? Open in the editor index.html. Find this code and change a text in it:

<!-- Start Header -->
<header class="episoda-header">
...
    <!-- header slider -->
    <section id="episoda-header-slider" class="episoda-slider owl-carousel">

        <!-- slide -->
        <div class="episoda-slide" data-hash="1">
        ...
            <!-- slide content -->
            <div class="episoda-slide-content">

                <div class="container h100">
                    <div class="row align-items-center h100">

                        <div class="col-md-10 col-lg-8 col-10">

                            <p>Hawaiian islands</p>
                            <h1>Crystal clear water near the shore</h1>
                            <a href="#hawaii" class="episoda-pop-up-btn">Read more<i class="episoda-right-arrow"></i></a>

                        </div>

                    </div>
                </div>

            </div>
            <!-- end slide content -->

        </div>
        <!-- end slide -->
...

This code snippet contains the information you need:

<p>Hawaiian islands</p>
<h1>Crystal clear water near the shore</h1>

In the <p> tag, for example, write the location where the photo was taken, and the <h1> tag, the photo name. Enter the information that you think will be needed.

This part of the code <a href="#hawaii" class="episoda-pop-up-btn">Read more<i class="episoda-right-arrow"></i></a>is a link to a pop-up window with a wider description of the photo and its characterizations.

All articles in this template are opened in the pop-up window. To open that particular article that is associated with the slide, you need to specify the name of the ID pop-up window in this attribute href="#hawaii"

Later we'll look at how to create a pop-up window.

Editing background music

Change background music. You can easily change audio-track with some simple steps

Copy your needed audio-track to /audio folder.
Find the appropriate code and change audio URL in the HTML markup (src attribute).

To perform this action, you need to find the following HTML code:

<!-- Start Header -->
<header class="episoda-header">
...
    <!-- audio track -->
    <audio id="episoda-audio-bg" class="episoda-audio" loop>
        <source src="audio/Sinimabeats%20_-_%20I've_tried_everything.mp3" type="audio/mpeg">
    </audio>
    <!-- end audio track -->
...

URL for the audio track is heresrc="audio/Sinimabeats%20_-_%20I've_tried_everything.mp3"

You can also configure the ability to automatically play music in this template. This can be done this way<audio id="episoda-audio-bg" class="episoda-audio" loop autoplay> We added valueautoplay But note that even adding this value to auto-play an audio file is not always allowed in every browser.

Editing links to the social network

This is a very simple action.

How do I create or change links to the social network? Find this code and change it:

<!-- social media -->
<div class="episoda-social-media">
    <a href="#" class="episoda-social-media-link">instagram</a>
    <a href="#" class="episoda-social-media-link">facebook</a>
    <a href="#" class="episoda-social-media-link">twitter</a>
</div>
<!-- end social media -->

You can do this here, add this new line of HTML code <a href="URL-social-network" class="episoda-social-media-link">name social network</a>

Remember that this attribute href="URL-social-network" should indicate the URL link to the social network you want, and it should point to your account in it.

Editing the site menus

There are two menus in the template. One is responsible for the navigation of your gallery, another for classic navigation pages and posts.

How do I edit a menu for my gallery? Find this code in index.html and change it:

<!-- Start Pop-up window Menu -->
<div id="menu" class="episoda-pop-up-window">
    ...
    <nav class="episoda-menu">
        <ul>
            <li class="episoda-menu-item" style="background-image: url('img/hawaii.jpg')">
                <a href="#1"><span class="episoda-item-num">01</span><span class="episoda-item-title">Honolulu, Hawaii, USA</span></a>
            </li>
            ...
            <li class="episoda-menu-item" style="background-image: url('img/cape-perpetua.jpg')">
                <a href="#12"><span class="episoda-item-num">12</span><span class="episoda-item-title">Cape Perpetua, USA</span></a>
            </li>
        </ul>
    </nav>
</div>
<!-- End Pop-up window Menu -->

To create a new menu item, you need to add an HTML code:

<li class="episoda-menu-item" style="background-image: url('img/preview-img.jpg')">
    <a href="#13"><span class="episoda-item-num">13</span><span class="episoda-item-title">Location where the photo was taken</span></a>
</li>

In this attribute style="background-image: url('img/preview-img.jpg')", specify a URL link for previewing the image.

In this <a href="#13">, in attribute href, specify the hash you assigned to the slide when it was created. If you set this to slide data-hash="my-best-photo" then you need to set the link to it as follows href="#my-best-photo"

Here, set the slide number <span class="episoda-item-num">13</span>

And here, the area where the photograph was made <span class="episoda-item-title">Location where the photo was taken</span>

How do I edit a classic menu? Find this code in index.html:

<!-- second menu -->
<nav class="episoda-second-menu">
    <ul>
        <li class="episoda-menu-item">
            <a href="#about" class="episoda-pop-up-btn">About</a>
        </li>
        <li class="episoda-menu-item">
            <a href="#blog" class="episoda-pop-up-btn">Blog</a>
        </li>
        <li class="episoda-menu-item">
            <a href="#contacts" class="episoda-pop-up-btn">Contacts</a>
        </li>
    </ul>
</nav>
<!-- end second menu -->

In this menu, the menu is already configured, you just need to know that this attribute href="#about" specifies the ID for the corresponding pop-up window. This way the template knows exactly which pop-up window to open.

Pop-up windows

So it's time to find out how pop-up windows work in this template.

How do I create a pop-up window? For example. In fact, the code structure of the pop-up window is:

<!-- Start Pop-up window -->
<div id="ID-pop-up-window" class="episoda-pop-up-window">
    <a href="#ID-pop-up-window" class="episoda-ico-close">
        <span class="episoda-cross-first"></span>
        <span class="episoda-cross-second"></span>
        <span class="episoda-label">close</span>
    </a>
    <div class="container">
        <div class="row">

            <article class="col-md-8 col-lg-6 col-12 offset-md-2 offset-lg-3 offset-0">

                <img src="img/URL-for-img.jpg" alt="Alternative text for image" class="episoda-img-responsive">
                <header>
                    <p>Some information</p>
                    <h2>Title</h2>
                </header>
                <div class="episoda-content">
                    <p>Content of this article</p>
                    ...
                </div>
                <footer class="episoda-details">
                    <dl class="episoda-details-container">
                        <div class="episoda-details-item">
                            <dt class="episoda-item-name">Detail name 1</dt>
                            <dd class="episoda-item-data">Detail description 1</dd>
	                    </div>
                        ...
                        <div class="episoda-details-item">
                            <dt class="episoda-item-name">Detail name N</dt>
                            <dd class="episoda-item-data">Detail description N</dd>
                        </div>
                    </dl>
                </footer>

            </article>

        </div>
    </div>
</div>
<!-- End Pop-up window -->

You can use this snippet as the initial structure for your pop-up window.

Now this code snippet should be placed outside this code (file index.html can serve as a sample).

</main>
<!-- End Main content -->

In order to link a certain button with a certain pop-up window, in the code of the pop-up window we will find the following code snippet:

<!-- Start Pop-up window -->
<div id="ID-pop-up-window" class="episoda-pop-up-window">
...

It is important that the attribute id pop-up window coincided with the value with the attribute href button in the slide.

For example, if you set the value of the button this way:

...
<a href="#cape-perpetua" class="episoda-pop-up-btn">Read more<i class="episoda-right-arrow"></i></a>
...

then the value of the attribute id pop-up window should be written in this way:

<!-- Start Pop-up window -->
<div id="cape-perpetua" class="episoda-pop-up-window">
...

View samples of created pop-up windows in the template and you will understand the logic of their construction, editing content.

3. CSS Structure -
top

We using one CSS files in this template, in which you can make changes. This file is here: css/main.css. All other files should not be edited.

This file contains all of the specific stylings of the page. In the file of styles, everything is well commented. Its structure looks like this:

/* ------------------------------------------------------
 *  Stylesheet Guide
 *-------------------------------------------------------

    1. Global
        1.1. Fonts
            1.1.1. Logo font - Montserrat
            1.1.2. Header font - Hind
            1.1.3. Text font - Open Sans
        1.2. General styles
        1.3. Color schemes
            1.3.1. Color scheme - orange (#ff5959)
            1.3.2. Color scheme - green (#2ddf7b)
        1.4. Preloader
        1.5. Typography
        1.6. Custom class
        1.7. Icons class
            1.7.1. Ico nav open
            1.7.2. Ico audio button
            1.7.3. Ico close
            1.7.4. Ico label
            1.7.5. Ico arrows
    2. Menu
    3. Header
        3.1. Header slider
            3.1.1. Header slide animation
        3.2. Header logo
        3.3. Header second menu
        3.4. Header Ico nav open
        3.5. Header copyright
        3.6. Header social media
        3.7. Header Ico audio button
    4. Pop-up window
        4.1. Pop-up window contact form
        4.2. Pop-up window animation
    5. Media queries

 *------------------------------------------------------ */


/* ------------------------------------------------------
 *  1. Global
 *------------------------------------------------------ */

    /* ------------------------------------------------------
     *  1.1. Fonts
     *------------------------------------------------------ */

        /* ------------------------------------------------------
         *  1.1.1. Logo font - Montserrat
         *------------------------------------------------------ */

            @font-face {
              font-family: "Montserrat";
              font-weight: normal;
              font-style: normal;
              src: url("../fonts/Montserrat/Montserrat-Regular.eot");
              src: url("../fonts/Montserrat/Montserrat-Regular.eot?#iefix") format("embedded-opentype"), url("../fonts/Montserrat/Montserrat-Regular.woff") format("woff"), url("../fonts/Montserrat/Montserrat-Regular.ttf") format("truetype");
            }

            ...

In general, table of contents is placed at the top of this file.

If you would like to edit a specific section of the site, simply find the appropriate label in the CSS file, and then scroll down until you find the appropriate style that needs to be edited.

In addition to this file, the template also uses other style files. These are the styles of various libraries. They are linked at the top of index.html file, it looks like this:

    ...

    <!-- Start CSS files -->
    <link rel="stylesheet" href="libs/bootstrap/bootstrap-reboot.min.css">
    <link rel="stylesheet" href="libs/bootstrap/bootstrap-grid.min.css">
    <link rel="stylesheet" href="libs/OwlCarousel2/dist/owl.carousel.min.css">
    <link rel="stylesheet" href="css/main.css">
    <!-- End CSS files -->

</head>

4. JavaScript -
top

This template use one file for scripts that can be edited. But for that, you need some skills. This file is here: js/scripts.js. This javascript file is well commented.

Change the preloader. Open in the editor scripts.js. Find this code:

...

/* Preloader */
    var autoPreloader = false,
        perfData = window.performance.timing,
        EstimatedTime = -(perfData.loadEventEnd - perfData.navigationStart),
        time = parseInt((EstimatedTime/1000)%60, 10)*100;

...

Now the preloader is configured so that after downloading the template, the user has to take some action to continue browsing the site. Preloader can be set to automatic mode. That is, after full page download, it will automatically disappear, and the user will be able to continue viewing the site.

To adjust this option, change the value of this variable autoPreloader = false, To preloader automatically disappearing, set the value of this variable to it autoPreloader = true,

Maybe you want to change the switching time of the slides in header? Open in the editor scripts.js. Find this code:

...
/* Header slider */
    ...

    var owlOptions = {
        items: 1,
        loop: true,
        nav: true,
        navText: ['<i class="episoda-left-arrow"></i>Prev', 'Next<i class="episoda-right-arrow"></i>'],
        autoplay: true,
        autoplayTimeout: 60000,
        animateIn: 'fadeIn',
        animateOut: 'fadeOut',
        URLhashListener: true,
        startPosition: 'URLHash'
    }

...

We need to change the value for this property autoplayTimeout: 60000, Now set '60000', this indicates that the slides are switched every 60 seconds. For example, you want to switch them at intervals of 100 seconds (1 minute 40 seconds). Then you need to write the value in this way autoplayTimeout: 100000,

All JavaScripts files are linked at the bottom of index.html. This code looks like this:

...

    <!-- Start JavaScript files -->
    <script src="libs/jquery/dist/jquery.min.js"></script>
    <script src="libs/OwlCarousel2/dist/owl.carousel.min.js"></script>
    <script src="js/scripts.js"></script>
    <!-- End JavaScript files -->

...

5. Sources and Credits -
top

I've used the following images, icons or other files and plugins as listed.

Once again, thank you so much for purchasing this template. As I said at the beginning, I'd be glad to help you if you have any questions relating to this theme. No guarantees, but I'll do my best to assist.

AirFast