Post on 12-Jun-2020
transcript
1
Meraki Theme Documentation
Thank You for Purchasing Meraki
Premium WordPress Theme.
First of all a huge THANK YOU for purchasing Meraki. If you have any questions
that are beyond the scope of this help file, please don't hesitate to contact me.
You can also follow me on Themeforest to keep track of all my theme updates
and upcoming themes.
Thanks so much!
CONTACT US
Mail : wordpress@multidots.in
Website : www.store.multidots.com
01. First Steps
Before you start playing around with the theme, let's check what you've downloaded so far:
Documentation - That's where you are right now.
SampleData - Import Data to get the exact Site as the Preview Page
Theme - Upload in your project
02. Installation of WordPress
First of all if you are all new to WordPress, I would recommend to learn a little bit about it
before you get started. Here are some nice Resources on how to get started with WordPress.
First Steps With WordPress
FAQ New To WordPress
03. Theme Installation WordPress
1. DOWNLOAD THEME PACKAGE
When purchasing successfully our theme from Themeforest, you will need to download
theme package for your use. To download the package, please login to your Themeforest
account, navigate to "Downloads", click the "Download" button in the left of the theme,
choose "All files & documentation" to download our theme package to your computer
The Full Package includes these following files and folders:
Documentation folder - Contain this document and other materials
Installation Files folder - Contain all installable files, including theme & plugins
o themes/meraki.zip- WordPress Theme Installation file.
o themes/meraki-child.zip- WordPress Theme Installation file and active it.
Sample Data folder - Contain sample data files
Advanced Custom Fields PRO is required for the theme to work properly
Note: Meraki theme support only "Advanced Custom Fields PRO" because this plugin is
support to "Flexible Content, Repeater" and "Advanced Custom Fields" Free version is not
support meraki theme.
Go to Plugins > Add New to install and activate plugins.
2. INSTALL THEME
Step 1: Use your FTP software to browse to wp-content/themes folder to install
theme or wp-content/plugins folder to install plugins
Step 2: Extract the installation files to their corresponding folders, for example
Meraki.zip and Meraki-child.zip extract and upload to server
Step 3:Theme would be to directly upload the Meraki.zip and Meraki-child.zip file
via WordPress Theme Uploader. browse to Appearance > Themes or Plugins > Installed
Plugins
1. Log into your Word Press backend
2. Navigate to Appearance > Themes
3. Click Install Themes
4. Click Upload
Now you just need to find the “Meraki.zip” and “Meraki-child.zip” in the Upload
folder and hit Install now.
If you are experiencing any issues during the installation I would recommend to
check out this Screencast by Envato
Step 4: Click the Activate link in Meraki-child
3. INSTALL PLUGINS
Step 1: Install required plugin and active it. in Admin menu Appearance > Install plugins
Step 2:Go to the Installation Files > plugins in folder and copy all plugins.
Step 3: Paste in wp-content > plugins and extract all plugins.
Step 4: Click the Active link ( acf pro, contact form 7, Wordpress Importer, Meraki post types )
4. INSTALL SAMPLE DATA
Alternatively, you can use traditional way to import data. In /Sample Data/ folder, you can
find there are:
acf-export.json Advance custom fields Settings. Example (Import : Go to the Custom Fields >
Tools )
meraki_dummy_data.xml All Data.
Import Advance custom fields (acf-export.json)
1. Make sure you have installed theme and all recommended plugins
2. Go to Custom Fields > Tools.
3. Upload JSON File for and click Browse... in Import Field Groups section.
4. After Click on Import button
Import all dummy data (meraki_dummy_data.xml)
1. Make sure you have installed theme and all recommended plugins
2. Go to Tools > Import, then click on Wordpress
3. If it is not yet installed before, you have to install it. On the popup window, click on "Install Now"
4. After installed successfully, click Activate Plugin & Run Importer
5. Browse for and click Upload File and Import.
6. After uploaded, the confirmation page appears. Check the Download and import file
attachments option and click Submit
7. When you see message "All done. Have fun!", you will know that the import is done. Note: you
may need to re-import the second time if the data is large. Back to Step 1. until you see the
message below
8. Go to Settings > Reading, set Front page displays to A Static page. Choose Meraki Home page as
Front page
9. Go to Appearance > Menus, choose Header menu as Primary Menu ( Header menu )
Be aware that downloading Dummy Content may take a while, depending on the speed of your internet
connection!
5. Assign Home page
To assign Home page, please follow these steps:
1. Navigate to Settings--> Reading.
2. Select Front page displays: A static page then chooses Front page from down list page.
3. Click Save to save configuration.
04. Setting up new Pages
Your new Theme comes with some awesome custom page layouts. These layouts can be
used on any page you create to give them some special functionalities. To set up a custom
page layout go to your WordPress Admin Area and navigate to Pages > Add New. Now you
can choose any template you like from the "Page Attributes" on the right side.
Default Template
Meraki Template
You can select above template from a page sidebar on the right side.
Now user have to set banner so follow this
- In “Add new page” screen that has “Meraki Design” > click on “Add page section”.
( 1 ) BANNER SECTION
This is a Hero Section in this section you can changes background images and main image
Background Image:Background Cover Image Upload or attach image size 1920 X 640
and only allow .jpg, .jpeg, .gif, .png, .tif types
Your Image: Image Upload or attach image size 309 X 445 and only
allow .jpg, .jpeg, .gif, .png, .tif types
Your Name: Enter the title.
Your Designation: Enter the sub title.
Description : Enter the description
Button One Title: Enter the button text EX : "Hire me"
Button One Link: Enter the button URL
Button Two Title: Enter the button text EX : "Download"
Button Two Link: Enter the button URL
( 2 ) ABOUT US SECTION
This is a about section user can change the icon image and also change the text. For the
Social icons image.
Heading: Enter the title
Sub Heading: Enter the sub title
Description: Enter the description
Your Image: Banner Image Upload or attach image size 304 X 304 and only
allow .jpg, .jpeg, .gif, .png, .tif types
Social Icon Label: Enter the social icons title EX : FOLLOW ME
Social Icons: Choose the social icon and enter the social link
( 3 ) SERVICES SECTION
This is a services section user can add the service.
Heading: Enter the heading.
Sub Heading: Enter the sub heading.
Services: Add the service
1. Choose Icon: Choose the icon
2. Title: Enter the title
3. Description: Enter the description
( 4 ) EXPERTISE SECTION
Heading: Enter the title.
Sub Heading: Enter the sub title.
Expertise: Add the expertise
1. Title: Enter the title
2. Percentage: Choose the percentage
( 5 ) EDUCATION SECTION
User can Add and change the education details.
Heading: Enter the title
Sub Heading: Enter the sub title
Education: Add Education
1. Title: Enter the title
2. Sub Title: Enter the benefits contents
Description: Enter the description
( 6 ) EXPERIENCE SECTION
User can add the experience and link of the section.
Heading : Enter the title
Sub Heading: Enter the sub title
Experience: Choose the fonts color
1. Company title : Enter the title
2. Company sub title : Enter the sub title
3. Description : Enter the description
4. Date : Enter the text ( date or something )
5. Designation : Enter the designation
( 7 ) INTEREST
We can easily add or remove interest for this we have to use below
Heading: Enter the title
Sub Heading: Enter the sub title
Interest: Add Interest
1.Title: Enter the interest
2. Choose Icon: choose the icon
( 8 ) Portfolio
User can add or remove the portfolio form the popup.
Heading: Enter the portfolio title
Sub Heading: Enter the sub title
Portfolio: Add portfolio
( 9 ) PRICING PLAN
This is a price plans section you can show case your hourly rate.
Heading: Enter Plan Heading
Sub Heading: Enter Plan Sub Heading
First plan :
1. Title: Plan Title Here
2. Sub Title: Plan Sub Title Here
3. Price: Enter Plan Price
4. First Plan Features: Add Plan Features
5. Button Title: Button Title Here
6. Button Link: Button URL Here
Second plan :
1. Highlight Color: Select Highlight Color ( default or custom )
2. Title: Enter Plan Title
3. Sub Title: Plan Sub Title Here
4. Price: Enter Plan Price
5. Second Plan Features: Add second Plan Features
6. Button Title: Button Title Here
7. Button Link: Button URL Here
Third plan :
1. Title: Plan Title Here
2. Sub Title: Plan Sub Title Here
3. Price: Enter Plan Price
4. Features: Add Plan Features
5. Button Title: Button Title Here
6. Button Link: Button URL Here
( 10 ) Testimonials
This is a Testimonials section you can show testimonials.
Testimonials heading title: Enter the testimonials title
Sub Heading : Enter the sub title
Choose Testimonials : Add testimonials
( 11 ) BLOG
We can add blogs with the information text.
Heading : Enter the title
Sub Heading : Enter the sub title
Choose Blog : Add blog
( 12 ) CONTACT FORM
User can use for contact section
Map:
1. Address Label : Enter the text EX : Address
2. Map Address : Enter the address
3. Map Ifram : Enter the address
4. Contact Number Label : Enter the contact number label EX : CALL ME
5. Contact Number : Enter the contact number EX: + 123-456-789-456
6. Email Label : Enter the email label EX: EMAIL
7. Contact Email : Enter the contact email EX: support@meraki.com
Form :
1. Form HTML Or Short code : Enter the html or shortcode
5. MERAKI SETTING
Header And Footer
Logo: Select your logo here
Favicon: Select your favicon here
Footer Text : Write footer text here.
Social
You can add social link for the app and manage it from the above code.
Facebook Link : Enter facebook link
twitter Link : Enter twitter link
linkedin Link : Enter linkedin link
google Link : Enter google link
skype Link : Enter skype link
dribbble Link : Enter dribbble link
pintrest Link : Enter pintrest link
behance Link : Enter behance link
THEME COLORS
You can changes primary color and hover primary color
Primary Color : Choose the theme primary color
Theme primary Color : Set Theme Primary Color
Header Color : Choose the theme header color
Theme header color : Set theme header color
Body Color : Choose the theme header color
Theme Body Color : Set Theme body Color
Contact and location
You can add contact form and location map
Contact page title : Enter the page title
Contact page sub title : Enter the sub title
Contact form html or shortcode : Enter the form or shoortcode
Map address : Enter the map address
Map Ifream : Enter the Map iframe
Mobile number : Enter the mobile number
Email id : Enter the email id
Banner settings
You can add banner settings for this theme
Choose Inner Page Banner: Choose the color or image for banner
Custom Settings
You can add custom css and custom js settings for this theme
Custom CSS Code : Paste your CSS snippet here.
Custom JavaScript Code : Paste your Custom JavaScript snippet here.
Google Analytic Code : Paste your Google Analytic snippet here.
6. Elements page
Heading tags
Meraki theme use 7 heading tags with class and without class below example:
H1 : <h1>This is H1 heading</h1>
H2 : <h2>This is H2 heading</h2>
H3 : <h3>This is H3 heading</h3>
H4 : <h4>This is H4 heading</h4>
H5 : <h5>This is H5 heading</h5>
H6 : <h6>This is H1 heading</h6>
List Types
Meraki theme use 3 types of list types.
Unordered list
Example with output
<ul>
<li>List Item 1</li>
<li>List Item 2</li>
<li>List Item 3
<ul>
<li>Nested list item 1</li>
<li>Nested list item 2</li>
<li>Nested list item 3</li>
</ul>
</li>
<li>List Item 4</li>
<li>List Item 5</li>
</ul>
Ordered list
<ol>
<li>List Item 1</li>
<li>List Item 2</li>
<li>List Item 3
<ol>
<li>Nested list item 1</li>
<li>Nested list item 2</li>
<li>Nested list item 3</li>
</ol>
</li>
<li>List Item 4</li>
<li>List Item 5</li>
</ol>
Table
<table>
<tbody>
<tr>
<th>Table Head 1</th>
<th>Table Head 2</th>
<th>Table Head 3</th>
</tr>
<tr>
<td>Division 1</td>
<td>Division 2</td>
<td>Division 3</td>
</tr>
<tr class="even">
<td>Division 1</td>
<td>Division 2</td>
<td>Division 3</td>
</tr>
<tr>
<td>Division 1</td>
<td>Division 2</td>
<td>Division 3</td>
</tr>
</tbody>
</table>
Buttons
'e_btn' class is use for button and use this <a class="e_btn"
href="#">Button</a>
'e_btn fill_btn' class is use for button and use this <a class="e_btn
fill_btn" href="#">Button</a>
Form Controls
<form class="comment-form">
<div class="row">
<div class="col-sm-12 pad-bottom-bigger form-item">
<input name="Name" type="text" placeholder="Your Name" />
</div>
<div class="col-sm-12 pad-bottom-bigger form-item">
<input name="Subject" type="text" placeholder="Subject" />
</div>
<div class="col-sm-12 pad-bottom-bigger form-item">
<input name="Email" type="email" placeholder="Email" />
</div>
<div class="col-sm-12 form-item"></div>
<div class="col-lg-5 col-md-5 send-btn">
<input type="submit" value="SEND MESSAGE" />
</div>
</div>
</form>
Thank You