Hero 4: Full Width Hero Block With Split Content

Inserting Hero Section 4

A full width hero section with background image and split hero content.

Related Video Tutorials
Setup of hero section 4

Teaches you how to set up a hero 4 section block

Step 1: Switch To Backend Editor

To insert a hero 4 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 Block With Split Content" in the Visual Composer Modal to insert a hero 4 section, for example:

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

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

Hero 4 Section Settings

Here is an overview of available hero 4 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 4 background image.

  • 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 hero text should left, center or right aligned within the split content area.

  • Color Options

    Background Color
    Split Content Background 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.