<
- `data_export/architect-dark/Revolution-Slider.zip`: Revolution Slider demo content, [see Revolution Slider documentation guide](http://revolution.themepunch.com/documentation/#start)
- `Documentation`: documetation folder that contains documentation files.
- `Plugins`: this folder contains plugins that architect theme recommends.
- `js_composer.zip`: plugin file for WPBakery Visual Composer.
- `revolution.zip`: plugin file for revolutiont projects management.
- `ot_portfolio.zip`: plugin file for portfolio projects management.
- `ot_services.zip`: plugin file for services projects management.
------------------------------
Installation
=========
- Do you want custom theme, Starting At Only $50 contact us now <a href ="#">**contact@thememodern.com**</a>
Install theme
-------------
After you download the package from ThemeForest, unzip it. You'll see a file `architect.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 `architect.zip` file
- Click **Install Now**
- When upload and installation progresses are completed, click **Activate**, or go to `Appearance > Themes` and activate **architect** theme
**Upload and install using FTP**
If you get any fail when install theme by Wordpress install function, we recommend to use FTP:
- Unzip `architect.zip`, you'll get a folder `architect`
- Use a FTP client like [FileZilla](http://filezilla-project.org/) and upload that folder to `wp-content/themes` folder on your host
- Set the `Transfer Type` to `Binary` by expanding `Transfers > File Types`
- Go to `Appearance > Themes` and activate **architect** theme
Install plugins
----------------
After installing architect, you'll see a notification in the top of the page that says the theme needs some plugins to function properly.
architect theme **requires** following plugins:
- [Meta Box](http://wordpress.org/plugins/meta-box/): plugin for creating meta boxes for posts, pages,... It is free and available on WordPress.org
- [WPBakery Visual Composer](http://codecanyon.net/item/visual-composer-page-builder-for-wordpress/242431): premium plugin for page builder. It is the most popular plugin on Codecanyon.
- [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.
architect theme **recommends** following plugins:
- [Contact Form 7](https://wordpress.org/plugins/contact-form-7/): plugin for creating contact forms. It is free and available on WordPress.org
- [Newsletter](https://wordpress.org/plugins/newsletter/): Add a real newsletter system to your blog. For free. With unlimited newsletters and subscribers.
- [WooCommerce](https://wordpress.org/plugins/woocommerce/): WooCommerce is a powerful, extendable eCommerce plugin that helps you sell anything. Beautifully.
- One Click Import Demo: Import demo content with just one click.
- OT Visual Composer: This plugin for visual composer manager.
- Revolution Slider: Premium plugin for creating sliders.
- OT Portfolio: Portfolio plugin allows you to create a page containing the information about your past projects.
- OT Services: Services plugin allows you to create a page containing the information about your services.
Architect is working perfectly with these plugins. It automatically adds more styles to them to make the design match the theme.
To install these plugins:
- Go to `Appearance > Install 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
One Click Import demo content
-----------------------------
<iframe width="560" height="315" src="https://www.youtube.com/embed/VeeMWHSj4k8" frameborder="0" allowfullscreen></iframe>
Import demo content by manual
-------------------
- Do you want custom theme, Starting At Only $50 contact us now <a href ="#">**contact@thememodern.com**</a>
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 `sample-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**.
After completing all above steps, go to `Posts`, `Pages`, `Portfolios`, `Team`... to see imported data.
Import Theme Option by manual
-------------------
Following these steps to import theme option:
- Go to `architect options > import/export`
- **[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 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 architect is one page theme.
###Edit imported menu (recommend)
When you import demo data, WordPress automatically create a menu for you, named `**Primary menu**.
- Go to `Appearance > Menus`
- Select **Primary Menu** or **Footer Menu** or **Left Menu** or **Right Menu** or **Shop Menu** and click **Select** button to edit it.
- Scroll to bottom of page and check **Primary Menu** for **_Theme location_**
- Click **Save Menu**
---------------
- **Primary Menu**: No use for header layout 3
- **Footer Menu**
- **Left Menu**: Only use for header layout 3
- **Right Menu**: Only use for header layout 3
- **Shop Menu**: Use for shop page
###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 **Primary Menu** for **Theme locations** at the bottom of the page
- Click **Save Menu**
**1**: Click to create a new menu.
**2**: Enter menu name. Ex: Primary menu.
**3**: Select page to create.
**4**: Display menu.
**5**: Tick menu.
------------------------------
Create Your Home Page
====================
architect 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).
architect 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 architect 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 architect theme brings to you.
###Row
This is the most popular you can't live without when using Visual Composer. In architect 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_**:
- **Equal height**: If checked columns will be set to equal height.
- **Disable Row**: If checked the row won't be visible on the public side of your website. You can switch it back any time.
- **Row ID**: Enter row ID (Note: make sure it is unique and valid according to [w3c specification](http://www.w3schools.com/tags/att_global_id.asp)).
- **Disable row**: If checked the row won't be visible on the public side of your website. You can switch it back any time.
- **Extra class name**: Style particular content element differently - add a class name and refer to it in custom CSS.
- **Setup Full width For Row?**: Select Full width for row : yes or not, Default: No fullwidth
- **Overlay**: Select yes or no If you show overlay.
- **Background color**: Select background overlay. This field show when overlay is "yes".
**_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 architect 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**: Style particular content element differently - add a class name and refer to it in custom CSS.
- **Animate Column**: Select Animate , Default: None
- **Animate delay number**: Example : 0.2, 0.6, 1, etc
**_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.
###Heading
It contains following parameters:
- **Text**: Add Text.
- **Element Tag**: Section Element Tag.
- **Text Align**: Section Overlay.
- **Font Weight**: Section Overlay.
- **Font Size**: Font Size.
- **Color**: Select color for text.
- **Margin Top**: Add margin top of heading.
- **Margin Bottom**: Add margin bottom of heading.
- **Class Extra**: Class extra for style.
###Button
It contains following parameters:
- **Button Text**: Add text for button.
- **Button Link**: Add link for button
- **Show icon**: If you show icon, select show icon is 'yes'.
- **Button Color**: Select color for button.
- **Button Size**: Select size for button.
- **Button Position**: Select position for button.
- **Radius**: Select border radius button.
###Divider
It contains following parameters:
- **background**: Select Background Color.
###Miscellaneous Box
It contains following parameters:
- **Style**: Select Style.
- **Align**: Select align.
- **Image**: Upload image for box.
- **Title**: Enter the title.
- **Content**: Enter the content.
- **Link Image**: Add link for image. if you want this. Only use for style 1.
- **Button link**: Add text and link for button. Only use for style 2.
###Icon Box
It contains following parameters:
- **icon**: Select icon.
- **Title**: Enter the title.
- **Content**: Enter the content.
###Question Box
It contains following parameters:
- **Title**: Enter the title.
- **Button link**: Add text and link for button.
###Gallery Box
It contains following parameters:
- **Style**: Select style. Slider or List
- **Image**: Upload images.
###Feature Box
It contains following parameters:
- **Title Style**: Select style. Title the bot or top
- **Image**: Upload image of box.
- **Image type**: Select style of image.
- **Title**: Enter the title.
- **Title Type**: Select color of title. White or black. Use for title style is 'title bot'
###Promotion Box
It contains following parameters:
- **Style**: Select style. Background Image or Background color dark or background transparent.
- **Image**: Upload image of box.No use for style is background dark.
- **Title**: Enter the title.
- **Content**: Enter the content. No use for background transparent style.
- **Button Link**: Add text and link for button. No use for background dark style.
- **Icon**: Use for style is 'background dark'. Add code icon. Ex: lnr-leaf. Find [here](https://linearicons.com/free)
- **Background Color**: Select background color. Only use for background dark style.
###Latest Blog
It contains following parameters:
- **Style**: Select style. '2column and has button or' '3 column and no button'
- **Number Show**: Enter the number show.
- **Excerpt Length**: Number Excerpt Length.
###Latest Blog Slide
It contains following parameters:
- **Number Show**: Enter the number show.
- **Excerpt Length**: Number Excerpt Length.
###Team
It contains following parameters:
- **Style**: Select style. Not show description or show description.
- **Image**: Upload image.
- **Name**: Member's name.
- **Job**: Member's Job.
- **description**: Add Content Text. Only use for style 2.
- **Social icon 1**: Select social icon 1.
- **Link social 1**: Add link for social icon 1.
- **Social icon 2**: Select social icon 2
- **Link social 2**: Add link for social icon 2.
- **Social icon 3**: Select social icon 3.
- **Link social 3**: Add link for social icon 3.
###Clients Logo
It contains following parameters:
- **Image**: Upload image.
###Portfolio Filter
It contains following parameters:
- **Text show all**: Enter the text.
- **Hover Text Filter**: Select hover style.
- **Number Show**: Enter number show.
- **Style**: Select style. Text filter dark or light.
###Portfolio Filter Grid
It contains following parameters:
- **Column**: Select content show in Column. 2 Column or 3 column or 4 column.
- **Text show all**: Enter the text.
- **Number Show**: Enter number show.
###Portfolio Filter Grid V2
It contains following parameters:
- **Column**: Select content show in Column. 2 Column or 3 column or 4 column.
- **Text show all**: Enter the text.
- **Number Show**: Enter number show.
###Counter
It contains following parameters:
- **Style**: Select style. Simple or have icon or have image.
- **Number**: Enter the number counter.
- **Title**: Enter the title.
- **Content**: Enter the content. Only use for 'simple' style.
- **Icon**: Only Use for 'have icon' style. Enter the code icon. Find [here](https://linearicons.com/free)
- **Image**: Upload image. Only usr for 'have image' style.
###Process
It contains following parameters:
- **Style**: Select style. List or slide.
- **Order**: Enter the number.
- **Enter your title **: Add Your Title Text. Show title of box.
- **Enter your desc**: Enter the content.
###Testimonial
This element is used to present a carousel of testimonials. It contains following options:
- **Style**: Select style for testimonial. 1 Row or 2 Row.
- **Image **: Upload image.
- **Name**: Add name.
- **Job**: Add job.
- **Enter your desc**: Enter the content to show of testimonial.
###Testimonial 2
This element is used to present a carousel of testimonials. It contains following options:
- **Prev**: Upload image prev.
- **Nẽt**: Upload image next.
- **Image **: Upload image.
- **Name**: Add name.
- **Job**: Add job.
- **Enter your desc**: Enter the content to show of testimonial.
- **Logo**: Upload logo.
###Contact Info
It contains following parameters:
- **Icon**: Enter the code icon. Ex: lnr-smartphone. Find [here](https://linearicons.com/free)
- **Enter your title **: Add Your Title Text. Show title of box.
###Project Info
It contains following parameters:
- **Title**: Enter the title.
- **Description**: Enter the content.
###Share
It contains following parameters:
- **Info**: Enter the content.
- **facebook**: Select yes or no. Default: No.
- **Share Twitter**: Select yes or no. Default: No.
- **Share google plus**: Select yes or no. Default: No.
- **Share linkedin**: Select yes or no. Default: No.
- **Share pinterest**: Select yes or no. Default: No.
###Social
It contains following parameters:
- **Icon**: Select Icon.
- **Link**: Add link for social icon.
###Service
It contains following parameters:
- **style**: Select style.
- **Number**: Enter the number show.
- **Column**: Select column show content.
###Google Maps
It contains following parameters:
- **Title**: Enter the title.
- **Info**: Enter the content.
- **Latitude**: Please enter [Latitude](http://www.latlong.net/) architect map
- **Longitude**: Please enter [Longitude](http://www.latlong.net/) architect map
- **Zoom map**: Please enter zoom map. defaul 16.
- **Icon Map marker**: Icon Map marker, 47 x 68.
- **JavaScript Code**: Enter your JavaScript code, find your custom style gmap [here](https://snazzymaps.com/explore)
###Google Maps 2
It contains following parameters:
- **Latitude**: Please enter [Latitude](http://www.latlong.net/) architect map
- **Longitude**: Please enter [Longitude](http://www.latlong.net/) architect map
- **Title Tab**: Enter the title.
- **Title**: Enter the title.
- **Info**: Enter the content.
- **Zoom map**: Please enter zoom map. defaul 16.
- **Imager**: Icon Map marker, 47 x 68.
- **JavaScript Code**: Enter your JavaScript code, find your custom style gmap [here](https://snazzymaps.com/explore)
------------------------------
Theme Options
=============
Architect theme comes with unique, creative and easy-to-use Theme Options page. You can change all theme options in one place!
###Setting preload, animation, etc...
###Setting Logo and Favicon
###Setting Header
###Setting Top Header
###Setting blog
###Setting Social link
###Setting Coming Soon
###Setting Shop
###Setting 404
###Setting footer
###Setting styling : unlimited color, custom css
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.
Architect theme supports the following post formats:
- `gallery` - A gallery of images, which will be displayed in a responsive image slider, powered by Flexslider.
- `image` - A single image, which will be shown above post title.
- `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 architect lets you differentiate post from each other and make the blog page / single page looks more beautiful.
[Go to blog page](http://demo.thememodern.com/architect/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:
When you choose a format, a corresponding meta box will appear **below** the content editor, here's the list of them:
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
------------------------
In order to add new Portfolio category:
**[1]** Go to `Portfolio > Categories`
**[2]** Enter category name and hit `Enter`
Add Portfolio Project
---------------------
Setup Visual Composer for create portfolio
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.
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 Page detail. Upload image in subheader.
**[4]** Add Portfolio Detail.
**[5]** Add categories
**[6]** Upload portfolio featured image
**[7]** Click `publish`
--------------------------
Create And Manage Services
===========================
Add New Services
------------
Now you can start adding your Services. Go to Services > Add Services. 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.
**[1]** Enter services name here.
**[2]** Add content about your services.
**[3]** Setting services details.
**[4]** Setting Page detail.
**[5]** Upload services featured image.
**[6]** Click `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 [https://thememodern.ticksy.com/](https://thememodern.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!
]]>