Editorial Video Box Card

A tall editorial video box widget with rounded corners, overlay text, and a pill button over a background video.

Bring the engaging, high-converting aesthetic of social media stories directly to your website with the Editorial Vertical Video Card. Breaking away from traditional horizontal layouts, this portrait-oriented video box leverages the mobile-first UI patterns that modern users instinctively interact with.

Framed by smooth, app-like rounded corners, this widget acts as a standalone interactive card. It features a sophisticated top-aligned status indicator (perfect for "Live" alerts or category tags), a beautifully centered editorial headline, and a high-contrast, pill-shaped Call to Action (CTA) button anchored at the base. The dark overlay ensures that whether your background video is bright, fast-paced, or moody, your typography remains pristine and legible.

Key Features:

• Mobile-First "Story" Aesthetic: Utilizes a vertical, portrait aspect ratio that mimics familiar social media reels and stories, driving higher engagement.
• App-Like Card Design: Elegant rounded corners isolate the video from the rest of the page, creating a premium, framed editorial look.
• Live Status Indicator: A built-in top-left eyebrow tag with a status dot, perfect for signaling live events, premieres, or urgent updates.
• High-Conversion CTA: A bold, pill-shaped button anchored at the bottom draws the eye naturally down the vertical axis, encouraging immediate clicks.
• Editorial Typography: Clean, centered text placement that feels right at home in high-end digital magazines or luxury brand sites.

Versatile Use Cases

This widget is designed to stand out. By using a vertical card layout on a standard web page, you create an intentional visual disruption that forces the user to stop scrolling and pay attention.

• Live Events, Webinars & Screenings: As teased in the demo, this is the ultimate layout for promoting virtual events, film festivals, or live streams. The status indicator creates urgency, while the vertical video provides a perfect teaser trailer format.
• Editorial & Digital Magazines: Perfect for highlighting featured interviews, fashion editorials, or monthly cover stories. The portrait orientation mirrors a physical magazine cover brought to life with motion.
• Mobile App Teasers & Downloads: Mimic the look of a smartphone screen to showcase app UI interactions, driving users directly to the App Store or Google Play via the prominent bottom button.
• E-Commerce "Lookbooks": Showcase apparel or lifestyle products in a TikTok/Reels format directly on your Shopify store, bridging the gap between social media marketing and on-site conversion.

Cross-Platform Integration

Like all Redesignee layout blocks, this vertical video card relies on lightweight, self-contained code rather than bloated plugins. It can be effortlessly injected into your existing tech stack.

• WordPress & Elementor: Integrate this editorial card flawlessly into your WordPress site. Drop it into Elementor or Gutenberg to instantly inherit your theme's global fonts and color variables.
• Squarespace (Fluid Engine): Add a modern, app-like feel to your Squarespace site. Simply paste the markup into a Code block to bypass rigid template restrictions and achieve perfect rounded corners and video masking.
• Shopify & E-Commerce: Upgrade your product landing pages. Paste the un-nested source code into a custom liquid section to create high-converting, social-media-style product highlights on your storefront.
• Custom Code (Webflow, Framer, Jamstack): Built for modern development workflows. The clean HTML and CSS strings can be pasted directly into Webflow embed blocks or static environments, maintaining flawless responsive scaling across desktop and mobile breakpoints.

How to install Editorial Video Box Card to your website

Bring this layout to life on your website in just a few clicks.

Install on Squarespace

Edit Editorial Video Box Card visually using the native Squarespace extension

+−

First, ensure you have connected your website to the native Redesignee extension. Once connected, you have two easy ways to build:

1. Native Block: Simply add the native Redesignee Widget Block directly from the fluid engine editor menu inside Squarespace.

2. Manual Markdown: Add a standard Markdown Block, paste your widget’s code snippet, and the Redesignee floating "Customize" button will automatically appear right over the block.

Both methods let you tweak settings, copy items, and design visually in real time. Saving your changes syncs the updates instantly to your live page.

See Squarespace installation guide

Install on WordPress

Connect natively via Gutenberg or Elementor

+−

Make sure you have the free Redesignee WordPress Plugin installed. To drop the Editorial Video Box Card into Elementor, simply drag and drop the Redesignee widget from your sidebar. If you are using the Gutenberg Block Editor, click the " + " icon and select the Redesignee Block. Launch the Cloud Library directly inside your workspace, choose your customized template, and import it with a single click. It automatically inherits your theme fonts and styles!

WordPress plugin installation guide

Install on Other CMS as Code

Quick copy-and-paste for custom setups

+−

If you are using Webflow, Shopify, Wix, or a custom HTML site, click the "Export Widget" button on this page and ensure the platform selector is set to "HTML". Click "Copy" to copy the clean, un-nested source code snippet directly to your clipboard. Paste this code into any HTML component, Code Block, or Embed tool inside your website builder. All styles, animations, and scripts are self-contained and ready to run.