Hero 3: Full Width Hero With Boxed Content

Inserting Hero Section 3

A minimial full width hero section with background image and boxed hero text.

Related Video Tutorials
Setup of hero section 3

Teaches you how to set up a hero 3 section block

Step 1: Switch To Backend Editor

To insert a hero 3 section, start by clicking the button "Backend Editor" button then click the "+"(Add Element) button, for example:

VC Editor Backend
Step 2: Select Hero

Click "Full Width Hero With Boxed Content" in the Visual Composer Modal to insert a hero 3 section, for example:

Hero 3 Section Settings
Step 3: Edit Hero 3 Section Settings

Once the hero 3 element has been inserted click the Edit Link(pen icon) of the hero 3 section, for example:

Hero 3 Section Settings

Here is an overview of available hero 3 options:

  • Height

    Sets the hero section height to either Small, Window Height, Auto or to Custom:

    • Small

      Sets the hero section height to 500px.

    • Window Height

      Sets the hero section height to the device window height.

    • Auto

      Clears the hero section height. Hero section will scale to fit the content.

    • Custom

      Allows you to set your preferred height. Entered as pixels i.e. 400px.

  • Image

    Upload hero 3 background image.

  • Hero Column Width

    Determines the hero column width. Values range from 1 - 12 columns (full width).

  • Hero Column Offset

    Determines the hero column offset. Refer to Rows & Columns > Column Alignment > Understanding Column Offset for detailed examples of column offsets.

  • Hero Content

    Hero content goes here.

  • Extra Class Name

    If you wish to style this component differently, then use the extra class name field to add one or several class names and then refer to it in your css file.

  • Horizontal Content Alignment

    Determines whether the boxed hero content should be left, center or right aligned.

  • Vertical Content Alignment

    Determines whether the boxed her content should be top, middle or bottom aligned.

  • Color Options

    Background Color
    Content Background Color
    Content Border Color
    Text Color

  • Animation Type

    Determines the type of animation that will be applied to the column.

  • Animation Duration

    How long the animation should be. Expressed in milliseconds i.e. 1000 represents 1 second.

  • Animation Delay

    How long before the animation should begin upon entering the viewport. Expressed in milliseconds i.e. 100 represents 0.1 second.

  • Animation Threshold

    Represents what percentage of the element should be visible in the viewport before animation begins. Expressed as a decimal i.e. i.e. 0.5 represents 50%.

Can't find what you're looking for? Submit a request in our forum.