Skip to main content

Full Screen Quote

The Full Screen Quote element allows you to add a background image and text to your quote, making it more impactful and visually appealing. You can also add a GIF as your background image, which will animate your quote and make it more engaging.

Desktop

Full Screen Quote Desktop Preview

Mobile

Full Screen Quote Mobile Preview

Add a Full Screen Quote​

Configure your full screen video wit the following settings and options.

Settings​

Quote: Enter your quote in this field. Make sure it's a powerful and impactful quote that will grab your readers' attention.

Author: If your quote has an author, you can add their name in this field. This is an optional field, and you can leave it blank if you prefer.

Animation: Add a custom animation to your quote text to make it more engaging. You can choose from several animation options to create the effect you want.

Images​

Landscape Image: Add a landscape image to your block with a maximum resolution of 2560 x 1456 pixels. Images are automatically resized to fit that proportion.

Portrait Image: Add a portrait image to your block with a maximum resolution of 1456 x 2560 pixels. Images are automatically resized to fit that proportion.

Gif Animation: If you have a GIF that you want to use as your background image, you can enable this feature to animate your GIF. You can choose between none or automatic. Enabling the gif animation disables automatic image resizing.

Desktop Tiling: Allows you to choose between 'Automatic' and 'Contain' to toggle between different tiling styles for the background image on desktop devices.

Mobile Tiling: Allows you to choose between 'Automatic' and 'Contain' to toggle between different tiling styles for the background image on mobile devices.

Scroll Style: Choose between normal or fixed. Enabling the fixed option creates a desktop-only parallax effect. Note that this option has no effect on mobile browsers because they do not support it.

Image Description: Add a description to your image for SEO and accessibility.

Special Effects​

Filter: Add a filter to your entire element, such as blur, brightness, contrast, grayscale, hue-rotate, invert, opacity, saturate, or sepia. This applies a filter animation to the entire element.

Transition: Add an interactive on-scroll transition effect to your entire element, such as Perspective, Rotate, Scale-Bounce, Scale, Translate horizontally, or Translate vertically.

Desktop Overflow: Allows for the desktop content to overflow to the next element.

Mobile Overflow: Allows for the mobile content to overflow to the next element.

Display on Mobile: Choose whether or not to display this element on mobile devices.

CSS Snippet: Use a CSS Snippet to fully customize your element for a more personalized look.