Dina Documentation
Thank you for purchasing my theme. If you don't find the answers for your questions in this help file, please feel free to email via my user page contact form . Thanks!
License
When you purchase a theme from Themeforest, the Regular License allows you to use the theme in a single end product. One theme license for one domain ( one theme installation in a single domain )
The billing process and licensing term are fully managed by Envato Ltd. and we don't have any control over this matter.
For more information about licensing check this page https://themeforest.net/licenses/standard?license=regular
FAQ:
Can I use the theme on a test site, then move it to a live site when finished?
Yes, you can use the theme on a test site to build it, then move it to the live site once you're finished. You'll have to remove the theme files from the test site.
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 > Install Themes > Upload and choose dina.zip file ((make sure you are not uploading the whole zip file that you've downloaded (including dummy content, documentation) but only the dina.zip file). Click Install Now.
- b. Via FTP: Upload dina 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 and recommended plugins: MT Dina, Elementor, ACF, 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 for one of the website demos.
- 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 the demo URL - see below and new-url enter your site address. Click Replace URL
- Main Demo URL: https://dina.matchthemes.com/
- Dining Demo URL: https://dina.matchthemes.com/dining/
- Seafood Demo URL: https://dina.matchthemes.com/seafood/
- Italian Demo URL: https://dina.matchthemes.com/italian/
- 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 > Headers || Footers and select from the pre-made header and footer sections.
For more info please check the Headers & Footers 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:
<h1>Welcome</h1> <p>Discover and experience fine selection of international tastes</p> <p> <a href="#" class="view-more more-white">Book a Table</a></p>
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/dina and new-url enter your site address. Click Replace URL
- Main Demo URL: https://dina.matchthemes.com/
- Dining Demo URL: https://dina.matchthemes.com/dining/
- Seafood Demo URL: https://dina.matchthemes.com/seafood/
- Italian Demo URL: https://dina.matchthemes.com/italian/
- 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 Elementor Template
- Menu Templates: 1 Col, 2 Cols, 3 Cols, Image Grid
- Team Templates: 2 Cols, 3 Cols, 4 Cols
- Reservation Template
- Full Screen Template
- Full Width Template
How to use a template:
- Click Pages > Add New.
- Look for Page Attributes on the right side and click on the "Template" 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 Dina Elementor page templates, go to Templates and import the dina-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 Dina page templates.
- OR click Add New Section and start building your page as you want.
Headers & Footers
First thing, please make sure the required plugins are installed and active: MT Dina and Elementor.
Then go to Elementor > Settings and make sure the Post Type > 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 > Headers or Footers options. Select the ones you want.
For the footer section you can use the footer builder. Go to Footer Builder option. Click Edit with Elementor link or click the "Add New" button to create a new section.
If you create a new footer section, in order to display it, you'll have to select it from Appearance > Customize > Footers > Footer Display option
Homepage
- Click Pages > Add New.
- Look for Page Attributes on the right side and click on the Template drop-down menu. Select the "Home Elementor" 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 Slider Option.
The default slider text:
<h1>Welcome</h1> <p>Discover and experience fine selection of international tastes</p> <p> <a href="#" class="view-more more-white">Book a Table</a></p>
- 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
- 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 also 6 menu shortcodes:
For menu accordion: [food_menu_acc cat=""]
For menu 1 columns: [food_menu_1col cat=""]
For menu 2 columns: [food_menu_2cols cat=""]
For menu 3 columns: [food_menu_3cols cat=""]
Menu v2: [food_menu_v2 cat="" cols=""], cols can be 2, 3, 4, 5
Menu v3: [food_menu_v3 cat="" cols=""], cols can be 2, 3, 4, 5
For menu grid images: [food_menu_grid_img]
The cat attribute is optional, in case you want to display some particular menu categories. Separate them with a comma.
Gallery Page
- Click Galleries > Add New Gallery.
- Below the text editor you'll find the Gallery Options.
- Add your gallery images, select a gallery template.
- Click Publish.
- Now you can add the new page to your menu
-
Gallery shortcode:
Gallery 4 columns: [mt_gallery_4cols post_id=""]
Gallery 3 columns: [mt_gallery_3cols post_id=""]
The post_id attribute is required. You'll find the post ID by clicking its title in the Galleries section. The post will open in post editor and you'll see the post ID in your browser's address bar. Check the image below:
Contact Page
- Click Pages > Add New
- Look for Page Attributes on the right side and click on the Template drop-down menu. Select the "Full Screen" template
- Click Publish
- Click Edit with Elementor and choose one of the contact page templates
- 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 my demo
<div class="row"> <div class="col-md-6"> <label>Name* [text* your-name class:reservation-fields] </label> </div> <div class="col-md-6"> <label>Email* [email* your-email class:reservation-fields] </label> </div> </div> <div> <label>Subject* [text* your-subject class:reservation-fields] </label> </div> <label>Message* [textarea* your-message x6 class:reservation-fields] </label> [submit "Send Message"]
- Click the Save button. Copy the shortcode and paste it in the contact page.
Reservation Page
- Click Pages > Add New
- Look for Page Attributes on the right side and click on the Template drop-down menu. Select the "Full Screen" template
- Click Publish
- Click Edit with Elementor and choose the reservation page templates
- 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 my demo
<div class="row"> <div class="col-md-4"> <label> Name*</label>[text* your-name class:reservation-fields] </div> <div class="col-md-4"> <label> Email* </label> [email* your-email class:reservation-fields] </div> <div class="col-md-4"> <label> Phone*</label> [tel* your-phone minlength:10 maxlength:12 class:reservation-fields] </div> </div> <div class="row"> <div class="col-md-4"> <label> Date*</label> [date* your-date min:today class:datepicker class:reservation-fields] </div> <div class="col-md-4"> <label> Time*</label> [select your-time class:reservation-fields "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"> <label> Seats*</label> [text* your-seats class:reservation-fields] </div> </div> <label> Special Requests</label> [textarea your-message id:message2 class:reservation-fields x4 ] <p class="alignc">[submit "Book Now"]</p>
- Click the Save button. Copy the shortcode and paste it in the reservation page..
-
OpenTable shortcode: [mt_opentable id="" btn_txt="" people_txt="" date_txt="" time_txt=""]
The id attribute is required. Find your OpenTable ID intro your account.
The other attributes are optional.
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 page you just created as your Posts page and click Save Changes.
- To select a blog layout go to Appearance > Customizer > 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 900x500 px to look like my demo.
Customization
Widget Areas
There are 5 widget areas for this theme. Go to Appearance > Widgets to use them.
Theme Customizer
Dina 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:
-
Menu shortcodes:
Menu accordion: [food_menu_acc cat=""]
Menu 1 columns: [food_menu_1col cat=""]
Menu 2 columns: [food_menu_2cols cat=""]
Menu 3 columns: [food_menu_3cols cat=""]
Menu v2: [food_menu_v2 cat="" cols=""], , cols can be 2, 3, 4, 5
Menu v3: [food_menu_v3 cat="" cols=""], cols can be 2, 3, 4, 5
Menu grid images: [food_menu_grid_img]
The cat attribute is optional, in case you want to display some particular menu categories. Separate them with a comma.
-
Simple Menu shortcode - this will not use the Food Menu CPT
See it in action here: Menu v8
Use the following shortcode format to create your menu ( cols atrribute value can be 1, 2, 3 ):
[food_menu_mt cols="1"] +Tomato Bruschetta | $4.00 +Marinated Grilled Shrimp | $7.00 | Fresh Shrimp, Oive +Avocado & Mango Salsa | $5.00 | Avocado, Mango, Tomatoes +Marinated Grilled Shrimp | $7.00 +Baked Potato Skins | $9.00 | Potatoes / Oil / Garlic [/food_menu_mt]
-
OpenTable shortcode: [mt_opentable id="" btn_txt="" people_txt="" date_txt="" time_txt=""]
The id attribute is required. Find your OpenTable ID intro your account.
The other attributes are optional.
-
Gallery shortcode:
For gallery 4 columns use this shortcode: [mt_gallery_4cols post_id=""]
The post_id attribute is required. You'll find the post ID by clicking its title in the Galleries section. The post will open in post editor and you'll see the post ID in your browser's address bar. Check the image below:
-
Team shortcode: [team_2cols count=""], [team_3cols count=""], [team_4cols count=""]
The count attribute is optional.
-
Blog shortcode: [blog_3cols count=""]
The count attribute is optional.
Child Theme
Dina 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 3.5.7
Maintenance update
Compatible with WordPress 6.6
[Updated] MT-Dina plugin
[Updated] js gallery
[Updated] style.css - version 3.5.6
Compatible with WordPress 6.5
[NEW] Site Design: Burger Demo
[NEW] Header 9
[Updated] blog shortcode
[Updated] MT-Dina plugin
[Updated] theme options
[Updated] style.css file - version 3.5.5
[NEW] Food Menu shortcode for easily display menu items
[NEW] Food Menu v8 page using new shortcode
[Updated] Main demo pages to use Elementor Flexbox container
[Updated] MT-Dina plugin
[Fixed] some elements css styles - version 3.5.3
Compatible with WordPress 6.4
[Updated] MT-Dina plugin
[Updated] theme options
[Updated] js swiper
[Fixed] wpml-config file - version 3.5.1
Compatible with WordPress 6.4
[Updated] MT-Dina plugin
[Updated] theme options
[Updated] js swiper
[Fixed] wpml-config file - version 3.5.1
Compatible with WordPress 6.3
[Updated] ACF
[Added] block support for link-color & border
[Fixed] reservation form date field for mobile - version 3.5.0
[NEW] Site Demo: Fine Dining
[NEW] Site Demo: Seafood
[NEW] Site Demo: Italian
[NEW] Footer Builder
[NEW] 5 Pre-Made Footers
[NEW] Header 8 option
[Updated] theme options
[Updated] MT Dina plugin
[Updated] food menu shortcodes
[Fixed] small css styles - version 3.4.0
Compatibility with WordPress 6.2
[Updated] MT Dina plugin
[Updated] demo import - version 3.3.3
[Updated] home video accepts youTube / Vimeo URLs
[Updated] bundled plugins - version 3.3.2
Compatibility with WordPress 6.1.1
[Updated] bundled plugins - version 3.3.1
[Updated] MT Dina plugin - version 3.3.0
[NEW] Home 11
[NEW] Meet the Chef page
[NEW] Header 7 option
[Added] testimonials custom post type and shortcode
[Updated] theme options
[Fixed] default top header image option - version 3.2.4
[Updated] Boostrap Grid
[Updated] style.css - version 3.2.2
[NEW] Different logo for sticky header
[NEW] Footer 4 cols v2 - version 3.2.0
[NEW] Home 9
[NEW] Home 10
[NEW] Top Header 6
[NEW] Food menu grid v3 shortcode
[Updated] bundled plugins
[Tweak] css styles
[Tweak] theme's code - version 3.1.8
[Updated] bundled plugins
[Tweak] small css styles - version 3.1.7
[Added] email social icon
[Updated] ACF plugin
[Removed] Unused files to speed up site loading - version 3.1.5
[Updated] bundled plugins
[Added] width and height attributes for the logo img tag
[Fixed] blog page nav - version 3.1.3
[Updated] All bundled plugins
[Updated] minor css style changes - version 3.1.2
[Updated] theme options
[Updated] bootstrap
[Tweak] background color for lazy load images
[Tweak] elements styles - version 3.1.0
[NEW] Home 7, Home 8
[NEW] Headers: 4, 5
[Updated] Bootstrap
[Updated] Bundle plugins
[Updated] theme translation
[Updated] style.css
[Tweak] header menu - version 3.0.6
[Updated] Font Awesome
[Updated] Gutenberg styles
[Updated] Elementor page templates
[Tweak] menu shortcodes
[Tweak] gallery images
[Tweak] footer copyright field - version 3.0.5
[Updated] Bootstrap
[Updated] Font Awesome
[Updated] ACF
[Fixed] styles for Gutenberg blocks
[Removed] Home Content post type - version 3.0.2
[Updated] theme customizer
- version 3.0.0
NOTE for customers that use older Dina versions ( older than 3.0.0 ): The Home Content custom post type is obsolete and it'll be removed on October 1st, 2019. Starting from version 3.0.0, the theme uses Elementor for creating all the pages. Use one of the Elementor home page templates to recreate your homepage. If you have questions, please send us a private message. Thanks for understanding! [NEW] All pages are now created with Elementor [NEW] 3 Homepages [NEW] Video Homepage option [NEW] Page templates: Menu Grid v2, Services, About Us, About Me, FAQ, Custom 404 [NEW] shortcodes [Update] Bootstrap 4 [Update] Font Awesome 5 [Tweak] Header Menu Mobile [Tweak] css styles - version 2.2.5 [Updated] Bootstrap [Updated] ACF [Updated] Theme Options [Removed] G+ icon
- version 2.2.0 [Updated] ACF plugin [Updated] Theme Options