Fullscreen Section
Inserting a Fullscreen Section
Fullscreen are a great way to structure a presentation with our without scroll to section navigation.
Related Video Tutorials
Step 1: Switch To Backend Editor
To insert a Fullscreen section, start by clicking the button "Backend Editor" button then click the "+"(Add Element) button, for example:
Step 2: Select Fullscreen
Click "Fullscreen Presentation" in the Visual Composer Modal to insert a Fullscreen section, for example:
Step 3: Edit Fullscreen Section Settings
Once the Fullscreen section element has been inserted click the Edit Link(pen icon) of the Fullscreen section wrapper, for example:
Here is an overview of available Fullscreen section options:
-
Use Navigation
Determines whether the fullscreen section bullet navigation should be added.
Step 4: Edit Slides
Once you have edited the fullscreen section wrapper settings, click the Edit Link(pen icon) of the fullscreen slide you wish to edit, for example:
Here is an overview of available fullscreen slide options:
-
Title
Enter the fullscreen slide title.
-
Slide Image
Upload slide image.
-
Background Attachement
Determines the background position of the fullscren slide, either Static(image scrolls with content) or Fixed(image remains fixed and does not scroll with content).
-
Background Size
Determines the background size, either Cover(image is ) or Contain(image scales to fit it's container).
-
Use Overlay
Determines if an overlay should be used. Note: this is useful to darken the slide and make the foreground text stand out.
-
Force Content Below On Mobile
Whether content should be pushed below the image on mobile.
-
Scale Section To Content
Determines whether the height of the fullscreen section should scale to the content if the screen width is less than 768px.
-
Caption Vertical Alignment
Determines whether the fullscreen caption should be top, middle or bottom aligned within the column.
-
Caption Horiztonal Alignment
Determines whether the fullscreen caption should be left, center or right aligned within the column.
-
Color Color
Image background color
Image overlay background color
Step 5: Add/Edit Fullscreen Captions & Buttons
Once you have edited the slide settings, click the + of the fullscreen section to which you want to add a caption and/or button to, for example:
Here is an overview of available caption options:
-
Fullscreen Caption
The fullscreen caption goes here.
Here is an overview of available 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 scroll 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.