Zendelish Documentation

Layout & Design

Overview

Zendelish is a Japanese-inspired design layout, perfect for creating minimalist and elegant websites. This layout features clean lines, a simple design, and a focus on natural materials, making it ideal for various types of websites, including Japanese restaurants, other restaurant types, and even non-restaurant websites. The layout is designed to be responsive, ensuring it looks great on all devices, from desktop computers to smartphones. It also includes several customizable features, allowing you to adjust fonts, colors, and other design elements.

Installation:

There are several files available for importing. You can choose from the following options:

• Divi Library JSON: Includes all the main pages/layouts of Zendelish.
• Theme Library JSON: Contains the theme builder JSON for the header and footer.
• Pages JSON: Individual JSON files for all the layouts/pages of Zendelish.
• It is recommended importing using the Divi Library JSON file into your Divi Library. You can also import individual JSON files into specific pages. If you are new to Divi, you can learn how to import layouts by visiting the link below:

Importing & Exporting Divi Builder Layouts & Library Collections

Layouts & Customization

Home page:

The Home page primarily comprises 13 sections, which include the overlay menu for tablet and mobile devices, a custom code section for the page, side navigation, top and bottom shadow sections, the introduction section, and sections 1 to 6.

Overlay Menu

The menu overlay on the Home page is distinct from the other overlay menus within this layout. This separation arises because the Home page menu incorporates a scroll-to function for each section. In contrast, the menus on the rest of the pages are designed as global sections to maintain consistency throughout the site, unless you prefer different content for each page’s menu. Unfortunately, due to import and export limitations, the global section will not be automatically included.

To establish this uniformity, you will need to manually save the overlay menu as a global item in the Divi library. For example, you can save the About page’s overlay menu section as global and then insert the global section into your other pages. This approach streamlines the process of menu editing and ensures consistent content across your site.

Custom Code

There is JavaScript code implemented here to hide the logo in the header as well as the menu’s hamburger icon. This code is designed to work exclusively on this page, ensuring that users can view the introduction section without any obstructions.

Side Navigation

The side navigation on the homepage is equipped with a scroll-to function for each section. To prevent any errors when editing or changing the text within your content, it is recommended that you use text editor instead of visual editor.

Shadows Section

These are the top and bottom shadows that are subtly transparent, enhancing the overall visual appearance.

Introduction Section

The Section Introduction features a sticky effect that enhances the scrolling experience. As you scroll down, it gracefully transitions into a scroll-up effect as you reach the second section, adding a touch of elegance to the overall design. This section allows you to display your company/business name/title, providing an aesthetic view for users. Due to copyright restrictions, We are unable to provide the video shown in my demo page. However, if you would like to include the video, you can access it via the following link.

Section 1 – 6

You are free to modify all the sections here according to your preferences. Each section is designed in a two-sided style, with the left side containing the section titles and the right side typically featuring the contents.

Other pages:

The layout for the remaining pages follows the same design, with the left side featuring the title and the right side containing the contents. Feel free to make any modifications as needed based on your preferences.

As previously mentioned, the Overlay Menu section in the rest of the pages is meticulously designed using global sections to ensure that the menu remains consistent and synchronized throughout the layout. If you planned on using this, please do save the menu section as global and reinsert it into your particular pages.

Menu page:

The Menu page is thoughtfully designed to resemble a traditional book-style menu, creating a familiar experience for users similar to that of a restaurant menu. Several design elements in the menu items emphasize and highlight the special dishes available.

Booking Form:

The booking form is presented on a standalone page and is created using Divi’s contact form modules. Additionally, it includes a date and hour picker functionality, which is implemented using external plugins. If you find the date and hour picker function useful, you can explore it further by visiting the provided link here.

Header & Footer

Zendelish Layout integrates a multitude of custom CSS and JS elements. This section will provide detailed explanations for each custom code. The majority of the primary custom code resides in the Theme Builder’s Header, while some specific page-related code is found within individual pages.

Column 1:

Hide Scrollbar: Disables the physical scrollbar, creating a sleek appearance.

Button Hover: Adds captivating button hover effects, enhancing user interactions.

Menu Strike-thru: Imparts a striking text effect to menu items, catching the eye.

Custom Adjustment: Contains custom code to rectify alignment and z-index issues, ensuring a seamless layout.

Text/Image Transition: Showcases text size animations for a responsive design that adapts when resizing or rotating devices.

Column 2:

Menu Overlay: Incorporates a full-screen overlay menu for tablets and mobile devices, following a Divi tutorial for a user-friendly navigation experience. Please remember to remove the ‘/’ slash after you have finish editing the menu.

Link to menu tutorial : here

Cursor JS: Enhances user interactions with JavaScript-based mouse cursor customization, including custom animations for an engaging browsing experience.

Cursor Dot: Incorporates a center dot to the mouse cursor, employing TweenMax for smooth animations.

Cursor Follower: Includes a circular shadow that gracefully follows the dot cursor’s movements, adding a touch of sophistication.

Simple Page Transition: Adds a clean and simple page transition effect, featuring smooth fade-in and fade-out animations to enhance the visual appeal of your website.

Column 3:

Hamburger Icon: Presents the classic three-line hamburger menu icon for easy navigation.

Scroll Trigger Animation: Utilizes a custom animation triggering mechanism that activates when users scroll through designated divs initially hidden using the “reveal” CSS class.

Custom Animation CSS: Contains CSS code for unique animations. Please keep in mind to remove the ‘/’ slash from this code module to ensure the animation functions correctly. The ‘/’ is included during your editing phase to facilitate the proper visibility of your div.

Parallax Effect JS: Implements parallax effects for images on the home page in desktop view, enhancing the visual depth and engagement of your website.

Logo Section:

The logo in this layout is implemented using HTML ahref styling rather than the Divi image module/Divi Link function. This approach is essential to ensure the proper functionality of the page transition feature, along with other links in the layout.

Footer

The Footer consist of two column, left and right. The left column is where you put your credits, the right column is your page menu.

Troubleshooting:

If you encounter any issues or have questions, please feel free to submit a ticket through the Divi portal. Alternatively, you can also contact us through our official Facebook Page for assistance. Your feedback and inquiries are important to us, and I’m here to help.

Messenger

Support and Updates:

We provide support and updates for all of our layouts if you have made a purchase. We strive to regularly release feature updates that introduce new functionalities and enhance the overall performance of our layouts. Any tutorial that you feel need to add to this documentation please do suggest to us.

For any inquiries, issues, or suggestions, please don’t hesitate to reach out to us via the ticket system or our Facebook page.

Changelog:

1.0.1 – Fixed broken booking button popup link on the Home page.
1.0 – Added new pages (About, Contact, Gallery, Menu, and Privacy Policy). Fixed bugs and improved performance, security, and user interface.