How to Install WPCargo ThemePro€¦ · How to Install WPCargo ThemePro Follow the steps to...
Transcript of How to Install WPCargo ThemePro€¦ · How to Install WPCargo ThemePro Follow the steps to...
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).
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
○ 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
○ 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
● 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
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.
o Social Network URL
- set the links on the following Social
Networks
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)
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
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.
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
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