Before & After, Image Stack, Expanding Media, 3D Carousel and 3D Image settings

Five Media widgets for photos that do something: compare, drop, grow, turn or spin. All are in the Media category of the Add panel. Each one's Spacing section is margin only, and Animations & Effects offers Entrance and Scroll (see Widget Design panel basics and Animations and effects). Image Stack and 3D Carousel use the shared Manage window for their items, explained in Widget Design panel basics.

Before & After

Two photos on top of each other with a handle visitors drag to compare. Keyboard users can move it with the arrow keys.

How to add it

1. Click Add, open Media and drag Before & After onto the page.
2. Click Manage Images. The Before & After window opens.
3. For each side, click + Image (or Replace), type the label (default "Before" and "After"), use Show to hide or show the label, and add alt text.
4. Click Save.

Use two photos taken from the same spot and the same shape. The After image sets the widget's height.

Images & Slider

• Slider color: the line and handle. Default white.
• Slider start: where the handle sits when the page loads: Left, Middle or Right (Top / Middle / Bottom for Top to bottom). Default Middle.
• Slide direction: Side to side or Top to bottom. Default Side to side.
• Image shape: Original, 16:9, 4:3, 3:2, 1:1 or 3:4. Default Original.
• Corner radius: 0–80 px. Default 0.

Labels

• Background color: default dark see-through.
• Text color: default white.
• Text size: 10–32 px. Default 14.
• Border: 0–8 px. Border color shows when the border is above 0.
• Corner radius: 0–30 px.
• Label position (Side to side only): Top, Center or Bottom. Default Center.
• Display labels: On hover or Always. Default On hover.

Image Stack

Photos drop into a pile one by one, spin away, then show as a rotating row or a full grid.

How to add it

1. Open Add > Media and drag Image Stack onto the page. It starts with six sample photos.
2. Click Manage Images, then Add Images to pick several at once.
3. Give each a Title, Description, Alt text, Focal point and optional Link this image.
4. Click Done. Or choose From a collection to make one card per collection item.

Only items with a photo are shown.

Display

• After the intro: Rotating row (a row that moves on by itself) or Full grid. Default Rotating row.
• Cards shown (Rotating row) or Columns (Full grid): 1–6. Default 4 on Desktop, 2 on Tablet, 1 on Mobile.
• Gap between cards: 0–60 px. Default 20. Per screen size.
• Image fit: Fill (crop) or Whole image. Default Fill.

Animation

• Card drop intro (plays on the live site): the drop-and-spin start. Default on. It plays once when the widget is 30% on screen.
• Drop speed (ms between cards): 50–1000. Default 300.
• Spin speed (ms between cards): 20–500. Default 100.
• Slide every (Rotating row): 800–10000 ms. Default 2000. Pauses while hovered.

Visitors who turn off motion in their device settings see the cards without the intro.

Cards

• Card background: default white.
• Corners: 0–32 px. Default 8.
• Border: 0–8 px, with Border color when above 0.
• Falling card corners: 0–32 px. Default 8. The corners of the photos while they drop.

Text

• Show title and description: default on.
• Below image or Over image. Default Below image. Text background shows for Over image.
• The heading level: H2, H3, H4 or Text. Default H3.
• Title and Description: text style controls (sizes up to 48 and 32).

Expanding Media

A picture or video that starts as a narrow rounded box and grows to full width as the visitor scrolls, with a headline, text and button over it.

How to add it

1. Open Add > Media and drag Expanding Media onto the page.
2. Click Edit Media. The Expanding Media window opens.
3. Choose Image or Video.
   • Image: pick it, then Alt text.
   • Video: click Choose video to pick a client video, upload one, choose one from the site's library, or paste a YouTube, Vimeo or DailyMotion link (the same Video Content window as the Video widget). A video file plays silently behind the text. A link shows its thumbnail with a play button that opens the video. Cover image (optional) sets the picture shown first. With Tied to scroll and no cover image, the video's first frame is used.
   • Playback (video files only): Loop plays it silently on a loop while it's on screen (default). Tied to scroll plays the video as the visitor scrolls, over the same scroll that grows it: scroll down and it plays forward, scroll back up and it rewinds, the way Apple's product pages do. It works with touch scrolling on phones too. Clips up to 30 seconds play smoothly; a longer clip plays its first 30 seconds. When you choose Tied to scroll, ContentForge prepares the video for smooth scrolling in the background. The line under Playback says Preparing smooth scrolling…, then Smooth scrolling is ready (450 frames). Until then it still plays with the scroll, less smoothly. If it couldn't be prepared, the line says why and has Try again. On the page the cover image, or the video's first frame, shows straight away, with no loading bar; a small spinner shows in the corner only if nothing has loaded after a moment. How much scrolling plays it and when it starts are in the Design panel > Video Playback. In Edit mode the canvas shows a still; use Preview to see it play with the scroll. YouTube, Vimeo and DailyMotion links don't offer it, because their players can't be scrubbed.
4. Fill in Headline, choose Headline is a (Heading 1 (page title), Heading 2, Heading 3 or Paragraph; default Heading 2) and Text.
5. Show a button: set Button text and its link. On by default ("Learn More").
6. Link the image / Link the video: turn on to make the whole picture or video one big link. Pick where it goes with the link picker (a page, a web address with an option to open in a new tab, a popup, a spot on a page, an email, a phone number, a file and more). Visitors can click anywhere on it, at any size while it grows, to follow the link. The button and a YouTube / Vimeo / DailyMotion play button keep their own links. Default off.
7. Pin it on screen while it grows: holds the widget in place while it grows, instead of growing as it scrolls past. Default off.
8. Click Save.

Size

How big it starts and how big it grows to. Every size setting is per screen size.

• Starting width: 10–100% of the full width. Default 33% (50% Tablet, 70% Mobile).
• Starting height: 240–1200 px. Default 640 (520 Tablet, 440 Mobile). Pinned, it never starts taller than the screen.
• Expanded width: 10–100% of the full width (the screen, when the section is full width). Default 100%.
• Expanded height: Fit the screen or Custom. Fit the screen grows it to the visible screen: below a sticky header, and never taller than the screen, phones included. Custom grows it to the height you set (120–2000 px), exactly as set. Default: Fit the screen when it's pinned; when it isn't pinned, its starting height (it only grows wider). The editor canvas and Preview show it at the real size for the screen you're viewing (desktop, tablet or phone).
• Starting corners: 0–120 px. Default 32.
• Final corners: 0–120 px. Default 0.
• Scrolling while pinned (% of the screen) (Pin on): 20–300%, in steps of 10. Default 80%. How far the visitor scrolls while it grows. With Tied to scroll it's called Growing takes (% of the screen): the growth's part of the pinned stretch.

Video Playback

Shows for a video file (not a YouTube, Vimeo or DailyMotion link).

• Scroll length (Tied to scroll, Pin on): how many screens of scrolling play the whole video. More = slower. Slow (8 screens), Normal (5, the default) or Fast (3), or 1 to 15 with the slider. The video plays across the whole pinned stretch; the frame grows in the first part, then stays full size while the rest plays. Counted in screens, so it feels the same on a phone. At Normal, a 30-second clip plays about 6 seconds of video per screen of scrolling.
• With Pin off, Tied to scroll plays the video while the frame passes across the screen. Turn on Pin it on screen while it grows to choose a scroll length.
• Start playing when the frame is … grown: 0–100%, in steps of 5. Default 80% for Tied to scroll, so the start of the video isn't spent on the growth: until then it holds its first frame, and scrolling back under rewinds it. For Loop the default is 0% (plays as soon as it's on screen); set it higher and the video waits on its first frame until the frame has grown that far.

Overlay

• Overlay color: default black.
• Overlay darkness (at full size): 0–90%. Default 35%.
• Text appears at: 0–95% of the growth. Default 55%.
• Text alignment: Left, Center or Right. Default Center. Per screen size.

Headline, Text and Button

• Headline: text style controls, size up to 140. Default 56 (44 Tablet, 32 Mobile), bold, white.
• Text: text style controls, size up to 40.
• Button: Primary or Secondary.

3D Carousel

Cards on a turning 3D ring. Visitors turn it with the arrows, the dots, by clicking a side card, the left and right keys, or by dragging or swiping.

How to add it

1. Open Add > Media and drag 3D Carousel onto the page. It starts with six sample cards.
2. Click Manage Cards, then Add Cards to pick several images at once.
3. Give each a Title, Description, Alt text, Focal point and optional Link this card. From a collection, cards link to their item's dynamic page.
4. Under the list, Autoplay: Turn automatically (pauses while a visitor hovers or tabs into it), on by default, and Time per card (2–20 seconds, default 4).
5. Click Done.

Ring

• Card width: 120–600 px. Default 320 (280 Tablet, 220 Mobile). Per screen size.
• Image height: 80–600 px. Default 220. Per screen size.
• Space between cards: 0–200 px. Default 24.
• Depth (lower = more dramatic): 400–4000 px, in steps of 50. Default 1400.
• Tilt: −30° to 30°. Default 0.
• Fade the side cards: default on.

Controls

• Arrows and Dots: both on by default.

Cards

• Text: Below image, On image or None. Default Below image.
• Card background: default white.
• Corners: 0–40 px. Default 16.

Title and Description

Hidden when Text is None.

• Title: H3, H4 or Text (default H3), plus text style controls up to 48.
• Description: text style controls up to 32.
• With On image, the title and description are white by default; a Text color you pick is used as set.

3D Image

One image as a spinning flat picture, a two-sided flip card or a cube.

How to add it

1. Open Add > Media and drag 3D Image onto the page.
2. Click Edit 3D Image. The 3D Image window opens.
3. Pick a Shape: Flat image, Two-sided card or Cube. Default Flat image.
4. Choose the picture (Image, Front or Front face) with Choose image, and describe it in the alt text box.
5. Two-sided card: add a Back image, or leave it empty to show Back title and Back text on a colored back.
6. Cube: add the Right, Back, Left, Top and Bottom faces. Empty faces repeat the front image.
7. Click Save.

Motion

• Animation: Spin, Flip, Swing, Wobble, Float or None. Default Spin.
• Seconds per turn: 2–60. Default 12. Hidden for None.
• Visitors can drag to rotate: default on. Sideways drags turn it; the page still scrolls up and down on phones.
• Show drag hint and Hint text: default on, "Click and drag to rotate".
• 3D depth (perspective): 300–3000 px. Default 1200.

Size

• Image width (or Cube size): 80–800 px. Default 320 (280 Tablet, 240 Mobile). Per screen size.
• Image height (not for Cube): 60–800 px. Default 240. Per screen size.
• Area height: the space it turns in, 160–900 px. Default 500 (450 Tablet, 400 Mobile). Per screen size.

Look

• Image fit: Fill or Whole image. Default Fill.
• Corners: 0–48 px. Default 12.
• Shadow: default on.
• Area background: behind the image.
• Card back color (Two-sided card): default your theme's primary color.

Card Back Text

Two-sided card only: text style controls for the back, size up to 48.

Examples

• A kitchen remodeler: Before & After, 4:3, labels Always, Slider start Middle, on every project page.
• A photographer's homepage: Image Stack with the intro on, then a Rotating row of 4 favorite shots.
• A boat dealer's hero: Expanding Media with an uploaded video, pinned, headline "Built for open water".
• A salon's services: 3D Carousel of 8 service cards, Text On image, autoplay 5 seconds.
• A product badge: 3D Image as a Two-sided card, front is the product, back says "10-year warranty".

Limits and what it can't do

• 3D Carousel holds up to 24 cards. At 24, Add Cards and Duplicate are grayed out ("Up to 24 cards.").
• Before & After takes exactly two images. It can't come from a collection or Connect to Data.
• Expanding Media, 3D Image and Before & After each hold one item; none of the five widgets has Connect to Data. Image Stack and 3D Carousel can use From a collection.
• Expanding Media with a YouTube, Vimeo or DailyMotion link doesn't play in the background; it shows a thumbnail and play button.
• Expanding Media set to Tied to scroll uses the first 30 seconds of the video.
• Expanding Media set to Tied to scroll shows its cover image (or the video's first frame) instead of playing for visitors with reduced motion turned on.
• Visitors with reduced motion turned on don't see the Image Stack intro or the 3D Carousel autoplay. Search engines see the 3D Image's front image as a normal picture.
• Clients with only Widget content can change images and text, but not the Design panel.

Who can use it

Anyone in your agency with the Mount Olympus tool. Client people need Editor to add, move, design or delete these widgets, or Widget content to change their images and text. When Zeus fills a template, Before & After uses only a real matching pair of the client's photos (name them like "Kitchen before" and "Kitchen after"). See Fill a template with Zeus.

Troubleshooting

• The Before & After photos don't line up: use two photos the same shape, or set Image shape so both are cropped the same.
• I can't find Label position: it only shows for Side to side.
• The Image Stack intro doesn't play in the editor: it plays on the live site.
• Some Image Stack items are missing: items without a photo aren't shown.
• Expanding Media text appears too late: lower Text appears at.
• Clicking the Expanding Media in the editor doesn't open its link: that's on purpose. In the editor a click selects the widget. Use Preview or the live site to try the link.
• Clicking the play button doesn't follow my Expanding Media link: the play button opens the video. Click anywhere else on the picture to follow the link.
• My Expanding Media video doesn't play with the scroll in the editor: Edit mode shows a still. Switch to Preview or check the live site.
• My Tied to scroll video is choppy: open Edit Media and check the line under Playback. While it says Preparing smooth scrolling… it plays less smoothly. It's smooth once it says Smooth scrolling is ready.
• There's no Playback choice for my Expanding Media video: it's a YouTube, Vimeo or DailyMotion link. Upload the video file or pick a client video instead.
• The page feels stuck at the Expanding Media: Pin it on screen while it grows is on. Lower Scrolling while pinned or turn pinning off. With Tied to scroll, choose Fast under Video Playback > Scroll length.
• My Tied to scroll video plays too fast: Design panel > Video Playback > Scroll length > Slow, or drag the slider up. Pin needs to be on.
• Half my video is over before the frame is full size: raise Start playing when the frame is … grown (default 80%).
• The 3D Carousel looks flat: lower Depth (lower = more dramatic) or add Tilt.
• I can't add more cards: the 3D Carousel stops at 24.
• The cube shows the same picture on every side: add the other faces in Edit 3D Image; empty faces repeat the front.