Loox – HTML5 Luxury Landing Page

Loox - Documentation

“Loox - HTML5 Luxury Landing Page” Documentation by “Travertino” v1.0
Created: 02/02/2015
Author: Travertino limited
Web site: http://travertino.io
Support: http://support.travertino.io
Thank you for purchasing our theme.
If you have any questions that are beyond the scope of this help file, please feel free to contact us via our support center.

An online copy of this documentation is available here:
http://support.travertino.io/documentation/loox-html5-luxury-landing-page/

 

Introduction

Loox – HTML5 Luxury Landing Page theme is a responsive HTML theme based on Bootstrap Grid. The theme is suitable for Coming soon, Landing Page or Special Offers page.

The package is designed to be easily customized and is built with reusable sections, thus you can design the page choosing how many sections to be displayed and their sorting.

The package contains the following preconfigured sections:

  • Header Countdown, that comes with two different styles of counter → look inside index-01.html
  • Header Revolution Slider → look inside index-02.html
  • Header Simple Banner + Call to Action → look inside index-03.html
  • Image gallery
  • Product gallery
  • Newsletter subscription form
  • Twitter Embed
  • Twitter Feed (uses PHP)
  • Regular Content
  • Gift Card
  • Contact Form Mail (uses PHP)

Features:

  • Fully Responsive
  • Coming Soon / Under Construction Page Template
  • Landing Page Template
  • Special Offers Page Template
  • One-Page, Smooth Scrolling Layout
  • Three differents Header solutions
  • Product and Image Gallery
  • Newsletter Subscription Section
  • Working Contact Form (requires PHP)
  • Twitter Feed that uses Twitter API (requires PHP)
  • Tested in IE 10 and 9, Firefox, Chrome, Safari and Opera
  • Bootstrap framework
  • Social Icons
  • Great Smooth Animations
  • HTML5 & CSS3

Libraries:

Credits

All images used in the demo ARE NOT distributed with the theme.
All demo images are licensed for demo use and purchased from Dollar Photo Club.

Fonts used are Josefin+Sans, Lusitana and Oswald, provided by Google Fonts.

Icons library is Entypo+, packaged by IcoMoon.

Documentation

Awesome and detailed documentation for easy customization.
It contain a PDF file with step by step instructions for modifying everything and creating your own theme.

Back To Top

HTML Files

Available templates

The structure is based on a flexible grid that lets you change HTML pages quickly and logically with a nestable system.

First of all, pick the template model you need:

  • index-01.html : it’s the Coming Soon Page
  • index-02.html : it’s the Slider Landing Page
  • index-03.html : it’s the Special Offers Page
  • index-all.html : it’s the All in One page, with all the sections contained in a single page. That makes the theme easily customizable, in order to build your own layout, removing unwanted sections or changing their order.

Theme Directory structure

We split assets into different directories, and we also provide both standard and minified/compressed version of each CSS / JAVASCRIPT files.

  • /content: images used in the theme
  • /icons: Entypo+ icon library (every icon used in the theme, like sharing buttons etc…)
  • /javascripts: javascript plain and minified version with theme specific functions
  • /php: all PHP libraries used by Twitter Feed and Contact Form
  • /stylesheets: bootstrap and screen css
  • /vendor: all plugins and library assets used in this theme. Inside /vendor/min you will find the minified version of each vendor files

We decided to place plugins and library assets inside a separate directory.
This way you can easily find the CSS/JS theme files that are inside /stylesheets and /javascripts folders.

Fonts

The font-family of the whole page is Josefin Sans, by Google web fonts, except headings, that we used Lusitana again from Google Web fonts. The Oswald by Google web fonts is used only for the “Flip Coutdown”, and only on index-01.html (see Customize section chapter), so if you don’t use the style-flip class for coutdown you can safely remove it.

If you like to change it with a usual web safe font (arial, verdana etc.) you must remove from <head> section of any html file the lines:

<!-- Fonts -->
<link href='//fonts.googleapis.com/css?family=Josefin+Sans|Lusitana' rel='stylesheet' type='text/css'>
<link href='//fonts.googleapis.com/css?family=Oswald&text=0123456789' rel='stylesheet' type='text/css'>
<!-- / Fonts -->

and also change the font-family class to lines 324, 337, 471, 650, 708 of file /stylesheets/screen.css from font-family: ‘Josefin Sans'; or font-family: ‘Oswald'; to font-family: Arial; (for example). If you want to change a font, simply find for “Lusitana” or “Josefin”.

By default we set two different CSS class, that you can modify or use inside HTML:

  • primaryFont – set to Josefin Sans, defined into /stylesheets/screen.css, row 413
  • secondaryFont – set to Lusitana, defined into /stylesheets/screen.css, row 416

HTML Structure

Every component is wrapped inside a tag “<section>”, and if you want to find them, simply find the related and commented heading in HTML files:

loox-section-commented-heading

Every section is wrapped inside two comments, like:

<!--  Header: Cowntdown  -->

and

<!--  / Header: Cowntdown  -->

 

Every single section is fully documented in the Customize Sections chapter.

Header settings

In the very beginning part of the HTML, you will find some informations to customize. It’s related to page title, metas, description and icons.

Title and meta

Please change the page title and description based on your needs, but please consider these rules:

  • for title and og:title, Google shows 55 Characters (Including Spaces) for Page Title
  • for description and og:description Google shows 156 Characters (Including Spaces) for Meta Description

Please look inside the “Title and Meta” section:

<!-- Title and Meta -->
<title>Loox – HTML5 Luxury Landing Page</title>
<meta name="description" content="Loox – HTML5 Luxury Landing Page theme is a responsive HTML theme based on Bootstrap Grid.">
<meta property="og:title" content="Loox – HTML5 Luxury Landing Page" />
<meta property="og:description" content="Loox – HTML5 Luxury Landing Page theme is a responsive HTML theme based on Bootstrap Grid." />
<!-- / Title and Meta -->

Favicons

The theme provide favicons for various resolutions:

  • standard favicon: favicon.png
  • Apple touch Icon (Standard): apple-touch-icon.png
  • Apple touch Icon (72×72): apple-touch-icon-72×72.png
  • Apple touch Icon (114×114): apple-touch-icon-114×114.png

You may find the favicon code looking for “Favicons” section in the HTML:

<!-- Favicons -->
<link rel="shortcut icon" href="favicon.png" type="image/x-icon">
<link rel="icon" href="favicon.png" type="image/x-icon">
<link rel="apple-touch-icon" href="apple-touch-icon.png">
<link rel="apple-touch-icon" sizes="72x72" href="apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="114x114" href="apple-touch-icon-114x114.png">
<!-- / Favicons -->

 please replace that images accordingly to your logo.

Back To Top

CSS Files

We’re using the following CSS files in this theme:

  • /stylesheets/screen.css -> main css for this template layout with some extra media queries
  • /stylesheets/bootstrap.css -> the main bootstrap css file for grid and responsive layout
  • /stylesheets/custom.css -> empty custom file, where put users customizations
  • /icons/style.css -> library of the icons used in the project
  • vendor/pretty-photo/css/prettyPhoto.css -> prettyPhoto CSS
  • vendor/revolution.slider/css/settings.css -> Slider Revolution CSS

If you would like to edit the layout of any elements in whole theme, you would do the following:

Open the CSS file you want to change, mainly /stylesheets/screen.css, so that is extremely easy to change any css attributes. Simply find the related and commented heading in this css file and make your changes.

loox-css-commented-heading

NOTE:
If you want to extend the CSS’s without modifing the originals, an empty file /stylesheets/custom.css is provided; here you can overwrite or add any CSS class that will be used instead the original.

Back To Top

JavaScript Files

This theme uses jQuery framework with various additional plugins.

  • vendor/min/jquery.js
  • vendor/min/jquery.form.js
  • vendor/min/jquery.mousewheel.js
  • vendor/min/jquery.simplr.smoothscroll.js
  • vendor/min/imagesloaded.pkgd.js
  • vendor/min/isotope.pkgd.js
  • vendor/min/jquery.countdown.js
  • vendor/min/jquery.parallax.js
  • vendor/pretty-photo/js/jquery.prettyPhoto.js
  • vendor/revolution.slider/js/jquery.themepunch.tools.min.js
  • vendor/revolution.slider/js/jquery.themepunch.revolution.js
  • php/Tweetie/tweetie.min.js
  • javascripts/loox.js

By default all JS plugins use the minified version, that you can find it inside vendor/min/plugin-name.js directory.

Only if you need to modify the default behavior of elements, you need to open and change these files. You may use the unminified version; please change the path to vendor/plugin-name.js before modify it.

The main JS file, including the code written for the theme’s features is /javascripts/loox.js.

Back To Top

Customize Sections

Here you can find the documentation for every single sections.

Coming soon: Countdown

Countdown can be easily customized by changing appropriate values configurable inside the section.

Countdown comes with a classic layout and a flip layout by default.

The classic layout looks like this:

loox-header-coming-soon-default

The flip layout looks like this:

loox-header-coming-soon-flip

Here the possible configurations:

<div 
data-end-date="2018/05/15" 
data-labels="days|hours|minutes|seconds" 
data-dateFormat="%D:%H:%M:%S" 
class="countdown style-classic js-countdown"
>
  •  data-end-date: is the final date of the countdown, in the format YYYY/MM/DD
  • data-labels: labels of all the elements of the countdown, separated by pipe (“|”)
  • data-dateFormat: how the date is formatted
  • class: here you can change the style-classic class (for classic layout) to style-flip class (for flip layout). Please do not remove the other declared classes.

Landing Page: Slider Revolution

This kind of header uses Slider Revolution JQuery plugin. You can find full documentation about Slider Revolution inside documentation folder of our package.

Slides are implemented inside an HTML list (<UL> tag). Every single <LI> represents a slide of the whole animation.

The single structure is represented here:

<li class="style-1">
<img src="content/header-slideshow/1.jpg" alt="" class="defaultimg">
<div class="siteHeader__action tp-caption sfb hidden-xs" data-x="right" data-y="top" 
     data-voffset="50" data-speed="500" data-start="0" data-easing="Back.easeOut" data-endeasing="Power1.easeIn">
  <div class="product__action is-stacked is-hallow">
    <a href="#" class="product__button">Buy<span class="hidden-xs"> Now</span></a>
    <span class="product__price">$379.
      <sup>99</sup>
    </span>
  </div>
</div>
<h1 class="tp-caption sfr ltl" data-x="0" data-y="50" data-speed="500" data-start="1200" 
    data-easing="Power4.easeOut" data-endspeed="300" data-endeasing="Power1.easeIn" data-captionhidden="off">
  LOVE IS IN THE AIR...
</h1>
<h3 class="tp-caption lfl ltr" data-x="500" data-y="125" data-speed="1500" data-start="1600" 
    data-easing="Power1.easeOut" data-endeasing="Power1.easeIn" data-captionhidden="off">
  <em>I love you</em>
</h3>
<div class="tp-caption sfb" data-x="center" data-y="bottom" data-voffset="-100" 
  data-speed="500" data-start="2500">
  <img src="content/header-slideshow/product_2.png" alt="" />
</div>
</li>

Every slide has 5 elements to show:

  • Background image
  • Buy now (call to action)
  • Title
  • Subtitle
  • Highlighted product/image
Customize slides

You can easily add extra elements to the header, by simply injecting a new div respecting some special requirements: first of all, it does need to have tp-caption class.

Then, you need to specify where the element should appear, by using attributes data-x and data-y. You may also specify speed (by using data-speed), delay (by using data-start) and so on. All timing related values are expressed in miliseconds. Thus you have to use 1000 instead of  1 second  (that allows you to make things animated for a half of a second and so on).

You have some defined class names that helps you to animate things quickly too, that are acronyms of the english phrases, i.e.: sft is the acronym for Short From Top, lfb is the acronym for Long From Bottom. You may find the full list of classes on Slider Revolution documentation looking for “INCOMING ANIMATION CLASSES” and “OUTGOING ANIMATION CLASSES”.

Special Offer: Banner + Call to Action (CTA)

This Banner uses Slider Revolution, the only exception is that here there’s only one slide, so the animation effects are visible only on page load.

For full documentation about Slider Revolution please visit Landing Page: Slider Revolution chapter or Slider Revolution documentation.

Social Sharing

Please modify this section to customize your own social links.
Please find “Social Sharing” in HTML file, then find links and change the # with your own social link.

If you want to add or modify the icon, simply change the class, like “icon-facebook” with the appropriate class, you can find all the icons classes inside: /icons/demo.html  or browse online here:

http://themes.travertino.io/loox-html5/dist/html/icons/demo.html

Here a single share element:

<li class="share__item col-xs-4">
  <a href="#">
    <i class="icon icon-facebook"></i>
    <span class="hidden-xs">SHARE US ON FACEBOOK</span>
  </a>
</li>

You can easily add extra elements to the slides by simply injecting a new div following some special requirements: first of all, it does need to have tp-caption class.

Image gallery

Please modify this section to customize how image gallery looks like. Basically you can replace images, but if you want to modify the gallery layout or image paths, you need to:

  1. Find the section named “Image Gallery” inside HTML
  2. For each <article> tag – that represent any single gallery item (every single images) – please change a->href attribute for the full size image, and img->src attribute for the preview (that is displayed in the page).

Here a single article element:

<article class="product col-sm-3 col-xs-12">
  <a rel="prettyPhoto[gallery1]" href="content/jewels-gallery-3/gallery-item.jpg" class="product__thumb-gallery product__thumb">
    <img src="content/jewels-gallery-3/gallery-item.jpg" alt="" />
  </a>
</article>
Load More Images action

LOAD MORE IMAGES link is managed using an AJAX call to a server side URL. This URL may return only the portion of the code related to the gallery in order to be automatically injected into the correct HTML code position.

You may customize this part, changing the URL to a dynamic page, or if you don’t need it, you can entirely remove that part of code.

<div class="ta-c product__loadMore">
  <a href="fixtures/gallery-fixtures.html" class="js-loadMoreIsotopes">+ LOAD MORE IMAGES</a>
</div>

If you want to build your server side script, an example of the HTML output structure is provided on /fixtures/gallery-fixtures.html

Product gallery

Please modify this section for customize how Product gallery looks like. Basically you can modify product name, images and prices, and you need to:

  1. Find section named “Product Gallery” inside HTML
  2. For each <article> tag, that represent any single product item, please change:
    1. h2->span: for Product Title
    2. div->img: for product image
    3. footer->a->href: link to e-commerce or product detail (“buy now”), by default set to #
    4. footer->span: product price

Here a single article element:

<article class="product is-equalized col-sm-3 col-xs-12 is-mid-aligned">
  <div>
    <h2 class="product__title title-hasSeparator">
      <span>LOREM IPSUM DOLOR</span>
    </h2>
    <div class="product__thumb">
      <img src="content/jewels/1.jpg" alt="" />
    </div>
    <footer class="product__action is-absolute">
      <a href="#" class="product__button">Buy<span class="hidden-xs"> Now</span></a>
      <span class="product__price">$22</span>
    </footer>
  </div>
</article>
Load More Products action

LOAD MORE PRODUCTS link is managed using an AJAX call to a server side URL. This URL may return only the portion of the code related to product gallery in order to be automatically injected into the correct HTML code position.

You can customize this part, changing the URL to a dynamic page, or if you don’t need it, you can remove that part of code.

<div class="ta-c product__loadMore">
  <a href="fixtures/product-fixtures.html" class="js-loadMoreIsotopes">+ LOAD MORE PRODUCTS</a>
</div>

If you want to build your server side script, an example of the HTML output structure is provided on /fixtures/product-fixtures.html

Regular Content

This section is designed to place some standard contents, with image, title and text. For customizing this section, please do the following:

  1. Find inside HTML the section named “Regular Content”
  2. Change the code accordingly,
    • h1->img: an image or logo
    • h6->em: subtitle or payoff
    • h3->span: title of the section
    • p: paragraph’s, you can put more than once <p> tag, one for each paragraph you need

Subscribe to Newsletter

Newsletter section is a static element, and need to customized adding some server side code or linked to your already existent Newsletter system.
Here you can customize texts, title and the subscription form action.

Please do the following:

  1. Find inside HTML the section named “Newsletter”
  2. Change the code accordingly,
    • div->p: text description
    • form->h4: section title
    • form->action: URL to your newsletter subscription system, please consider also to change the input->name or adding any extra hidden/visible params, accordingly to your form parameters.
    • form->button: subscribe button label

Twitter Embed

Twitter Embed is the fast and easy solution for embed your twitter stream like a Widget. This solution is useful if you like the default Twitter widget layout or if you can’t use PHP on your server. This solution can be customized only on colors (from your Twitter account).

Please do the following:

  1. Go to your twitter account, and generate a new Widget from Settings -> Widget -> Create new, than customize your widget following your needs.
  2. Find inside HTML the section named “Twitter Embed”
  3. Change the code accordingly,
    • section->data-image: section background image
    • section->class: you can remove the class “has-darkBG” if you want to use a light background (also text change to white)
    • h1->span: section title
    • Find inside HTML the block named “Twitter embed code”, and replace the code with your Twitter widget HTML code.
    <section data-image="content/sections-bg/4.jpg" 
      class="twitterEmbed mainContent has-darkBG 
             borderedContainer parallaxContainer">
      <div class="wrap">
        <h2 class="logoWrapper">
          <i class="icon icon-twitter"></i>
        </h2>
        <h1 class="title-hasSeparator">
          <span>TWITTER FEEDS</span>
        </h1>
        <!--  Twitter embed code  -->
        <a class="twitter-timeline" 
          href="https://twitter.com/hashtag/loox" 
          data-chrome="nofooter noborders" 
          data-theme="dark" data-tweet-limit="3" 
          width="500" height="500" 
          data-widget-id="559643354347360256">#loox Tweets
        </a>
        <script> /.../ </script>
        <!--  / Twitter embed code  -->
      </div>
    </section>

 

Twitter Feed

Twitter Feed requires PHP (5.x+) for getting your tweets, and uses the new Twitter 1.1 API to authenticate to your account. It’s completely skinned and integrated to Loox theme (without any limitation of the twitter embed).
It uses the Tweetie plugin. You can read the full documentation of Tweetie plugin here.

New Twitter API requires oAuth Token Key, so it’s two step process.

  • Step 1: First, you need a consumer key and secret keys. Get one from dev.twitter.com/apps.
  • Step 2: Edit /php/Tweetie/api/config.php file and replace variables with your Consumer and oAuth Keys.
    // Consumer Key
    define('CONSUMER_KEY', 'CONSUMER_KEY_HERE');
    define('CONSUMER_SECRET', 'CONSUMER_SECRET_HERE');
    
    // User Access Token
    define('ACCESS_TOKEN', 'ACCESS_TOKEN_HERE');
    define('ACCESS_SECRET', 'ACCESS_SECRET_HERE');

Than, for customizing the look and feel, please do the following:

  1. Find inside HTML the section named “Twitter Feed”
  2. Change the code accordingly,
    • section->data-image: section background image
    • section->class: you can remove the class “has-darkBG” if you want to use a light background (also text change to white)
    • h1->span: section title
  3. Configure twitter feed params, like username, hashtag, and how many elements to display looking the tag div->class=js-twitterEmbed:
        <div class="js-twitterEmbed twitterFeed"
            data-username=""
            data-hashtag="#loox"
            data-count="3"
            data-date-format="%b / %d / %Y"
            data-tpl="#tpl-twitterEmbed"></div>

where:

  • data-username: is the username of your Twitter user
  • data-hashtag: is the twitter hashtag, you can set username or hashtag
  • data-count: number of tweets to display
  • data-date-format: date format to display the date
  • data-tpl: id of the template of the single row, see below
Customizing the single tweet row

You can also customize the single row, changing the HTML defined inside the script template tpl-twitterEmbed:

<!-- /#tpl-twitterEmbed -->
<script type="text/template" id="tpl-twitterEmbed">
  <span class="twitter__avatar hidden-xs">
    {{avatar}}
    <span class="twitter__avatarSeparator">
      <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid" width="8" height="65" viewBox="0 0 8 65">
        <image xlink:href="data:img/png;base64,==RhAACTvweQ5ooDeAAAAABJRU5ErkJggg==" width="8" height="65"/>
      </svg>
    </span>
  </span>
  <div class="twitter__message">
    {{tweet}}
    <a href="{{url}}" target="_blank">{{date}}</a>
  </div>
</script>
<!-- /#tpl-twitterEmbed -->

 

Gift card

Customize this section following your needs, it’s basically designed for display a gift or fidelity card, you can also customize logo and card image, using the PSD includedi in the theme (Elements.psd).

Please do the following:

  1. Find inside HTML the section named “Gift Card”
  2. Change the code accordingly,
    • h1->span: main title or invitation text
    • h3: section title
    • h5: subtitle or payoff
    • img->src: image of the card

Contact Form

The Contact Form section, requires PHP (5.x+) for sending emails.

For customizing the look and feel, please do the following:

  1. Find inside HTML the section named “Contact Form”
  2. Change the code accordingly,
    • section->data-image: background image of the whole section
    • header->h1: section title
    • header->h3: subtitle or payoff
    • header->h5: invitation text
    • div->a: customize link to GOOGLE MAPS accordingly to your direction
    • form: contact form structure

The sendmail.php uses PHPMailer (5.2) library, you can find the license on /php/phpMailer/LICENSE.

The form can be configured for using PHP mail() function, or an authenticated SMTP.

Configuring Sendmail (PHP)

Open the sendmail-config.php file and customize the following parameters accordingly to your needs:

<?php
/*
Email SECTION
Customize sender name and email, also you can enable SMTP authentication if you don't want to use mail() PHP function.
*/

$site_owner_email    = "info@yourdomain.com";
$site_owner_name     = "Your Name";
$email_subject       = "Message from Loox Form";

//Configure SMTP
$smtp_enabled         = false;
$smtp_host            = "mail.yourdomain.com";
$smtp_port            = 25;
$smtp_protocol        = "";
$smtp_username        = "yourname@yourdomain";
$smtp_password        = "yourpassword";


/*
Error messages SECTION
Customize error messages that are displayed by the form
*/

$error_name            = "Insert your name";
$error_email           = "Insert a valid email address";
$error_comments        = "Insert a message text";


/*
Success message SECTION
Customize the success message
*/

$success_message    = "Thank you!<br />Your message has been sent.";

There are three sections:

  • Email SECTION: customize with your email or the email that need to receive contacts
  • Error messages SECTION: customize error messages that is displayed to user if something is wrong during form sending
  • Success message SECTION: customize the success message that is displayed after the email is sent
Using standard PHP mail() function

By default, the form is configured for using the mail() function from PHP. Please verify that your sendmail is properly configured inside php.ini configuration file.

For using this method, check that the following property is set to false:

$smtp_enabled        = false;
Using an Authenticated SMTP server

If you want to use an authenticated SMTP server, please look at the section “Configure SMTP“, and change the following property to true:

$smtp_enabled        = true;

than, you also need to configure appropriately the SMTP data:

//Configure SMTP
$smtp_enabled         = true;
$smtp_host            = "mail.yourdomain.com";
$smtp_port            = 25;
$smtp_protocol        = "";
$smtp_username        = "yourname@yourdomain";
$smtp_password        = "yourpassword";
  • smtp_host: hostname of your SMTP server
  • smtp_port: port of SMTP server, by default is 25, change accordingly to your configuration
  • smtp_protocol: by default is an empty string, Options are “”, “ssl” or “tls”
  • smtp_username: your SMTP user
  • smtp_password: your SMTP password
Using GMAIL as Authenticated SMTP server

If you want to use GMAIL as a Authenticated SMTP (or any other Secure/SSL SMTP server), please change your configuration as following:

//Configure SMTP
$smtp_enabled         = true;
$smtp_host            = "smtp.gmail.com";
$smtp_port            = 465;
$smtp_protocol        = "ssl";
$smtp_username        = "yourname@gmail.com";
$smtp_password        = "yourpassword";

 


 

For futher informations about SMTP configuration, please take a look to PHPMailer documentation.

 

Footer

On footer you can customize footer links and social sharing elements.

Please do the following:

  1. Find inside HTML the section named “Site Footer”
  2. Change the code accordingly,

 

Once again, thank you so much for purchasing this theme. We’d be glad to help you if you have any questions relating to this theme, Please visit our support center and if you have any specific question that is not covered by our knowledge base, please send us a ticket through our ticketing system.

Travertino – http://travertino.io

Back To Top