Build a responsive website in EverWeb
EverWebResponsive WebsiteSoftwareWeb DesignWidgets

Your First EverWeb Responsive Website 3: Working with Responsive Pages

This post is also available in: frFrançais (French)

In the previous blog in this series, ‘Your First EverWeb Responsive Website 2: Page Design‘ we created a responsive page and looked at its features such as Page Layout Settings and the Responsive Row widget. We also added the Navigation Menu widget to the page.

This post looks at how to work effectively with objects on the page such as text, shapes, images, media and widgets. First, let’s take a look the EverWeb widgets that have been specifically created for use in a responsive page layout…

Responsive Row Widget
The Responsive Row widget a container for full width and non-full width objects. Whilst full width objects are usually added to a responsive page on their own, you may want to place a full width object inside a Responsive Row Widget when you want some extra top and bottom padding, or when adding a background color.

The Responsive Row widget is also the way to include non-full width objects on a responsive page. Just select the Responsive Row widget and drag and drop the objects you want into it, or use the Toolbar to include text, shapes or images or widgets.

The Responsive Image Gallery Widget
As you probably have noticed, EverWeb 2.8 has two Image Gallery widgets! You can use both widgets in a responsive page, although the ‘Image Gallery Widget’ has to be placed within a Responsive Row widget as it is a non-full width object. T he ‘Responsive Image Gallery Widget’ is a full width object so does not have to be placed inside a Responsive Row widget.

Both widgets work in the same way but the Responsive Image Gallery widget offers a variety of customizable display styles allowing you greater design flexibility than found in the Image Gallery widget.

FlexBox Widget
The FlexBox widget lets you combine text, an image, or video, and a button in any combination you want. This provides an amazing amount of flexibility in designing page layouts with the button being an effective ‘Call To Action’. Objects in the FlexBox widget can be included or excluded so that the page has the look you want.

Text Section Widget
This is another very flexible widget where an image can be used as the central focus, with text and buttons used as required. Again, many different layout combinations are possible and you can include or exclude objects as desired.

Navigation Menu Widget
Whilst the Navigation Menu widget, although not a new widget, has been updated in EverWeb 2.7 and 2.8 with new ‘Responsive Options’. Perhaps the most useful addition to the widget is that you can add a Hamburger style menu to your site including your own logo on the opposite side of the Hamburger.

Working in a Responsive Page
Working with text, shapes, images, media and widgets in a responsive page is the same experience as when working in a fixed width page layout. It’s worth noting, though, that there are some minor differences when using a couple of EverWeb’s features in a Responsive Page Layout:

  1. Scroll Position is used to hyperlink to a specific point on a page. Responsive pages are scaleable, but at present Scroll Positions anchors are fixed. Therefore, it is best not to use this feature in responsive pages. Hopefully this feature will come to responsive pages in the future!
  2. If you add a Picture Frame to an image in a responsive page, the picture frame and the image will display one after the other instead of one of top of the other when previewed or published. As with Scroll Position it is best to limit use of this feature to Fixed Width layouts at present.
  3. Changing the Page Layout. If you have a fixed width layout that you want to convert to a responsive page layout, you may think it is as simple as a change in Page Layout from Centered/Left Aligned to Responsive. However, changing page layout may cause problems as the two page layout types are fundamentally different. EverWeb will warn you of this and the fact that changing the page layout type cannot be undone if you proceed. Generally it’s best to create a new responsive page and rebuild the fixed width page from the ground up.
  4. Hyperlinking. Using the new FlexBox and Text Section widgets lets you include hyperlinked text when you use the Styled Text Editor within the Widget Settings of these widgets. The text will inherit the hyperlink styling defaults used in the project’s Default Styles.

Sizing and Moving Objects
Moving full width objects is easy as they can only move up and down the page. When you select a full width object you will see that it only has selection handles on the top and bottom and not at the sides. Use these selection handles to resize the height of the object.

Objects that have been placed within a Responsive Row widget will display selection handles on all sides of the selected object.
Margins so can be resized in any dimension.

To move a full width object, just drag and drop it to its new location. When moving a Responsive Row widget, put the mouse cursor on some empty space inside the widget first then drag and drop, otherwise you may end up drag and dropping an object that you have placed within the Responsive Row widget itself.

Embedding Objects
When adding objects to a responsive page, they are added to the page at full width by default. If you have selected a responsive row widget first, however, the object that you add will be placed within the Responsive Row widget as a Fixed Width object.

To move objects from inside one Responsive Row widget to another Responsive Row widget, just drag and drop the object from the first Responsive Row widget to the target Responsive Row widget. You can also secondary click on the object you want to move, then use the ‘Embed In’ option. Click on the name of the Responsive Row that you want the object to be placed in.

You can also embed full width objects into a Responsive Row widget by using the ‘Embed In’ option. In this case the full width object remains at full width inside the Responsive Row widget, so use the Metrics Inspector to turn off ‘Full Width’ if you want the object to become Fixed Width.

Setting Margins
One final tip is to set margins for full width objects on the page. Select the full width object you want to add a margin to, then go to the Metrics Inspector. Use the Left and Right Margin options as required. Setting margins is useful so that your content does not go right to the edge of the display.

In the next instalment, we’ll take a look at blogging in a responsive environment.

As always if you have any questions or comments, please let us know in the Comments Section below, thanks!

This post is also available in: frFrançais (French)

You may also like

Comments

Leave a reply

Your email address will not be published. Required fields are marked *

More in EverWeb