[vc_row][vc_column][vc_custom_heading text=”OutLook – Doc’s” font_container=”tag:h2|font_size:50px|text_align:center|color:%23999999|line_height:50px”][vc_column_text]

Please find the documentation of our OutLook theme. You could use the quick links below to get the doc you want easily.

[/vc_column_text][/vc_column][/vc_row][vc_row][vc_column width=”1/4″][/vc_column][vc_column width=”1/2″][vc_separator el_width=”60″][vc_column_text]

Quick Start Guide

Import Demo Data

Front page setup

Logo / Favicon Setup

Header setup

Slider setup

About us setup

Services setup

Counter setup

Portfolio setup

Team Members setup

Parallax Image setup

Pricing Tables setup

Testimonial & Faq setup

Clients Logo setup

Subscribe From setup

Front Page Blog setup

Contact & Google Map setup

Contact Info setup

Callout Action setup

General Settings setup

Blog setup

Post Formats setup

Footer setup

404 page setup

WooCommerce setup

bbPress setup

Posts/Page/Portfolio/Testimonial options setup

Breadcrumb setup

Image sizes

Reorder front page sections

Translation

[/vc_column_text][/vc_column][vc_column width=”1/4″][/vc_column][/vc_row][vc_row el_id=”qsg”][vc_column][vc_empty_space][vc_custom_heading text=”Quick Start Guide” font_container=”tag:p|font_size:30px|text_align:center|line_height:30px” google_fonts=”font_family:Lato%3A100%2C100italic%2C300%2C300italic%2Cregular%2Citalic%2C700%2C700italic%2C900%2C900italic|font_style:400%20regular%3A400%3Anormal”][vc_separator el_width=”30″][vc_column_text]

Before starting, make sure that you have WordPress 4.5 or higher installed & PHP 5.3 or higher running on your hosting server to use OutLook theme.

[/vc_column_text][/vc_column][/vc_row][vc_row][vc_column width=”1/3″][vc_custom_heading text=”1. Install Theme” font_container=”tag:p|font_size:20px|text_align:center|line_height:20px” google_fonts=”font_family:Lato%3A100%2C100italic%2C300%2C300italic%2Cregular%2Citalic%2C700%2C700italic%2C900%2C900italic|font_style:400%20regular%3A400%3Anormal”][vc_column_text]1.1 Using WordPress Dashboard:

Dashboard > Appearance > Themes > Add New > Upload theme > Choose file (zip) > Install & activate.[/vc_column_text][vc_column_text]1.2 Using FTP Client:

  1. Access & navigate your web server to wp-content > themes (this folder contains all your themes) using a FTP client like FileZilla or any other you like.
  2. Download & Unzip OutLook theme.
  3. Upload the entire folder to the wp-content > themes directory in your web server using the FTP client.
  4. Login to your WordPress dashboard > Appearance > Themes.
  5. Click Install > Activate.

[/vc_column_text][/vc_column][vc_column width=”1/3″][vc_custom_heading text=”2. Install Plugins” font_container=”tag:p|font_size:20px|text_align:center|line_height:20px” google_fonts=”font_family:Lato%3A100%2C100italic%2C300%2C300italic%2Cregular%2Citalic%2C700%2C700italic%2C900%2C900italic|font_style:400%20regular%3A400%3Anormal”][vc_column_text]Install the required plugins. After theme activation, you will see a notification above of your dashboard about it. Follow the steps from there to install those plugins.[/vc_column_text][/vc_column][vc_column width=”1/3″][vc_custom_heading text=”3. Import Demo Data (optional)” font_container=”tag:p|font_size:20px|text_align:center|line_height:20px” google_fonts=”font_family:Lato%3A100%2C100italic%2C300%2C300italic%2Cregular%2Citalic%2C700%2C700italic%2C900%2C900italic|font_style:400%20regular%3A400%3Anormal”][vc_column_text]Follow these steps to upload the demo content.[/vc_column_text][/vc_column][/vc_row][vc_row el_id=”import-demo-data”][vc_column][vc_empty_space][vc_custom_heading text=”Importing Demo Data” font_container=”tag:p|font_size:30px|text_align:center|line_height:30px” google_fonts=”font_family:Lato%3A100%2C100italic%2C300%2C300italic%2Cregular%2Citalic%2C700%2C700italic%2C900%2C900italic|font_style:400%20regular%3A400%3Anormal”][vc_separator el_width=”30″][vc_column_text]Importing demo content is totally optional step. You should do this only if you want to import all the demo content from our demo site in order to give your site exactly the same look as Outlook Pro has. Make sure to install all required/recommended plugins before importing demo content. No images are included in the demo, instead you will get placeholders. Please follow the steps below.[/vc_column_text][vc_column_text]

  1. Go to Jetpack > Settings > Writing > Scroll down & find Custom Content Types Module > Enable it (Assuming you already have Jetpack activated & connected with your WordPress.com acount, if not see portfolio setup to know how.)
  2. Install & activate the One Click Demo Import plugin.
  3. Go to Appearance > Import Demo Data > Click Import Demo Data & wait to complete.
  4. Go to Settings > Reading > Set Home (imported by the demo content) as your static front page & save.
  5. Go to Appearance > Menu > Assign Home Primary (imported by the demo content) to the Home Primary Menu. (see header setup for more details)

After importing completed, you can remove the plugin (One Click Demo Import) as you don’t need it anymore.[/vc_column_text][/vc_column][/vc_row][vc_row el_id=”general-settings-setup”][vc_column][vc_empty_space][vc_custom_heading text=”General Settings” font_container=”tag:p|font_size:30px|text_align:center|line_height:30px” google_fonts=”font_family:Lato%3A100%2C100italic%2C300%2C300italic%2Cregular%2Citalic%2C700%2C700italic%2C900%2C900italic|font_style:400%20regular%3A400%3Anormal”][vc_separator el_width=”30″][vc_column_text]In this panel you will find some useful setting options for OutLook theme. See those option details.

1. Go to Appearance > Customize > General Settings.

  • Box/Wide layout: Choose to have box or wide layout.
  • Site Color: Theme color scheme option.
  • Preloader: Enable/disable Preloader.
  • Scroll top: Enable/disable scroll top.
  • Homepage menu target links: Use these target links for homepage menu for smoothly scroll to each section.
  • Font-awesome: Enable/disable font-awesome styles.
  • RTL: Enable/disable RTL ( right to left text).

[/vc_column_text][/vc_column][/vc_row][vc_row el_id=”front-page-setup”][vc_column][vc_empty_space][vc_custom_heading text=”Front page setup” font_container=”tag:p|font_size:30px|text_align:center|line_height:30px” google_fonts=”font_family:Lato%3A100%2C100italic%2C300%2C300italic%2Cregular%2Citalic%2C700%2C700italic%2C900%2C900italic|font_style:400%20regular%3A400%3Anormal”][vc_separator el_width=”30″][vc_column_text]In order to setup the front page you need to create a page first.

1.   Go to Pages > Add New

2. Give it a name (ex: Home) > assign this page to the Front Page template (find the template in your editor right side Page Attributes box ).

front-page-creation3. Go to Settings > Reading > Choose the page you have just created as your static front page (see screenshot below).

Front page creation

Note: You could leave the Posts page as it is. Setting up the blog page is optional, you do this if you want to display your blog posts on a separate page (not in your site homepage).[/vc_column_text][/vc_column][/vc_row][vc_row el_id=”logo-setup”][vc_column][vc_empty_space][vc_custom_heading text=”Logo / Favicon Setup” font_container=”tag:p|font_size:30px|text_align:center|line_height:30px” google_fonts=”font_family:Lato%3A100%2C100italic%2C300%2C300italic%2Cregular%2Citalic%2C700%2C700italic%2C900%2C900italic|font_style:400%20regular%3A400%3Anormal”][vc_separator el_width=”30″][vc_column_text]WordPress provides logo , site title & site icon (favicon) uploaders by default & OutLook fully supports them. Follow the steps below.

1. Go to Appearance > Customize > Site Identity

2. Add your logo (suggested: 250px width, 90px height), site title, & site icon (favicon).

3. Save & publish.

Note: By default site title will appear as your logo text, if you want to use an image logo then upload your logo through the logo uploader.[/vc_column_text][/vc_column][/vc_row][vc_row el_id=”header-setup”][vc_column][vc_empty_space][vc_custom_heading text=”Header Setup” font_container=”tag:p|font_size:30px|text_align:center|line_height:30px” google_fonts=”font_family:Lato%3A100%2C100italic%2C300%2C300italic%2Cregular%2Citalic%2C700%2C700italic%2C900%2C900italic|font_style:400%20regular%3A400%3Anormal”][vc_separator el_width=”30″][vc_column_text]OutLook offers 5 different modern header styles. For integrating all those headers OutLook comes with 4 menu locations so that you could use the headers seamlessly. Please follow the steps below for each header setup instruction.

Menu Locations:

  1. Home Primary Menu: this menu will appear only on the front page custom template.
  2. Home Secondary Menu: this menu will appear only on the front page custom template. (works for only split & double headers)
  3. Global Primary Menu: this menu will appear throughout your site except the front page custom template.
  4. Global Secondary Menu: this menu will appear throughout your site except the front page custom template. (works for only split & double headers)

Note: The front page custom template is the page which should be your site home page. See how to setup front page.

 

1. Standard Header Setup

standard headera. Go to Appearance > Menus > Create a new menu

b. Give it a name (ex: home primary) > add menu items (see the note below) > check the Home Primary Menu checkbox > Save Menu.

c. Go to Appearance > Customize > Header Styles > Select Standard Header. ( Off-canvas: To display widgets in the off-canvas area for this header go to Appearance > Widgets > Off Canvas & add your widgets here.)

This setup is only for front page template (see front page setup), in order to display menu on other pages (for example blog listing page) you have to create a new menu & assign it to the Global Primary Menu location (read menu location details under header setup).

Note: Find the home page menu link targets in Appearance > Customize > General Settings.[/vc_column_text][vc_column_text]

2. Split Header Setup

Split HeaderYou need to create two menus in order to setup Split header.

a. Go to Appearance > Menus > Create a new menu

b. Give it a name (ex: home primary) > add menu items (see the note below) > check the Home Primary Menu checkbox > Save Menu. It will appear in left side of the logo.

c. Create another menu > Give it a name (ex: home secondary) > add menu items (see the note below) > check the Home Secondary Menu checkbox > Save Menu. It will appear in right side of the logo.

d. Go to Appearance > Customize > Header Styles > Select Split Header.

This setup is only for front page template (see front page setup), in order to display menu on other pages (for example blog listing page) you have to create two new menu & assign those to the Global Primary MenuGlobal Secondary Menu locations (read menu location details under header setup).

Note: Find the home page menu link targets in Appearance > Customize > General Settings.[/vc_column_text][vc_column_text]

3. Centered Logo Header Setup

centered logoa. Go to Appearance > Menus > Create a new menu

b. Give it a name (ex: home primary) > add menu items (see the note below) > check the Home Primary Menu checkbox > Save Menu.

c. Go to Appearance > Customize > Header Styles > Select Centered Logo Header.

This setup is only for front page template (see front page setup), in order to display menu on other pages (for example blog listing page) you have to create a new menu & assign it to the Global Primary Menu location (read menu location details under header setup).

Note: Find the home page menu link targets in Appearance > Customize > General Settings.[/vc_column_text][vc_column_text]

4. Box Header Setup

box headera. Go to Appearance > Menus > Create a new menu

b. Give it a name (ex: home primary) > add menu items (see the note below) > check the Home Primary Menu checkbox > Save Menu.

c. Go to Appearance > Customize > Header Styles > Select Box Header.

This setup is only for front page template (see front page setup), in order to display menu on other pages (for example blog listing page) you have to create a new menu & assign it to the Global Primary Menu location (read menu location details under header setup).

Note: Find the home page menu link targets in Appearance > Customize > General Settings.[/vc_column_text][vc_column_text]

5. Double Header Setup

double headerYou need to create two menus in order to setup Double Header.

a. Go to Appearance > Menus > Create a new menu

b. Give it a name (ex: home primary) > add menu items (see the note below) > check the Home Primary Menu checkbox > Save Menu. It will appear in right bottom header bar.

c. Create another menu > Give it a name (ex: home secondary) > add menu items (see the note below) > check the Home Secondary Menu checkbox > Save Menu. It will appear in right top header bar.

d. Go to Appearance > Customize > Header Styles > Select Double Header & add phone, email id.

This setup is only for front page template (see front page setup), in order to display menu on other pages (for example blog listing page) you have to create two new menu & assign those to the Global Primary Menu & Global Secondary Menu locations (read menu location details under header setup).

Note: Find the home page menu link targets in Appearance > Customize > General Settings.[/vc_column_text][/vc_column][/vc_row][vc_row el_id=”slider-setup”][vc_column][vc_empty_space][vc_custom_heading text=”Slider Setup” font_container=”tag:p|font_size:30px|text_align:center|line_height:30px” google_fonts=”font_family:Lato%3A100%2C100italic%2C300%2C300italic%2Cregular%2Citalic%2C700%2C700italic%2C900%2C900italic|font_style:400%20regular%3A400%3Anormal”][vc_separator el_width=”30″][vc_row_inner][vc_column_inner width=”1/2″][vc_column_text]OutLook offers a featured slider on the front page where you could add unlimited slides using the drag & drop slide panels. Follow the steps below.

  1. Go to Appearance > Customize > Front Page > Featured Slider
  2. Add Slides
  3. Change slide settings if needed.

Note: You should add same size images for each slide. (2x image uploader is optional & for retina devices support. But it could cause site performance issue as they should be 2x size from the normal image.)[/vc_column_text][/vc_column_inner][vc_column_inner width=”1/2″][vc_single_image image=”10200″ img_size=”medium” alignment=”center” onclick=”link_image”][/vc_column_inner][/vc_row_inner][/vc_column][/vc_row][vc_row el_id=”about-us”][vc_column][vc_empty_space][vc_custom_heading text=”About us Setup” font_container=”tag:p|font_size:30px|text_align:center|line_height:30px” google_fonts=”font_family:Lato%3A100%2C100italic%2C300%2C300italic%2Cregular%2Citalic%2C700%2C700italic%2C900%2C900italic|font_style:400%20regular%3A400%3Anormal”][vc_separator el_width=”30″][vc_row_inner][vc_column_inner][vc_column_text]

  1. Go to Appearance > Customize > Front Page > About
  2. Upload image, title & description.

Note: 2x image uploader is optional & for retina devices support. It could cause site performance issue as they should be 2x size from the normal image.[/vc_column_text][/vc_column_inner][/vc_row_inner][/vc_column][/vc_row][vc_row el_id=”services-setup”][vc_column][vc_empty_space][vc_custom_heading text=”Services Setup” font_container=”tag:p|font_size:30px|text_align:center|line_height:30px” google_fonts=”font_family:Lato%3A100%2C100italic%2C300%2C300italic%2Cregular%2Citalic%2C700%2C700italic%2C900%2C900italic|font_style:400%20regular%3A400%3Anormal”][vc_separator el_width=”30″][vc_row_inner][vc_column_inner][vc_column_text]

  1. Go to Appearance > Customize > Front Page > Services
  2. Add title & services.

[/vc_column_text][/vc_column_inner][/vc_row_inner][/vc_column][/vc_row][vc_row el_id=”counter-setup”][vc_column][vc_empty_space][vc_custom_heading text=”Counter Setup” font_container=”tag:p|font_size:30px|text_align:center|line_height:30px” google_fonts=”font_family:Lato%3A100%2C100italic%2C300%2C300italic%2Cregular%2Citalic%2C700%2C700italic%2C900%2C900italic|font_style:400%20regular%3A400%3Anormal”][vc_separator el_width=”30″][vc_row_inner][vc_column_inner][vc_column_text]

  1. Go to Appearance > Customize > Front Page > Counter
  2. Add section title, counters, background image & other settings.

[/vc_column_text][/vc_column_inner][/vc_row_inner][/vc_column][/vc_row][vc_row el_id=”portfolio-setup”][vc_column][vc_empty_space][vc_custom_heading text=”Portfolio Setup” font_container=”tag:p|font_size:30px|text_align:center|line_height:30px” google_fonts=”font_family:Lato%3A100%2C100italic%2C300%2C300italic%2Cregular%2Citalic%2C700%2C700italic%2C900%2C900italic|font_style:400%20regular%3A400%3Anormal”][vc_separator el_width=”30″][vc_row_inner][vc_column_inner][vc_column_text]Make sure to install all the required/recommended plugins first. Jetpack is one of them which is one of the most popular WordPress plugin that provides tons of useful features for WordPress sites & OutLook is fully integrated with it. Follow the steps to setup portfolios.

1. Go to Jetpack > Settings > Connect jetpack with your WordPress.com account (it’s free & needed to use most of amazing features of Jetpack). If you don’t have an account already then create one.

2. Scroll down to find the Custom Content Types section & enable the portfolio option.

3. Go to Dashboard > Settings > Writing > Check Enable Portfolio Projects for this site & save changes.

4. Now you should see a new menu item called Portfolio is appearing in the dashboard menu. Add your portfolios there. Use same size featured image (Recommended size: 1200×800) for each portfolio to display them correctly on the frontend.

5. To configure portfolio display in frontend go to Appearance > Customize > Front Page > Portfolio > setup title, display type, column.

Note: (It’s totally optional & not needed to work with OutLook themeIt is possible to display portfolio content in a separate portfolio single page using the Jetpack portfolio shortcode. OutLook included with the single template for the portfolio in case if you want to in any way. Find the setting options for this page by going to Dashboard > Appearance > Customize > Portfolio.[/vc_column_text][/vc_column_inner][/vc_row_inner][/vc_column][/vc_row][vc_row el_id=”team-members”][vc_column][vc_empty_space][vc_custom_heading text=”Team Members Setup” font_container=”tag:p|font_size:30px|text_align:center|line_height:30px” google_fonts=”font_family:Lato%3A100%2C100italic%2C300%2C300italic%2Cregular%2Citalic%2C700%2C700italic%2C900%2C900italic|font_style:400%20regular%3A400%3Anormal”][vc_separator el_width=”30″][vc_row_inner][vc_column_inner][vc_column_text]

  1. Go to Appearance > Customize > Front Page > Team Members
  2. Add section title, team members & team slide configuration.

Note: 2x image uploader is optional in member panel & for retina devices support. It could cause site performance issue as they should be 2x size from the normal image.[/vc_column_text][/vc_column_inner][/vc_row_inner][/vc_column][/vc_row][vc_row el_id=”parallax-image”][vc_column][vc_empty_space][vc_custom_heading text=”Parallax Image Setup” font_container=”tag:p|font_size:30px|text_align:center|line_height:30px” google_fonts=”font_family:Lato%3A100%2C100italic%2C300%2C300italic%2Cregular%2Citalic%2C700%2C700italic%2C900%2C900italic|font_style:400%20regular%3A400%3Anormal”][vc_separator el_width=”30″][vc_row_inner][vc_column_inner][vc_column_text]

  1. Go to Appearance > Customize > Front Page > Parallax Image
  2. Add section title, description, button, background image & other settings if needed.

Note: 2x image uploader is optional & for retina devices support. It could cause site performance issue as they should be 2x size from the normal image.[/vc_column_text][/vc_column_inner][/vc_row_inner][/vc_column][/vc_row][vc_row el_id=”pricing-tables”][vc_column][vc_empty_space][vc_custom_heading text=”Pricing Table Setup” font_container=”tag:p|font_size:30px|text_align:center|line_height:30px” google_fonts=”font_family:Lato%3A100%2C100italic%2C300%2C300italic%2Cregular%2Citalic%2C700%2C700italic%2C900%2C900italic|font_style:400%20regular%3A400%3Anormal”][vc_separator el_width=”30″][vc_row_inner][vc_column_inner][vc_column_text]

  1. Go to Appearance > Customize > Front Page > Pricing Tables
  2. Add section title, description, tables & table skin ( light, dark & colored)

[/vc_column_text][/vc_column_inner][/vc_row_inner][/vc_column][/vc_row][vc_row el_id=”testimonials-faq”][vc_column][vc_empty_space][vc_custom_heading text=”Testimonial & Faq Setup” font_container=”tag:p|font_size:30px|text_align:center|line_height:30px” google_fonts=”font_family:Lato%3A100%2C100italic%2C300%2C300italic%2Cregular%2Citalic%2C700%2C700italic%2C900%2C900italic|font_style:400%20regular%3A400%3Anormal”][vc_separator el_width=”30″][vc_row_inner][vc_column_inner width=”1/2″][vc_custom_heading text=”Testimonials” font_container=”tag:p|font_size:20px|text_align:center|line_height:25px”][vc_column_text]

1. Go to Jetpack > Settings > Scroll down & find Custom Content Types & enable Testimonials option. (You need to install & active the Jetpack plugin)

2. Go to Settings > Writing > Check Enable Testimonials for this site.

3.  Now you should see a new menu item called Testimonials in your Dashboard menu. Add your testimonials from there (Recommended featured image size: 80×80).

4. To configure frontend display Go to Appearance > Customize > Front Page > Add section title, description & configure testimonial slider if needed.[/vc_column_text][/vc_column_inner][vc_column_inner width=”1/2″][vc_custom_heading text=”Faqs” font_container=”tag:p|font_size:20px|text_align:center|line_height:25px”][vc_column_text]

Faqs is only avialable for the OutLook Pro version. See the steps below to add them.

1.  Go to Appearance > Customize > Front Page > Testimonials & Faqs

2.  Add Faqs ( Max 10 ).

[/vc_column_text][/vc_column_inner][/vc_row_inner][/vc_column][/vc_row][vc_row el_id=”clients-logo”][vc_column][vc_empty_space][vc_custom_heading text=”Clients Logo Setup” font_container=”tag:p|font_size:30px|text_align:center|line_height:30px” google_fonts=”font_family:Lato%3A100%2C100italic%2C300%2C300italic%2Cregular%2Citalic%2C700%2C700italic%2C900%2C900italic|font_style:400%20regular%3A400%3Anormal”][vc_separator el_width=”30″][vc_row_inner][vc_column_inner][vc_column_text]

  1. Go to Appearance > Customize > Front Page > Clients Logo
  2. Add section title, description, logos & logo slide configuration if needed.

[/vc_column_text][/vc_column_inner][/vc_row_inner][/vc_column][/vc_row][vc_row el_id=”subscribe-setup”][vc_column][vc_empty_space][vc_custom_heading text=”Subscribe form Setup” font_container=”tag:p|font_size:30px|text_align:center|line_height:30px” google_fonts=”font_family:Lato%3A100%2C100italic%2C300%2C300italic%2Cregular%2Citalic%2C700%2C700italic%2C900%2C900italic|font_style:400%20regular%3A400%3Anormal”][vc_separator el_width=”30″][vc_row_inner][vc_column_inner][vc_column_text]The most popular MailChimp email markting tool you could use with OutLook Pro. Make sure to install & activate all the required/recommended plugins first.

  1. Go to Dashboard > MailChimp for WP ( You need to install & activate the MailChimp for WordPress plugin to see this option ).
  2. Connect your MailChimp account using your MailChimp API key by following the instructions there.
  3. Go to Dashboard > MailChimp for WP > Forms & paste this code in the form editor > Save Changes.
  4. Go to Dashboard > Appearance > Customize > Front Page > Subscribe > Add section title, description, background image & subscribe form shortcode that you got from step 3.

[/vc_column_text][/vc_column_inner][/vc_row_inner][/vc_column][/vc_row][vc_row el_id=”frontpage-blog-setup”][vc_column][vc_empty_space][vc_custom_heading text=”Front Page Blog Setup” font_container=”tag:p|font_size:30px|text_align:center|line_height:30px” google_fonts=”font_family:Lato%3A100%2C100italic%2C300%2C300italic%2Cregular%2Citalic%2C700%2C700italic%2C900%2C900italic|font_style:400%20regular%3A400%3Anormal”][vc_separator el_width=”30″][vc_row_inner][vc_column_inner][vc_column_text]Follow the steps below to configure front page blog section. Not that, these settings are only for front page blog section not the blog post listing or archive page. See Blog setup instead for that.

  1. Go to Dashboard > Appearance > Customize > Front Page > Blog
  2. Configure the options according to your needs such as section title, show posts, enable/disable options.

Note: Your latest posts will be appearing here.[/vc_column_text][/vc_column_inner][/vc_row_inner][/vc_column][/vc_row][vc_row el_id=”contact-map-setup”][vc_column][vc_empty_space][vc_custom_heading text=”Contact & Google Map Setup” font_container=”tag:p|font_size:30px|text_align:center|line_height:30px” google_fonts=”font_family:Lato%3A100%2C100italic%2C300%2C300italic%2Cregular%2Citalic%2C700%2C700italic%2C900%2C900italic|font_style:400%20regular%3A400%3Anormal”][vc_separator el_width=”30″][vc_row_inner][vc_column_inner width=”1/2″][vc_custom_heading text=”Contact Form” font_container=”tag:p|font_size:20px|text_align:center|line_height:25px”][vc_column_text]Make sure to install & activate all the required/recommended plugins first.

1. Go to Dashboard > Contact > Add New ( Contact form 7 plugin need to be installed & activated ).

2. Give this form a name (ex: contact) > Paste this code in the form editor > Save. ( To configure the form properly in case you didn’t use this plugin before see the plugin official documentation ).

3. You will get a shortcode after saving your form (see screenshot below), Go to Dashboard > Customize > Front Page > Contact & Google Map > Add title & the form shortcode that you have just generated using the Contact Form 7 plugin & save.[/vc_column_text][vc_single_image image=”10207″ img_size=”large” alignment=”center” onclick=”link_image”][/vc_column_inner][vc_column_inner width=”1/2″][vc_custom_heading text=”Google Map” font_container=”tag:p|font_size:20px|text_align:center|line_height:25px”][vc_column_text]Follow the steps below to configure Google Map.

1.  Go to Google Maps > Put your address > get your map embed code ( find the share icon & click, click on Embed map & copy the code.)

2. Go to Dashboard > Customize > Front Page > Contact & Google Map > Google map embed code > Put your map code in the code editor & save.[/vc_column_text][/vc_column_inner][/vc_row_inner][/vc_column][/vc_row][vc_row el_id=”contact-info-setup”][vc_column][vc_empty_space][vc_custom_heading text=”Contact Info Setup” font_container=”tag:p|font_size:30px|text_align:center|line_height:30px” google_fonts=”font_family:Lato%3A100%2C100italic%2C300%2C300italic%2Cregular%2Citalic%2C700%2C700italic%2C900%2C900italic|font_style:400%20regular%3A400%3Anormal”][vc_separator el_width=”30″][vc_column_text]Follow the steps below to configure the contact info section.

  1. Go to Dashboard > Appearance > Customize > Front Page > Contact Info.
  2. Add your contact infos, background image from here.

[/vc_column_text][/vc_column][/vc_row][vc_row el_id=”callout-action-setup”][vc_column][vc_empty_space][vc_custom_heading text=”Callout Action Setup” font_container=”tag:p|font_size:30px|text_align:center|line_height:30px” google_fonts=”font_family:Lato%3A100%2C100italic%2C300%2C300italic%2Cregular%2Citalic%2C700%2C700italic%2C900%2C900italic|font_style:400%20regular%3A400%3Anormal”][vc_separator el_width=”30″][vc_column_text]Follow the steps below to configure the Call To Action section.

  1. Go to Dashboard > Appearance > Customize > Front Page > Call To Action.
  2. Add your callout texts & button.

Note: If you disable callout from here, it will disappear from your entire site. Though you have the options to disable it on other pages like Blog listing, Shop & other pages separately.[/vc_column_text][/vc_column][/vc_row][vc_row el_id=”blog-setup”][vc_column][vc_empty_space][vc_custom_heading text=”Blog Setup” font_container=”tag:p|font_size:30px|text_align:center|line_height:30px” google_fonts=”font_family:Lato%3A100%2C100italic%2C300%2C300italic%2Cregular%2Citalic%2C700%2C700italic%2C900%2C900italic|font_style:400%20regular%3A400%3Anormal”][vc_separator el_width=”30″][vc_column_text]In this section you could configure your blog listing page setting such as blog layout ( right sidebar, left sidebar, no sidebar & fullwidth ), enable/disable post meta options, social links & some others.

You can add a title bar on all blog listing pages including archive, search etc pages.

  1. Go to Appearance > Customize > Blog > setup the options according to your needs.

Note: Default featured image size is 640×418.[/vc_column_text][/vc_column][/vc_row][vc_row el_id=”post-format”][vc_column][vc_empty_space][vc_custom_heading text=”Post Formats Setup” font_container=”tag:p|font_size:30px|text_align:center|line_height:30px” google_fonts=”font_family:Lato%3A100%2C100italic%2C300%2C300italic%2Cregular%2Citalic%2C700%2C700italic%2C900%2C900italic|font_style:400%20regular%3A400%3Anormal”][vc_separator el_width=”30″][vc_column_text]OutLook supports six different post formats such as Standard, link, video, Audio, Gallery & Quote. Follow the instructions below to use different post formats.

Quote Post: 

  1. Go to Posts > Add New > Select Quote from the format box (right side of your editor).
  2. Add description in the editor (visual mood).
  3.  Add your other contents such as title, category, tags etc if needed.
  4. Publish

Audio Post:

  1. Go to Posts > Add New > Select Audio from the format box (right side of your editor).
  2. Copy & paste your audio file url or other hosted url like soundclound in the editor(visual mood).
  3. Add your other contents such as title, category, tags etc if needed.
  4. Publish

Video Post:

  1. Go to Posts > Add New > Select Video from the format box (right side of your editor).
  2. Copy & paste your video url in the editor (visual mood).
  3. Add your other contents such as title, category, tags etc if needed.
  4. Publish

Link Post:

  1. Go to Posts > Add New > Select Link from the format box (right side of your editor).
  2. Add title & put a link in the editor (visual mood).
  3. Publish

Gallery Post:

  1. Go to Jetpack > Settings > Appearance > Enable Tiled Galleries & Carousel Modules. (You need to have Jetpack plugin installed & activated)
  2. Go to Posts > Add New > Select Gallery from the format box (right side of your editor).
  3. Add gallery images in the post editor (Add Media > Create Gallery). Read More about jetpack gallery.

Standard Post:

By default when you start writing a post it will assign to the standard post format & no actions required for this format.[/vc_column_text][/vc_column][/vc_row][vc_row el_id=”footer-setup”][vc_column][vc_empty_space][vc_custom_heading text=”Footer Setup” font_container=”tag:p|font_size:30px|text_align:center|line_height:30px” google_fonts=”font_family:Lato%3A100%2C100italic%2C300%2C300italic%2Cregular%2Citalic%2C700%2C700italic%2C900%2C900italic|font_style:400%20regular%3A400%3Anormal”][vc_separator el_width=”30″][vc_column_text]To setup footer please go to Appearance > Customize > Footer.[/vc_column_text][/vc_column][/vc_row][vc_row el_id=”404-setup”][vc_column][vc_empty_space][vc_custom_heading text=”404 Page Setup” font_container=”tag:p|font_size:30px|text_align:center|line_height:30px” google_fonts=”font_family:Lato%3A100%2C100italic%2C300%2C300italic%2Cregular%2Citalic%2C700%2C700italic%2C900%2C900italic|font_style:400%20regular%3A400%3Anormal”][vc_separator el_width=”30″][vc_column_text]To setup 404 page please go to Appearance > Customize > 404 Page.[/vc_column_text][/vc_column][/vc_row][vc_row el_id=”shop-setup”][vc_column][vc_empty_space][vc_custom_heading text=”WooCommer Setup” font_container=”tag:p|font_size:30px|text_align:center|line_height:30px” google_fonts=”font_family:Lato%3A100%2C100italic%2C300%2C300italic%2Cregular%2Citalic%2C700%2C700italic%2C900%2C900italic|font_style:400%20regular%3A400%3Anormal”][vc_separator el_width=”30″][vc_column_text]OutLook is fully supported by the WooCommerce plugin & provides some options to configure it’s look. You need to install & activate WooCommerce plugin in order to see this options. Follow the steps

  1. Go to Appearance > Customize > WooCommerce
  2. Setup shop layout, title bar etc.

Note: To add widgets in shop sidebar go to Appearance > Widgets > Shop Sidebar[/vc_column_text][/vc_column][/vc_row][vc_row el_id=”forum-setup”][vc_column][vc_empty_space][vc_custom_heading text=”bbPress Setup” font_container=”tag:p|font_size:30px|text_align:center|line_height:30px” google_fonts=”font_family:Lato%3A100%2C100italic%2C300%2C300italic%2Cregular%2Citalic%2C700%2C700italic%2C900%2C900italic|font_style:400%20regular%3A400%3Anormal”][vc_separator el_width=”30″][vc_column_text]OutLook is fully supported by the bbPress plugin & provides some options to configure it’s look. You need to install & activate bbPress plugin in order to see this options. Follow the steps

  1. Go to Appearance > Customize > bbPress
  2. Setup forum layout, title bar etc.

Note: To add widgets in forum sidebar go to Appearance > widgets > bbPress Sidebar.[/vc_column_text][/vc_column][/vc_row][vc_row el_id=”post-page-portfolio-testimonial-options”][vc_column][vc_empty_space][vc_custom_heading text=”Post, Page, Portfolio & Testimonial Options Setup” font_container=”tag:p|font_size:30px|text_align:center|line_height:30px” google_fonts=”font_family:Lato%3A100%2C100italic%2C300%2C300italic%2Cregular%2Citalic%2C700%2C700italic%2C900%2C900italic|font_style:400%20regular%3A400%3Anormal”][vc_separator el_width=”80″][vc_custom_heading text=”Post Options” font_container=”tag:p|font_size:20px|text_align:left|line_height:25px”][vc_column_text]You could add a title bar for each post separately using the post title bar options which you should see in the post editor page. See the option details below.

1.  Title On/Off: Disable or enable post title text.

2.  Title bar On/Off: Disable or enable title bar.

3. Title Bar Text: Texts to display within the title bar.

4. Text Color: Color for the title bar texts.

5. On/Off breadcrumb: Disable/enable breadcrumb for the post ( See breadcrumb setup ).

6. Background Image: Upload background image for the title bar ( 2x background is optional & for high DPI retina screens ).

7. Background size: Choose background size. Default is cover.

8. Padding Top/Bottom: Top & Bottom padding for the title bar. Default is 70px.[/vc_column_text][vc_custom_heading text=”Page Options” font_container=”tag:p|font_size:20px|text_align:left|line_height:25px”][vc_column_text]You could add a title bar for each page separately using the Page Options options which you should see in the page editor page. This options will only work for Default Template. See the option details below.

1. Layout: Page layouts option (right sidebar, left sidebar, no sidebar, fullwidth)

2.  Title On/Off: Disable or enable page title text.

3.  Title bar On/Off: Disable or enable title bar.

4. Title Bar Text: Texts to display within the title bar.

5. Text Color: Color for the title bar texts.

6. On/Off breadcrumb: Disable/enable breadcrumb for the page ( See breadcrumb setup ).

7. Background Image: Upload background image for the title bar ( 2x background is optional & for high DPI retina screens ).

8. Background size: Choose background size. Default is cover.

9. Padding Top/Bottom: Top & Bottom padding for the title bar. Default is 70px.[/vc_column_text][vc_row_inner][vc_column_inner][vc_custom_heading text=”Portfolio Options” font_container=”tag:p|font_size:20px|text_align:left|line_height:25px”][vc_column_text]You could add your project details such as client name, project date & some other information’s along with a title bar in portfolio single page ( portfolio single page title bar is an extra feature & is totally optional, so you could skip the title bar to setup. See the Note in portfolio setup section ).

Project Information:

Add your project informations such as client name, project date, project link etc.

Project Title Bar:

1.  Title On/Off: Disable or enable page title text.

2.  Title bar On/Off: Disable or enable title bar.

3. Title Bar Text: Texts to display within the title bar.

4. Text Color: Color for the title bar texts.

5. On/Off breadcrumb: Disable/enable breadcrumb for the page ( See breadcrumb setup ).

6. Background Image: Upload background image for the title bar ( 2x background is optional & for high DPI retina screens ).

7. Background size: Choose background size. Default is cover.

8. Padding Top/Bottom: Top & Bottom padding for the title bar. Default is 70px.[/vc_column_text][/vc_column_inner][/vc_row_inner][vc_row_inner][vc_column_inner][vc_custom_heading text=”Testimonials Options” font_container=”tag:p|font_size:20px|text_align:left|line_height:25px”][vc_column_text]Add title, description, featured image & customer info.

Customer Info: Add your client position or designation or whatever you want.[/vc_column_text][/vc_column_inner][/vc_row_inner][/vc_column][/vc_row][vc_row el_id=”breadcrumb-setup”][vc_column][vc_empty_space][vc_custom_heading text=”Breadcrumb Setup” font_container=”tag:p|font_size:30px|text_align:center|line_height:30px” google_fonts=”font_family:Lato%3A100%2C100italic%2C300%2C300italic%2Cregular%2Citalic%2C700%2C700italic%2C900%2C900italic|font_style:400%20regular%3A400%3Anormal”][vc_separator el_width=”30″][vc_column_text]

  1. Install & activate Yoast SEO plugin.
  2. Go to Dashboard > SEO > Dashboard > Click Features tab > Advanced settings pages > Enable & Save changes.
  3. Go to Dashboard > SEO > Advance > Breadcrumbs settings > Enable & save changes.

Congrat’s, breadcrumb is enabled throughout the site.[/vc_column_text][/vc_column][/vc_row][vc_row el_id=”image-sizes”][vc_column][vc_empty_space][vc_custom_heading text=”Image Sizes” font_container=”tag:p|font_size:30px|text_align:center|line_height:30px” google_fonts=”font_family:Lato%3A100%2C100italic%2C300%2C300italic%2Cregular%2Citalic%2C700%2C700italic%2C900%2C900italic|font_style:400%20regular%3A400%3Anormal”][vc_separator el_width=”30″][vc_column_text]Default image size: 640×418

Portfolio Image size: 1200×800

Testimonial Image size: 80×80[/vc_column_text][/vc_column][/vc_row][vc_row el_id=”reorder-sections”][vc_column][vc_empty_space][vc_custom_heading text=”Reorder Front Page Sections” font_container=”tag:p|font_size:30px|text_align:center|line_height:30px” google_fonts=”font_family:Lato%3A100%2C100italic%2C300%2C300italic%2Cregular%2Citalic%2C700%2C700italic%2C900%2C900italic|font_style:400%20regular%3A400%3Anormal”][vc_separator el_width=”30″][vc_column_text]Each front page section has enable/disable option in the customizer which you could use to enable or disable your desire sections. But if you want to do something more & want to reorder sections then you could do that by using a child theme.

Why I use child theme? Good question, using a child theme is highly recommended if you want to change or modify theme files. This way you never lose your changes when we send you theme updates. Read more about child theme.

Downalod outlook-pro-child theme first & follow the steps below.

  1. Open the file home-page.php in your preferrable text editor.
  2. Re-order the lines there according to your liking & save file. For example see the screenshot below.
  3. Install the child theme in same way you did for the parent theme (See quick start guide).

[/vc_column_text][/vc_column][/vc_row][vc_row el_id=”translation”][vc_column][vc_empty_space][vc_custom_heading text=”Translation” font_container=”tag:p|font_size:30px|text_align:center|line_height:30px” google_fonts=”font_family:Lato%3A100%2C100italic%2C300%2C300italic%2Cregular%2Citalic%2C700%2C700italic%2C900%2C900italic|font_style:400%20regular%3A400%3Anormal”][vc_separator el_width=”30″][vc_column_text]OutLook packed with a language file called outlook-pro.pot in the languages folder for localization. Follow the steps below to translate OutLook.

  1. Go to Dashboard > Plugins > Add New
  2. Search for Loco Translate plugin in the search field
  3. Click Install Now > Activate
  4. Go to Loco Template > Themes > Click on your theme > New Language
  5. Choose a language > Start Translating
  6. Translate each line > Save Changes
  7. Go to Dashboard > Settings > General > Site Language
  8. Change your site language & save.

[/vc_column_text][/vc_column][/vc_row]

in