Transform your Event App with tools like the Event Design Studio, Page Designer, and Rich Text Editor—customize colors, layouts, fonts, and more to captivate attendees!
Table of Contents:
- Video Tutorial: Brand & Design Your Event
- Event Design Studio - Branding & Colors
- Advanced Designer
- Page Designer
- Rich Text Editor
- Selection of Templates
1. Video Tutorial: Brand & Design Your Event
2. Event Design Studio - Branding & Colors
The Event Design Studio accessible under the Event Space product in the Experience Manager, enables you to customize your app's branding. By customizing colors, uploading images, and personalizing the log-in page, you can align the app’s design with your event’s branding guidelines.
Customizing Colors
You can easily adjust the visual elements of your app to match your event's branding. The following options are available:
- Menu Text Color: Set the color of the text displayed in your app's menu.
- Menu Background Color: Customize the background color of the menu.
- Content Text Color: Define the color of the primary text within the content area of your app.
- Content Background Color: Choose the background color for the content area.
- Link Text Color: Specify the color of clickable links in your content.
Sample Event Preview
You can view a real-time preview of how your chosen color selections will transform the app's appearance on the right side of the page.
Log-In Page Customization
Loading Image
Enhance your app's branding by incorporating custom images. The loading image will appear during the login process, after users have entered their credentials and are being directed to the event app.
- Uploading Images: Drag and drop an image file or click to upload.
- Supported Formats:
.jpeg,.jpg,.png,.bmp, and.webp. - File Size Limit: 24 MB per image.
- Recommended Dimensions: At least 600 x 300 pixels for optimal display quality.
To ensure your image displays correctly without being cropped, it is recommended to upload an image that maintains a 2:1 aspect ratio.
Background
Design the login page to welcome attendees with a branded look. You can choose between:
-
Solid Background Color: Set a uniform background color for the page.
-
Background Image: Upload an image to be used as the background.
-
Uploading Images: Drag and drop an image file or click to upload.
- Supported Formats:
.jpeg,.jpg,.png,.bmp, and.webp. - File Size Limit: 24 MB per image.
- Recommended Dimensions: At least 3000 x 1688 pixels for optimal display on desktops.
-
3. Advanced Designer
EventMobi’s Advanced Designer feature allows you to customize the look of your app by applying your own CSS style changes. CSS (Cascading Style Sheets) allows you to customize the look, feel, and some of the functionality of your app. If you are interested in learning more about CSS, you can find helpful tutorials here and here.
The Advanced Designer tab can be found within the Event Design Studio located under the Event Space Product.
Any custom CSS code you type into the text editor on the left will be reflected in the app preview screen on the right. You also can navigate around the preview just as you would in a regular app to see which areas your custom CSS has been applied to.
Rest assured, the changes will not affect your actual app until you click “Save Changes” at the bottom, so you can tweak and test as much as you want!
Load Version
This button at the bottom of the page will allow you to go back to a previous saved version of the custom CSS code you applied to the app. Clicking this option will produce a panel where you can select from a dropdown menu that displays a list of all the versions of your CSS by date. After you’ve selected a version and clicked Load Version your preview and the app will revert back to that saved state.
4. Page Designer
The Page Designer lets you create custom, branded pages for your Event App—no design experience needed. Use it to build your app’s homepage or create unlimited additional pages to display as menu items via sections. Customize layouts with templates, widgets like banners, buttons, and videos, and tailor designs for desktop and mobile.
For a full guide on creating, designing, and assigning pages, read more here.
5. Rich Text Editor
The Rich Text Editor in the Experience Manager allows you to easily customize and format text within your Event App. This tool enables you to align your content with your branding guidelines while enhancing the overall appearance and user experience. Here’s how you can make the most of the Rich Text Editor.
Where to Use the Rich Text Editor
The Rich Text Editor is available in several areas throughout the Event App, allowing you to add formatted text wherever needed. Some common places where the editor can be used include:
- People and Company Profiles: Customize the profiles of speakers, attendees, and sponsors.
- Session Descriptions: Add rich, detailed descriptions for your event sessions.
- Company Profiles: Provide in-depth information about participating companies and sponsors.
- Page Sections: Customize content in various sections of your Event App.
- Privacy & Terms Pages: Format the legal and policy information clearly and professionally.
Adding Images to the Rich Text Editor
The Rich Text Editor makes it easy to add images to your content. Use the image icon within the editor to insert visuals, such as logos, photos, or icons, to enhance your descriptions.
Hosting Images Online
To generate image URLs, an image hosting site will need to be used so that the image that you wish to include within the Rich Text Editor will have a unique link that can be used to embed the image. There are many different image hosting solutions available for you to choose from, however it is important to note that hosting images to a solution like Google Drive is not be supported.
One example of an image hosting site that can be used for hosting your images is Cloudinary, which includes various account options to support your image files, including a free account.
Additional Image Hosting Sites To Check Out
- Amazon S3
- Azure Blob Storage
- Google Cloud Storage
Note: The number of images that can be hosted will depend on the image hosting solution that you select. Some solutions do offer a free account option, while others will be available at a cost. Make sure to visit the solution's website to confirm storage, features, packages and pricing.
Support for Google Fonts
The Rich Text Editor supports the full Google Fonts library, enabling you to select from a wide range of fonts and sizes to match your event’s branding. You can add up to 10 fonts to the editor for quick access, or incorporate any Google Font directly through the HTML editor. If you copy and paste content that includes a Google Font, the editor will automatically carry it over for you.
Note: Some fonts, like Gotham, are free for personal use but may require a commercial license for wider use. Always check the licensing terms before using a font.
Over Google Fonts, there are many similar alternatives available that you can select to be used with the Rich Text Editor. Simply complete a Google search for “Google Font alternative to [font name]” to find suitable options.
HTML Support and Formatting
The Rich Text Editor supports a variety of HTML tags and attributes to help ensure your content is displayed correctly. Some commonly supported tags include:
- Text Formatting:
<strong>,<em>,<u>,<h1>,<p>, and more. - Lists:
<ul>,<ol>,<li>. - Images:
<img>. - Links:
<a href>.
Additionally, attributes like class, style, src, and alt are supported, allowing you to further customize the appearance of your content.
Full list of supported HTML tags:
Be mindful that any tags or attributes outside of this list will be stripped away when pasted into the Rich Text Editor.
| a | Hyperlink |
| blockquote | Quote |
| body | Document Body |
| br | Line Break |
| center | Center-Align |
| code | Computer Code |
| div | Section |
| em | Emphasize |
| font | Text Font |
| g | Scalable Vector Graphics (SVG) |
| h1, h2, h3, h4 | Heading |
| head | Metadata |
| hr | Thematic Break |
| html | HTML Document |
| i | Italics |
| img | Image |
| ins | Inserted Text |
| li | List Item |
| ol | Ordered List |
| p | Paragraph |
| pre | Preformatted Text |
| s | Strikethrough |
| span | Inline Container |
| strong | Important (bold) |
| sub | Subscript |
| sup | Superscript |
| table | HTML Table |
| tbody | Body Content in HTML Table |
| td | Data Cell |
| th | Header Cell in HTML Table |
| tr | Row in HTML Table |
| u | Underline |
| ul | Unordered List |
| wbr | Word Break Opportunity |
Supported Attributes:
| * |
class |
| data-fr-link | |
| title | |
| style | |
| dir | |
| align | |
| bgcolor | |
| valign | |
| cellpadding | |
| cellspacing | |
| colspan | |
| width | |
| height | |
| border | |
| open | |
| a | href |
| rel | |
| target | |
| font | size |
| img | src |
| class | |
| alt | |
| width | |
| height | |
| rel | |
| ul | type |
Tip: To avoid formatting issues, ensure your source text (like from Word documents) doesn’t contain hidden HTML that might affect the formatting.