Heroes

Overview

A ridiculously clean and simple way to create nice, big, hero splash elements and stack them.

Installation & Activation

Heroes can easily be downloaded from inside WordPress using PageLines Connect.

1. Download the plugin from the Connect store. It will now appear in your 'Plugins' tab.
2. Click 'Plugins', and find your Heroes plugin (titled PageLines Section MegaNav).
3. Click 'Activate' to be able to use the plugin inside your editor.
4. Go to your PageLines Builder where you will now find PopThumbs in the 'Components' section.

Settings

As with all section, the Heroes section includes the Standard Section Options such as padding/margin, background options and etc.

Hero Items Setup

The Heroes setup options are where you configure the individual Hero items.

Add/Remove Hero Items

To add additional Hero items, click the +Add Item button. To remove, click the X icon.

Ordering Hero Items

To re-order Hero items, simply place the mouse cursor over the navicon and drag-and-drop to change the order of items. The Item name will automatically change to represent the order of the item e.g. item 3 moves into item 1, item 3 will rename to item 1.

Title

Enter text into the field, to add a title to the Heroes section.

Text

A large text field where you can insert an optional text to the Hero item, a basic WYSIWYG is included providing options for formatting the hero text.

• Bold, Italic, Underline
• Select text alignment left, center or right
• Control the tag that wrap the subheader, select between header tags <h1> to <h4> or <p> tag.

Toggle Raw Text, allows you to disable the built-in WYSIWYG and use raw text only.

Text Alignment

Control the alignment of your title and text, you can select between left, center and right.

Image

Add an image to the hero by either using the Upload option or selecting an image from the WordPress Media library.

Section Alignment

Control the alignment of all elements (title, text, image & button) in the hero, you can select between:

• Left: Positions the title, text and button to the left and image to the right.
• Center: Positions the title, text and button centrally and image below.
• Right: Positions the title, text and button to the right and image to the left.

Image Percent Width

Control the size of the image, you can select between 0% to 300% in 10% increments.

Button

Heroes supports one button per Hero item that appear beneath the Text option.

• Button URL: Enter the URL for the address you wish to the button to navigate to.
• Button Text: Input text to label the button.
• Button Color: Select from several color schemes.
• Button Size: Select from four sizes such as Standard, Large, Small and Mini.
• Open New Tab? Choose whether the button upon click opens in a new window/tab.

For button style examples, see the Button sections documentation.

Background Options

Text/Element Color Scheme

Control the color scheme for the slider text. You can choose from Default, White, and Black.

Note: This will override link colors if set.

Background Color

Select via the built-in color picker, an optional background color for the hero item.

Background Image

Add an optional background image to the hero item by either using the Upload option or selecting an image from the WordPress Media library.