Info with media

Your words beside moving pictures

Info with media puts what you want to say, a small line, a title, some text and a button, beside columns of your pictures and videos that move past each other, one up and the next down. It suits the top of a page, a portfolio or a product story. A visitor can click any picture to open it large.

Your words

1. Open the Content tab. The words come first: Small line above the title, Title and The text under it. A return in the title breaks the line there.
2. Write the button, if you want one. Button text is what it says, and Button link is where it goes. A button can also add an event to the visitor's calendar; give it words that say so.

Pictures and videos

1. Add a picture or a video. On the Content tab, each item has Picture, or the still shown before a video plays, and Video (optional). A video plays muted on its card and with sound when it is opened. Up to 40 items.
2. Give it a label and a caption. The Label is the small tag on the card. Caption when opened shows under it when it is opened large.
3. Describe it for screen readers. A few words on what the picture shows, for visitors who cannot see it.

Start from a template

Every Info with media widget starts from a template: Studio, Gallery wall or Feature split, each in a dark and a light version. The Templates tab, first in the editor, shows them all. One click puts a template on your widget straight away. Your words, links and pictures stay; only the look changes, and Undo takes it back.

How the columns move

On the Design tab, The pictures sets how many Columns there are (two on a phone at most), their Height, the space between pictures and the Shape of each picture. Under Motion:

1. Choose what moves them. The columns move on their own, only as the page scrolls, or both. Scrolling up runs them back.
2. Set the speed. Speed on their own and Speed with the page's scroll are separate. First column runs up or down, and the next one runs the other way.
3. Hold them still under the pointer. Pause while pointed at stops them while a visitor points at the pictures. They always hold still while one is open.

Pictures on the right or left puts the columns on that side of the words. On a phone the pictures sit under the words.

An item opened large

A click on a picture opens it large, with its caption, a close button and arrows to the next. By default it grows out of the picture that was clicked and shrinks back into it when it closes; How it opens can be set to At once instead, and visitors who ask for less motion get a short fade.

1. Edit the opened item with its own tools. Above the preview, the View switch has Info with media and Opened item. Choose Opened item and the preview shows one opened large, with the tools for its background, label, caption, close button and arrows.
2. Go back to the widget. Choose Info with media on the same switch, and the preview and the tools are the widget's again.

Two screens: Desktop and Mobile

Above the preview is a switch with two choices, Desktop and Mobile. Every design setting is kept for each of them separately, so the widget can be laid out one way on a computer and another on a phone. A tablet is drawn from the Desktop settings. The words, pictures and videos are shared by both.

A click on any part of the widget in the preview opens that part's own tools, and every section of tools has its own Undo.

Your files

Every picture and video you upload is kept in your account, not in one widget, so you can use it again anywhere. Beside each picture and video field there is a Your files button that lists everything you have uploaded before. Pick one and it is used at once, with nothing uploaded twice. Your account page shows how much space your files take.

Publish and put it on your site

1. Press Publish changes, at the top right. It lists what you changed and asks once. Publish sends it.
2. Copy the code. The window that says your widget is live has the embed code and a Copy code button. The same code is on the Settings tab, and on the dashboard as Copy embed on the widget's card.
3. Paste it once, where the widget should appear. It is a frame and a short script together; keep both. A page that already has the code picks up every later publish within a minute. Embedding on your site shows where to paste it on each website builder.

If something goes wrong

A video shows only its still. Some phones, in low power mode, do not play videos on their own. The still is what they show until then; opened large, the video plays with its controls.

The columns do not move. A visitor whose device asks for less motion sees them still, on purpose. Check that The columns move is not set to move only with the page's scroll, on a page too short to scroll.

Anything else: hello@dreamwidget.com, and tell us the widget's name.