GRATA


Thank you for your purchase! This document covers all of the most common questions, related to the theme. If you don’t find the answer to your question, please, refer to our support forum.

In order to install this theme you must have a working version of WordPress already installed

You can install this theme in 2 ways: via FTP or via WordPress theme upload function.

Way 1: FTP installation

Way 2: WordPress installation

After the installation GRATA Theme must appear at Appearance > Themes page, where you need to activate it.

After you activate the theme, it is highly recommended to import the chosen demo data to speed up the website development process. Please read the following section for more info.

If you are new to WordPress, you may find these links below useful:

You can quickly make your site look same way as one of our demos.

To do so, go to Appearance > Demo Import page, select wanted demo and press the Import button. Wait until import process is finished and that's it.

 

 

Optional: in case something went wrong with automatic import, follow the steps below:

XML file doesn't include images, sliders and advanced theme options settings. See corresponding sections for more information.

GRATA Theme has an advanced Theme Options panel that contains all needed settings. There are too many options to go over in these docs but please take some time and navigate through each tab. Go to Appearance > Theme Options and take a look.

With Demo Import feature (see previous section) you can import options with the content. This might help you to understand some settings faster.

GRATA Theme Main Page is built with "Page Sections" posts and Main Menu. You can see how it is done if you import one of our demos. If you want to build your site from scratch, following information may be useful for you:

In order to build your Main Page first create it's sections: use Page Sections > Add Page Section admin page and create as many sections as you need to represent your service or product.

Then proceed to Appearance > Menus. Create a new menu and set in Theme Locations box as Main Menu. Then choose Page Sections that you want to see at your Home Page and add them to Menu (if you do not see the Page Sections list under Pages list, open the Screen Options in top right corner of Admin Panel and check them to appear).

Order of Page Sections in Top Menu corresponds to the order they appear on your Main Page. So you can arrange them as you want.

If you want to add more then one Page Section to represent something - you can use parent-child relations for these Page Sections. For example: first Page Section with Contact information with parallax background, second - with Contact form and  third - Full Width Page Section with Google Map will be represented as 'Contact Info' on your Menu.

Create first Page Section, fill it with info, then add second Page Section and set first one as Parent for it - see Attributes meta box, then do same for thight Page section. Then proceed to Appearance > Menus and add first Page Section to Main Menu and save it. You will see all three Page Sections were added to your Main Page.

GRATA Theme provides possibility to present your portfolio in a simple way.

First, create your Portfolio Items by using Portfolio > Add Portfolio Item page in Admin area.

Then you can arrange your Portfolio Items by adjusting their Publish Date. You can adjust it at Publish area at Edit page of Portfolio Item. The newer the date, the higher Portfolio Item will be placed in list.

After creating and arranging your Portfolio Items, just create a new Page Section or edit already created one and place [portfolio] shortcode to it's content.

[cols]

Container for one row of responsive columns.

Attributes and possible values:

[one_half], [one_third], [two_third], [one_quarter], [three_quarter], [one_fifth], [two_fifths], [three_fifth], [four_fifth], [one_sixth], [five_sixth] - responsive columns.

Example:

[cols offset="wide"]
[one_half] ... [/one_half]
[one_quarter] ... [/one_quarter]
[one_quarter] ... [/one_quarter]
[/cols]

[paragraph_big]

Bigger than regular text.

Attributes and possible values:

Example:

[paragraph_big align="center"]With love by UpSolution[/paragraph_big]

[highlight]

Colors the text with Primary theme color.

Attributes and possible values:

Example:

With love by [highlight color="light_bg"]UpSolution[/highlight]

[mega_heading]

Wrapper for home heading lines.

Attributes and possible values:

[heading_line]

Attributes and possible values:

Example of [mega_heading] with [heading_line] contruction usage:

[mega_heading align="center"]
[heading_line color="primary" new_line="0"]Wonderful Digital Things[/heading_line]
[heading_line color="dark_bg" new_line="1"]and a pinch of creativity[/heading_line]
[/mega_heading]

[separator]

Attributes and possible values:

Example:

[separator type="fullwidth" size="huge" icon="star"]

[button]

Attributes and possible values:

Example:

[button url="#about" text="Learn More" size="big" color="primary" outlined="0" icon="" external="0"]

[icon]

Attributes and possible values:

Example:

[icon icon="star" color="primary" outline="circle" size="tiny" link=""]

[iconbox]

Attributes and possible values:

Example:

[iconbox icon="rocket" pos="left" size="big" color="secondary" outline="circle" title="From Zero to One" link="" external="0" img=""] 
With love by UpSolution 
[/iconbox]

[tabs]

Wrapper for tabs items.

[toggle]

Wrapper for toggle items.

Attributes and possible values:

[accordion]

Wrapper for accordion items.

Attributes and possible values:

[item]

Single item (section) for Toggle, Tabs and Accordion

Attributes and possible values:

Example of usage of [item] shortcode wtih [toggle] wrapper:

[toggle title_align="center"]
[item title="Title goes here" icon="beaker" no_indents="0" open="1" bg_color="" text_color=""]
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
[/item]
[item title="Title goes here" icon="cog" no_indents="1" open="0" bg_color="#333" text_color="#59ba41"]
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
[/item]
[/toggle]
Usage of accordion and tabs shortcodes are pretty same.

[portfolio]

Displays grid of your Portfolio Items.

Attributes and possible values:

Example:

[portfolio columns="5" items="" style="type_1" align="center" ratio="3:2" indents="0"
 meta="" filters="0" category="" pagination="0" items_bg_color="" items_text_color=""]

[blog]

Displays blog posts.

Attributes and possible values:

Example:

[blog type="rounded" columns="2" items="4" show_date="1" show_author="1" show_categories="0" 
show_tags="0" show_comments="1" show_read_more="0" category="" pagination="0"]

[testimonial]

Attributes and possible values:

Example:

[testimonial author="Anna Zuckerberg" description="(one of our clients)"]
To anybody thinking of buying this theme – buy it!
[/testimonial]

[team_member]

Attributes and possible values:

Example:

[team_member name="David Smith" role="Co-founder" img="/member-3.jpg" 
rounded="1" email="" facebook="#" twitter="#" linkedin="#" custom_icon="" 
custom_link="" style="type_3" link="#" external="0"][/team_member]

[simple_slider]

Wrapper for slides shortcodes.

Attributes and possible values:

[simple_slide]

Attributes:

Example:

[simple_slider auto_scroll="1" interval="3" arrows="1"]
[simple_slide img="/slide-1.jpg"]
[simple_slide img="/slide-2.jpg"]
[simple_slide img="/slide-3.jpg"]
[/simple_slider]

[responsive_video]

Attributes and possible values:

Example:

[responsive_video link="https://www.youtube.com/watch?v=IxInhdHeeII"]

[clients]

Attributes and possible values:

Example:

[clients auto_scroll="1" interval="3" arrows="0"]

[contact_form]

Displays contact form. See respective Theme Options tab to adjust the form.

Attributes and possible values:

Example:

[social_links size="normal" align="left" email="" facebook="" twitter="" google="" linkedin="" youtube="" vimeo="" flickr="" instagram="" behance="" pinterest="" skype="" tumblr="" dribbble="" vk="" rss=""]

[message_box]

Attributes and possible values:

Example:

[message_box type="info"] Message Text [/message_box]

[counter]

Attributes and possible values:

Example:

[counter count="99" color="text" size="medium" title="Projects completed" prefix="" suffix=""]

[gmaps]

Attributes and possible values:

Example:

[gmaps address="1600 Amphitheatre Parkway, Mountain View, CA 94043, United States" 
latitude="" longitude="" marker="" height="400" type="ROADMAP" zoom="14"]

[actionbox]

Example:

[actionbox color="primary" title="This is Call-to-Action Title" description="" btn_label="Click Me!" btn_link="#" btn_color="primary" btn_size="" btn_icon="" btn_external="0"]

[pricing_table]

Example:

[pricing_table]

[pricing_column title="Standard" type="" price="$10" time="per month"]
[pricing_row]Feature 1[/pricing_row]
[pricing_row]Feature 2[/pricing_row]
[pricing_footer url="" color="text" size="" outlined="1"]Signup[/pricing_footer]
[/pricing_column]

[pricing_column title="Business" type="featured" price="$20" time="per month"]
[pricing_row]Feature 1[/pricing_row]
[pricing_row]Feature 2[/pricing_row]
[pricing_footer url="" color="primary" size="" outlined="1"]Signup[/pricing_footer]
[/pricing_column]

[/pricing_table]

More info coming soon!

You can translate GRATA into your language using files located at Grata/languages folder. In order to translate the theme, follow the steps below:

GRATA is WPML ready

If you need a Multi-Language site, then we recommend using the WPML plugin. You would need to buy a license for it, then install it and set it up. All information and documentation can be found at plugin's website: WPML.org