Build Beautiful, Fully Responsive, Websites easily with EverWeb
https://www.everwebapp.com
EverWeb’s Responsive Row widget lets you to add text, shapes, images and widgets to a responsive web page layout.
The width of a responsive web page automatically adjusts to the device you are viewing the page on.
Widgets such as the Navigation Menu widget can also be Full Width objects and so can be added directly to a responsive page.
Some widgets, such as the PayPal widget, are not full width capable
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 add non full width objects into the Responsive Row widget so that they can work properly on any device they are viewed on.
TextBoxes, shapes and images can also be added in to the Responsive Row widget. These types of objects can be either be used full width or non full width.
The Responsive Row widget can only be used in a responsive page layout so when adding a page to your website use the ‘responsive’ option in the Theme Template Chooser’s Filter to show only responsive theme templates or choose the blank Responsive Theme Template’s home page style.
Alternatively, set the page layout field as responsive in the Page Settings tab of the Inspector Window on an existing page.
Now I am going to add a Responsive Row widget to the page.
Use the Widget Settings if you want to name the Responsive Row. This is a good idea if you are have many responsive row widgets in the page as it helps organise each section of you page.
You will always see the name of the Responsive Row in the top left hand corner of the widget unless you have used the Window, Hide Layout option.
In this example I am going to call my Responsive Row ‘Contact Row’ as I want people to be able to contact me using EverWeb’s Contact Form Advanced widget.
I also want to include an image and some text in to my Contact Responsive Row.
Begin by drag and dropping the Contact Form Advanced widget on to the Responsive Row widget. I now want to add a TextBox with my text in it.
When dragging and dropping objects such as text, shapes and images, they may appear at Full Width if the Responsive Row has not been selected beforehand.
To place an object inside a Responsive Row widget, secondary click on the object that you want to embed in to the responsive row widget. Use the ‘Embed In’ menu option to select the responsive row that you want to embed the object in to.
Finally I will drag and drop my image from the Assets List in to the Responsive Row widget.
Use the Shape Options tab to change the Image Fill as needed.
You can rearrange the order of the objects in the Responsive Row by drag and dropping the object you want to move into its new position.
To use the Responsive Row’s Widget Settings, just click on it the responsive row and then go to the Widget Settings button.
If other objects cover the Responsive Row, use secondary click and choose Pick Layer. Select the ‘Responsive Row’ that you want selected.
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 insert margin option in the Embedded Options Settings section, lets you add horizontal and vertical spacing between each object in the Responsive Row.
You can add a background to a Responsive Row widget. Select the responsive row and then go to the Shape Options button. 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. It’s recommend to use 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.
You can also add margins to the Responsive Row by changing the left and right margin values in Metrics Inspector.
To move a Responsive Row widget, click and drag the Responsive Row to its new location.
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.
