Using the Event Website Builder Tool

Introduction The Event Website Builder Tool lets you build a single page or multi-page responsive website to promote your event or meeting.

This drag and drop environment utilizes hundreds of different layout options and automatically creates a navigation menu for your site.

Like the Info Site Builder App, you can insert a block from the EventsAIR Agenda, Speakers, Sponsors and Exhibitor sections and the appropriate information is automatically populated in the website.

Single Page Format - The Structure of the Event Website Builder Tool Using the familiar EventsAIR Drag and Drag Builder, you can create your overall website design by dragging across Menu Blocks.

Each Menu block will contain at least one section of content, and within each section, you can drop in as many content elements are you require.

Navigation in Single Page Format

Each Menu Block you drag across to the builder will automatically create a navigation link in the Navigation Menu at the top of the website.

Multi-Page Format - The Structure of the Event Website Builder Tool Using the familiar EventsAIR Drag and Drag Builder, you can create your overall website design by dragging across New Page and New Sub Pages to the builder.

Each Page or Sub Page will contain at least one section of content, and within each section, you can drop in as many content elements are you require.

Navigation in Multi-Page Format

Each Page and Sub Page you drag across to the builder will automatically create a navigation link in the Navigation Menu at the top of the website.

Each link will open to a new page, and when you have subpages, you will see the main content and subpage choices as well.

Section Options Whenever you click into a section or a content element, you will see these section menu options:

Once you create a new Menu Block, you will click on this icon at the bottom of the block to add a new section.

This icon gives you access to the entire HTML for the page you are currently working in

Section Settings. Clicking on any part of a content section will display this menu. You can control the position and height of the entire section block here.

Content Options Whenever you click into any text or image content, you will see these menu options:

Box Settings. Clicking on an any area of content will show this icon. Clicking on it will let you define and control various settings for the background, style, size and position of the content.

Move Content. Use this icon to move a content block up or down within the section.

Content Element HTML. Clicking on this icon will display the HTML code specific to this content block.

Duplicate Content Element. Click on this icon to duplicate the current block of content you are currently in.

Delete Content Element. Click on this icon to delete the current block on content you are currently in.

Insert Image. Pressing this will let you upload and insert an image at the selected area of text. You can browse or specify an image by URL.

Insert Link. Highlight any desired text or image, and when you select this option, you can insert a hyperlink.

The Format Toolbar When editing text in your Event Website Builder Tool, you will have these formatting options. These are found in a vertical toolbar on the right side of your workspace.

Bold. This option lets you add or remove bolding to your selected text.

Italic. This option lets you add or remove italics to your selected text.

Formatting. This option lets you add or remove underlining, strikethroughs, superscript, subscript and uppercase formatting.

Text Settings. This option lets you adjust font size, letter spacing and line height using sliders. You can also reset all settings here as well.

Color. This option lets you choose your font color either from a grid or by entering the RGB values. You can specific the color for text, background and block background.

Font. This option lets you assign or change the desired font for the selected section of text you are working with.

Paragraph Format. This option lets you choose the heading or paragraph style you wish for a selected section of text.

Alignment. This option lets you format your paragraph with left, center, right and justified alignment.

List. This option lets you indent, outdent, insert a bulleted list and insert a numbered list in your text.

Insert Table. This option lets you insert a table of various width and height at the selected point in your text.

Insert Image. Pressing this will let you upload and insert an image at the selected area of text. You can browse or specify an image by URL.

Insert Link. Highlight any desired text or image, and when you select this option, you can insert a hyperlink.

Remove Link. Highlight any existing hyperlink, and when you press this button, the hyperlink will be removed.

Icon Tool. This option will let you select an icon from a menu and insert it at the selected point in your text.

Insert Element Tool. Selecting this will let you select a button or element and inserted at the selected point in your text.

Clean Tool. Select any formatted text and then press this button to remove all formatting from the text.

The Workflow of Creating a Website Block The heart of the Event Website Builder Tool is your ability to quickly drop in Website Blocks and add sections of pre-formatted content within the block.

1. Drag, drop and name your website blocks.

2. Within each block, add a section to create the general layout of the section.

Hint: You can simply select a basic text block and then choose your desired structure and content from the Content Element Library.

3. Add one or more content elements within the section.

4. Add images and text as required to build your content.

5. Format text using controls from the Format Toolbar. See Format Toolbar for a detailed list of functions and features available in toolbar.

6. Format your text and paragraphs, adding links, images, tables and any other content element as needed.

7. Save and Preview as needed and Save and Publish to test the actual website in its final state.

Steps to Building a Website in the Event Website Builder Tool

A) Create a New Site 1. Select New to start building your Website.

2. Enter the website title.

3. Choose the Design Style:

• Multi Page Website

• Single Page Website

4. Choose your brand (set in the Setup Panel, Brand Editor).

B) Edit the Design Details Before you build your website, you should edit your Site Details.

• Navigation Bar Font – Choose your default font for the Navigation Bar. You can choose your font from a large selection of Google Fonts by clicking on the View Google Fonts option.

• Font Color – Choose your font color here.

• Background Color – Choose the background color for your Navigation Bar here.

• Fixed to Top Checkbox – check this box to fix the Navigation Bar to the top of the page. If you leave this unchecked, the Navigation Bar will “float” and remain visible as you scroll down the page.

• Alignment – Choose your desired alignment for the Navigation Bar:

o Left

o Centered

o Right

• Position – Choose whether you want the Navigation Bar to appear above or below the Website Header.

• Transparency – you can set the transparency of the Navigation Bar, allowing text and image to be visible behind the background color.

C) Designing Your Website Header and Footer For single page websites, you should create your website header in the Details Tab. For multi-page websites, you should create your header and footer here as well.

See sections E and F below for information on designing your website header and footer.

D) Drag Across Your Menu Blocks or Pages/Sub Pages in the Builder 1. Click on Add New Menu Block and drag across to the correct position in your website.

2. Enter the name for this block or page. Remember, this will also become the text for your navigation link at the top of the page.

3. You will also have the option to edit the default name of the folder to be used by your new

page.

4. Click Create.

E) Add a Section to Your New Menu Block or Page 1. Click on the setup cog for your new Menu Block or Page.

2. At the bottom of the page, click on Add New Section.

3. Choose the default format of your new section. You will be adding Content Elements within this section.

4. Edit the text and images as required.

F) Add Content Elements On the left side of your section you will see the vertical Content Element Menu. This menu contains hundreds of different content elements.

You can filter so you can view only the specific content elements you need, such as footers, headers, images, buttons, call to action, and more.

There is a filter specific for EventsAIR, which will display the content elements for:

• Agenda

• Tabbed Agenda

• Presenters

• Sponsors

• Exhibitors

Simply drag across and drop into the current section from the left Content Element menu.

A grey bar appears above or below the current Content indicating where your new content element will be placed.

G) Adding Images 1. Click on the image icon in your specific element or in line with your text.

2. Click to browse for an image, or you can enter a specific image URL that is stored externally, such as in AIR Drive.

3. After you have selected your image, click OK to insert it in your element or in line in your

text.

H) Adding Links 1. Click on the Link icon to place a link in line with your text.

2. Enter the specific link in the Link field

3. Enter the Text in the Text Field.

4. Optionally, enter a title if needed.

5. If you want the link to open a page in a new window, check the New Window check box.

6. Click OK.

I) Remember to Create Restore Points! Remember to create a Restore point whenever you are making significant updates to your website. This will store your current design and content for this specific date and time, and you can always return to this restore point whenever needed.

J) Previewing and Publishing

• Click on Save and Preview to save your work and preview the website in your default browser.

• Click on Save and Publish to save your work and publish your website for public viewing.

Advanced Settings Tab Use this tab to define the following advanced options:

Search Engine Information Use this section to define search engine keywords and descriptions.

• Search Engine Keywords • Search Engine Description

Page Settings Use this section to define pre= and post=HTML code to insert scripts and other programming data within the website.

• Pre </HEAD> Code • Include in <BODY> Tag • Post <BODY> Tag Code • Pre <BODY> Tag Code

EventsAIR Component Settings

Select which components will be visible in the website, if you choose the corresponding EventsAIR content element, such as Presenters, Sponsors, Agenda or Exhibitors.

• Presentation Statuses • Stand Types • Sponsorship Packages

Custom Domain Tab You can purchase a custom domain name along with a SSL Certificate and apply that domain and certificate to this website. This is a great option if you want to offer a custom website name to direct attendees to the site.

Simply check the Use Custom Domain checkbox to indicate that you wish to purchase this option. You will be presented with a popup detailing the one-time cost of the service, and you will also be sent an email with the directions you will need to follow to purchasing the domain and SSL certificate and uploading it to EventsAIR.