Page Builder (previously HTML module)

The CrowdComms home page builder offers customisable HTML home pages with no code needed! You can choose from six fully responsive design templates with at least two variations on each theme (that’s 14 different ways to start your home page design!). From there, it’s as simple as changing the text, swapping the logo and images, and adding a few links. Build pages for any device in minutes to launch your Event App with a custom design - and if you’re looking to get closer to your brand guidelines, you can also jump into the page HTML and CSS to change the code. Content 1. Choosing a Template 2. Building Your Page 3. Template Types

1. Choosing a Template

1.    First, you will need to log into your CrowdComms dashboard (CMS) and input your details. 

2.    Upon successful login, select the Event App where you want your Home Page to be created.

3.    Then click on ‘Builder’ from the left-hand menu. 

4.    You will then see the Module tile selection screen appear. Click on the ‘Page Builder’ option. 

5.    A pop-up will appear, which will enable you to rename the module. 

6.    You will then see nine templates for you to choose from. Each template consists of additional variations to give you even more flexibility over your App design. 

7.    These templates can be broken down into two categories; Home Page templates and Content Page templates.

8.    The templates that are on offer are:

a.    Geneva - Home
b.    California - Home
c.    Sahara - Content
d.    Monsoon - Content
e.    Cornucopia - Home
f.    Iconic - Home
g.    Rio - Home
h.    Dixie - Home
i.    Workspace - Home

9.    If you hover over each template, you can click on the ‘Preview this template’ button to see a quick view of your chosen template design before committing to it.

10.    Once you’ve chosen a template and are ready to start building your page, click on the ‘Build using this template’ button.

 

Choosing-a-template.png

2. Building Your Page

1.   Once you’ve clicked on the ‘Build using this template’ button, you will be taken to another page where you will be able to see the live preview of your build on a mobile device. 

2.    Currently, you won’t be able to see the live preview on a desktop. However, if you open your App in another tab, you’ll be able to preview your page. To start building, click on ‘Open Page Editor’.

3.    Each template contains different input types, in some, such as Geneva and Rio, you can add videos and on Dixie, you’ll be able to add your sponsor’s logo.

4.    Depending on the templates, below is the list of components that you can add to your page:

a.    Content - small blocks of text
b.    Long content - longer blocks of text that support multiple lines
c.    Text colour picker 
d.    Images – background, header & widget
e.    Linked video from Video Library
f.     Background video - embedded from an external link
g.    Icons
h.    Date & time - for a countdown timer
i.     Call to action (CTA) and Widgets
j.     Sponsor’s logo
k.    Tags
l.     Custom CSS 

5.    Once you’re happy with your design, don’t forget to click ‘Save Template’.

    Building-a-template.png

    3. Template Types

    Geneva

    1. In general, Geneva contains a full screen background image that flexes across all devices with interactive tiles for delegates to navigate to any chosen section of the site.
    2. There are four different variations for you to choose from:
      a. Vertical logo with video
      b. Horizontal logo with video
      c. Vertical with countdown
      d. Horizontal with countdown
    Vertical and Horizontal Logos with Videos
    1. On these templates, you can add a background and header image which will appear as your logo.
    2. The logo will appear as vertical or horizontal depending on the template that you choose.
    3. You can add an introduction to your page which will appear as a long section of content covering multiple lines at the top of the page. You can also set the text colour of your Introduction.
    4. You can then link a video, which you must first upload to your Video Library bank in the Dashboard. To find out how to do this, click here.
    5. On these templates, you’re able to add a Primary Action. Essentially, it is a short block of text which you can link to a different Module within your Event App. For example, you can add ‘Check out clips from last year’s event’ and link this text to your Video-on-Demand module page. You can also set the text colour of your Primary Action to make it pop!
    6. Finally, you can add an unlimited number of widgets to your page. For each widget, all you need is the name, an image, and a link to another Module within your Event App.
    Vertical and Horizontal Logos with Countdowns
    1. Similar to the above, on these templates, you can add a background and header image which will appear as your logo.
    2. The logo will appear as vertical or horizontal depending on the template that you choose.
    3. You can add an introduction to your page which will appear as a long piece of content covering multiple lines at the top of the page. You can also set the text colour of your Introduction.
    4. To add the countdown timer, add the date and time that you want the timer to count down to. For example, this could be the date and time of your event. If you leave these fields blank, it will automatically default to your Event App start date and time.
    5. On these templates, you’re able to add a Primary Action. Essentially, it is a short block of text which you can link to a different Module within your Event App. For example, you can add ‘Check out clips from last year’s event’ and link this text to your Video-on-Demand module page. You can also set the text colour of your Primary Action to make it pop!
    6. Finally, you can add an unlimited number of widgets to your page. For each widget, all you need is the name, an image, and a link to another Module within your Event App.

    Geneva.png


    California

    1. California contains a flexible grid of tiles with image backgrounds, clear calls to action and standout labels for a clean and simple home page.
    2. There are two variations of this template for you to choose from:
      a. 1x4 hero grid
      b. 2/4 hero grid
    1x4 Hero Grid

    1. On this template, you can add a background and header image which will appear as your logo.


    2. You can then add an introduction to your page which will appear as a long piece of content covering multiple lines at the top of the page. You can also set the text colour of your Introduction.


    3. Finally, you can add up to four widgets to your page. For each widget, all you need is the name, an image, and a link to another Module within your Event App.

    2/4 Hero Grid
    1. On this template, you can add a header image which will appear as your logo.
    2. You can then add an introduction to your page which will appear as a long piece of content covering multiple lines at the top of the page. You can also set the text colour of your Introduction.
    3. Finally, you can add up to six widgets to your page. For each widget, all you need is the name, an image, and a link to another Module within your Event App.

    California.pngSahara

    1. Sahara offers a collection of blog-style information pages that can be used for blog posts, info booths and help desk pages.
    2. There are two variations of this template for you to choose from:
      a.    Info Page (Showcase)
      b.    Info Page (Minimal)
    Info Page (Showcase)
    1. On this template, you can add a Hero image and an overlay colour on the image, which will appear as the background header at the top of the page.
    2. You can then add a title and a description as well as taglines, which will appear on top of the background image at the top of the page.
    3. You can add sections in the content area of the page.  For each section, you need a Section Label and content, which you can add to the rich-text editor field. 
    4. You can also play around with the colours, including the background, content call-to-action background and call-to-action colours.
    5. In each section, you will also be able to add a call-to-action button with your own bespoke text and a deep link to link the button to a specific Module within your Event App.
    Info Page (Minimal)
    1. On this template, you can add a Hero image and an overlay colour on the image as well as a text watermark which will appear as the background header at the top of the page.
    2. You can then add an Icon image, a title and a short description which will appear after the background image at the top of the page.
    3. You will be able to add sections in the content area of the page. For each section, you need a Section Label and content, which you can add to the rich-text editor field. 
    4. You can then add Sidebar Widgets to your page. For each widget, all you need are the content tag, colour, an image, a heading and a short description. You can also link your widget to a Module within your Event App.

     

    Monsoon

    1. Monsoon offers a collection of listing pages designed to provide an alternative view and to link to other content.
    2. There are two variations of this template for you to choose from:
      a.    List
      b.    Grid
    List
    1. On this template, you can customise the header with a Hero image and an overlay colour on the image, which will appear as the background header at the top of the page.
    2. You can then add a title and a description which will appear on top of the background image at the top of the page.
    3. You can add a list of items in the content section of the page. For each item, you need a title, an image, a short description and a content tag. You can also personalise the colour of the tag and its background. 
    4. You can then add up to three resource images to the list.
    5. You will be able to link each item to a specific Module within your Event App.
    Grid
    1. On this template, you can customise the header with a Hero image and an overlay colour on the image, which will appear as the background header at the top of the page.
    2. You can then add a title and a description which will appear on top of the background image at the top of the page.
    3. In the content section of the page, you can add a list of items, which will appear on your Event App in grid view. For each item, you need a title, an image, a short description and a content tag. You can also personalise the colour of the tag.
    4. You will be able to link each item to a specific Module within your Event App.

     

    Cornucopia

    1. Overall, Cornucopia is a flexible mobile-first theme. With an immersive, full screen background design and quick-link image tiles to extend the event branding capabilities.
    2. There are two variations of this template for you to choose from:
      a. Eight square tiles
      b. Unlimited scrolling tiles
    3. On these templates, you can add a background and header image which will appear as your logo.
    4. You can then add a title and a message, which will appear at the top of the page. You can also set the text colour of these components.
    5. Finally, you can add either an unlimited number or eight widgets to your page depending on the template that you choose. For each widget, all you need is the name, an image, and a link to another Module within your Event App.

    Cornocopia.png

    Iconic

    1. Iconic is the classic mobile-first, device-agnostic home page. With an embedded icon picker for a fast and simple way to build an accessible home page for all.
    2. There are two variations of this template for you to choose from:
      a. Simple squares
      b. Enhanced squares
    3. On these templates, you can add a background and header image, which will appear as your logo.
    4. You can also add up to ten widgets to your page. For each widget, all you need is the name, an icon (which is easily accessible from the icon picker), and a link to another Module within your Event App.

    Iconic.png

    Rio

    1. Rio offers a huge, full screen impact with a simple quick-link responsive banner tied to the bottom of the screen.
    2. There are two variations of this template for you to choose from:
      a. Static image background
      b. Full background video
    Static Image Background
    1. On this template, you can add a background image and a header image which will appear as your logo.
    2. You can then add a heading and a description which will appear at the top of the page. You can also set the text colour of these components.
    3. Finally, you can add up to six widgets to your page. For each widget, all you need is the name, an icon (which is easily accessible from the icon picker), and a link to another Module within your Event App.
    Full Background Video
    1. On this template, you can embed a video from a third-party platform such as Vimeo or YouTube.
    2. You can also add a header image which will appear as your logo.
    3. You can then add a heading and a description, which will appear at the top of the page. You can also set the text colour of these components.
    4. Finally, you can add up to 6 widgets to your page. For each widget, all you need is the name, an icon (which is easily accessible from the icon picker), and a link to another Module within your Event App.

    Rio.png


    Dixie

    1. Dixie is a great theme for showcasing sponsors with a full-screen background image, event app video and big interactive buttons and sponsor logo placements.
    2. There are two variations of this template for you to choose from:
      a. Feature display with actions
      b. Showcase
    Feature Display with Actions
    1. On this template, you can add a background and header image which will appear as your logo.
    2. You can then add an introduction and a description which will appear in the middle of the page. You can also set the text colour of these components.
    3. You can then link a video, which you must first upload to your Video Library bank in the Dashboard. To find out how to do this, click here.
    4. Finally, you can add up to six widgets to your page. For each widget, all you need is the name and a link to another Module within your Event App.
    Showcase
    1. On this template, you can add a background and header image which will appear as your logo.
    2. You can then add a description title and a description which will appear as a long piece of content covering multiple lines. You can also set the text colour of these components.
    3. You can then link a video, which you must first upload to your Video Library bank in the Dashboard. To find out how to do this, click here.
    4. Finally, you can add up to four sponsor logos to your page. For each logo, all you need is the name of your sponsor, their logo and a link to another Module within your Event App.

    Dixie.png

    Workspace

    1. The Workspace template fits perfectly as a Home Page for your internal comms hub.
    2. On this template, you can set a background colour to the page and add a header logo, which will appear at the top of the page. 
    3. You can then add a section to appear as a vertical banner to the left of your page. All you need is to add a title and a subtitle and pick a colour.
    4. Next, you will be able to add widgets which will appear as a collage of grids on your Home Page. 
    5. To add a widget, you will need a label to appear as a title, a short description, an image, an icon, and colours for the background and text. 
    6. You will be able to link each widget to a specific Module within your Event App.