This post is also available in: Français (French)
In this instalment we’re going to look at the tools that you’ll be using to create a great responsive page.
Objects on Responsive Pages
When building a responsive page, all objects on the page must be full width. An object can be a TextBox, shape, image, audio, video or widget. When you add an object to the page, it will automatically become a full width object. Sometimes this may not be desirable as you may want to use a fixed width (i.e. non-full width) object instead. When you want to do this, the fixed width object needs to be placed inside a Responsive Row widget. We’ll come back to this subject later on… Alternatively, some EverWeb widgets allow you to add objects in a fixed width way within their full width, such as the Text Section or FlexBox widgets.
Building a Responsive Page
When you build a responsive page, remember that a full width object is like a strip the goes across the whole width of the page. As you add objects to the page, generally each full width object ‘strip’ will be added to the page immediately below the last, starting from the top down. You can rearrange these ‘strips’ by dragging and dropping them up and down the page to the location where you want them.
Start at the Top!
One of the features of responsive design is that there is no Header needed which is usually a feature of fixed width website designs. As Responsive design uses full width objects there is no need for a ‘header’ as such. Typically, though, pages have their navigation menu set at the top of the page, so you may want to start you page design by drag and dropping the Navigation Menu widget on to the blank page.
As you’ll see, the widget’s added to the page as a full width object. In the Navigation Menu Widget Settings you will also see a ‘Responsive Options’ section where you can set the navigation to display a hamburger menu instead of a regular navigation when the page is viewed on a mobile device. Tick the ‘Responsive Navigation Bar’ checkbox to activate the ‘Responsive Options’. You can also add in a logo and link it to a page in your website or to an external URL by using the ‘Logo’ options at the bottom of the Widget Settings.
Style the Navigation Menu widget in the same way as you would do when building a fixed width page.
Going to the Bottom
Now that the Navigation Menu widget is in place, scroll down the page. You’ll notice that whilst there’s no header section in a responsive page, there is a footer. In this area is the ‘Made with Love with EverWeb’ image in the center. This image file is placed inside a Responsive Row widget which makes sense as you don’t want the image to be full width on the page.
Experiment by drag and dropping the ‘Made with Love with EverWeb’ ‘eweverweblove.png’ file from the Assets List on to an empty space on the page between the Navigation Menu widget and the Footer. You’ll notice that the image is placed at full width immediately below the Navigation Menu widget. It may also look a bit squashed. Click on the image. You will see that there are only two grab handles to adjust the height of the object. Horizontal grab handles are not needed as the object is a full width object. Drag the bottom grab handle down if you want to see the whole image. With the image still selected, delete it using the backspace key.
The Responsive Row Widget
Now go back to the Footer area and click on the white space inside the Responsive Row widget. To check that the Responsive Row (or any full width object) is currently selected, secondary click on the empty space inside the widget and scroll down to the ‘Pick Layer’ option. The name of the Responsive Row that you have selected should have a checkmark against it. Press ‘Escape’ to clear the menu.
The Responsive Widget is a special widget that allows you to add fixed width objects into a responsive page. This is extremely useful for widgets that cannot be used at full width such as the PayPal, Facebook Page Timeline and Live Photo widgets. It’s also useful when you want to use full width widgets only as fixed width widgets (e.g. the Google Maps widget) or when you want to add TextBoxes, shapes and images as fixed width objects rather than as full width objects.
When the Responsive Row widget is selected the Widget Settings are available. Customize the name of the Responsive Row to make it easier to distinguish one Responsive Row widget from another e.g. you could rename the Responsive Row as ‘Footer Row’.
Objects in the Responsive Row can be vertically or horizontally aligned. Click on the dropdown menus and choose the required options. You can also set ‘Padding’ above and below the objects that are inside the widget. This adds extra spacing between each current Responsive Row and the full width object above and/or below it.
Whilst the Responsive Row is selected, use the Toolbar to add TextBoxes and shapes into the widget. Add other widgets and images by drag and dropping them from the Widgets tab and Assets List respectively. If you want to rearrange the objects inside the Responsive Row widget, drag and drop the object from one location inside the widget to another. As you do this a vertical blue bar appears to guide you in placing the object correctly.
Use the ‘Alignment’ options to align the objects within the Responsive Row as you want and use the Insert Margin option to distribute the objects in the Responsive Row widget horizontally and vertically as desired.
If you want to add a background color to the Responsive Row widget, use the Shape Options menu. Select the Fill section to add a ‘Color Fill’.
Experiment with adding objects to the Responsive Row widget. If you need to delete any object in the widget do so by clicking on the object and pressing backspace. If you want to delete the Responsive Row widget itself, select the widget first and then press backspace. Remember that this action will delete all the contents inside the widget.
In the next post in the series we’ll look at adding content to the space between the header and footer as well as some customization options!
If you have a question about this blog post please let us know in the Comments Section below… thanks!
This post is also available in: Français (French)