Build your Landing Page

Modified on Fri, 24 Feb 2023 at 01:26 AM

It is essential to have a well-designed landing page for your event in order to promote it to your audience and eventually increase website conversion. With the landing page builder, you can quickly create your own landing page for registration without the need to code or manually design it.

This guide walks you through the steps to create a landing page for your event. While the landing page builder can be used by anyone, folks with web designing experience can make the bout of this feature.


Steps:

To create a custom landing page,

  1. On your Zuddl organizer dashboard, go to Registration.

  2. Click on Create New Page. This displays a list of predefined templates. There are 7 new templates and 2 legacy templates (Basic and Sponsor). You can also choose to start from scratch using a blank template. Each template has a specific style or theme, however, you can fully customize any template.

  3. To get started, hover over any template that you think would be suitable for your website and click Use template. This takes you to the editor page.
    image.png

Note: All templates except Basic and Sponsor take you to the new editor page. The Basic and Sponsor templates redirect the user to the old editor.  

Editor overview

It is essential to get acquainted with the editor layout so you can quickly design your landing page. The below table enlists all the functions in the editor using which you can easily.

Location

Function

Description

Topbar

Page switcher

Jump to the different pages of your site

Topbar

Device Layout options

Desktop, Tablet or Mobile

Topbar

Undo and Redo


Topbar

Preview

Open a preview of your landing page

Topbar

Publish/Republish

Publish or republish your site after you’ve made the changes.

Topbar

Home button

This redirects you back to Zuddl Registration page

Topbar

Info section

Show the landing page URL and the status

Sidebar

Global design

Customize the design of your landing page

Sidebar

Pages

Add, move or reorder pages

Sidebar

Widgets

Drag and drop widgets into your landing page

Sidebar

SEO & Settings

SEO and general site settings

In the middle, you have the content editor. You can edit everything that you see here. You drag and drop the widgets around or click on them to view the editing options.

image.png

There is also a Home button that takes you back to the organizer dashboard.

Edit page contents

It is important to build your page that is responsive to all devices. Regardless of the template, your page is arranged into grids of rows and columns which you can move around. The changes you make on any element on the page are applied only to the specific element.

To edit any element, simply click on the content which shows you the context menu to take action and make changes.

  • On the top-left corner of any row, you can find the row options, you can

    • Move rows/columns

    • Add/delete rows and columns. You can add upto 4 columns per row.

    • Resize a row/column. To resize a row click on the row/column separator between two rows/column and drag to resize.

    • Edit the design of the row/column such as background, layout, and spacing.


Edit global design settings

Using the global settings, you can make design changes that applies to all elements on the page. You can override the global settings made here by making edits made to individual settings. You can edit the following:

  • Global Text: This option allows you to change font style, color, size, format, and other settings for text, paragraph, and upto 6 heading levels.

  • Global Buttons: This option allows you to change button style, text, color, image, and few other settings.

  • Global Images: set the image layout and few other settings. You can override the global settings made here by making edits made to individual images.

  • Global Rows: This option allows you to edit the default rows and columns and the background.

  • Site Background: This option allows you to set the background for all pages and per page. You can also set the color and image

  • Site Layout: This option allows you to set the site layout such as Sidebar, Topbar, Mobile view, and more.
    image.png


Add a page

The Pages option has two sub-options, Pages and Pop-ups. Irrespective of the selected template, few pages are shown by default. For a blank template the following pages are shown:

  • Home

  • About

  • Service

  • Team

  • Contact

You can edit the existing page or create a new page as shown below:

image.png

Note: You can click on the gear icon to view the page-specific options.

Then there are Popups, which as the name suggests, are interactive elements that pops over a page which usually requires the user to take action.

Edit widgets

Widgets are you best friend when it’s about asking users to take action, more so on an event landing page. You can drag and drop a widget into the grids. To edit a widget, click on a widget to open the edit option. You can:  

  • Edit the content of the widget such as button text, URL and more.

  • Customize the design using options such as background color, rows spacing and more.

  • Right-click to view more options such as copy paste alignment, hide the widget by device

Add a Registration widget

For landing page, the most important widget is the Registration widget, which you can easily find in the list of widgets as shown below:

image.png


Add a ticketing widget

Using the editor, you can easily add a ticketing widget on your landing page through which users can initiate the ticket purchase flow. However, there are some prerequisites for adding a ticketing widget:

The ticketing can be easily found in the list of widgets as shown below:image.png


On the landing page, the ticketing and registration button appears as shown below.

image.png


For ongoing ticketed events, when a user clicks on the ticketing widget, a the landing page with interactions are shown with the following options:

  • Login -  redirects users to the login flow, if they have already purchased tickets

  • Register - opens a full page ticket purchase flow

For upcoming events, when a user clicks on the ticketing widget, they are redirected to the ticket purchase flow.


SEO & Settings

Settings relevant to your site such as icons, domains, SSL, and many others.

  • Site Icons: This options lets you add Favicon, home screen icon and others

  • Site Domain: This setting allows you to change the default domain and add a custom domain of your choice.

  • Site SSL: You can also generate an SSL certificate for the custom domain

  • Google Analytics: Copy and paste your Google analytics tracking code.

  • Head HTML: You can add custom HTML or JavaScript code in the body or head section of the HTML code.

  • Site Language:  This option lets you select the default language of the site.

  • Privacy Settings: It provides options such as Privacy page, cookie notifications, cookie tracking

  • 404 Page: This option allows you to customize the 404 page when a user accidentally lands on an incorrect URL.

  • Progressive Web App (PWA): This setting is specifically for mobile devices for instant loading of webpage even when offline. You can find relevant options under this menu.

image.png


Publishing a Site

At a time we can have only one landing page that can be published. If you have created few landing page designs and wish to switch to a different site,

  1. Go to the site listing page and click the edit icon on the desired template.
     image.png

  2. Inside the editor, click the Publish button.image.png


Note: You can publish the templates only from the editor. However, for Sponsor and Basic templates, you can directly publish from the templates listing page.


When you publish a new site, Zuddl unpublishes the current site and then publishes the new site on the same URL. This means you do not have to worry about any 404 page.


image.png

You can also unpublish a site from within the editor. Go to Settings & SEO > Site Domain > Unpublish site.

Warning: This is applicable to all templates except Basic and Sponsor. If you switch to a Basic and Sponsor template from any other template, the old site becomes inaccessible and shows a 404 not found error. Ensure that this change is done before the landing page is shared to the public.


To go to the published site click on the link icon on the top and select either Attendee landing page or Speaker landing page.

link.png

More options

On the template listing page, you can click on the three dot option for any template to select the required options:

  • Unpublish: to unpublish a template.
     Note: Unpublishing a template would not auto publish any other template.

  • Rename: to rename a template.
     Note: Not applicable for SPONSOR and BASIC templates

  • Save as template:  you can edit a default template and save it as a new template. It would take around 4-5 seconds to save the template.

  • Delete: to permanently delete a template

  • Publish: to publish a template. Available only for BASIC and SPONSOR template. For other sites, you would have to publish from inside the editor.

image.png

You can also click on the arrow icon next to each template to preview the site on different devices.

image.png


Note: Login via SSO is not supported on custom landing pages created using the editor.

Editing Legacy Site

If you wish to customize a legacy Zuddl template, you can do so by selecting either the Sponsor or Basic template. Click on the edit icon takes you through old flow of editing a landing page




Was this article helpful?

That’s Great!

Thank you for your feedback

Sorry! We couldn't be helpful

Thank you for your feedback

Let us know how can we improve this article!

Select atleast one of the reasons

Feedback sent

We appreciate your effort and will try to fix the article