Installation

If you are new to WordPress and/or looking for information that are outside of the scope of this documentation, WordPress has a series of tutorials that will help you get started. Please visit the official Getting Started with WordPress guide. There is also guide how to install WordPress.

Installing by theme upload in WordPress

installable-wp-file-only

You may download the theme ZIP file in https://themeforest.net/downloads. If you are not logged in, log in first. Click there on the button Download next to the theme Title. Submenu will be opened. Click there on Installable WordPress file only.

appearance-themes-add-new

Upload the theme ZIP file via WordPress Admin ⇒ Themes ⇒ Add New.

appearance-themes-add-new-upload-theme

Click on Upload.

appearance-themes-add-new-upload-theme-choose-install
  1. After you click on upload [1], there will appear input for file.
  2. Click on file input [2] and pick the downloaded ZIP file with theme.
  3. Click on Install Now [3].
appearance-themes-activate

Once uploaded successfully, you can activate your new theme in WordPress Admin ⇒ Appearance ⇒ Themes ⇒ Activate. This will show the option for installation additional plugins.

If you receive an error during upload via the WordPress Admin, it's usually caused by one of these problems:

  • You are uploading incorrect ZIP file. Sometimes you need to unzip it first and find yet another (correct) ZIP inside that you should upload instead.
  • You need to contact your server host and ask them to increase the PHP memory limit for you (it's free). Some (usually cheap) servers have it set low by default and this prevents you from uploading files larger than a couple of MB.
  • Another solution is to install and upload theme via FTP.

Installing by FTP

If you are experiencing problems with classic WP theme upload, we strongly recommend you to upload the theme via FTP. In that case upload unzipped theme into the /wp-content/themes/ directory.

Theme plugins installation

Even if theme works without "Fresh Framework" or "Ark Core", but we strongly recommend you to install and active it to use 100% theme options and settings.

tgm-begin-install-plugin

After the theme installation and activation you will see a few notices at the top of WP administration pages. There will be notice box with title The following recommended plugins are currently inactive: .... with link Begin installing plugins.

Click on the link and install the plugins and with similar procedure activate the plugins.

tgm-appearance-install-plugins

Page with plugins to install will be opened.

  1. Change select with value Bulk Actions to value Install [1].
  2. Click on the checkbox with labe Plugin [2].
  3. Confirm by clicking on Apply [3].
tgm-return-to-plugins-installer

Plugins will be installed, continue by clicking on Return to Required Plugins Installer.

tgm-appearance-activate-plugins

Page with plugins to activate will be opened.

  1. Change select with value Bulk Actions to value Activate [1].
  2. Click on the checkbox with labe Plugin [2].
  3. Confirm by clicking on Apply [3].

If you receive the error during the installation and activation, there are probably similar errors, which may occur during the theme installation.

In that case we recommend you to unzip files in the theme directory /ark/install/zips/ and upload them to the server to the directory /wp-content/plugins/ via FTP client.

Updating the Ark Theme and it's Plugins

Here is a step-by-step on how to update them:

1. Download and install: https://www.envato.com/lp/market-plugin/ (drag & drop the ZIP file to "Plugins > Add New > Upload Plugin")

2. Name your token as you wish and click "Create Token" with the already pre-selected settings here https://build.envato.com/create-token/?default=t&purchase:download=t&purchase:list=t and you will get your token. You can use this same Envato connection token on multiple websites.

3. In the "Envato Market" plugin, in "Settings" tab, then under "Single Item Tokens (Advanced)", click "Add Item" and insert your token and Ark ID: 19016121

4. Update Ark theme via "Envato Market" plugin, in "Themes" tab

5. Update the bundled plugins via "Appearance > Install Plugins"

Wordpress Settings and Options

Setting up your Front Page as Page

settings-readings-front-page
  1. Go to WordPress Admin Menu ⇒ Settings ⇒ Reading
  2. Select in Front page displays section an option static page
  3. You can choose there your Front Page (Home) in select option
  4. You can choose the Blog page in select option Posts Page

Setting up your Front Page as Blog

settings-readings-latest-posts
  1. Go to WordPress Admin Menu ⇒ Settings ⇒ Reading
  2. Select in Front page displays section an option Your latest posts

Fresh Builder

How to activate Fresh Builder

add-new-page-edit-with-freshbuilder
  1. Open existing or create new page.
  2. Click on the Edit with Fresh Builder button if builder mode is not activated.
fresh-builder-add-elements

Buttons with tooltip will appear:

  • Add Section From Library
  • Add Element
  • Add Section with 1 Empty Column
  • Add Section with 2 Empty Columns
  • Add Section with 3 Empty Columns
  • Add Section with 4 Empty Columns
  • Add Advanced Bootstrap Grid Section

How to insert Hello World!

Meaning of Hello World is the simplest example program that, when run, displays the message: Hello World. I will show you how to make in in the Fresh Builder.

freshbuilder-add-section-with-1-column

Click on the Add Section with 1 Empty Column icon button.

freshbuilder-add-element

Click on the Big + icon button in the column or on the + icon button in the column menu.

freshbuilder-add-element-modal

Type into the search field "Head" and choose Heading element.

fresh-builder-edit-heading

Click on element Heading to edit it.

freshbuilder-headinh-edit

Change the text to "Hello World" and press Save Changes button

Controls

Basics

freshbuilder-keybor-shortcuts

For your better comfort and faster usage, we implemented keyboard shortcuts

  • Space or Return will confirm modal dialogs
  • Esc or Q is canceling action
  • D is for duplicate (when hovering on element)
  • R is for remove (when hovering on element)

You can always click on the Shortcuts button to see all possible shortcuts

Context Menu (Right Click Menu)

freshbuilder-right-click

Just like you are used to from your favorite desktop-class applications, you can instantly bring up a list of available actions by right-clicking on any element.

Quick Save

freshbuilder-quick-save

When you press Quick Save button, everything will be immediately saved in the background, without refreshing the editor page. If you have your website front-end opened in another tab/window, it will automatically refresh it.

If you use 2 monitors, we recommend you to have one WP Admin opened in one monitor and your site in the second monitor.

Repeatables

freshbuilder-repeatables-with-second-modal

There are a lot of elements, that have something, we call Repeatables. For example images slider have images - that are in this case repeatable items. You can:

  1. Change order by dragging [1].
  2. remove [2]
  3. edit [3]
  4. add these repeatables [4].

 

Elements Tab Settings

Fresh builder allows you to fully customize any elements on your page. As you saw in previous chapter there are a lot of tabs ant these tabs contains a lot of settings for each element. Two tabs groups represent data and design settings.

Data Tabs

General

freshbuilder-tab-general

Options in the tab general are basic like text, images or icon. It may contain colors in specific cases like image slider, where you can set right and lift arrows colors.

Advanced

freshbuilder-tab-advanced

Advanced tab is almost same as General tab, but contains for advanced features. For example in columns advanced settings you will find bootstrap features like column push, pull and offset.

Loop and Pagination

freshbuilder-tab-loop-pagination

Loop and pagination tabs are for blog and portfolio. You can add with this feature sections like the latest portfolio into any page.

Design Tabs

Those tabs for element design, there is no content like texts.

Box Model

Box Model tab is for few element settings like Background Layers, Padding, Margin and other.

Background Layers
freshbuilder-boxmodel-bg

You can now add backgrounds almost anywhere. Lower layers overlays upper layers. Each layer allows you to show only it on hover or hide on different devices like mobile - for example - if you do not wish to show YouTube video background on mobile devices for better page performance.

Padding and Margin
reshbuilder-boxmodel-padding-margin

Padding and margin is there for setting space around edited elements. If you are not advanced user, just remember, that background are applied on padding - space, but not on margin - space. Borders are shadows are around padding - space.

Typography

freshbuilder-boxmodel-typography

Typography is about font settings for element and its children.

The most important option is Text Color Palette, which allows you to set dark, light or Inherited text color. This feature is useful, because it option is applied to all child element (in the case of section, row or column for example).

Text Color allow you to set different colors for text, links in it and hover or not-hover settings.

You can also Text Align, Font Size, Line Height and others options, where you can apply different setting for different devices.

element.style

freshbuilder-boxmodel-element-style

element.style is about font settings for element, not its children - that is main difference between it and Typography tab.

You can set there ID and additonal CLASS html attribute. If you wish to add more clases, just put space between them, for example "class-1 class-2 class-3".

Typography section in element.style is connected only with element, not its childrens.

 

Custom code

You can add your custom CSS and JavaScript code here. Every element has it's own unique CSS class that will help you target it. Custom CSS and JavaScript code will be printed at the end of the page.

Custom CSS
freshbuilder-boxmodel-element-style-custom-css

 

You can add custom CSS for edited element by clicking big green plus (+) button. Custom CSS may be applied only for choosen devices (mobiles, tablets, laptops, desktop cumputes).

Custom JavaScript
freshbuilder-boxmodel-element-style-custom-js

You can add custom JS (Javascript) by clicking big green plus (+) button.You can choose, that JS will be wrapped by jQuery and $(document).ready() function.

In order to reference this element in your JavaScript code, please use this string !selector! - It will be replaced with the unique CSS class automatically during page rendering. So for example a jQuery object of this element can be written as $('!selector!')

Theme Options and Sitemap Settings

All Settings for Ark theme are in WP Admin Menu > Ark. There is whole magic, that allows you to set up your site as you like.

Theme Options

Layouts

to-layout

You can enable or disable Page loader, Scroll to top button and Smooth Scroll.

Skins and Accents

to-skins

Skins and Accent Tabs allows you change the colors of the elements, that are not in the page builder - for example scroll to top button.

Fonts

to-fonts

This Tab allows you to set up your site fonts, it enables you to use Google Fonts or your uploaded fonts.

You can use even your own custom fonts, but in that case you should upload EOT, WOFF, WOFF2 and other fonts via FTP. Please note, that you must have filled at least one path to font.

There are Body, Body Alt and others section under under the Custom Fonts section. These are here to set up font for page. You can change the fonts in the elements in typograpty and element.style section.

Icon Fonts

to-iconfonts

This Tab allows you to enable or add icon fonts to your site.

You can use even your own custom icon fonts, but in that case you should upload CSS fand font files via FTP and fill the path to this CSS file.

There is also a lot of predefined fonts for you, which you can enable.

Be sure, that your icon font style does not contain selectors like [class*=icon-] - if it contains, please replace in the the string "icon" with the string "my-custom-icon" or something similar.

Please note, that you will probably need to modify the icon font CSS file. This file should look similar to for example this file.

Portfolio

to-portfolio

Portfolio Tab allows you to change slugs (part of URLs) for portfolio post type, portfolio categories and tags.

Google API

to-google-api

Because Google Maps needs API key, there is Google API tab is for it.

Please note, that you must have Google account (email) to create API key. To create your API key:

  1. Go to the page https://developers.google.com/maps/documentation/javascript/get-api-key#get-an-api-key and click on the button GET A KEY.
  2. Click on Continue -it will take a moment
  3. Click on Create
  4. There will be the modal window with input labeled Here is your API key

Sitemap

sitemap-page

You can change in the WP Admin Menu > Ark > Sitemaps the layout of the pages, blog pagess, portfolio pages, search results and 404 page.

Each page type has its own pagebuilder.

sitemap-page-layout-settings

Each page type has also Layout Settings, where you can set Header, Titlebar and Footer.

Headers

headers-settings

There are a lot of header types in the Ark. You can few of them in http://main.arktheme.com/ in the menu features. You can edit Headers in WP Admin Menu > Ark > Headers. There are notes and description under each option.

headers-settings-colors

There are tons of color settings for the Ark Headers.

Side Menu

side-menu

If you wish to have extra side menu, you need to check Show Side Menu option. You can pick the content in Side Menu Template option.

If you have not any template, you can create it in the WP Admin Menu > Ark > Templates.

Titlebars

titlebars-settings

Titlebars represents the area under the header and before the page content. Each Titlebar has page builder area.

Footers

footers-settings

Footers is the area after the page content. Each Footer has page builder area.

Templates

template-post-type

Templates is custom post type for including page parts, which are in more pages. For example - if you have call to action, that is same on 10 pages and you know, that you will change it in the future, then use template. You can change template in one place and every page, that contains element Template that points to that call to action will be changed.

Sidebars

sidebars-setting

Sidebars are for adding your custom sidebars. You can use them in the Sidebar element in the page builder. Please note, that you need to fill sidebar ID - Allowed characters are a-z, 0-9 and minus character -. Also note, that sidebars with same ID will be ignored.

Onepage Menu

One Page menu is used for small sites, where almost every information is on home page. One-page menu consists of few menu items with link like #services which points to element or section with ID attribute like services.

How to set the links in one-page menu

onepage-menu-showcase

You can edit the menu links in the WP Admin Menu > Appearance > Menus. There you should edit or create new menu.

You need to use Custom Links menu type in the left columns. Edit the single menu custom link and into the field URL put the link in the format: http://example.com/#id-link , where you need to replace http://example.com/ with your site URL and id-link with ID of the section.

How to set the ID of the section

set-id-for-onepage-menu

Edit the section or any other element, where you wish to menu scroll. Click on tab element.style and fill the field ID (attribute) . Please note, that there should not be any # sharp character as it is in the menu.

Animation on #links

sharplink-animation-settings

There are options in the WP Admin Menu > Ark > Theme Options > General. There are settings with speed and with offset. It serves for better adjusting to your needs.

Posts Format

Posts Format allows you to change post behavior in the blog elements. Ark theme supports these post formats: standard, image, gallery, quote, video and audio.

Standart and Image Post Format

featured-image-1

Standart and Image Post Format use featured image for its featured area. You can set it in the Featured Image Writepanel (Post Meta box) by clicking on link Set featured image.

featured-image-2

You can click on the chosen image and submit it button Set Featured Image.

featured-image-3

You can scroll down until you find the box with Title Featured Image. There you can change or remove featured image.

Gallery Post Format

featured-gallery-1

Gallery Post Format use first gallery in the content area. You need to set Gallery as format and you need to click to Add Media Button.

featured-gallery-2

Change tab from Insert Media to Create Gallery, pick or upload gallery images and commit this with the button Create a new gallery.

featured-gallery-3

You can drag and drop to reorder media files. After that press button Insert gallery.

Quote Post Format

Way for showing quote format is, that you put quote into the title.

Video and Audio Post Format

video-post-format-1

You need to set post format to Video (or Audio) and paste link into the post content. Supported are Vimeo, YouTube or SoundCloud, whole list is https://codex.wordpress.org/Embeds#Okay.2C_So_What_Sites_Can_I_Embed_From.3F.

You need to have the link on the line with no text before or afrer it!

video-post-format-2

When you use Video (or Audio) post format in the Fresh Builder, you must use HTML and PHP Code element with code:

<div>
https://www.youtube.com/watch?v=UbQgXeY_zi4
</div>

Where you just replace the link with your video or audio.

You need to have the link on the line with no text before or afrer it!

Portfolio

Overview

portfolio-category-showcase

Image shows Portfolio element with full settings. If you wish to have similar portfolio you should:

  1. Create portfolio posts in WP Admin > Portfolio > Add New.
  2. Portfolio posts should have set featured image.
  3. If you wish to have filters in the portfolio, you add them as portfolio tags
  4. If you wish to use only selected portfolio items on the page, you should add to these portfolio posts at least one portfolio category.

Portfolio Single Post Settings

portfolio-single-settings

Each option above has its meaning in the portfolio category or in the Portfolio Element:

  • Portfolio Category (Archive) View allows you to rewrite default behaviour.
  • Portfolio Tag is for filtering.
  • Portfolio Category - if you wish to have two and more portfolio elements with different set of portfolio items, then you should have two different portfolio categories. Please note, that one portfolio item may have more portfolio tags and categories.
  • Featured Image - is image that you will see in the portfolio element. If you are not sure how to add featured image, then check FAQ chapter
  • Portfolio Category (Archive) settings - there are settings for different behavior in the portfolio archives and Gallery element. If you keep this options blank, then default values will be printed:
    • Custom Post Title - rewrites default portfolio title
    • Custom Subtitle - hides portfolio tags (filters) and show this option
    • Custom Link URL - rewrites default portfolio link ( image link ) to value. There is also the option, to open gallery links in new window or browser tab.
    • Image Size (Mosaic Grid) - extra settings for columns grid gallery design.

Dummy Content Import

You can install demo content at WP Admin Menu ⇒ Ark ⇒ Demo Install. Please follow the on-screen instructions there.

Customization and Child Theme

We recommend not to edit the source code of the theme as well so you can easily update it (updates overwrite your changes). We recommend to use Child Themes.

We also deliver the child theme inside the package downloaded from themeforest, for more comfortable usage: ark-child.zip file (right-click on this link and select Save As!).

FAQ - Frequently Asked Questions

How I set Featured Image?

featured-image-1

Edit the Post, Page or Portfolio, where you wish to add or change featured image. Scroll Down until you find the box with Title Featured Image. Click there on the link Set featured image.

featured-image-2

Click on the chosen image and submit it button Set Featured Image.

featured-image-3

Scroll Down until you find the box with Title Featured Image. There you can change or remove featured image.

There is no change after change

Some part of your page is probably cached. There are few solutions:

  • If you use some cache plugin like W3 Total Cache or WP Super Cache or WP Fastest Cache, then please delete cache.
  • It is also possible, that theme has some compatibility issues with some outdated plugin or with plugin which does not use standard WordPress interface. In that case, if you have installed Fresh File Editor, go to WordPress Admin ⇒ Tools ⇒ File Editor, open path WordPress ⇒ wp-content ⇒ uploads, right click on freshframework and in menu click on delete.
  • It is possible, that you have set cache on your hosting. Try to refresh after 30 seconds.
  • If you have problems with JavaScript or CSS, try to do web browser hard refresh:
    • Windows: ctrl + F5
    • Mac/Apple: Apple + R or command + R
    • Linux: F5

    You can also try anonymous browsing.

Portfolio shows 404

Go to WordPress Admin ⇒ Settings ⇒ Permalinks and press there Save changes even if you did not change anything.

I changed domain or HTTP to HTTPS and web is broken

We do NOT recommend to change domain or WordPress URL. We understand, that sometimes it is necessary. In that case:

  1. Do backup MySQL and whole Wordpress directory.
  2. Check backup once again (You must be sure that everything is backuped, really).
  3. Go to WP Admin.
  4. Replace page url from /wp-admin/ to /wp-admin/options.php
  5. Find there options home and siteurl and replace values to the new right values - new WordPress URL
  6. Press Save on the page bottom.
  7. You will have to change images path in pages, posts, portfolio posts and options.

I see no images or blank images

You need to allow writing in directory /wp-content/uploads/freshizer/ - if it is not created, please create it with writing rights by FTP.

Also please check your server configuration - do you have allowed GD library ( PHP library for images )? If not, allow it.

How to create twitter access token?

  1. Go to site https://apps.twitter.com/app/new and log in
  2. Into fields Name, Description, Website insert your website url f.e. http://freshface.net/
  3. Check "Yes, I agree"
  4. Click on button "Create your Twitter application"
  5. Find and click on Button "Test Oauth"
  6. Log in again
  7. Use inputs here - you may put anything in "Access Token" and "Access Token Secret"

Theme Updates

Please follow the instructions at WordPress Admin ⇒ Dashboard ⇒ Updates.

Bug reports and feature requests

Please let us know your concern via our support channel.

Support

We offer free support to our paying customers for general installation/usage/bugs, etc. You can open a support ticket.

x

We use cookies to give you the best online experience. By agreeing you accept the use of cookies in accordance with our privacy policy. Learn More