EverWeb Widgets

Responsive Modals

Modal (popup) windows are ideal for adding extra content to web pages without taking up space in the main window. They are also usefull for display items that require the visitor's full attention without the distraction of surrounding visible content.
The available options are listed below …

  • Vimeo Video
  • YouTube Video
  • Google Map
  • Heading, text and link
  • Image with alt text, caption description and lin
  • Signup Form
  • Site Search
  • Contact Form

Navigation Tabs

The navigation can have up to 48 links if required. The tabs are inline and return to two or more lines as the browser or device width is reduced. There is an option to add a descriptive heading above the tabs as shown in the example on this page.
Styles
The tabs can use a web safe font or a non web safe or Google hosted font with a web safe fallback. There are controls for adjusting the font size, color, hover color, background color and its opacity and padding. The tab can have a border and there is a control for setting the minimum width.
The tabs have controls for adjusting the horizontal spacing of the items and the vertical spacing of the rows.

Adding Items

Tabs are added using the EverWeb Widget API Assets List.
To add an item, click the Add button, highlight the entry and add the data in the boxes below.
Click the entry in the list again and it will be editable. Give it the same name as the tab text to make it easy to identify.

iFrame Items

The Vimeo, YouTube and Google Maps items don't require to be paired with a separate widget.
Vimeo
Add an item to the list, select the entry and enter the link text, choose the Vimeo link from the "Link Type" drop down and enter the Vimeo video ID.
Click the entry in the list and name it "Vimeo" to identify it.
YouTube
Add an item to the list, select the entry and enter the link text, choose the YouTube link from the "Link Type" drop down and enter the YouTube video ID.
Click the entry in the list and name it "YouTube" to identify it.
Google Map
Add an item to the list, select the entry and enter the link text, choose the Google Maps link from the "Link Type" drop down and enter the the required address in the "Link ID:" box..
Click the entry in the list and name it "Map" to identify it.

Separate Items

The Text, Image, Signup Form, Site Search and Contact Form all require another widget to create the item that appears in the modal window.
Drag the required widget onto the EverWeb design canvas and give a suitable ID. This ID forms part of a link and must contain no special characters or spaces. For example, if you are adding the signup modal form, use the identifier "signup-modal" - without the quotes of course!
Link Tab
This same ID is entered into the corresponding link tab's "Link ID:" box to create the URL that opens the modal. The "Link Type:" selected from the dropdown menu in the tab widget is "#inlineModal-".
Hiding The Modal
Once the modal widget has been set up, check the box to hide it and, using a drag handle, reduce its height to about 20px to save space but high enough to be able to select it again if it needs updating or editing.
The modal widgets can be placed anywhere in the vertical stack of widgets on the page. In this example, they are placed between the text blocks to act as vertical spacers.

© EverWeb Widgets -