how to install wpcargo themepro€¦ · how to install wpcargo themepro follow the steps to...

11
How to Install WPCargo ThemePro Follow the steps to complete the installation: 1. In your WordPress dashboard, go to appearance > Themes then activate wpcargo pro child theme. 2. Install the Required Plugins such as: Contact Form 7 SiteOrigin Widgets Bundle WDES Responsive Mobile Menu Widget Importer & Exporter Animate It! MailPoet Newsletters Page Builder Search & Replace Theme My Login Activate the WordPress Importer (if necessary). 3. To import the demo, navigate to Tools > Import, run the WordPress Importer and upload the wpcargo–demo.xml file (wpcargo–demo.xml file can be found inside the theme folder wpcargo-pro/demo/wpcargo–demo.xml).

Upload: others

Post on 07-Aug-2020

7 views

Category:

Documents


1 download

TRANSCRIPT

Page 1: How to Install WPCargo ThemePro€¦ · How to Install WPCargo ThemePro Follow the steps to complete the installation: 1. In your WordPress dashboard, go to appearance > Themes then

How to Install WPCargo ThemePro

Follow the steps to complete the installation:

1. In your WordPress dashboard, go to appearance > Themes then activate wpcargo pro

child theme.

2. Install the Required Plugins such as:

Contact Form 7

SiteOrigin Widgets Bundle

WDES Responsive Mobile Menu

Widget Importer & Exporter

Animate It!

MailPoet Newsletters

Page Builder

Search & Replace

Theme My Login

Activate the WordPress Importer (if necessary).

3. To import the demo, navigate to Tools > Import, run the WordPress Importer and

upload the wpcargo–demo.xml file (wpcargo–demo.xml file can be found inside the

theme folder wpcargo-pro/demo/wpcargo–demo.xml).

Page 2: How to Install WPCargo ThemePro€¦ · How to Install WPCargo ThemePro Follow the steps to complete the installation: 1. In your WordPress dashboard, go to appearance > Themes then

HOW TO USE CUSTOMIZER

Objectives:

● All-in-one package for logistic clients who need WPCargo but don’t have website

● User friendly interface

● Modern design and mobile friendly

Theme Structure Summary:

Frontend Sections: ● Header

○ Layout 1 ■ Main Header

● Left side ○ Image logo / Site title + Site Description

● Right side ○ Menu (primary)

Figure 1.1

Page 3: How to Install WPCargo ThemePro€¦ · How to Install WPCargo ThemePro Follow the steps to complete the installation: 1. In your WordPress dashboard, go to appearance > Themes then

○ Layout 2 ■ Header Top

● Left side ○ email/mobile/phone number

● Right side ○ Social links

■ Main Header ● Left side

○ Image logo / Site title + Site Description ● Right side

○ Menu (primary) / Custom Text

Figure 1.2

Page 4: How to Install WPCargo ThemePro€¦ · How to Install WPCargo ThemePro Follow the steps to complete the installation: 1. In your WordPress dashboard, go to appearance > Themes then

○ Layout 3 ■ Header Top

● Left side ○ Email/Mobile/Phone number

● Right side ○ Social links

■ Main Header ● Left side

○ Image logo / Site title + Site Description ● Right side

○ Tracking Button / Address / Custom Text ■ Main Navigation

Figure 1.3

Page 5: How to Install WPCargo ThemePro€¦ · How to Install WPCargo ThemePro Follow the steps to complete the installation: 1. In your WordPress dashboard, go to appearance > Themes then

● Content / Inner Pages (Siteorigin plugin for content layouts) These are the sample layouts of pages:

○ Fullwidth - http://themepro.wpcargo.com/page-fullwidth/ ○ Content + Sidebar - http://themepro.wpcargo.com/page-content-sidebar/ ○ Sidebar + Content - http://themepro.wpcargo.com/page-sidebar-content/

● Footer

○ Footer Widgets

■ 2 Columns (layout) ■ 3 Columns (layout) ■ 4 Columns (layout) ■ 5 Columns (layout) ■ 6 Columns (layout) ■ We will add ⅔ by ⅓, ¾ by ¼, ⅗ by ⅖, etc. for additional layouts

○ Footer Bottom

■ Layout 1

● Left side ○ Copyright text

● Right side ○ Designed by

■ Layout 2 ● Left side

○ Copyright text and Designed by ● Right side

○ Social links

■ Layout 3 ● Left side

○ Copyright text and Desinged by ● Right side

○ Company Address

Page 6: How to Install WPCargo ThemePro€¦ · How to Install WPCargo ThemePro Follow the steps to complete the installation: 1. In your WordPress dashboard, go to appearance > Themes then

Dashboard:

● Required Plugins Page ○ Go to Appearance > Install Plugins ○ You can now install and update the required plugins

● ● ● ● ● ● ● ● ● ● ● ● ●

● Customizer(Go to Appearance > Customize) ○ General Options

Site Options ● ● Select page Layout

● Select whether you want a Boxed or a

Fullwidth Page Layout

Select Default Content Layout

Fullwidth - no sidebar

Sidebar content - sidebar is left aligned

and the content is aligned right

Content Sidebar - content is left aligned

and sidebar is aligned right

Content Width - You can set your specific width of

your content.

Page 7: How to Install WPCargo ThemePro€¦ · How to Install WPCargo ThemePro Follow the steps to complete the installation: 1. In your WordPress dashboard, go to appearance > Themes then

o Social Network URL

- set the links on the following Social

Networks

Facebook

Twitter

LinkedIn

Google+

YouTube

RSS

Delicious

Flickr

Lastfm

Vimeo

o Note that these are the social networks that

appear at the upper right below the

navigation.

o Font Family Options

○ Body Font Family

Select a Font Family that

only applies on the body

content

Select Font Variants

a) Select if you want

to Enable/Disable

the regular and

italic Font

Variants.

Select Font Subsets

a) Enable or Disable

Latin texts

○ Headings Font Family

Select a Font Family that

applies to all

headings(h1, h2, h3, h4,

h5, h6)

Page 8: How to Install WPCargo ThemePro€¦ · How to Install WPCargo ThemePro Follow the steps to complete the installation: 1. In your WordPress dashboard, go to appearance > Themes then

o Font Size Options - Set all specific size on all headings and body font size

o Go to Appearance > Customize > Header Options

○ Header Top Section – this section appears at the top of the menus

Enter your contact details such as:

a) Email Address

b) Mobile/Phone Number

Select if you want to Enable/Disable the Login and Logout link

Enable/Disable My Account – If this is enabled, a link for My

Account will be added at the top of the navigation

Enter your site’s location address

Page 9: How to Install WPCargo ThemePro€¦ · How to Install WPCargo ThemePro Follow the steps to complete the installation: 1. In your WordPress dashboard, go to appearance > Themes then

Header Top Social Networks – Enable/Disable the social network links above the header

Header Section

-Choose a header layout

o Layout 1 – Logo is aligned at the upper left part of

the header and the menus are right aligned (see

Figure 1.1).

o Layout 2 – A top bar header is added in this layout

(see Figure 1.2).

o Layout 3 – A top bar remained at the upper part and

the menus are moved below the track button.

o Upload an image for your logo, transparent header

and sticky header.

o You can also set a different font family on menus.

○ Select font variants

○ Select Font Subsets

○ Set the menu font size

o You can enter the address of your site where it

displays on the upper header.

Page 10: How to Install WPCargo ThemePro€¦ · How to Install WPCargo ThemePro Follow the steps to complete the installation: 1. In your WordPress dashboard, go to appearance > Themes then

Enable/Disable the footer social networks

Note that the social network icons will

only apply if you choose the Footer Layout

(Footer Options>Footer Bottom Section).

Footer Widgets Sections

Footer Widgets Background Color - set the Background color of footer

Footer Widgets Columns - set the number of columns in footer

Widget Title Font Size - Set the font size of Widget title

Page 11: How to Install WPCargo ThemePro€¦ · How to Install WPCargo ThemePro Follow the steps to complete the installation: 1. In your WordPress dashboard, go to appearance > Themes then

Footer Bottom Section

Footer Bottom Layout – select a Layout for footer

Footer Background Color – set the background color of footer

Footer Border Color 1/ Footer Border Color 2 – set the border colors of footer

Footer Right Display Type – set the display as Social Networks or Free Text

Footer Font Size – set the font size of texts

Footer Left – set the text to display at the left of your footer

Footer Right Text - set the text to display at the right of your footer