Video Transcript:

EverWeb’s Responsive Row widget allows you to add text, shapes, images and widgets to a responsive web page layout or when using a responsive theme template page.

As the width of a responsive web page is dynamic it automatically adjusts to the device you are viewing the page on.

Full width widgets such as the navigation menu widget also adjust automatically so can be added directly in to a responsive page.

Some widgets, such as the PayPal widget, cannot be used at full width and so need to be placed in to a full width container in order to work properly in a responsive web page.

The Responsive Row widget acts as this container. You can add non full width objects into the widget so that they can work properly on any device they are viewed on.

You can add TextBoxes, shapes and images to the responsive row widget as these objects can be either full width or not.

To use the Responsive Row widget, use the blank theme template’s responsive page style or set the page layout to responsive in the Page Settings tab of the Inspector Window.

Add a Responsive Row widget to your page.

You can then directly drag and drop other widgets on to the responsive row widget as desired.

When dragging and dropping object such as text, shapes and images, they may appear at Full Width. This happens if the object has not yet been embedded in to a responsive row widget.

To embed an object into a responsive row widget, select the object you want to embed. Secondary click on the object. Go to the ‘Embed In’ menu option and select the responsive row that you want to embed the object in to.

The object will be added to the responsive row and resized. Use the Shape Options tab to change the image fill if required.

If you have more than one object in a responsive row, you can rearrange the order of the objects by dragging and dropping the object you want to move into its new position.

Use the responsive row widget settings to adjust the horizontal and vertical alignment of the row and the padding of objects in the row.

To select a responsive row, just click on it. Use secondary click and the Pick Layer option if the responsive row is obscured by other objects. Select ‘Responsive Row’.

With the widget selected, go to the Widget Settings and use the Vertical dropdown to align objects to either the top, middle or bottom of the responsive row.

Use the Horizontal dropdown to left, center, right, justify or justify center the objects in the row.

The padding options allow you to add space at the top and bottom margins to the widget, and the between columns option lets you add space between each object. Notice that when using a justified or justified center alignment that the ‘between columns’ option is not available as this is taken care of automatically.

To add a background to the responsive row widget select the responsive row. In Shape Options use the Fill Option of your choice. All Fill Options are responsive. e.g. to change the background color select Color Fill.

To add a background image use Image Fill. We recommend using the Scale to Fill option and a large image to make sure the image is responsive and doesn't get distorted as the browser window is resized.

To move a responsive row widget, click on the responsive row and drag and drop it to its new location. Make sure that the View, Show Layout menu option is on as this will help you see where to click.

If the responsive row is obscured by other objects, secondary click and use Pick Layer to select the underlying responsive row.

To delete a responsive row, select the responsive row and press backspace to delete the widget. Remember that when you delete the widget, all the objects embedded in it will also be deleted.

If you delete a responsive row by mistake, use Cmd+Z to undo the action.