Media Container

Create and display a Media Container element

Options#

Option nameDescription

Link Type Add a center button?
Button Text Add a text inside the button. If no text is added, an icon will be displayed.
Button Style Select a button style
Alternative border animation – box width set a width for the alternative border animation.
Link Target Add a center button?
Link URL Add a link for the link.
Modal image link Add an image for the modal.
Height LG – Large breakpoint Set the height of the media container for large breakpoint ‘> 1200px’
Height MD – Medium breakpoint Set the height of the media container for medium breakpoint ‘> 992px’ and ‘< 1199px’
Height SM – Small breakpoint Set the height of the media container for small breakpoint ‘> 768px’ and ‘< 991px’
Height XS – Extra small breakpoint Set the height of the media container for extra small breakpoint ‘< 767px’
Background Source Type Please select the source type of the background.
Background image Please choose a background image for this section.
Slide Video Youtube ID Add an Youtube ID
Embed Iframe link Add a link
Mp4 video source Add the MP4 video source for your local video
Ogg/Ogv video source Add the OGG video source for your local video
Webm video source Add the WEBM video source for your local video
Video poster Using this option you can add your desired video poster that will be shown on unsuported devices.
Autoplay video? Enable autoplay for video?
Loop video? Enable looping the video?
Start mute? Start the video with muted audio?
Video controls Enable video controls?
Video controls position Video controls position in the slide
Background colored overlay Add slide color overlay over the image or video to darken or enlight
Overlay background color Pick a color
Overlay’s opacity. Overlay background colors opacity level.
Overlay Gradient 2nd Bg. Color Pick a color
Gradient Overlay’s 2nd Opacity. Overlay gradient 2nd background color opacity level.
Enable Gloss Overlay Display a gloss over the background

Example#

element

 

Video Explainer:#