Creating a Web template with a Wizard

With the Designer you can design Web templates and output them through Workflow or as an attachment to an email when generating Email output.

Capture On The Go templates are a special kind of Web templates; see Capture OnTheGo template wizards.

A Web Template Wizard helps you create a Web page that looks good on virtually any browser, device and screen size.

Foundation

All Web Template Wizards in Connect Designer make use of the Zurb Foundation front-end framework. A front-end framework is a collection of HTML, CSS, and JavaScript files to build upon. Foundation is a responsive framework: it uses CSS media queries and a mobile-first approach, so that websites built upon Foundation look good and function well on multiple devices including desktop and laptop computers, tablets, and mobile phones. Foundation is tested across many browsers and devices, and works back as far as IE9 and Android 2. See http://foundation.zurb.com/learn/about.html and Using Foundation.

After creating a Web template, the other contexts can be added, as well as other sections (see Adding a context and Adding a Web page).

To create a Web template with a Template Wizard:

    • In the Welcome screen that appears after startup, choose Browse Template Wizards.
      Scroll down until you see the Foundation Web Page Starter Template Wizards.
    • Alternatively, on the File menu, click New, expand the Template folder, and then expand the Foundation Web Page Starter folder.
  2. Select a template. There are 4 types of Web Template Wizards :
    • Blank
    • Contact Us
    • Jumbotron
    • Thank You

    If you don't know what template to choose, see Web Template Wizards further down in this topic, where the characteristics of each kind of template are described.

  3. Click Next and make adjustments to the initial settings.
    • Section:
      • Name: Enter the name of the Section in the Web context. This has no effect on output.
      • Description: Enter the description of the page. This is the contents of a <meta name="description"> HTML tag.
    • Top bar group:
      • Set width to Grid: Check this option to limit the width of the top bar contents to the Foundation Grid, instead of using the full width of the page.
      • Stick to the top of the browser window: Check to lock the top menu bar to the top of the page, even if the page has scroll bars. This means the menu bar will always be visible in the browser.
      • Background color: Enter a valid hexadecimal color code for the page background color (see w3school's color picker) , or click the colored circle to the right to open the Color Picker.
    • Colors group: Enter a valid hexadecimal color code (see w3school's color picker) or click the colored circle to open the Color Picker, and pick a color for the following elements:
      • Primary: links on the page.
      • Secondary: secondary links on the page.
      • Text: text on the page contained in paragraphs (<p>).
      • Headings: all headings (<h1> through <h6>) including the heading section's subhead.
  4. Click Finish to create the template.

The Wizard creates:

  • A Web context with one web page template (also called a section) in it. The web page contains a Header, a Section and a Footer element with dummy text, and depending on the type of web page, a navigation bar, button and/or Form elements.
  • Resources related to the Foundation framework (see Web Template Wizards): style sheets and JavaScript files. The style sheets can be found in the Stylesheets folder on the Resources pane. The JavaScript files are located in the JavaScript folder on the Resources pane, in a Foundation folder.
  • A collection of Snippets in the Snippets folder on the Resources pane. The Snippets contain ready-to-use parts to build the web page. Double-click to open them. See Snippets for information about using Snippets.
  • Images: icons, one picture and one thumbnail picture. Hover your mouse over the names of the images in the Images folder on the Resources pane to get a preview.

The Wizard opens the Web section, so that you can fill it with text and other elements; see Content elements, Web Context and Web pages.

Web pages can be personalized just like any other type of template; see Variable Data and Personalizing content.

Use the Outline pane at the left to see which elements are present in the template and to select an element.

Use the Attributes pane at the right to see the current element's ID, class and some other properties.

Use the Styles pane next to the Attributes pane to see which styles are applied to the currently selected element.

Click the Edges button on the toolbar to make borders of elements visible on the Design tab. The borders will not be visible on the Preview tab.

Web Template Wizards

Foundation

All Web Template Wizards in Connect Designer make use of the Zurb Foundation front-end framework. A front-end framework is a collection of HTML, CSS, and JavaScript files to build upon. Foundation is a responsive framework: it uses CSS media queries and a mobile-first approach, so that websites built upon Foundation look good and function well on multiple devices including desktop and laptop computers, tablets, and mobile phones. Foundation is tested across many browsers and devices, and works back as far as IE9 and Android 2. See http://foundation.zurb.com/learn/about.html and Using Foundation.

Jumbotron

The name of the Jumbotron template is derived from the large screens in sports stadiums. It is mostly useful for informative or marketing-based websites. Its large banner at the top can display important text and its "call to action" button invites a visitor to click on to more information or an order form.

Contact Us

The Contact Us template is a contact form that can be used on a website to receive user feedback or requests. It's great to use in conjunction with the Thank You template, which can recap the form information and thank the user for feedback.

Thank You

The Thank You template displays a thank you message with some text and media links.

Blank web page

The Blank Web Page template is a very simple Foundation template that contains a top bar menu and some basic contents to get you started.

 

  
  • Last Topic Update: 24/01/2017 09:32
  • Last Published: 7/6/2017 : 9:48 AM