Code Insert Widgets

The Code Snippet widgets make code insertion a lot easier than using the default EverWeb Snippet widget and the code boxes in the Page Inspector. All the content on this page - apart from the header/navigation - is created using the jQuery version of the Code Insert widget.
The jQuery version adds the link to the version of jQuery required by the EverWeb application.

HTML

The large box for HTML code is first in the widget settings to make it easier to access it without scroling.

Meta Data

The widget inserts the Viewport meta tag and there is a box for inserting any other ones such as a redirect, author and no follow.

Font Awesome

There is a checkbox for inserting the link to the Font Awesome CDN and a field for updating the version number of the stylesheet when new icons are added.

Google Fonts

If a Google hosted font is used in the styles, checking a box will insert the link to it. The font family name is entered into a box in the widget settings.

Maximum Width

Widgets are made responsive by checking the Full Width box in the Metrics inspector. Responsive pages need a maximum width setting to limit their spread at wide browser settings. Checking the "Set Maximum Width" box in the widget settings centers the content and applies the maximum width that is entered into the box.

Stylesheets

Stylesheets are dragged into the EverWeb Assets List and are selected by checking a box and using the "Choose" button.

Internal Styles

There is a large box for inserting internal styles. Opening and closing <style> tags are NOT required since the widget does this.

Javascript

External Javascript files can be dragged into the Assets List and selected in the same way as stylesheets.

Head Code

The Head Code box can be used for any extra stylesheets, scripts or vanilla javascript.

Footer Code

The Footer Code box can be used for any items which don't need to be loaded until the visible page content has done so. An example would be Google Analytics code.
In this case, the box is used for the HTML that creates the full width footer and the javascript which creates the smooth scroll to the top function.

Code Widget Controls
Code Widget Settings

© EverWeb Widgets -

EverWeb Widgets