Documentation

Magellano - NFT Marketplace HTML5 Site template

Thank you so much for purchasing our item from Themeforest.

If you have any questions that are beyond the scope of this help file, Please contact us via Support Tab.

Installation

Follow the steps below to setup your site template:

1. Unzip the downloaded package and open the /HTML folder to find all the template files. You will need to upload these files to your hosting web server (that support PHP) using FTP (suggested FTP client Filezilla) or localhost in order to use it on your website and of course after your edits.
2. Below is the folder structure and needs to be uploaded to your website or localhost root directory:
   • html - Contains all of the assets referenced
     • assets - Php files for the contact form
     • css - Stylesheet files
     • img - Images files
     • js - Javacript files
     • sass - Sass files
     • video - Video files
   • html/index.html - Homepage

CSS Structure

The css files are inside the css folder (not minified and minified versions included) .To modify colors, typografy, button style ecc....find the relative comment line in style.css, change the :root variables or play with the scss files included.
We reccomend to apply every changes in css/custom.css in order to makes future updates easly to apply.
Below how the file is organized:

1. GLOBAL VARIABLES

2. Bootstrap Icons

3. SITE STRUCTURE and TYPOGRAPHY
- 3.1 Preloader
- 3.2 Typography
- 3.3 Animations titles
- 3.4 Structure
- 3.5 Main Menu
- 3.6 Heros/Above the fold

4. CONTENT
- 4.1 Home
- 4.2 Carousel
- 4.3 Strip item
- 4.4 Blog post home

5. COMMON
- 5.1 ScrollCue animate on scroll
- 5.2 Spacing
- 3.3 Misc
- 5.4 Form styles
- 5.5 Footer
- 5.6 Magnific Popup CSS
- 5.7 Modal popup
- 5.8 Modal Generic
- 5.9 Misc 2 
- 5.10 Cookie bar

Javascript Structure

This theme use these Javascript (minified versions included). We have included the common theme scripts in a single file for a fast edit and load (or if you prefer you can find the same js in separate files in js folder).

js/common_scripts_min.js content:

Sass

We have added SASS .scss files in template. If you know how to use SASS you can change sass files and compile the css as well. You can find sass file here - html/sass

Open the sass/_variables.scss and Edit the values according to your needs. If you need more Advanced Setup then you can Edit the Respective Files yourself which have been branched inside the same Folder.

Common settings/edits

If you need a little help editing the template, check out Tuts+ tutorial How to Customize an HTML Template.

Change the logo

To change the logo, simply use your PNG24 file (suggested logo height is 36/40px) or better SVG format. Below how is coded:

<img src="img/logo.svg" width="140" height="35" alt="">

How Lazy Load Works

1) Owl Carosuel Lazy Load
<img src="img/lazy-placeholder.png" data-src="img/item-1.jpg" class="owl-lazy" alt="">

2) Lazy load images
<img src="img/lazy-placeholder.png" data-src="img/item-1.jpg" alt="" class="lazy">

or use for the src attribute a 1px gif transparent
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" 
data-src="img/item.svg" alt="" width="198" height="30" class="lazy">

You can delete the "src" attribute and leave only "data-src", the page gain in performance with less
request to the server but the code result not W3C validated due the "src" attribute result missing.

Control the opacity of the header images in the inner pages

You can control the opacity of the header images via data attribute as the example below:

<div class="opacity-mask" data-opacity-mask="rgba(0, 0, 0, 0.5)">

Animation Scroll Cue Examples and settings

Standard usage: Set the "data-cue" attribute in the target element and specify the animation type.

<img src="002.jpg" data-cue="fadeIn">
<img src="003.jpg" data-cue="fadeIn">
<img src="004.jpg" data-cue="fadeIn">
<img src="005.jpg" data-cue="fadeIn">

Advanced usage: You can set the showing time of the element.(ms).

<div data-cues="fadeIn" data-duration="2000">
<img src="001.jpg">
</div>

Advanced usage: You can set the showing delay time of the element.(ms).

<div data-cues="fadeIn" data-delay="1000">
<img src="001.jpg">
</div>

There are 15 different animations available.

• fadeIn
• slideInLeft
• slideInRight
• slideInDown
• slideInUp
• zoomIn
• zoomOut
• rotateIn
• bounceIn
• bounceInLeft
• bounceInRight
• bounceInDown
• bounceInUp
• flipInX
• flipInY

Please read the full documentation here.

Jarallax Parallax Script

Smooth parallax scrolling effect for background images, videos. YouTube, Vimeo and Self-Hosted Videos parallax supported.

Background image example:

<div class="jarallax">
    <img class="jarallax-img" src="<background_image_url_here>" alt="">
    Your content here...
</div>

Background Self-Hosted Video:

<div class="jarallax" data-jarallax-video="mp4:./video/local-video.mp4,webm:./video/local-video.webm,ogv:./video/local-video.ogv"
Your content here...
</div>

Background YouTube:

<div class="jarallax" data-jarallax-video="https://www.youtube.com/watch?v=ab0TSkLe-E0">
    Your content here...
</div>

PHP files: Contact form

All the files you need are located in assets folder. If you need to change the allert messages open assets/validate.js. Below an example taken from contact.php; all the files are well commented.

//$address = "HERE your email address";
$address = "info@domain.com";


// Below the subject of the email
$e_subject = 'You\'ve been contacted by ' . $name_contact . '.';

// You can change this if you feel that you need to.
$e_body = "You have been contacted by $name_contact $lastname_contact with additional message is as follows." . PHP_EOL . PHP_EOL;
$e_content = "\"$message_contact\"" . PHP_EOL . PHP_EOL;
$e_reply = "You can contact $lastname_contact via email, $email_contact or via phone $phone_contact";

$msg = wordwrap( $e_body . $e_content . $e_reply, 70 );

$headers = "From: $email_contact" . PHP_EOL;
$headers .= "Reply-To: $email_contact" . PHP_EOL;
$headers .= "MIME-Version: 1.0" . PHP_EOL;
$headers .= "Content-type: text/plain; charset=utf-8" . PHP_EOL;
$headers .= "Content-Transfer-Encoding: quoted-printable" . PHP_EOL;

$user = "$email_contact";
$usersubject = "Thank You";
$userheaders = "From: info@magellano.com\n";
$usermessage = "Thank you for contact MAGELLANO. We will reply shortly!";
mail($user,$usersubject,$usermessage,$userheaders);

if(mail($address, $e_subject, $msg, $headers)) {

  // Success message
  echo "
";
  echo "Email Sent.
";
  echo "Thank you $name_contact,
 your message has been submitted. We will contact you shortly.";
  echo "
";

} else {

  echo 'ERROR!';

}

Other working forms and common issues

Other working forms adopt the same logic and script. If you doesn't recieve the email please first check:

1) Your spam folder
2) If you hosting requires special settings (SMTP Authentication is not supported by the script)
3) If your email has to be managed from the same hosting provider or requires special "php headers"
4) Set the permission of the asset folder on your host to 755 your FTP client

Source & Credits

For the js listed below, you can find more documentation on the relative sites.

• Bootstrap
• Jquery
• Owl carousel
• Scroll Cue js
• Jquery validation
• Magnific popup
• Jquery Isotope
• Jarallax Parallax Script
• Modernizr.js
• Theia sticky sidebar

Images are not included.

Support

If this documentation doesn't answer your questions, post via Item Support Tab

We are located in GMT +1 time zone and we answer all questions within 24-48 hours working days. In some rare cases the waiting time can be to 48 hours. (except holiday seasons which might take longer).

Don’t forget to Rate this template

More Templates

Checkout Our Below Premium Templates

Our Portfolio