Parallax Section
Inserting a Parallax Section
Our themes offers simple full width parallax sections.
Related Video Tutorials
Step 1: Switch To Backend Editor
To insert a parallax section, start by clicking the button "Backend Editor" button then click the "+"(Add Element) button, for example:
Step 2: Select Parallax
Click "Parallax" in the Visual Composer Modal to insert a parallax section, for example:
Step 3: Edit Parallax Section Settings
Once the parallax section element has been inserted click the Edit Link(pen icon) of the parallax section wrapper, for example:
Here is an overview of available parallax section options:
-
Image
Upload parallax image.
-
Height
Sets the parallax section height to either Default, Window Height, Auto or to Custom:
-
Default
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.
-
-
Fade
Determines whether section should fade in/out as it scrolls in/out of viewport.
-
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.
-
ID
Give this section a unique ID. This is useful if you want to initiate scroll or link to this section.
-
Color Options
Background Color
Text Color
-
Content Animation Type
Determines the type of animation that will be applied to the column.
-
Content Animation Duration
How long the animation should be. Expressed in milliseconds i.e. 1000 represents 1 second.
-
Content Animation Delay
How long before the animation should begin upon entering the viewport. Expressed in milliseconds i.e. 100 represents 0.1 second.
-
Content 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%.
Step 4: Add Content
Once you have edited the parallax wrapper settings, click the Edit Link(pen icon) of the parallax caption or parallax button. Note that you can add as many captions and/or buttons as necessary to the parallax section, for example:
Here is an overview of available parallax content options:
-
Caption
Parallax caption goes here.
Here is an overview of available parallax button options:
-
Scroll To section
Whether button should initiate a scroll to section event. Important: If this option is checked, you need to specify the section ID (#section) in the URL field.
-
Icon
Whether the button should have an icon or not.
-
Button Label
What the button should say.
-
URL
The page, or site, or section ID that the button should link to.
-
Scroll Offset
This option is dependent upon whether the "Scroll To Section" option is set to true. This is where you can set the ccroll position offset when scrolling to a section. Accepts negative numbers.
-
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.
-
Icon Alignment
This option is dependent upon General > Icon . Determines whether button icon should be left or right aligned.
-
Button Size
Determines whether button should be small, medium, large or extra large in size.
-
Button Style
Whether button should have sharp corners, rounded corners, or be pill shaped.
-
Color Options
Background Color
Background Color hover
Border color
Border color hover
Label Color
Label Color Hover
Drop Shadow
Can't find what you're looking for? Submit a request in our forum.