Upload
others
View
0
Download
0
Embed Size (px)
Citation preview
Winning Agent Pro Theme Setup!!!Thanks for purchasing the Winning Agent Pro Theme! Ready to get started with setup?
This tutorial will walk you through se=ng up the theme to look like the Winning Agent
Pro theme demo.
!You might find it helpful to have the demo open in another window while you’re working
through the setup. The setup documentaCon for this theme has been broken down into
the following secCons:
Pre-Installation Setup!!Compa&bility
Make sure you have the following installed:
!• WordPress version 3.6+
• Genesis Framework version 2.0+
!Plugins
Before you begin, you will need to install and acCvate the following plugins. Of course,
you can subsCtute your favorite plugin, but we’re using these in the the Winning Agent
Pro theme demo:
!• AgentPress LisCngs
• Genesis eNews Extended
• Simple Social Icons
• Gravity Forms (premium) – you can subsCtute your own preferred contact form plugin
!!
Page � of �1 21
Theme Installation!!Once you have completed the pre-‐installaCon steps, the Genesis Framework is installed,
and you’ve downloaded the theme zip file to your local machine, you are ready to install
the Winning Agent Pro theme.
!Via the WordPress Dashboard
1. Go to Appearance > Themes > Add New.
2. Use the Upload bu`on and then the Browse bu`on to locate the theme zip file on
your local machine.
3. Click Install Now and acCvate the theme.
!Via an FTP Client
1. Unzip the theme zip file. You’ll see the theme folder labeled ‘Winning Agent Pro’
2. Upload the theme folder via FTP to your wp-‐content/themes/ directory.
3. Go to your WordPress admin dashboard and select Appearance.
4. AcCvate the Winning Agent Pro theme.
!
How to Configure the Genesis Theme Settings!!In your WordPress admin, navigate to Genesis > Theme Se=ngs. Configure the Theme
Se=ngs as follows:
!Color Style
From the “Color Style” dropdown, select your desired color for the theme.
� Page � of �2 21
Default Layout
The Winning Agent Pro theme supports three layout opCons: Content/Sidebar, Sidebar/
Content, and Full Width Content.
!• Click a thumbnail to select the Default Layout.
• The Winning Agent Pro demo uses the Content/Sidebar layout.
!
�
Content Archives
1. For Content Archives, the default se=ng of “Display post content” is used by the
demo.
2. Set the “Limit content to __ characters” opCon to 400 to look like the demo.
3. Check the “Include the Featured Image?” checkbox and select the “thumbnail” for
the “Image Size”.
4. Using the drop down box, select “Numeric” for the “Post NavigaCon Technique.”
Page � of �3 21
�
Don’t forget to click the “Save Se=ngs” bu`on!
!
How to Set the Background Image!!The Winning Agent Pro theme uses a backstretch background, meaning your image will
scale to fit the enCre screen. An image with a 3:1 width:height raCo will look best, for
instance an 1800w by 600h image.
!To set the background image on your site, go to Appearance > Background. Browse your
computer for the desired image and click Upload.
Page � of �4 21
�
You don’t need to configure any other se=ngs – Just click Save!
!
How to Configure the Site Title Header Text!!The site Ctle and descripCon for your site can be set by navigaCng to Se=ngs > General.
!1. The Site Title will display in the upper lel corner of your site.
2. The Tagline Se=ng does not display in the theme, but may show in your browser
tab, depending on your site SEO se=ngs.
3. Be sure to click the “Save Se=ngs” bu`on to preserve your changes.
Page � of �5 21
�
To add the addiConal style to custom Ctle, like the demo, check out this tutorial.
How to Use a Custom Header Image!!If you prefer a Logo Image rather than a text based Site Title, you can use a small logo
style image that displays in the upper lel corner of the site.
!1. Navigate to Appearance > Header menu in your WordPress admin panel.
2. Click “Browse” and Navigate to the image you would like to use for a Logo. Images
of exactly 300 × 80 pixels will give the best results. Other sizes will be cropped in the upload process to create an image of the correct size.
3. Click “Upload” to copy the image from your computer to your website.
4. Be sure to click the “Save Se=ngs” bu`on to preserve your changes.
Page � of �6 21
�
!How to Configure the Navigation Menu!!The Winning Agent Pro theme supports the Primary menu locaCon provided with the
Genesis Framework, however the demo does not uClize this menu.
!To create your custom menu, go to Appearance > Menu. Once you have saved your
custom menu, click on the “Manage LocaCons” tab and select your custom menu from
the Primary Menu dropdown and save. Your menu will show beneath the header.
Page � of �7 21
�
Header Right Widget Area!!The Winning Agent Pro theme demo is configured to display a custom menu and Simple
Social Icons in the Header Right widget area.
!To create your custom menu, go to Appearance > Menu. Once you have saved your
custom menu, go to Appearance > Widgets tab and place the Custom Menu widget in the
Header Right widget area . Your menu will show to the right of the Site Title.
!
�
Page � of �8 21
The demo uses the Simple Social Icons plugin to display social icons in the Header Right
widget area. Drag an instance of the Simple Social Icons widget into the Header Right
widget area and configure the se=ngs.
!
�
The Winning Agent Pro demo uses the following hex color values in the Simple Social
Icons widget se=ngs:
Page � of �9 21
!Gold/Black
• Icon Font Color: #6c6353
• Icon Font Hover Color: #ffffff
• Background Color: #ffffff
• Background Hover Color: #d9a861
!Red/Gray
• Icon Font Color: #555555
• Icon Font Hover Color: #ffffff
• Background Color: #ffffff
• Background Hover Color: #f04848
!Blue/Green
• Icon Font Color: #3d4d6d
• Icon Font Hover Color: #ffffff
• Background Color: #ffffff
• Background Hover Color: #339933
!White/Orange
• Icon Font Color: #ffffff
• Icon Font Hover Color: #ffffff
• Background Color: #555555
• Background Hover Color: #EF9339
!
!!
Page � of �10 21
How to Configure the Search Bar!!This widget area appears on all pages on the site (home page included). The demo uses
the AgentPress LisCngs widget.
!To configure your site like the demo, first you must create some lisCngs using the
AgentPress LisCngs plugin.
You will also need to create custom taxonomies with the plugin, such as Price, LocaCon,
Bedrooms, Status (i.e. For Sale, Sold), etc. Each taxonomy you create corresponds to an
available search drop-‐down in the AgentPress LisCngs widget.
!
�
Once you’ve created the taxonomies and your lisCngs, go to Appearance > Widgets and
drag the AgentPress LisCngs widget to the Search Bar widget area. Select the searchable
taxonomies and save the widget.
Page � of �11 21
�
Note: You can include other content or an IDX search widget in this space, but custom
styling may be required.
!Click here for a video tutorial of how to set up the search bar.
How to Configure the Home Page!Home Welcome Widget Area
This widget area appears over the background image on the home page. The demo uses a
Text widget with just a widget Ctle, no addiConal text.
!1. Go to Appearance > Widgets
Page � of �12 21
2. Drag a text widget into the Home Welcome widget area
3. Input a Ctle
4. Save
!
�
Home Featured 1 – 3 Widget Areas
Each of the Home Featured widget areas are designed to show a Genesis Featured Page
(or Post) with a featured image and a Ctle. To configure the widget like the demo, follow
these steps:
!1. Go to Appearance > Widgets
2. Drag an instance of the Genesis Featured Page widget into the Home Featured 1
widget area
3. Input a Ctle
4. Select the page to link to
Page � of �13 21
5. Check the box that says “Show Featured Image” and choose the “feature-‐small”
size from the drop-‐down menu
6. Save and repeat for Home Featured 2 and Home Featured 3
!
�
!Note: In order for each of these areas to link to a featured page, the featured page must have a featured image. !!!
Page � of �14 21
Home Lis&ngs Widget Area
This widget area is designed to feature property lisCngs created by the AgentPress LisCngs
plugin. Aler you have created some lisCngs, use the following steps to set up this area on
your home page:
!1. Go to Appearance > Widgets
2. Drag an instance of the AgentPress LisCngs widget into the Home LisCngs widget
area
3. Input a Ctle
4. Input “3″ in the “How many results should returned?” field
5. Save
!
�
Home Communi&es Widget Area
This widget area takes advantage of the CommuniCes custom post type that comes with
Winning Agent Pro. To set this area up like the demo, follow these steps:
!1. Go to Appearance > Widgets
Page � of �15 21
2. Drag an instance of the Featured CommuniCes widget into the Home
CommuniCes widget area.
3. Input a Ctle
4. For “Number of Posts to Show”, enter “4″. 5. Use the sorCng/ordering fields to modify the communiCes returned by the widget
as you wish
6. Check the “Show Featured Image” checkbox and select the “feature-‐community”
size from the drop down.
7. Check the “Show Post Title” box
8. Set the “Content Type” to “No Content”
9. Save
� Page � of �16 21
How to Configure the Primary Sidebar Area!!The following widgets are used in the Primary Sidebar area that displays to the right side
of the content area.
!• Genesis Featured Page widget (see see Home Featured 1 – 3 Widget Areas to copy
setup)
• Genesis eNews Extended Widget (requires plugin)
!For addiConal configuraCon instrucCons for Genesis eNews Extended, go here.
!
�
How to Configure the Footer Widget Areas!The Winning Agent Pro theme demo uses the included 2 Footer Widget areas. The
following outlines the widgets used in the demo, though you may use any widgets you
like in these areas.
!
Page � of �17 21
�
Footer 1 Widget Area:
The first footer widget area is approximately 2/3 the width of the footer. The Winning
Agent Pro demo uses a text widget with some HTML markup, like this:
�
You can use the following HTML markup to achieve the same styling as the demo:
!<blockquote>Insert your quote here</blockquote> <cite>Insert your reference here</cite> !Footer 2 Widget Area:
Page � of �18 21
The second footer widget area is approximately 1/3 the width of the footer. The Winning
Agent Pro demo uses the Genesis – User Profile widget that comes with the Genesis
Framework.
!
�
How to Configure the Bottom Navigation!!In the demo, there’s a horizontal list of CommuniCes across the bo`om of the page. This
secCon is a custom menu assigned to the Secondary NavigaCon area of the theme.
!To create a new menu for this area, follow these steps:
!1. From your WordPress dashboard, go to Appearance > Menus
2. Create a new menu
3. Add links to your menu from the available selecCons (note: If you don’t see a
secCon, such as CommuniCes, check the Screen OpCons tab in the upper right
corner of your screen)
4. Save your menu
5. Click the Manage LocaCons tab located near the top of the page
6. Assign your menu to the Secondary NavigaCon Menu area.
!
How to Create a Blog Page!!When using a widgeCzed home page it’s helpful to create a general blog style page to
display elsewhere on your site. Use the following the following steps to create a Blog
Page:
!Page � of �19 21
1. Navigate to Pages > Add New in your WordPress Admin Panel
2. Create a New Page named “Blog”
3. In the right sidebar of the Page edit screen select the Blog opCon in the template
dropdown menu.
4. Leave the Content of this page blank, it will not be displayed when using the Blog
page template.
5. Publish the page.
!Once the page has been published you can view the page to see a blog style list of recent
posts. Link to this page in the custom menu of your choice.
!
�
How to Use Button Styles!!The Winning Agent Pro theme has a built-‐in “bu`on” style that you can apply to regular
links to give the appearance of a bu`on.
!To apply the bu`on style, you’ll want to use TEXT editor mode instead of the VISUAL
editor. Add class="button" to any link, like this:
!<a href="http://www.winningagent.com">Visit My Site!</a>
Page � of �20 21
!Your bu`on will automaCcally inherit the color of your selected theme color.
!
�
Give yourself a pat on the back, ’cause you are DONE! Now it’s Cme to start adding your
content or customizing the Winning Agent Pro theme however you desire. Have fun!
Page � of �21 21