EverWeb Logo

EVERWEB VIDEO TRAINING LIBRARY

Build A Responsive Website With Everweb

Video Transcript:


In this video I am going to create a responsive web page in EverWeb using its new responsive design features that are available in EverWeb version 2.8 or higher.


Using EverWeb’s new responsive design tools enables me to create a web page that will dynamically adjust depending on the device that I am using.


In this example I am going to be using the Cubic Theme Template that comes with EverWeb version 2.8.


First of all I am going to create a new website project use the Home page style of the Cubic theme template. I am going to use this home page as the basis of my responsive web page.


As you can see from the page, it is split in to sections and I can use each section to effectively create my responsive web page. My responsive page will look similar to my original home page.


I am also going to use some of the Assets from the Cubic theme home page in my responsive web page.


Next I am going to create and name my master page using the blank home page style.


Remove the EverWeb logo from the page.


In the Page Layout section of the Page Settings, change the Page Layout to Responsive. This is a new layout style that replaces the Dynamic Width layout. Include a footer value of 100 in the Master Page


Now go back to the home page and lets look at some of the features of the page that I want to carry over in to the Master Page.


You can see that I have the Cubic logo and Navigation Menu widget at the top.


In the footer I have four objects that I want to use in my Master Page. Next go back to the master page and add a responsive row widget to the page.


I am going to add the Cubic logo image from the Assets List and drop it on to the page. Secondary click on the image file and use the Embed In menu option to embed it in the responsive row.


Once I have embedded the image file, I can do some editing. First go to the Shape Options menu and change the Fill type to Scale to Fit


Next resize the image to the size that you want it to be on the page.


Once I have finished, I can now drop in the Navigation Menu widget. Size, position and style as appropriate.


I can also make the Navigation Menu widget responsive so that on mobile devices I see a Hamburger menu displayed instead of the menu bar.


Before I finish, I will also remove the EverWeb logo from the footer of the page.


Now I'm going to switch back to my Original home page and copy the objects from the footer that I want to place in to my Master Page.


Once I have copied these objects, I again flip back to the Master Page and drag and drop a second Responsive Row widget on to the page, this time in the footer.


Once the Responsive Row widget has been added to the page, secondary click on it. Use Pick Layer to make sure it is selected.


Now go to Shape Options and set the fill to Color Fill and set the color to black...