Responsive Scroll Sidebar Widget
Make customizable responsive websites just by drag and drop with EverWeb!
http://www.everwebapp.com
Roddy McKay is third party developer developer who’s been making EverWeb widgets for many years.
For EverWeb’s responsive page layout, Roddy has created a variety of responsive widgets to suit every need.
In this video I am going to look at the Responsive Scroll Sidebar widget from the Responsive Column & Grids widget pack.
The Responsive Scroll Sidebar widget combines a main section that can include a heading, image and text with a customizable scrolling sidebar that can include multiple sections and links.
As you can see widget is fully responsive.
Lets take a closer look at how to create the example shown on screen…
First create a new blank responsive page then drag and drop the Responsive Scroll Sidebar widget on to the page.
You will see an empty box at the top of the page.
Using the Widget Settings I am going to add a heading.
Next I want to add an image so I tick the ‘show image’ checkbox and add an image. Add in your Alt Text for SEO. Adjust the image size as you want using the slider.
Now enter the text that you want to go under the main image.
When finished scroll down the Widget Settings and enter the 'Heading' that you want to use for the sidebar.
To add the sidebar contents use the Assets List.
First click on the ‘Add’ button and enter a name for the first sidebar article.
Next add a title for the first article in the ‘Heading’ box below the Assets List, then the text of the article in the ‘Text’ field.
Ideally, you will want your visitor to go to the page the sidebar article refers to, by clicking on the button associated with the article. Name this button using the ‘Link Text’ field.
Enter the fully qualified URL of the page you want to go to in the ‘URL’ field.
Check the ‘New Window’ field if you want the clicked on button to open the page in a new browser window.
Now add the second article to the sidebar. Again, start by using the ‘Add’ button below the Assets List and enter a new name for the article.
Complete the ‘Heading’, ‘Text’, ‘Linked Text’ and ‘URL’ fields as you want.
To edit the contents of any of the sidebar fields, first click on the relevant asset in the Assets List to select it, then change its fields as required.
Add the remainder of the sidebar articles that you want.
Remember that eventually you may not see all of the sidebar articles once you reach the bottom of the widget. When you preview, or publish, however you will be able to scroll the sidebar to see those that are not visible in the Editor.
With the widget contents complete, let’s style the widget…
Scroll down to the Main Styles section.
First select the font that you want to use, in my example I am going to use Avenir Next.
If you are using a Google Font, tick the Google Font box.
The ‘Fallback Font’ is used if your preferred font is not available on the visitor’s browser. In this case, the web safe font ‘Helvetica’ would be used instead.
Adjust the size of the heading and text for the main section.
Now go to the ‘Sidebar Styles’ section of the Widget Settings
Use the width slider to change the width of the sidebar.
Change the sidebar header font size and color and set the background color.
Next in the ‘Sidebar Items’ section I am going to set the border and separator width and color options to make it easier for visitors to see the individual articles
I am also going to add a Link Border of 1 so that my link button is easier to see.
Finally I am going to go to the ‘Wrapper Styles’ section and set a wrapper around the objects within the widget.
Once you have styled the widget, Preview to test how the widget looks before publishing.
For more information on Roddy’s third party widgets, check out his EverWeb Widgets website at www.everwebwidgets.com
In questa pagina del sito puoi guardare il video online Responsive Scroll Sidebar Widget della durata di ore minuti seconda in buona qualità , che l'utente ha caricato EverWeb 30 novembre 2018, condividi il link con amici e conoscenti, su youtube questo video è già stato visto 908 volte e gli è piaciuto 5 spettatori. Buona visione!
