Hero 5: Split Hero

Inserting Hero Section 5

A split hero section with background image, video or map and hero text.

Related Video Tutorials
Setup of hero section 5

Teaches you how to set up a hero 5 section block

Step 1: Switch To Backend Editor

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

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

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

Hero 5 Section Settings

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

  • Media Content Type

    Determines the hero 5 media type for the media column:

    • Upload

      Upload media column background image.

    • Vimeo Video ID

      This is where you enter the Vimeo video ID, which generally look something like this:
      https://vimeo.com/46697798.

    • YouTube Video ID

      This is where you enter the YouTube video ID, which generally look something like this: https://www.youtube.com/watch?v=bPg4tk7VFR0.

    • Map

      If seleted, this will add the Map tab, under which all map settings are set.

  • Hero Content

    Hero content goes here.

  • Content Media Width

    Determines the hero content/media column split. Possible values include: Split 50/50, Split 60/40, and Split 75/25.

  • Show Media Column on Mobile

    Determines whether the media column will be shown on mobile. If deselected, the media column will be hidden under screen widts of 768px.

  • 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.

  • Media Alignment

    Determines whether the hero media column should be left or right aligned.

  • Color Options

    Background Color
    Text Color

The hero 5 section allows you to animate both the media column and the hero content. Below is an example of the animation settings for the media column. Repeat settings for the hero content.

  • Media Animation Type

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

  • Media Animation Duration

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

  • Media Animation Delay

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

  • Media 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%.

The map allows for two map markers. Below is an example of the settings for the first map marker. Repeat settings for map marker 2.

  • Map Style Type

    Determines whether the map should be shown in color or in greyscale.

  • Coordinates 1

    Enter the map coordinates of the first map marker here. Lat/long should be comma separated i.e. 40.723301,-74.002988.

  • Information 1

    Enter the map tooltip information of the first map marker here.

  • Map Marker 1

    Upload the first map marker.

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