Vista Travel Layout Docs

File Structure:

After the purchase of the Vista Travel Layout, you’ll get the following files.

• Vista Travel Layout.json
• License.txt

Importing JSON File to Divi Library: –

• Navigate to Divi > Divi Library.
• Click on “Import & Export tab”.
• Select “Import” from the pop-up.
• Click “Choose File” and select the JSON file from your computer.
• Once the JSON layout is selected, click “Import Divi Builder Layouts” and wait for the import process to complete.
• The layouts will be imported to your Divi Library.

How To Use Divi Library Items ?

When you successfully import our Vista Travel Layout.json file then you will see three layout json file into your Divi Library.

Step 1: Importing Header and Footer in Theme Builder

Setup Your Primary Menu
Start by creating your menu in the appearance settings of your WordPress website.

For Header :-

1. Go to Divi > “Theme Builder”

2. Click on “Add Global Header”

3. Choose “Add from Library”

4. Select “Your Saved Layouts“ and select your Header Layout (Travel Header Layout.json)

5. Click the “Save Changes” button

For Footer :-

1. Same as a process for footer layout

Step 2: Import Homepage

Create New Page > Click on use the Divi Builder > click on “+” Portability icon (add from library) > Click on Your Saved Layouts > Choose Layout “Travel Body Layout” > Click on Use This Layout

Step 3: Activate The Homepage Slider Through Some Following Steps

For activate the slider it will be required two thing:

• PHP Code
• Code Snippet plugin

How to Install Code Snippet plugin?

• Go to Plugins > “Add New Plugin”
• Click on Search bar and Search for “Code Snippets“
• Click on “Install and Active” Button

How to add PHP code using Code Snippet plugin?

• Go to Snippets > “Add New”
• Enter snippet title e.g. (slider code)
• Paste the php code in code area box
• Click on “Save Changes and Activate” button

Here is the PHP code below

<?php
// Enqueue Swiper.js Library
function dp_carousel(){
wp_enqueue_script( 'your-swiper-js-slug', 'https://unpkg.com/swiper@7/swiper-bundle.min.js', [] , '7.0.2', true );
wp_enqueue_style( 'your-swiper-css-slug', 'https://unpkg.com/swiper@7/swiper-bundle.min.css', [] , '7.0.2');
}
add_action('init', 'dp_carousel', 99);

function dp_carousel_slider_scripts() {
?>
<script type="text/javascript">
// adding navigation html
(function(){
window.addEventListener('DOMContentLoaded', function(){
let sliders = document.querySelectorAll('.dp-carousel')
sliders.forEach(function( slider ) {
swiper_init(slider)
})
});

function swiper_init(slider){
// configuration
if(slider === null) return;
// extra controls
let extraControls = '';
// If we need pagination
extraControls += '<div class="swiper-pagination"></div>';
// If we need navigation buttons
extraControls += '<div class="swiper-button-prev"></div><div class="swiper-button-next"></div>';
slider.innerHTML = '<div class="swiper-container" style="overflow:hidden">' + slider.innerHTML + '</div>' + extraControls;

// Wait for Swiper
var waitForSwiper = setInterval( function () {
if (typeof Swiper != "undefined") {
clearInterval(waitForSwiper);
let carousel_container = slider.querySelector('.swiper-container');
const swiper = new Swiper( carousel_container , {
slidesPerView: 1, // mobile value
loop: true,
spaceBetween: 15, // mobile value
autoplay: {
delay: 1500,
},
speed: 600,
// If we need pagination
pagination: {
el: '.swiper-pagination',
clickable : true,
dynamicBullets: true
},
// Navigation arrows
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
breakpoints: {
768: { // Tablet
slidesPerView: 3,
spaceBetween: 15,
},
981: { // Desktop
slidesPerView: 4,
spaceBetween: 15,
}
}
});
}
}, 20);
}
})();
</script>
<?php }
add_action( 'wp_footer', 'dp_carousel_slider_scripts');

Customer Support

If you encounter any issues, please don’t hesitate to get in touch with us.

• Technical Support – Submit A Ticket
• Email Support – support@divigurus.com or divigurus@gmail.com
• Custom Job Inquiry – divigurus@gmail.com