Introduction ========== Welcome! First of all we want to thank you for purchasing our product, ananke - One Page Responsive Hosting Wordpress Theme. ananke is a Modern Multipurpose and OnePage Wordpress Theme. This theme is suited for any type of website, hosting or personal or business use. The Landing Page is designed with modern look and feel while keeping in mind to make it user friendly and eye catching so that people using it can get the best out of their website. In the following sections we will explain how to set up and use ananke theme the easiest way possible. If you cannot locate your answer here, sign up for our support forum and our supporters will help you. ----------------------------- Files included in package ========================= The download package (.zip) that you get from ThemeForest contains the following files and folder: - `ananke.zip`: main theme file that need to be uploaded to host to install ananke theme. - `ananke-child.zip`: basic child theme of ananke theme. It is created for people who want to customize code of ananke theme. - `data_export/Dark-version/demo-content.xml`: this file contains all sample content which will help you to have a first look of how we use ananke theme. - `data_export/Dark-version/theme-options.txt`: theme option backup file. You'll need this to restore the default theme options that setup for demo website. - `data_export/Dark-version/contact-form7.html`: open and copy content in this file to paste in backend contact form7. - `data_export/Dark-version/home-slide.zip`: Revolution Slider demo content, [see Revolution Slider documentation guide](http://revolution.themepunch.com/documentation/#start) - `Documentation/Documentation_ananke`: documetation folder that contains documentation files. - `Documentation/Documentation_Revolution-Slider`: documetation folder that contains documentation files. - `Plugins`: this folder contains plugins that ananke theme recommends. - `js_composer.zip`: plugin file for WPBakery Visual Composer. - `revslider.zip` : plugin file for revolution slider. - `ot_portfolio.zip`: plugin file for portfolio projects management. - `ot_slide_show.zip`: plugin file for slideshow projects management. - `ot-themes-one-click-import.zip`: plugin file for one click import demo content management. ------------------------------ Installation ========= Install theme ------------- After you download the package from ThemeForest, unzip it. You'll see a file `ananke.zip`, which is the main file that needed to upload and install. You can either choose to upload and installl the theme using **WordPress theme install** or use **FTP** function. **Install theme using WordPress install function** - Go to `Appearance > Themes` and click **Add New** - Select **Upload** - Click **Browse** and select the `ananke.zip` file - Click **Install Now** - When upload and installation progresses are completed, click **Activate**, or go to `Appearance > Themes` and activate **ananke** theme **Upload and install using FTP** If you get any fail when install theme by Wordpress install function, we recommend to use FTP: - Unzip `ananke.zip`, you'll get a folder `ananke` - Use a FTP client like [FileZilla](http://filezilla-project.org/) and upload that folder to `wp-content/themes` folder on your host - Go to `Appearance > Themes` and activate **ananke** theme Install plugins ---------------- After installing ananke, you'll see a notification in the top of the page that says the theme needs some plugins to function properly. ananke theme **requires** following plugins: - WPBakery Visual Composer: premium plugin for page builder. It is the most popular plugin on Codecanyon. ananke theme **recommends** following plugins: - Revolution Slider: premium plugin for creating sliders. - [Contact Form 7](https://wordpress.org/plugins/contact-form-7/): plugin for creating contact forms. It is free and available on WordPress.org - [Redux Framework](https://wordpress.org/plugins/redux-framework/) : Redux is a simple, truly extensible and fully responsive options framework for WordPress themes and plugins. Ships with an integrated demo. - OT Portfolios: plugin file for portfolio projects management. - OT Slide Show: plugin file for slideshow projects management. ananke is working perfectly with these plugins. It automatically adds more styles to them to make the design match the theme. To install these plugins: - Click **Begin installing plugins** - You'll be redirect to a page where all needed plugins are listed. Just click on **Install** below each plugin's name - After installing, if it's required to activate the plugin, just activate ![install plugins](images/install-plugins.png) - Install plugins complate ![install plugins](images/active-plugin.png) One Click Import demo content ----------------------------- <iframe width="560" height="315" src="https://www.youtube.com/embed/IifyzMx4P3A" frameborder="0" allowfullscreen></iframe> Import demo content by manual ------------------- If you are new to WordPress and have problems with setting up the theme you might want to import the demo content file that comes with the theme. The following actions will import some dummy posts and pages from the live preview: - Go to `Tools > Import` - Select **WordPress** from the list - If you haven't installed the **WordPress import plugin**, a popup window will appears and ask you to install it. Just click **Install Now**. When the installation progress is completed, click **Activate Plugin & Run Importer**. If you have installed this plugin, skip to next step. - Click **Browse** and select `demo-content.xml` file from the download package - Click **Upload file and import** - When you are asked to import author, you can create new author or import to existing author. You also should check the checkbox **Download and import file attachments**. ![import](images/import-data.png) ![install plugin importer](images/install-plugin-importer.png) ![select demo content](images/select-import-data.png) After completing all above steps, go to `Posts`, `Pages`, `Portfolios`, `Team` to see imported data. Import Theme Option ------------------- Following these steps to import theme option: - Go to `ananke options > import/export` ![import theme option](images/import-theme-option.png) - **[1]**: Click to **import from file** - **[2]**: Copy code in file 'theme-option.txt' and paste - **[3]**: Click to `import` Setup homepage and blog page ------------------------------------- After install demo content, you'll see a page 8 Homepage pages, as you see on our demo. You can use one of theme as the homepage of the website. To set it as homepage, please go to `Settings \ Reading`, under **Front page displays**, please chose **A static page (select below)** and select a homepage version (eg: Homepage Slider Dark) for **Front page** and select **Blog** page for **Posts page**. ![setup front page](images/setup-front-page.png) Setup Menu -------------- Although the theme is working now and it shows menu, but because we haven't created a menu for primary location, the theme will display all pages by default. But displaying pages instead of one page sections is a bad idea, because ananke is one page theme. ###Edit imported menu (recommend) When you import demo data, WordPress automatically create a menu for you, named `**Menu Home**. - Go to `Appearance > Menus` - Select **Menu Home** or **Menu Pages** and click **Select** button to edit it. - Scroll to bottom of page and check **Menu Home Only Use For Home Page** for **_Theme location_** - Click **Save Menu** ![edit menu](images/edit-menu.png) ###Create New Menu Following these steps to create a menu: - Go to `Appearance > Menus` - Click the **create a new menu** link to create new menu. - For normal menu item: Select items from the left meta boxes and click **Add to Menu** - On the right, feel free to drag and drop menu items to organize them - When you're done moving menu items, check **Menu Home Only Use For Home Page** for **Theme locations** at the bottom of the page - Click **Save Menu** ![edit menu](images/create-menu.png) **1**: Click to create a new menu. **2**: Enter menu name. Ex: Menu Home. **3**: Enter link and link text **4**: Display menu. **5**: Enter title attricbute. **6**: Tick menu. ------------------------------ Create Your Home Page ==================== ananke uses page template and meta box to create home page, so the first step is just creating a page using `Home Page` template (or you can edit exists page that has been imported via sample content file). ![select-page-template](images/page-template.png) ananke theme comes with Visual Composer plugin. This plugin allows you to forget about shortcodes and create most complex layouts within minutes without writing a single line of code! ###Visual Composer Basics It has very simple and intuitive interface, but before getting started, you may find it useful to get accustomed with its documentation: [Visual Composer Documentation](https://wpbakery.atlassian.net/wiki/display/VC/Visual+Composer+Pagebuilder+for+WordPress?title=Visual_Composer) In ananke theme, we also create some new Elements and add some new parameters to exists elements of Visual Composer. It will help you a lot to build your One Page easier. Following we will go through some popular elements of Visual Composer and all of new elements that ananke theme brings to you. ###Row This is the most popular you can't live without when using Visual Composer. In ananke theme, we use it as a section of One Page. So, when you edit a row, there is new parameters you will see beside the defaults: **_General tab_**: - **Columns gap**: Select gap between columns in row. - **Columns position**: Select columns position within row. - **Equal height**: If checked columns will be set to equal height. - **Extra class name**: If you wish to style particular content element differently, then use this field to add a class name and then refer to it in your css file. - **Extra Id Name**: If you wish to style particular content element differently, then use this field to add a id name and then refer to it in your css file. - **Section Title**: Title of Section, Leave a blank do not show frontend. - **Section Sub Title**: Section Sub Title, Leave a blank do not show frontend. - **Overlay Pattern**: Select overlay pattem or not. Defauit no overlay pattem. - **Full width**: Select Fullwidth or not, Default: No fullwidth. **_Design options tab_**: - **Css**: It hepl you to change margin, border and padding. - **Overlay**: This option allows to place an additional layer above the row's background. - **Border**: Select a color for border. - **Background **: Select a color for background. - **set image**: Select a image conformity with content. - **Box controls**: select this option will you to simplify controls. ###Column As Row, column is also the most popular element in Visual Composer, they are always be together. In ananke theme, we add new tab called "**Animation**" when you edit a column. This tab contains options allow you to set up animation for that column when it appear on screen for the first time. This tab contains following options: **_General_** - **Extra class name**: If you wish to style particular content element differently, then use this field to add a class name and then refer to it in your css file. - **Column Title**: Title of column. - **Container Class**: Enter content of this container class. - **Container id**: Container ID, Only use for content slider. - **Column Effect**: Select Effect for column, Default: Move Bottom. **_Design options_**: - **Css**: It hepl you to change margin, border and padding. - **Overlay**: This option allows to place an additional layer above the row's background. - **Border**: Select a color for border. - **Background **: Select a color for background. - **set image**: Select a image conformity with content. - **Box controls**: select this option will you to simplify controls. **_Width and Responsiveness_**: - **Width**: Select number column. - **Responsiveness **: Adjust column for different screen sizes. Control width, offset and visibility settings. ###Slider Video It contains following parameters: - **Image Banner**: Upload image banner if not use video. - **Link video mp4**: Add link video .mp4 - **Link video webm**: Add link video .webm - **Link video ogg**: Add link video .ogg - **Text Slider**: Enter list text slider ###Moving Background Slider It contains following parameters: - **Image Moving**: Upload image moving. - **Text Slider**: Enter list text slider. ###Pattem Slider It contains following parameters: - **Image Pattern**: Upload image pattern. - **Text Slider**: Enter list text slider. ###Arrow Down It contains following parameters: - **Change Background Button**: Upload image. - **Button text**: Add content button text. - **URL (Link)**: Add button link. ###Button Slider It contains following parameters: - **Text Button 1**: Add text button 1. - **Link Button 1**: Add link button 1. - **Text Button 2**: Add text button 2. - **Link Button 2**: Add link button 2. ###Socials Slider It contains following parameters: - **Icon 1**: Find here: http://fontawesome.io/icons/ - **Link 1**: Add link social 1. - **Icon 2**: Find here: http://fontawesome.io/icons/ - **Link 2**: Add link social 2. - **Icon 3**: Find here: http://fontawesome.io/icons/ - **Link 3**: Add link social 3. - **Icon 4**: Find here: http://fontawesome.io/icons/ - **Link 4**: Add link social 4. - **Icon 5**: Find here: http://fontawesome.io/icons/ - **Link 5**: Add link social 5. ###About Box It contains following parameters: - **Icon Box**: Find here: http://fontawesome.io/icons/ - **Title**: Add title box. - **Content**: Add content box. ###About Video or Image It contains following parameters: - **Image Left**: Upload image left if not use video. - **Link video mp4**: Add link video .mp4 - **Link video webm**: Add link video .webm - **Link video ogg**: Add link video .ogg - **Text Over Video**: Add text. - **Content 1**: Add content 1. - **Content 2**: Add content 2. - **Content 3**: Add content 3. ###Our Team It contains following parameters: - **Avarta**: Avarta of member, Recomended Size: 280 x 280. - **Name**: Member's Name. - **Job**: Member's job. - **Description**: Add Member's Description. - **Icon 1**: Find here: http://fontawesome.io/icons/ - **Url 1**: Add link 1. - **Icon 2**: Find here: http://fontawesome.io/icons/ - **Url 2**: Add link 2. - **Icon 3**: Find here: http://fontawesome.io/icons/ - **Url 3**: Add link 3. - **Icon 4**: Find here: http://fontawesome.io/icons/ - **Url 4**: Add link 4. ###Call To Action It contains following parameters: - **Label Button**: Add label button. - **Label Button Hover**: Add label button hover. - **Link Button**: Add link button. - **Content**: Add content. ###Our Facts It contains following parameters: - **Title Fact**: Title display in Our Facts box. - **Number Fact**: Number display in Our Facts box. ###Slide Show ###Services Box It contains following parameters: - **Icon Service**: Find here: http://html.vegatheme.com/svg-icons/ - **Title Service**: Title display in Services box. - **Content Service**: Add content Services. ###Pricing Table This element is used to create a single pricing table. So if you want to display multiple tables as our demo, you can create a row and set the layout of that row as 3, 4 or 5 columns, whatever you want, then insert a single pricing table into each column. A single table contains following parameters: - **Title Pricing**: Enter title of table. - **Price Pricing**: Enter the price of your plan/service. It can be any value, also a text if you want to enter something like "Free", "Contact", ... - **Detail Pricing**: Enter the detail for your plan. It usually entered in list format. - **Label Button**: Text display in button. - **Link Button**: Link in button. - **Featured Pricing**: Select this option if you want to highlight this table. ###Blog Post It contains following parameters: - **Label button**: Text display in button. - **link button**: Add link button. ###Portfolio It contains following parameters: - **Text Show All Portfolio**: Text Filter Show All Portfolio. - **Order by :**: Enter Order by. Example: title, date, rand . - **Order :**: Enter Order. Example: DESC, ASC . - **Number Show Portfolio**: Number Show Portfolio, Default: 8. ###Slider Project It contains following parameters: - **Images Slider**: Upload image slider. ###Video Project It contains following parameters: - **Link Video**: Ex: http://player.vimeo.com/video/88883554 or http://www.youtube.com/embed/eP2VWNtU5rw - **Set with video**: Example with number : 940 - **Set height video**: Example height number : 450 ###Audio Project It contains following parameters: - **Link Mp3**: Add link .mp3 - **Link Ogg**: Add link .ogg ###Client Logo It contains following parameters: - **Logo Client**: Logo Client, Recomended Size: 156 x 113 - **Link Out Client**: Add link Out Client. ###Contact Info It contains following parameters: - **Icon**: Icon before title info. - **Title**: Add title info. - **Description**: Add description info. ###Maps It contains following parameters: - **Text Button Toggle Map**: Add text button toggle map. - **Latitude**:Please enter [Latitude](http://www.latlong.net/) google map - **Longitude**: Please enter [Latitude](http://www.latlong.net/) google map - Location Image**: Upload Location Image. - **Tootip Location Click**: Add tootip location click. - **Zoom map number**: Please enter Zoom Map, Default: 15. - **Options Show Gmap**: Options Show Gmap, Default: Click button for show Gmap. ------------------------------ Theme Options ============= ananke theme comes with unique, creative and easy-to-use Theme Options page. You can change all theme options in one place! ### Setting Miscellaneous ![Miscellaneous](images/Miscellaneous.png) ### Setting preload ![preload](images/preload.png) ### Setting logo & favicon ![logo-favecon](images/logo-favicon.png) ### Setting header ![header](images/header.png) ### Setting font for h1 -> h6, font menu ![typography](images/typography.png) ### Setting blog ![blog](images/blog.png) ### Setting portfolio ![portfolio](images/portfolio.png) ### Setting 404 page ![404](images/404.png) ### Setting footer ![footer](images/footer.png) ### Setting: Color, custom css, fonts ![styling](images/styling.png) All options have full description so you can know what you are doing. Just click and save! ------------------------------ Post Format =========== [Post Formats](http://codex.wordpress.org/Post_Formats) is theme feature which is a piece of meta information that can be used by a theme to customize its presentation of a post. In short, with a theme that supports Post Formats, a blogger can change how each post looks by choosing a Post Format from a radio-button list. ananke theme supports the following post formats: - `gallery` - A gallery of images, which will be displayed in a responsive image slider, powered by Flexslider. - `link` - A link to another site. - `image` - A single image, which will be shown above post title. - `quote` - A quotation. - `video` - A single video, which can be any video from Youtube, Video or other video websites. Support URL or embed code. The video will be displayed above post title. - `audio` - An audio file, which can be any video from Youtube, Video or other video websites. Support URL or embed code. The video will be displayed using a powerful HTML5 audio player provided by Wordpress as default player. Using post format in ananke lets you differentiate post from each other and make the blog page / single page looks more beautiful. [Go to blog page](http://demo.vegatheme.com/ananke/blog/) to see how post formats look. When you edit a post, select a format you want to apply to that post on the **Format** meta box on the right: ![formats](images/post-format-box.png) When you choose a format, a corresponding meta box will appear **below** the content editor, here's the list of them: ![formats](images/post-formats.png) All you need to do is just enter **all** information in the fields in these meta boxes. This information will be used to decorate the post. For example: gallery post format will uses uploaded images to show a slider above post title, a video post will display a video player above post title, etc. ------------------------------ Create And Manage Portfolio =========================== Setting up the portfolio is quite easy and it requires only a few steps to set it up. Of course you need to install the "OT Portfolio Management" plugin in this case ( if you have not done it already ). Within the first step we recommend to create the portfolio categories first. This will make sure everything is right there when you need it. But what are portfolio categories? Let's take a look at the following example. Imagine you are a photographer and you have a wide range of images you like to show to the crowd. Inside your portfolio you have landscape and portrait images, than these both would be exactly your categories. Categories are mainly used for filtering your portfolio items later on. Add Portfolio Categories ------------------------ ![Portfolio category](images/portfolio-category.png) In order to add new Portfolio category: **[1]** Go to `Portfolio > Categories` **[2]** Enter category name and hit `Enter` Add Portfolio Project --------------------- Now you can start adding your portfolio item. Go to `Portfolio > Add new`. Basically there is not big difference to a regular blog post, all elements like featured image and the WordPress Editor are in the same place. ![Portfolio Add New](images/portfolio-add-new.png) And these portfolio posts are handeled exactly the same way as blog post, with one exception, you need to set a featured image for all kind of post formats. These images are used inside the portfolio overview. **[1]** Enter portfolio project name here **[2]** Select `backend editor` to add element **[3]** Add element ![portfolio element](images/portfolio-element.png) **[4]** Add link out, link audio, link video. **[5]** Select portfolio categories **[6]** Upload portfolio featured image **[7]** Click publish Slide Show ========= Setting up the Slide show is quite easy and it requires only a few steps to set it up Add New Slide ------------- Now you can start adding your slide show item. Go to **Slide show > Add new slide**. Basically there is not big difference to a regular blog post. ![slode show](images/slide-show.png) **[1]** Enter slide show project name here **[2]** Enter content **[3]** Upload slide show featured image **[4]** Select title view and uploaded image 1, add link image 1 and uploaded image 2, add link image 2 **[5]** Click to `publish` Translation ========= ###Tell WordPress which language file to use. If you don’t use WordPress in your native language so far, you have to tell WordPress which language to use to activate the theme translation. You can do this by editing the wp-config.php file (the file is located in the main directory of your WordPress files) and defining the WPLANG constant. You have to set your language code there, for example fr_FR for French translation. ust add the line below to your wp-config.php or change it if it already exists: `define ('WPLANG', 'fr_FR');` ###First Method: Using Codestyling Plugin The easiest way to translate your theme locally is by using the [Codestyling Localization](https://wordpress.org/plugins/codestyling-localization/) plugin. After you have installed and activated the plugin, simply go to `Tools > Localization` (shown in your language) and translate the theme from your WordPress backend following the [plugin instructions](http://www.code-styling.de/english/development/wordpress-plugin-codestyling-localization-en) ###Second Mothod: Using Poedit Poedit is a common program which you can use to translate the theme. It’s available for free on [poedit.net](http://www.poedit.net/). After you have installed Poedit, you can open it and select `File > New Catalog from POT file`. Then select the .pot file from the theme you wish to translate which you can find in the `/languages/` folder of theme. Then go through every line of text and translate it to your native language. Afterwards you can save the catalog with your language code (for example `en_US.po`). Normally Poedit automatically creates the .mo file and saves it, too. The last step you have to do is to upload your created language files to the language folder of your theme using FTP. ------------------------------ Child Theme =========== Fastlat is fully child theme compatible. We have attached a basic child theme to the download package which contains the minimum of required files. If you are planing any code customisations we highly recommend to do this inside the child theme! Learn more about child themes [here](http://codex.wordpress.org/Child_Themes) Need Helps ========= If you need help, please do not hesitate to contact us! To grant best support we set up a support forum at [http://oceanthemes.ticksy.com](http://oceanthemes.ticksy.com). Channeling all requests at one place keeps and makes it simple, easier and even more effective for every customers to get quick help. All issues, requests and questions can be discussed and answered at one place. Please note, you will only get access to our forums with a valid purchase key!