Cvent's Site Designer allows you to customize your website and registration that's capable of displaying on a responsive page. Adding headers, placing your register buttons, customizing the theme, building a layout, using widgets, and incorporating motion are important to building out your webpages. Reference this article for a list of common Site Designer terms.
NOTE: If you're unable to access the sections below, ask your Administrator to adjust your user role permissions under  > Admin > Manage Users > User Roles > Select the user role > Event > Website & Registration Permissions. |
Adding a Header
1 Access the Site Designer. Begin by selecting your event. To go to registration, click Registration, then Registration Process from the left-hand navigation. For the website, click Website from the left-hand navigation.
Click Open Site Designer.
| NOTE: Need to edit both the website and registration? Once you access the Site Designer, you can easily switch pages by selecting a page name from the Website Page or Registration Page dropdown in the top left of the designer. |
2 Add a header. In the top left of the canvas, click the Registration Page or Website Page dropdown, scroll down to the Header and Footer section, and click Default Header and Footer.
On the canvas, click the section header you want to add an image to. To the right of the canvas, hover over Background Image, and click Replace. Open a folder from the Media Library, then select an image. Ensure Scale to Fit and Horizontal Repeat are selected to keep the image's proportions.
| NOTE: Avoid using background images with static text directly on them. Instead, select a design-only image and use widgets to add your text on top. |
Need to space things out? Click the Website Navigation widget. Click Customize, then Widget. Scroll down to the Spacing section and use the sliders. Alternatively, if you’ve added an Image widget to the header, you can add space to that by clicking the widget. Click Customize, then Widget. Scroll down to the Spacing section and use the sliders.
Once you're done, click Save to preserve the draft, or click Publish to make it visible to invitees.
3 Determine which pages the default header and footer apply to. Click the Registration Page or Website Page dropdown in the top-left of the designer. Scroll down to Default Header and Footer, and click on 
to open the settings.
Here, you can rename the title of the page and determine if you want to apply the default header and footer to newly created pages.
By default, the header and footer will apply to all website, registration, and My Registration pages. If you do not want the header to apply to a specific page, uncheck the box to the left of its name.
Then click Apply.
Once you're done, click Save to preserve the draft, or click Publish to make it visible to invitees.
| NOTE: After five seconds of inactivity, any edits made in the Site Designer are automatically saved as a draft. The draft will not be considered the final version until you click Save or Publish. |
Placing Your "Register" Buttons
1 Access the Site Designer. Your "Register Now" button is already added to your website's header by default (however you can move it if you would like), but we also suggest adding the "Already Registered" button there as well to ensure your invitees can just as easily review their registration.
Begin by selecting your event. From the left-hand navigation, click Website. To the right of the Summary, click Customize.
2 Add the Already Registered button to the header. From the Website Page dropdown in the top left of the designer, scroll down to the Header and Footer section, and click the header you want to add the button to. On the canvas, click the Register Now button. To the right of the canvas, scroll down to the Confirmation Options section, and toggle "Display Already Registered link" to blue.
Edit the text, if necessary.
Once you're done, click Save to preserve the draft, or click Publish to make it visible to invitees.
Customize the Website's Theme
1 Access the Global Theme section of the Site Designer. Instead of individually editing each widget to create a cohesive website, customizing the global theme section of the Site Designer will allow the changes to be applied across your whole website.
Begin by selecting your event. To go to registration, click Registration, then Registration Process from the left-hand navigation. For the website, click Website from the left-hand navigation. Then click Open Site Designer.
Click Theme to the right of the canvas.
2 Select a theme. Click Change Theme to determine the basic design of your survey.
| NOTE: The available themes' colors and fonts can be customized, but they currently align with WCAG for 508 compliance. |
3 Customize the colors, if necessary. To customize the theme colors, in the Theme Styling section, click Colors. The first three make up your background colors, while the last two are your text. Notice that the first three contrast with the last two. This has to do with being 508 compliant and aligning with WCAG. If changing the colors to match some of your branding, it's best to pick similar colors, keeping the background light and the text dark, or vise versa.
To change the color, click the textbox and enter a HEX value, or select a color from the color picker.
4 Set the dimensions. In the Theme Styling section, click Dimensions.
The website layout width stretches your sections to fit the length of the screen. We recommend that you check Fit to Entire Screen.
The website content width determines the width of your widgets within the sections. It is recommended that you do not check Fit Content to Full Width, as this can stretch your widgets out. Instead, we suggest setting the "Max." to 1024 to ensure your images fill the screen without stretching it.
5 Customize the text styling options. Click one of the components from the Text Styling section. Here you can choose how the text, background image, background, border, and spacing display.
Once you're done, click Save to preserve the draft, or click Publish to make it visible to invitees.
Building a Layout
1 Access the Site Designer. Begin by selecting your event. To go to registration, click Registration, then Registration Process from the left-hand navigation. For the website, click Website from the left-hand navigation. Then click Open Site Designer.
2 Add your sections. Layouts are organized by sections, which contain pre-built layouts for specific content types, like FAQ pages or venue spotlights. To the right of the canvas, click Sections. From the dropdown at the top, select a category to browse through the different pre-built sections. Then, drag and drop the section you want to use onto the canvas.
Then repeat these steps to add more sections or continue customizing the individual widgets, if desired.
Once you're done, click Save to preserve the draft, or click Publish to make it visible to invitees.
Adding and Customizing Widgets
1 Access the Site Designer. Begin by selecting your event. From the left-hand navigation, click Registration, then Registration Process. If necessary, select your registration path from the Registration Paths dropdown. To the right of the page you want to edit, click Customize.
2 Add your structure. Your webpages are a mix of sections and widgets. They work together to establish how your content will display depending on the size of the device that the website is being viewed on. For instance, if you're displaying a row of your speakers with their names underneath, the section's column set up will determine how the content displays. While there will be very little difference when viewed on a large desktop, the display can shift dramatically when viewed on a mobile device. Reference the image below to view the differences.
To determine how many columns your section has, click Build to the right of the canvas, and scroll down to the Structure & Organization section. Drag and drop the Section widget onto your canvas. The Section Editor will appear to the right of the canvas. Scroll down to the Section Layout section, and click the number of columns you would like. If you select two or three columns, click and drag the 
to determine the percentage of which each column should occupy the section. In the example below, the section is broken into 3 columns, where event title widget takes up 50% of the section, and the date and location widgets each take up 25%.
| NOTE: Some widgets cannot be placed into columns, as the widget itself takes up too much space. These include the progress bar, countdown timer, location map, and website navigation widgets. |
Similar to sections, Container widgets can be used to hold multiple content widgets, which allows you to easily move or duplicate a group of widgets. To add a Container widget, click Build to the right of the canvas, and scroll down to the Structure & Organization section. Drag and drop the Container widget onto your canvas.
3 Add content widgets. Now it's time to add content to your section. Drag and drop a widget onto the canvas.
Use the section to the right of the canvas to make any updates to the widget.
| NOTE: If adding a new line of text in a text box field, you will need to hold down the Shift and Enter buttons on your keyboard at the same time to ensure single-line spacing. Pressing Enter only will add additional spacing. |
4 Include spacers, if necessary. Spacers determine how much of your image displays, or increases a section size. Since spacers stay static on your webpage, it's best to use smaller spacers, even if you need to use multiple spacers, rather than large spacers.
To add one, scroll down to the Structure & Organization section to the right of the canvas, and drag and drop the spacer where you want it to appear. Click Customize under the Styling Options to the right, then click Widget, and make your changes. You can adjust different settings such as the color, opacity level, corners, borders, and height and width of the spacer.
| NOTE: An additional tip when building out your widgets is to reference the breadcrumbs in the very bottom-left of your canvas, which let you know where you are editing. To reset your widget, click Customize in your widget's Styling Options section, and click Reset Widget Styles. |
Once you're done, click Save to preserve the draft, or click Publish to make it visible to invitees.
Incorporating Motion into Your Website
1 Access the site designer. Begin by selecting your event. To go to registration, click Registration, then Registration Process from the left-hand navigation. For the website, click Website from the left-hand navigation.
Click Open Site Designer.
| NOTE: Need to edit both the website and registration? Once you access the Site Designer, you can easily switch pages by selecting a page name from the Registration Page dropdown in the top left of the designer. |
2 Add a GIF. Click Build to the right of the canvas. Drag and drop the Image widget onto the canvas, or click into a widget or section on your canvas that you want to add a GIF to. In the editor to the right of the canvas, click Add Image or Replace if an image has already been added. Open a folder from the Media Library, then select the GIF. If adding a new GIF, click 
, then Browse Files. Locate your GIF, double click it, select a folder if necessary, and click Upload. Click Continue, and select the GIF from your images.
Establish the GIF's styling and configuration options.
Once you're done, click Save to preserve the draft, or click Publish to make it visible to invitees.
3 Add anchor links. Anchor links allow you to navigate to a different area of the same event website page. To add an anchor link, click Build to the right of the canvas. Drag and drop the Anchor link widget on the canvas. In the editor to the right of the canvas, customize the Anchor Name. This name will appear as a hyperlink on your event website.
Next, select the widget you want to link to from the dropdown.
When attendees click the anchor link, they will navigate directly to the widget you selected.
Once you're done, click Save to preserve the draft, or click Publish to make it visible to invitees.
| NOTE: Worried about losing your progress? If the Site Designer is closed manually or due to inactivity, a pop-up will appear. Click Keep Edits to continue from the last auto-saved draft or Open Last Saved to load the last manually saved version. |
