Ascent(English)
Contact usFAQsFree to install
English
English
  • Introduction
  • Support Policy
  • Refund Policy
  • Template Installation
  • FAQs
  • Global Settings
    • Layout
    • Colors
    • Typography
    • Breadcrumb
    • Animations
    • Section header
    • Product cards
    • Badges
    • Social media
    • Search behavior
    • Currency format
    • Cart settings
    • Favicon
    • Custom CSS
  • Header
    • Custom Mega Menu
    • Mobile Menu Obstruction by Third-Party Plugins
  • Side Drawer
    • Search Drawer
    • Shopping Cart Drawer
  • Sections
    • Seamless scroll
    • Announcement bar
    • Countdown
    • Collection thumbnails
    • Narrow banner image
    • Image banner
    • Video banner
    • Slideshow
    • Image with text
    • Image-text list
    • Rich text
    • Newsletter
    • Text with icons
    • Logo list
    • Contact form
    • FAQs
    • Multicolumn
    • Image comparison banner
    • Image hotspots banner
    • Map
    • Featured collection
    • Featured product
    • Collection list
    • Custom liquid
    • Composite display
    • Confetti trigger
    • Custom section header
    • Quote
    • Testimonials
    • Shop the feed
    • Image gallery
    • Product compare table
    • Text lens zoom
    • Scroll image expand
    • Milestones
    • Team
    • Highlight features
    • Steps
    • Media wall
  • Popups
    • Event popup
    • Age verification popup
  • Footer
    • Custom Payment Icons
  • Tool bar
  • Pages
    • Product Collection Page
      • Create Subcategory
    • Main product
      • Gifts (Freebies)
      • Product Pre-order
      • Size Chart
      • Variant Images Group
      • Variant Samples
      • Complementary Products
      • Related Products
      • Sibling Products
      • In Box Products
      • Product A+ Page
      • Performance Indicator Bar
      • Delivery ETA
  • Others
    • Version Upgrade Notes
      • v2.2.1 (Current version)
      • v2.1.8
      • v2.1.7
Powered by GitBook
On this page

Was this helpful?

  1. Sections

Scroll image expand

The section offers a dynamic way to showcase images and content. It allows an initial image to appear smaller, and as users scroll down the page, the image gradually enlarges until it fills the entire screen. Once the image fully expands, a title and button slide in from the bottom, providing a visually engaging opportunity to display content and encourage user interaction.

Key Features:

  1. Image Settings:

    • Option to upload and select an image.

    • Set the initial image size (small, medium, or large).

  2. Content Settings:

    • Choose a color scheme, allowing for customized colors and visual effects.

    • Add a title, description, and button text to display more information and encourage interaction.

    • Set a button link to direct users to a specific page upon clicking.

    • Optional arrow icon on the button to visually guide users.

  3. Animation Effects:

    • The image enlarges as the page scrolls, eventually becoming full screen.

    • The title and button gradually slide in from the bottom of the screen, enhancing interactivity.

Usage Suggestions:

  • Visual Appeal: Use high-quality images and ensure the image content is relevant to your website’s theme.

  • Concise Content: Keep the title and description clear and concise, ensuring users quickly understand the message once the image fully appears.

  • Enhanced Interaction: Use buttons to guide users towards further actions (e.g., learn more, shop now), and ensure that the button links are functional.

Points to Note:

  • Adjust the image size based on the actual layout and content needs to ensure the desired visual effect.

  • Combine enough text with visual elements to maintain content engagement and avoid monotony.

PreviousText lens zoomNextMilestones

Last updated 6 months ago

Was this helpful?