Website Builder: Build and Publish Your Core Registration Website

EventMobi’s Website Builder provides an intuitive drag-and-drop interface for creating a professional registration website. Leverage widgets, design elements, and flexible customization options to build and publish your site seamlessly.

Table of Contents:

1. Getting Started with the Website Builder

2. Adding and Customizing Content

   • Settings
   • Rows
   • Content
3. Embedding Your Registration Form

4. Previewing and Saving Your Website

5. Publishing Your Website

6. Tips & Tricks

1. Getting Started with the Website Builder

To begin building your registration website, access the Website option from the left-hand menu. This page contains several important settings to configure:

• Website Status: You can toggle your website between unpublished and published states to manage its visibility. If the status is set to "unpublished," visitors will encounter an error message, as the website will be offline. Be sure to switch your page to "published" when you are ready to share it with participants. Keep in mind that you can always preview your website regardless of its publication status.
• URL: To facilitate easy access and sharing, you can simply copy the final URL of your registration website. Click the Copy icon located to the right of the URL field to quickly copy the link. You can then share this link with your team, participants, and anyone else who needs access to your website once published.
• Select Landing Page: Choose the desired page from the dropdown menu to serve as your registration website's landing page. While you can create multiple pages, only one page can be displayed for each event at any given time. You have the flexibility to switch the landing page whenever necessary.
• Preview/Go To Designer: On the right side of this view, you will see a live preview of your currently selected landing page. To conveniently access the design editor, simply click on "Go To Designer" to make modifications to your current layout.

In the "My Pages" tab, you can view and manage all the pages you have created within the Website Builder, as well as create new pages as needed.

By hovering over an existing page, you gain quick access to several options: you can directly enter the Designer to make edits, preview the page to see how it looks, rename the page as it appears in the Experience Manager, duplicate the page for reuse, or delete it if it's no longer needed.

Inside The Designer

In the designer, there are two primary sections:

Minimize Sidebar

There is an icon that separates the builder stage and the sidebar. You can use this to minimize the sidebar at any time.

2. Adding and Customizing Content

To begin designing on the stage, you must select a design element from the sidebar. The sidebar includes three tabs to help you create content.

Settings

The settings tab allows you to set defaults for your entire design. When working with rows and content, those design elements inherit these settings. You can use the settings tab to modify the following options:

Content area width	Modify the overall width of your website's content area by adjusting the toggle to your desired size.
Content area alignment	Select either Left alignment or Center alignment for your content.
Background color	Select a solid color to be applied to the entire page.
Content area background color	Select a solid color specifically for the content area background.
Background image	Upload an image to serve as the background for your website.
Default font	Select the default font that will be applied to all text throughout your website.
Link color	Choose a color for hyperlink text.
Configure Favicon	Upload your logo to customize the browser icon that appears in the address bar.

Rows

Rows are the primary structural element for designs created in the Website builder. Within your rows, you can customize the column structure. With a multi-column row, you can place content side-by-side in your design. Most importantly, rows act as a container for all of your content blocks.

The following options populate in the sidebar when working with rows:

Row background color	Choose a specific solid color that will be applied exclusively to this row.
Content area background color	Choose a specific solid color to set as the background for the content area.
Row background image	Select and upload an image to be used as the background for this row.
Row background video	You can upload a video file or provide a video URL to use as an animated background for this row.
Content area rounded corners	Soften the edges of the content area within this row by rounding the corners.
Content area border	Define borders for the content area within this row.
Vertical Align	Adjust the vertical alignment of content to position it at the top, center, or bottom of the row.
Stack on mobile	Opt to arrange the content in this row vertically when viewed on mobile devices.
Stack order on mobile	Select either the default stacking order or the reversed stacking order for how content will appear when viewed on mobile devices.
Hide on	You can choose to hide this row on either Desktop or mobile devices.
Column Structure	Modify the column structure using the +Add new button to insert more columns. A separator icon appears between columns, which you can click and drag to adjust the layout.
Column # background	Choose a specific solid color that will be applied exclusively to this column.
Padding	Adjust the spacing within your column
Border	Set borders specifically for the selected column within this row.Row background color

Content

There are many several content blocks you can use while designing in the Beefree builder. All content blocks include padding settings and hide-on settings in the sidebar. 

Below we've listed all the available content blocks. Click the name below to learn more about the associated type of content block.

Title	The Title content block allows you to set the H1/H2/H3 tag without custom HTML.
Paragraph	The paragraph block operates similarly to the text content block, with key differences: it allows you to choose between regular and bold font weights and adjust paragraph spacing to increase or decrease the space between paragraphs.
List	The list content block shares features with the paragraph block but includes specific properties for lists: List type: Choose between ordered or unordered lists. List style type: Select basic styling options. Start list from: Specify the starting number for ordered lists across multiple blocks. List items spacing: Control spacing between items. List items indent: Adjust indentation for subitems.
Image	Utilize this content type to add images into your website.
Button	Incorporates a button into your page, allowing you to personalize it by modifying the text and adjusting the background color.
Divider	The divider content block allows you to add a visual separation line to your design.
Spacer	The spacer content block creates blank space in your design and only includes a Height setting for finer control over the spacing.
Social	Integrates social media icons into your page, enabling you to enter your social media links for convenient access and sharing.
HTML	The Custom HTML content block enables you to add your own HTML code to your design. Note that custom code may impact rendering and responsiveness, and is not covered by our support.
Video	Adds a video to your page, supporting various formats, including self-hosted MP4 URLs, YouTube or Vimeo links, user file uploads from the File Manager, and selections from free stock video libraries.
Icons	Combine images and text in a single content block for greater design flexibility.
Menu	Adds a customizable text-based navigation menu into your page, allowing for easy navigation and enhanced user experience.
Text	Adds a customisable text block to your page
Registration	Easily add your core registration form right onto your page for a seamless experience!

3. Embedding Your Registration Form

In the Website Builder, you have the option to directly embed your registration form built in Experience Manager to any position within your website.

1. Ensure that you have inserted a row into your website layout before adding any content types to it.
2. Simply drag and drop the Registration content block into your preferred location within the layout.
3. Select the "Set Up Form" option to customize the colors for your embedded registration form, including the background, text, and button colors. Be sure to save your changes to apply them effectively.
4. Review the settings in the sidebar, where you can access the "Set Up Form" option to customize the colors of your registration form as needed. Additionally, you can adjust the visibility settings and assign a block identifier, which is particularly helpful if you have a Menu content type integrated on the page.
5. Save & Publish your changes.

4. Previewing and Saving Your Website

Mobile Design Mode

By default, the Website Builder stage mimics what your design will look like on a desktop device. However, you can also use mobile design mode to build your content. This design mode uses a stage that mimics what the design will look like on a mobile device.

Most of the edits you make in mobile design mode are reflected on both the desktop and mobile versions. However, certain elements are marked with a mobile icon in the sidebar. These settings will only apply to the mobile version of your design.

Preview

You may access the Preview feature, indicated by the Eye Icon located at the top of the screen, to review how your design will appear on both mobile and desktop devices. Furthermore, the dark mode toggle provides an opportunity to evaluate the impact of dark mode settings on your design. If you have set any display conditions, you can also preview their effects in this mode. To exit Preview mode, simply click the Eye Icon once more.

Save Your Website

It is advisable to save your edits within the Website Builder periodically to avoid any loss of progress. To save your current changes, simply click on the green "Save" button located in the top right corner.

If you are working on a page that is already published, the button will change to "Save & Publish", indicating that all changes will be made public upon saving.

5. Publishing Your Website

1. Navigate to the Website tab in the Website Builder and select the Published option.

2. From the Select Landing Page dropdown menu, choose your registration website page.

3. Click Save Changes to publish your site.

4. Copy the URL provided to distribute and launch the registration site.

6. Tips & Tricks

Adjusting Image Size

To effectively adjust the size of images in your design, follow these steps:

1. Click on the image content block you wish to modify.
2. In the sidebar, the "Auto Width" setting is enabled by default. To manually adjust the image size, disable this option, and a scale will become visible for your adjustments.
3. Adjust the scale to the preferred image size
4. Optional: You can also utilize the padding settings to control the space around your image, ensuring it fits seamlessly within your layout.
5. Preview your changes in both desktop and mobile modes to ensure your images retain their visual integrity across devices, then save your changes.