Why: Enhance your app's visual appeal and engagement by adding image and video blocks to your pages. This feature allows you to showcase your content in a dynamic way, making it easier for your subscribers to connect with your offerings.
Navigate: App Station > Page Builder > Add Block > Media
Quick Start
Navigate to App Station and select Page Builder.
Click Add Block and choose Media.
Select the media type (image or video) you want to add.
Configure the display options, including aspect ratio and overlay settings.
Save your changes to see the media block on your page.
Detailed Sections
Adding Media Blocks
To add a media block to your app, follow these steps:
Open the Page Builder: Go to App Station and select Page Builder.
Add a Block: Click on Add Block and choose Media from the options.
Select Media Type: Choose whether you want to add an image or a video. You can display a single media item or create a carousel for multiple items.
Configuration Options
When configuring your media block, you have several options to customize how it appears:
Enable Bleed: When enabled, the media will extend to the edges of the screen, creating a full-bleed effect. This is particularly striking when the media block is the first block on the page.
Show Overlay: You can choose to display overlays with additional information such as tags, time, or difficulty levels. This can enhance the user experience by providing context for the media.
Aspect Ratio: Set the aspect ratio for your media display. Options include:
16:9 (widescreen)
4:3 (standard)
1:1 (square)
Original (maintains the media's original dimensions)
Show Indicators: If you're using a carousel, you can enable pagination dots to help users navigate through multiple media items.
Overlay Configuration
If you choose to show overlays, you can customize their appearance:
Overlay Items: Add various types of overlays, such as:
Tags: Indicate dietary restrictions or cuisine types.
Time: Show preparation or cooking time.
Difficulty: Indicate how challenging the recipe is.
Positioning: You can specify where each overlay item appears on the media (e.g., top-left, bottom-right).
Media Interaction
Your members can interact with media blocks in several ways:
Image Viewing: When a member clicks on an image, it opens in a lightbox where they can navigate through all images using arrows or swipe gestures on mobile devices.
Video Playback: Clicking on a video thumbnail opens it in a fullscreen modal, allowing members to control playback and volume.
Swiper Navigation: For blocks with multiple media items, members can navigate using arrow buttons, swipe gestures, or pagination dots.
Best Practices
Positioning: For the best visual impact, consider placing the media block as the first block on the page to utilize the full-bleed effect.
Overlay Usage: Use overlays sparingly to avoid clutter. Choose the most relevant information to display based on your content.
Aspect Ratio: Select an aspect ratio that complements your media type and content layout for a cohesive look.
Related Features
Page Builder: Learn more about building and customizing your app pages.
Content Library: Manage your images and videos effectively in the Content Library.
Challenges: Explore how to create engaging challenges with media content.