The Templates widget shows website templates as pictures on a site, for example on your agency's own website so prospects can browse your designs. Each template shows as a desktop, tablet and phone picture together, or as a desktop picture only. Visitors can open a live preview of any template in a new tab. It's in the Showcase category of the Add panel. You can also search the Add panel for "templates".
Pick the templates
- Add the widget, then click Manage Templates on the toolbar (or double-click the widget).
- On the left are the templates you can show. Use the tabs to see All, ContentForge templates or Your templates (your agency's own, from the Templates library). Type in Search to find a template by name or industry.
- Click Add next to each template you want. It appears on the right, under Shown on the page.
- Drag the handle next to a template to change the order. Click the X to remove one.
- Optional: type a short Description for a template. Leave it blank to show the template's industry instead (its categories in the Templates library).
- Click Save.
Select all adds every template in the list at once, and Clear removes them all. Above the list you can see how many are picked, for example "12 of 40 selected". When a tab or a search narrows the list, the buttons read Select all shown and Clear shown and only change the templates you can see. A widget shows up to 48 templates.
Show every template, including new ones
Turn on Show all templates, including new ones at the top of Manage Templates to skip picking. The widget then shows every template you can show, newest first (up to 48). Templates added later appear on their own, and deleted ones drop out. Turn it off to go back to your own picks and order.
Until you pick templates, the editor shows sample cards and the published page shows nothing.
Only your agency's own templates and ContentForge templates are ever listed. Other agencies never see your templates, and you never see theirs.
Always up to date
The widget stores which templates you picked, not copies of them. When a template is renamed or its pictures change, the widget shows the new name and pictures the next time the page loads. When a template is deleted, it simply disappears from the widget.
The pictures
The pictures are screenshots of each template's home page. They're taken by themselves and refreshed whenever the template is saved (Save Template in the template's editor). With Desktop, tablet & phone, the tablet frame shows the template's real tablet view and the phone frame its real phone view, not a shrunken desktop picture. A template that has only its desktop picture so far shows the desktop view on its own until its tablet and phone pictures are ready, usually within a few minutes. The editor tells you when that's the case. The pictures load in the right size for each screen and only when visitors scroll to them.
The device frames scale with each card. On narrow cards, such as on a phone, the tablet and phone frames grow a little so they stay easy to see.
Design panel
- Pictures: Desktop, tablet & phone or Desktop only, a Browser bar over the desktop picture, the Device frame color, and an optional Background behind the pictures.
- Layout: Templates per row (1 to 4, set for each screen size; phones show 1 unless you change it), the space between columns and rows, and the alignment of the text and buttons.
- Rows Shown: turn on Show only some rows and set Rows to show. Turn on the "See all" button to let visitors open the rest. Set the button text and the text once opened (for example "Show fewer"). Its look is under See All Button. Rows are counted for each screen size, so 2 rows of 3 on desktop is 6 templates, and 2 rows of 1 on a phone is 2.
- Card: background, border, corners, text padding, shadow and the hover effect (Lift, Zoom picture or None).
- Template Name and Description: show or hide each, and set the font, size, color and style. The name follows your theme's style for its tag (H2, H3, H4 or Text) until you change it here.
- Preview Button: turn the Preview button on or off and change its text.
- Button design (the Preview Button section and the See All Button section): start from your theme's Primary or Secondary button style, then change the Size (Small, Medium or Large), Font, Text size (for each screen size), Weight, Corners, Fill, Text color, Border color and Border width, and the Hover fill, Hover text color and Hover border color. Anything you leave alone follows your theme. Use the theme's button again clears your changes.
The widget looks the same in the editor, in Preview and on the published site. The See all button works in all three.
What visitors see when they open a preview
Preview opens the template in a new tab as a read-only website. Visitors don't need to log in. They see the template only, never the editor or any client's information, and search engines don't list it. The preview address uses your client domain when you have one set up and verified.
Zeus
Zeus can add the Templates widget and set up its design (pictures, per row, rows, See all and the Preview button) when you ask in the editor chat. You pick the templates yourself in Manage Templates.