LaTulipe Documentation
Thank you for purchasing our theme. If you don't find the answers for your questions in this help file, please feel free to email via our contact page. Thanks!
Getting Started
If you are new to WordPress here's what you have to do:
Installing WordPress
In order to install the current version of WordPress Theme, please go to https://wordpress.org and download the current version of WordPress. For information on how to install WordPress, please see the WordPress codex page https://codex.wordpress.org/Installing_WordPress .
Installing Theme
You can do it in 2 ways:
- a. Via WordPress Admin: Go to Appearance > Themes > Upload and choose latulipe.zip file from the main archive ((make sure you are not uploading the whole zip file that you've downloaded (including dummy content, documentation) but only the latulipe.zip file). Click Install Now.
- b. Via FTP: Upload latulipe folder into wp-content/themes folder.
- After you've installed the theme make sure to activate it.
Import Demo
If you want your website to look like the live demo, then customize it as you want, follow these steps:
After the theme is activated make sure to install and activate the required plugins: MT LaTulipe, Elementor, Contact Form 7 plugins . The plugins are necessary for having the features presented in the demo.
- Install and activate One Click Demo Import plugin.
- Go to Appearance > Import Demo Data and click the Import Demo Data button.
- A new page will open. Click "Continue & Import" button. Wait until the demo content is imported to your website.
IMPORTANT: After you import the demo content to your website, change the URL from the imported demo to your website. These are the steps you need to take:
Go to Elementor > Tools > Replace URL Tab
In old-url field enter https://matchthemes.com/demowp/latulipe and new-url enter your site address. Click Replace URL
- If the menu in the header doesn't appear, go to Appearance > Menus, select "Primary Menu" at the bottom of the page and click Save.
Then go to Appearance > Customize > Header & Footer and select from the pre-made header and footer sections.
For more info please check the Header and Footer docs section.
In case the blog posts appear in the main page, instead of the home page, go to Settings > Reading > Your homepage displays, select > A static page and for the Homepage option select the Home page.
To configure the homepage slider / video go to Appearance > Customize > General Options > Home - Slider Items.
The default slider text is this:
<span class="post-subtitle"> Modern Style Cuisine</span> <h1 class="display-2">LaTulipe Restaurant</h1> <a href="#" class="read-more white-btn">Find More</a>
The slider images size from the demo is 1920x1080 px. You can experiment with other sizes too.
To use the Colors and Typography options from Appearance > Customize , go to Elementor > Settings and check Disable Default Colors and Disable Default Fonts options.
The background images are not displayed by default when you import the demo file. The images URLs would have been from my live demo and most of the users forgot to change them. ( this caused my server get very busy with requests ). You'll have to edit the page with Elementor and add the section background image. The images are available in the Media option. Check the below example.
-
Go to Elementor > Tools > Replace URL Tab
- In old-url field enter https://matchthemes.com/demowp/latulipe and new-url enter your site address. Click Replace URL
- Go the General Tab > Regenerate CSS, click Regenerate Files
- Click Save Changes button
After you've installed the theme, you can customize it in Appearance > Customize.
Setup Menu
- Go to Appearance - > Menus tab
- Add new menu, enter Menu Name
- Add Menu Items. Select the pages you've just created and add them to the menu
- Drag & drop the menu items as you like. Check the image below. Than save the menu
- !IMPORTANT: make sure the Theme Locations option is set to Primary Menu.
Pages General
First go to Settings > Permalinks. Select from Common Settings > Post name option. This is for better SEO permalinks.
The theme comes with the following custom Page Templates:
- Default Template - The default page
- Home Slider/Video Template
- Full Screen Template
- Full Width Template
How to use a template:
- Click Pages > Add New.
- Look for Templates on the right side and click on the drop-down menu.
- Choose a page template.
- Click the Publish button above.
- Now you can add your new page to your Menu.
Setup Pages
Elementor
The theme uses the Elementor page builder plugin. The majority of pages are created with it. To learn more about Elementor and how to use it please check this page: Elementor Docs
1. After the Elementor plugin is installed, go to Elementor > Settings and check Disable Default Colors and Disable Default Fonts option. By doing so you can use the Colors and Typography options from Appearance > Customize
2. If you haven't import the theme demo data and you want to use just the latulipe Elementor page templates, go to Templates and import the latulipe-elementor-page-templates.zip file from the main archive.
Create a Page with Elementor
- Click Pages > Add New
- Optional add the Featured Image and modify the Page Customization options ( right under the text editor) . Click the Publish button.
- Click the Edit with Elementor button
- Click Add Template ( the folder icon ) and select from My Templates one of the LaTulipe page templates.
- OR click Add New Section and start building your page as you want.
Header / Footer Builder
First thing, please make sure the required plugins are installed and active: MT LaTulipe and Elementor.
Then go to Elementor > Settings and make sure the Post Type > Header Footer Builder option is checked. Same for Disable Default Colors and Disable Default Fonts options.
To select one of the pre-made header / footer sections go to Appearance > Customize > Header & Footer > Top Header Display and Footer Display options.
To edit / add new header or footer sections, go to Header / Footer Builder options. Click Edit with Elementor link or click the "Add New" button to create a new section.
Homepage
- Click Pages > Add New.
- Look for Templates on the right side and click on the drop-down menu. Select the "Home Slider/Video" template.
- Click Publish.
To configure the homepage slider go to Appearance > Customize > General Options > Home - Slider Items ( Note: The recommended size for the slider images is 1920x1080 px. You can experiment with other sizes too. )
You can select slider or video from Home - Slider or Video option.
The default slider text:
<span class="post-subtitle"> Modern Style Cuisine</span> <h1 class="display-2">LaTulipe Restaurant</h1> <a href="#" class="read-more white-btn">Find More</a>
- Add home content by clicking the Edit with Elementor button
-
! IMPORTANT : Click Settings > Reading and select Front page displays a static page. Select the page you just created as your Front page and click Save Changes.
Menu Page
Go to Our Menu and start creating food menu items and optionally include them into categories.
- Click Pages > Add New.
- Look for Page Attributes on the right side and click on the "Template" drop-down menu.
- Choose a menu page template or select the "Full Screen" template, then edit with Elementor button and use one of the shortcodes below.
- Click Publish.
- Now you can add the new page to your menu
-
There are 3 menu shortcodes:
For menu : [food_menu cols="" cat="" image="on"]
For menu tab: [food_menu_tab cols="" cat="" image="on"]
For menu accordion: [food_menu_accordion cols="" cat="" image="on"]
The cols attribute can be 1, 2, 3
The cat attribute is optional, in case you want to display some particular menu categories. Separate them with a comma.
The image attribute can be "on" or "off"
Gallery Page
- Click Portfolio > Add New
- Below the text editor you'll find the Customization options.
- Add your gallery images via the Gallery Images option
- Select a Gallery Template ( default is the Grid 2 Cols )
- Add a Featured Image
- Click Publish.
Portfolio Page
First make sure you added some galleries via the Portfolio option. Check the Gallery Page above.
- Click Pages > Add New.
- Look for Templates on the right side and click on the drop-down menu. Select "Full Screen"
- Add a featured image
- Click Publish.
- Click the Edit with Elementor button
-
There are 3 main portfolio shortcodes with variations and attributes:
Portfolio Grid: [portfolio_grid cols="3" filter="on" cat="" count="20"], cols can be 2, 3, 4 or 5
Portfolio Masonry : [portfolio_masonry cols="3" filter="on" cat="" count="20"], cols can be 2,3, 4 or 5
Portfolio Slider : [portfolio_slider cat="" count="20"]
Reservation Page
- Click Pages > Add New
- Click the Edit with Elementor button
- Click Add Template and select from My Templates one of the Reservation page templates.
- Click Publish
- Install and activate the contact 7 plugin ( https://wordpress.org/plugins/contact-form-7/)
- Go to Contact > Add New and create a new contact form
Add the following code in the Form option to look like in online demo
<div class="row reserve-holder"> <div class="col-md-4"> [text* your-name class:comm-field placeholder "Name*"] </div> <div class="col-md-4"> [email* your-email class:comm-field placeholder "Email*"] </div> <div class="col-md-4"> [tel* your-phone minlength:10 maxlength:12 class:comm-field placeholder "Phone*"] </div> </div> <div class="row reserve-holder"> <div class="col-md-4"> [date* your-date min:today id:datemonday class:datepicker class:comm-field] </div> <div class="col-md-4"> [select* your-time class:comm-field "09:00" "10:00" "11:00" "12:00" "13:00" "14:00" "15:00" "16:00" "17:00" "18:00" "19:00" "20:00" "21:00" "22:00"] </div> <div class="col-md-4"> [text* your-seats class:comm-field placeholder "Seats*"] </div> </div> [textarea your-message id:msg-contact x4 placeholder "Special Requests"] <p class="contact-btn alignc"><button class="wpcf7-form-control wpcf7-submit submit"><span>Book Now</span></button></p>
- Click the Save button. Copy the shortcode and paste it in the contact page.
Contact Page
- Click Pages > Add New
- Click the Edit with Elementor button
- Click Add Template and select from My Templates one of the Contact page templates.
- Click Publish
- Install and activate the contact 7 plugin ( https://wordpress.org/plugins/contact-form-7/)
- Go to Contact > Add New and create a new contact form
Add the following code in the Form option to look like in online demo
<p>[text* your-name class:comm-field placeholder "Name"] </p> <p>[email* your-email class:comm-field placeholder "Email"] </p> <p>[tel* your-phone minlength:10 maxlength:12 class:comm-field placeholder "Phone"]</p> <p>[textarea* your-message id:msg-contact x5 placeholder "Message"] </p> <p class="contact-btn"><button class="wpcf7-form-control wpcf7-submit submit"><span>Send Message</span></button></p>
- Click the Save button. Copy the shortcode and paste it in the contact page.
Blog Page
- Click Pages > Add New.
- Click Publish.
- Now you can add the new page to your menu
-
Now click Settings > Reading and select Front page displays a static page. Select the blog page you just created as your Posts page and click Save Changes.
- To select a blog layout go to Appearance > Customize > General Options > Blog - Articles Layout option
- Click Posts > Add New to create a news post. Make sure when you add a Featured Image for a post to have at least 1920x800px to look like the online demo. You can play with other size too.
Customization
Theme Customizer
LaTulipe is using the WordPress Live Customizer feature. Go to Appearance > Customize and change site title, colors, upload your logo and more. You'll see real time preview of changes you made to your site.
Shortcodes
Here's the list of available shortcodes:
-
There are 3 menu shortcodes:
For menu : [food_menu cols="" cat="" image="on"]
For menu tab: [food_menu_tab cols="" cat="" image="on"]
For menu accordion: [food_menu_accordion cols="" cat="" image="on"]
The cols attribute can be 1, 2, 3
The cat attribute is optional, in case you want to display some particular menu categories. Separate them with a comma.
The image attribute can be "on" or "off"
-
There are 3 main portfolio shortcodes with variations and attributes:
Portfolio Grid: [portfolio_grid cols="3" filter="on" cat="" count="20"], cols can be 2, 3, 4 or 5
Portfolio Masonry : [portfolio_masonry cols="3" filter="on" cat="" count="20"], cols can be 2,3, 4 or 5
Portfolio Slider : [portfolio_slider cat="" count="20"]
-
Blog Articles shortcode: [blog_3cols count="3"]
The count attribute is optional.
-
Testimonials shortcode: [testimonials count="4"]
The count attribute is optional.
-
Desktop & Mobile Menu shortcode: [menu_desktop_mobile]
-
Mobile Menu shortcode: [menu_mobile]
-
Site Logo shortcode: [site_logo]
-
Open Table shortcode: [match_opentable id="" btn_txt="Find a Table" people_txt="How many" date_txt="When" time_txt="What time"]
Child Theme
LaTulipe theme comes with a child theme in the main download package.
A child theme is a theme that inherits the functionality and styling of another theme, called the parent theme.
Child themes are recommended if you modify the theme files code and don't want to lose your customization when updating the theme to a new version.
Change Log
- version 1.1.4
[Improved] theme accessibility - added accessible name for buttons, fixed headings order in the footer, added main tag container, added accessible name for social icons. Homepage has a 97 Accessibility score with Google Lighthouse tool
[Updated] X Twitter icon
[Updated] style css file
[Updated] MT-Latulipe plugin - version 1.1.3
Compatible with WordPress 6.6
[Updated] Food menu shortcode order attribute
[Updated] Food category page
[Updated] MT-Latulipe plugin
[Updated] slider script - version 1.1.2
Compatible with WordPress 6.5
[Updated] MT-LaTulipe plugin
[Updated] theme options
[Updated] js slider
[Added] default page appearance tools for WP 6.5 editor version - version 1.1.0
Compatible with WordPress 6.4
[Updated] MT-LaTulipe plugin
[Updated] theme options
[Fixed] wpml-config file version - version 1.0.6
[Updated] MT-LaTulipe core plugin [Updated] js lightbox [Updated] js slider [Added] block support for link-color & border [Fixed] reservation form date field for mobile - version 1.0.0
Initial Release