Video Transcript:

In this video I am going to make a responsive page in EverWeb like the one you see on screen.

By just creating one page in EverWeb I can make a web page that can be used on mobile phones, tablets and desktops.

I’m going to start by creating a new EverWeb project file. Using the Theme Template Chooser I can use the responsive page style of the blank theme, or use the home page of the Blank Responsive Theme.

In the footer of the page is a Responsive Row widget with the ‘Made With EverWeb’ logo. We will come back to this later.

First of all, let’s add the Navigation Menu widget to the page.

When I drag and drop the widget on to the page, it is automatically ‘Full Width’.

Next go to the Widget Settings and apply the settings you require. Remember to use the ‘Responsive Options’ if you want the menubar to become a hamburger icon menu when viewed on mobile devices.

After styling the Navigation Menu widget, go to the Widgets Tab and drag and drop a Responsive Row widget on to the page, underneath the Navigation Menu widget.

We will be using these Widget Settings throughout the video.

I’m going to add an image directly on to the Responsive Row widget from the Assets List.

Now I am going to add a TextBox and copy and paste in some text that I had prepared earlier.

Use the the grab handles or the Metrics Inspector to resize the TextBox. For viewing on mobile phones use a width of less than 320 pixels.

To add some spacing between the image and the TextBox, click on the Responsive Row widget itself and then go to the Widget Settings. Set a value for ‘Between Columns’

You can also add padding at the top and bottom of the Responsive Row widgetl. In this example, a value of 50-60 pixels usually works well.

Now lets add a second Responsive Row widget to the page. Drag and drop it on to the page. For this Responsive Row widget I am going to add a background image.

Go to the Shape Options tab and select ‘Image Fill’. Select the image that you want to use for the background. In my example, I am also going to set the image at 50% opacity.

Next I will drag and drop an image into the Responsive Row widget from the Assets List.

I am going to select the image then go to the Shape Options and select ‘Scale to Fit’ and then I can resize the image as I want within the Responsive Row.

Now I am going to insert some text so I am going to add a TextBox. This appears as Full Width as I had not selected the Responsive Row widget first.

To add the TextBox in to the Responsive Row widget, select the text and then secondary click. ‘Pick Layer’ shows that the TextBox is selected so now use the ‘Embed In’ option to move the text box to in to the Responsive Row widget.

I can move objects in the Responsive Row widget around by dragging and dropping them in place. Next I will copy and paste my text in to the TextBox.

Again click on the Responsive Row widget itself and use the Widget Settings to add in the required padding.

Add another Responsive Row widget to your page and this time drag and drop the Contact Form Advanced widget on to the page. As before I can also add a TextBox and apply styling options as required.

Add the next Responsive Row widget to the page. This time I am going to drag and drop four images into the widget.

Now I am going add some padding between them using the Responsive Row widget’s ‘Padding’ options. Next I am going to resize the images to fit on one line in the widget.

Using the same method I can add in another Responsive Row widget to include Apple and Google Play Store images.

I can adjust the background colors of the Responsive Row widgets so that my page highlights various different sections.

Once complete, Preview to see the end results!

In the next video I will refine the page to show you some finishing options and some extra hints and tips to help with responsive design.