> For the complete documentation index, see [llms.txt](https://webvista-studio.gitbook.io/krank/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://webvista-studio.gitbook.io/krank/sections/media-and-layout/media-with-text.md).

# Media with Text

The **Media with Text** Block combines stacked images and videos to create an immersive visual storytelling experience. It supports full-width layout, flexible positioning, and dynamic effects, making it ideal for showcasing products, brand narratives, or visual promotions.

***

### 🎨 Color Scheme

Select or customize a color scheme to define the color styles of all elements, including background color, text color, button color, and more. Ensure alignment with your brand’s visual identity.

### 🖼️ Background Image

Upload a background image and adjust its opacity using a slider to balance contrast between background and content.

***

### 📐 Content Settings

* **Media Width**: Choose between *Small*, *Medium*, and *Large* to control the size of the image/video container.
* **Media Position**: Position the media section to the *left* or *right* of the text content.
* **Video Position**: Overlay the video in one of four corners: *Top Left*, *Top Right*, *Bottom Left*, or *Bottom Right*.
* **Enable Parallax Effect**: When enabled, the video overlay moves subtly with the cursor, creating an engaging motion effect.

***

### 🧱 Block Structure

**🖼️ Image**

* Upload an image.
* Choose from the following aspect ratios:
  * *Auto*
  * *1:1*
  * *4:5*
  * *8:5*

### **📹 Video**

* Upload a video (with optional fallback image). The video will take priority if both are uploaded.
* Supports the same aspect ratio options as the image block.

> 💡 Recommended video duration: 10–15 seconds for optimal load speed and performance.

### **📝 Content**

* Set text alignment: *Left*, *Center*, or *Right* to suit your design needs.

***

### 📦 Supported Content Blocks

Inside the content area, you can add any of the following blocks:

* Badge Group
* Button / Button Group
* Countdown
* Description
* Discount Code
* Follow Us
* Title / Subtitle
* Highlighted Stats
* Icon / Icon with Text
* Keywords
* Link Group
* Social Media List
* Video Button
* Spacer

***

### ✅ Best Practices & Tips

* Use high-resolution, visually cohesive images and videos to ensure design consistency.
* Optimize video files for fast loading—keep file size small and loop short.
* When using the **parallax effect**, prefer minimal or blurred backgrounds to draw attention to the video.
* For content-heavy layouts, select *Medium* or *Large* media width for better text readability and layout balance.