flexile-white-logo

Blitz Restaurant Layout Docs

File Structure:

After the purchase of the Blitz Restaurant Layout, you’ll get the following files.

  • Blitz Restaurant 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 Blitz Restaurant 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 (Restaurant 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 “Restaurant Body Layout” > Click on Use This Layout

Note: After import the layout you should must be click on “Save Changes” button. Otherwise your layout will not be visible on your website.

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');
Please Do Not Delete this
Problems while importing the layout?

If the importing process stops at 100%, or you have another problem, please make sure that you deactivate security plugins like Wordfence while importing. Then it should work fine.

Customer Support

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