Parallax Pro Theme Setup

Use the instructions below to set up the Parallax Pro theme on UCI Sites using a widgetized home page.

How to Select the Parallax Pro Theme

  1. As a site administrator, login to your UCI Sites site.
  2. Go to Appearance > Themes
  3. Search for Parallax
  4. Hover over the Parallax theme image and click Activate.
    Activate Parallax Pro

How to configure the Genesis Theme Settings

In your WordPress admin, navigate to Genesis > Theme Settings. Configure the Theme Settings as follows:

Color Style

  • Click on the Color Style Drop down to select an alternative color scheme for your site.
wpid183001-media_1391406904442.png

Default Layout

  • Click a thumbnail to select the Default Layout. The Parallax Pro theme uses the Full Width Content option.
wpid183002-media_1391406921570.png

Content Archives

  • For Content Archives, the default setting of “Display post content” is used by the demo.
  • Leave the “Limit content to __ characters” option blank or set to 0.
  • Leave “Include the Featured Image?” checkbox unchecked.
  • Using the drop down box, select “Numeric” for the “Post Navigation Technique.”

Be sure to click the “Save Settings” button to preserve your changes.

wpid183003-media_1391406978577.png

How to Set the Title

The site title and description for your site can be set by navigating to Settings > General.

  1. The Site Title will display in the upper left corner of your site.
  2. The Tagline Setting will not not displayed when using the Parallax Pro Theme.
  3. Be sure to click the “Save Settings” button to preserve your changes.
wpid183004-media_1391407131328.png

How to use a Custom Header Logo

For those that prefer a Logo Image rather than a text based Site Title and Initial it is also possible to use a small logo style image that will display in the upper left corner of the site.

  1. To upload your header image, navigate to Appearance > Header menu. Images of exactly 360 × 70 pixels will give the best results. Other sizes will be cropped in the upload process to create an image of the correct size.
  2. Either choose an uploaded file (Choose Image) or click the Choose File and upload a header logo.
  3. Be sure to click the “Save Changes” button to preserve your settings.
wpid183005-media_1391407394756.png

How to Configure the Navigation Menus

Parallax Pro has two menu areas. You can also put a custom menu in the Header Right widget.

  • The Primary Menu will appear in the top middle.
  • A Custom menu widget may also be placed in the Header Right widget area and will appear directly below the Site Title.
    Parallax Menu Top
  • The Secondary Menu will appear in the footer middle
    Parallax Menu Footer

How to Configure the Home Page

The Parallax Pro Home Page consists of Five Featured Areas as Follows:

How to Configure the Home Section 1 Widget Area

The Parallax Pro theme demo Home Section 1 Widget Area can display a text widget. The content will be displayed on top of an image. A default image is provided, but you can replace it. See the Page Background Areas below.

  1. Go to Appearance > Widgets
  2. Add a Text Widget to Home Section 1
  3. Configure the Text widget with your content.
  4. Click Save
wpid183008-media_1391407999147.png

How to Configure the Home Section 2 Widget Area

The Parallax Pro theme demo Home Section 2 Widget Area can display a text widget. The content will be displayed a white background.

  1. Go to Appearance > Widgets
  2. Add a Text Widget to Home Section 2
  3. Configure the Text widget with your content.
  4. Click Save
wpid183009-media_1391408081133.png

How to Configure the Home Section 3 Widget Area

The Parallax Pro theme demo Home Section 3 Widget Area can display a text widget. The content will be displayed on top of an image. A default image is provided, but you can replace it. See the Page Background Areas below.

  1. Go to Appearance > Widgets
  2. Add a Text Widget to Home Section 3
  3. Configure the Text widget with your content.
  4. Click Save
wpid183010-media_1391408225399.png

How to Configure the Home Section 4 Widget Area

The Parallax Pro theme demo Home Section 4 Widget Area can display a text widget. The content will be displayed a white background.

  1. Go to Appearance > Widgets
  2. Add a Text Widget to Home Section 4
  3. Configure the Text widget with your content.
  4. Click Save
wpid183011-media_1391408479539.png

Back to Top

How to Configure the Home Section 5 Widget Area

The Home Section 5 Widget Area displays a text message and a Simple Social Icons widget*
(Note: the Simple Social Icons are an optional plugin. Please send us a request to enable this for your site.)

  • Icon Size: 60px
  • Icon Border Radius: 60px
  • Alignment: Align Center
  • Icon Font Color: #000
  • Icon Font Hover Color: #ffffff
  • Background Color: #fff
  • Background Hover Color: #f04848

Be sure to click the Save button to preserve your changes

wpid183012-media_1391408774092.png

Back to Top

How to Configure the Home Page Background Areas

The Parallax Pro theme includes 3 optional background image areas that will display behind the Home Content Areas 1, 3, and 5.

  1. To set these background images navigate to Appearance > Customize > Background Images in the WordPress admin panel.
  2. Click the down arrow to the right of the image you would like to replace to display the option to upload or remove an image. Follow the on-screen prompts to uploading a new image.
  3. The Parallax Pro theme demo uses images with dimensions of 1600px by 1050px for this area. The images used in these areas must be a minimum of 1140px wide. The widgets used in these widget areas will overlay the background images when used.
wpid183013-media_1391409753436.png

How to Configure the Footer Widget Areas

The Parallax Pro theme includes one (1) widget area that will display in the footer area of the site when widgets are added to the individual Footer Widget Areas.

Footer 1 (Use Widget of Your Choice)

wpid183014-media_1391409933141.png

How to Configure Pull Images on Single Posts

The Parallax Pro Theme demo demonstrates the use of “Pull Images.” The images in the image show the images pulled to the left and right of the post content.

wpid183015-media_1391410138137.png

This is effect can be created in the posts of a theme easily. After inserting an image into your post Using the “Add Media” Button you can click on the image in the visual toolbar to load options to edit the image.

Click on the Advanced Settings tab and add a CSS class of either pull-left or pull-right depending on the direction you wish to have your image pulled out from the post content.

wpid183016-media_1391410384492.png

Special Widget Areas Included in the Parallax Pro Theme

The Parallax Pro theme includes the following special widget area(s) designed to display additional content on your site:

  • After Entry Widget Area – Displays after the content on single posts

Congratulations! You are now ready to begin adding content and personal touches to your new Parallax Pro and Genesis powered website.