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.Though it's by far the least expensive option in this roundup - roughly $60 cheaper than its two rivals! - TurboWeb packs an impressive amount of power for its low price. Once complete, Preview to see the end results! I can adjust the background colors of the Responsive Row widgets so that my page highlights various different sections. Using the same method I can add in another Responsive Row widget to include Apple and Google Play Store images. Next I am going to resize the images to fit on one line in the widget. Now I am going add some padding between them using the Responsive Row widget’s ‘Padding’ options. This time I am going to drag and drop four images into the widget. As before I can also add a TextBox and apply styling options as required.Īdd the next Responsive Row widget to the page. Next I will copy and paste my text in to the TextBox.Īgain click on the Responsive Row widget itself and use the Widget Settings to add in the required padding.Īdd another Responsive Row widget to your page and this time drag and drop the Contact Form Advanced widget on to the page. I can move objects in the Responsive Row widget around by dragging and dropping them in place. ‘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.
To add the TextBox in to the Responsive Row widget, select the text and then secondary click.
#EVERWEB RESPONSIVE DESIGN FULL#
This appears as Full Width as I had not selected the Responsive Row widget first. Now I am going to insert some text so I am going to add a TextBox. 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. Next I will drag and drop an image into the Responsive Row widget from the Assets List. In my example, I am also going to set the image at 50% opacity. Select the image that you want to use for the background. Go to the Shape Options tab and select ‘Image Fill’.
For this Responsive Row widget I am going to add a background image. Now lets add a second Responsive Row widget to the page.
In this example, a value of 50-60 pixels usually works well. You can also add padding at the top and bottom of the Responsive Row widgetl. To add some spacing between the image and the TextBox, click on the Responsive Row widget itself and then go to the Widget Settings. For viewing on mobile phones use a width of less than 320 pixels. Use the the grab handles or the Metrics Inspector to resize the TextBox. Now I am going to add a TextBox and copy and paste in some text that I had prepared earlier. I’m going to add an image directly on to the Responsive Row widget from the Assets List. We will be using these Widget Settings throughout the video. Remember to use the ‘Responsive Options’ if you want the menubar to become a hamburger icon menu when viewed on mobile devices.Īfter 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. Next go to the Widget Settings and apply the settings you require. When I drag and drop the widget on to the page, it is automatically ‘Full Width’. We will come back to this later.įirst of all, let’s add the Navigation Menu widget to the page. In the footer of the page is a Responsive Row widget with the ‘Made With EverWeb’ logo. 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. I’m going to start by creating a new EverWeb project file. In this video I am going to make a responsive page in EverWeb like the one you see on screen.īy just creating one page in EverWeb I can make a web page that can be used on mobile phones, tablets and desktops.
0 kommentar(er)
