Using the Site Designer

  • 1
  • 2
  • 3
  • 4
  • 5
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, using widgets, and incorporating motion are important to building out your webpages.
 

Adding a Header
 
1 Access the site designer. Begin by selecting your Project Flex event. To go to registration, hover over Website & Registration and, under Registration, click Registration Process. For the website, hover over Website & Registration and, under Website, click Event Website.

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 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 Horizontally 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.
User-added image
 
Once you're done, click Save to save the draft, or click Publish to make it visible to invitees.

3 Determine which pages the default header applies to. Click the Registration Page or Website Page dropdown in the top-left. Scroll down to Default Header and Footer, and click on User-added image to open the settings.

Here, you can rename the title of the page and determine if you want to apply the default header to newly created pages.

By default, the header 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.

 
User-added image

Then click Apply.

Once you're done, click Save to save the draft, or click Publish to make it visible to invitees.
 

Placing Your "Register" Buttons
 
1 Access the global theme section of the site designer. Your "Register" 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 Project Flex event. Hover over Website & Registration and, under Website, click Event Website. To the right of the Summary, click Customize.



2 Add the Already Registered button to the header. From the Website Page menu 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. The Website Navigation will appear to the right of the canvas. In the Confirmation Options section, toggle "Display Already Registered link" to green.
 
 User-added image
 
Edit the text, if necessary.

Once you're done, click Save to save 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 Project Flex event. Hover over Website & Registration and, under Registration, click Registration Process. 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, click Theme Colors to the right of the canvas. 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. 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.
 
User-added image

Once you're done, click Save to save the draft, or click Publish to make it visible to invitees.
 
 

Adding and Customizing Widgets
 
1 Access the site designer. Begin by selecting your Project Flex event. Hover over Website & Registration and, under Registration, click 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.
 
User-added image 
 
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, determine the ratio.
 

3 Add content widgets. Now it's time to add content to your section. Drag and drop a widget onto the canvas.
 
User-added image

Use the section to the right of the canvas to make any updates to the widget.
 
3 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, and make your changes.
 
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 save 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 Project Flex event. To open the registration process, hover over Website & Registration and, under Registration, click Registration Process. For the website, hover over Website & Registration and, under Website, click Event Website.

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 User-added image, 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 save the draft, or click Publish to make it visible to invitees.

 

 

Did this article resolve your issue?

Yes
No

Did this article resolve your issue?

What can we do to make it better?

Did this article resolve your issue?

What can we do to make it better?

Did this article resolve your issue?


Excellent! Thank you for your feedback

Did this article resolve your issue?


We are sorry to hear that!  For more assistance, open a case and a Product Consultant will contact you directly.

  • 1
  • 2
  • 3
  • 4
  • 5
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, using widgets, and incorporating motion are important to building out your webpages.
 

Adding a Header
 
1 Access the site designer. Begin by selecting your Project Flex event. To go to registration, hover over Website & Registration and, under Registration, click Registration Process. For the website, hover over Website & Registration and, under Website, click Event Website.

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 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 Horizontally 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.
User-added image
 
Once you're done, click Save to save the draft, or click Publish to make it visible to invitees.

3 Determine which pages the default header applies to. Click the Registration Page or Website Page dropdown in the top-left. Scroll down to Default Header and Footer, and click on User-added image to open the settings.

Here, you can rename the title of the page and determine if you want to apply the default header to newly created pages.

By default, the header 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.

 
User-added image

Then click Apply.

Once you're done, click Save to save the draft, or click Publish to make it visible to invitees.
 

Placing Your "Register" Buttons
 
1 Access the global theme section of the site designer. Your "Register" 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 Project Flex event. Hover over Website & Registration and, under Website, click Event Website. To the right of the Summary, click Customize.



2 Add the Already Registered button to the header. From the Website Page menu 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. The Website Navigation will appear to the right of the canvas. In the Confirmation Options section, toggle "Display Already Registered link" to green.
 
 User-added image
 
Edit the text, if necessary.

Once you're done, click Save to save 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 Project Flex event. Hover over Website & Registration and, under Registration, click Registration Process. 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, click Theme Colors to the right of the canvas. 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. 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.
 
User-added image

Once you're done, click Save to save the draft, or click Publish to make it visible to invitees.
 
 

Adding and Customizing Widgets
 
1 Access the site designer. Begin by selecting your Project Flex event. Hover over Website & Registration and, under Registration, click 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.
 
User-added image 
 
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, determine the ratio.
 

3 Add content widgets. Now it's time to add content to your section. Drag and drop a widget onto the canvas.
 
User-added image

Use the section to the right of the canvas to make any updates to the widget.
 
3 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, and make your changes.
 
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 save 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 Project Flex event. To open the registration process, hover over Website & Registration and, under Registration, click Registration Process. For the website, hover over Website & Registration and, under Website, click Event Website.

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 User-added image, 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 save the draft, or click Publish to make it visible to invitees.

 

 

Did this article resolve your issue?

Yes
No

Did this article resolve your issue?

What can we do to make it better?

Did this article resolve your issue?

What can we do to make it better?

Did this article resolve your issue?


Excellent! Thank you for your feedback

Did this article resolve your issue?


We are sorry to hear that!  For more assistance, open a case and a Product Consultant will contact you directly.

  • 1
  • 2
  • 3
  • 4
  • 5
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, using widgets, and incorporating motion are important to building out your webpages.
 

Adding a Header
 
1 Access the site designer. Begin by selecting your Project Flex event. To go to registration, hover over Website & Registration and, under Registration, click Registration Process. For the website, hover over Website & Registration and, under Website, click Event Website.

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 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 Horizontally 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.
User-added image
 
Once you're done, click Save to save the draft, or click Publish to make it visible to invitees.

3 Determine which pages the default header applies to. Click the Registration Page or Website Page dropdown in the top-left. Scroll down to Default Header and Footer, and click on User-added image to open the settings.

Here, you can rename the title of the page and determine if you want to apply the default header to newly created pages.

By default, the header 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.

 
User-added image

Then click Apply.

Once you're done, click Save to save the draft, or click Publish to make it visible to invitees.
 

Placing Your "Register" Buttons
 
1 Access the global theme section of the site designer. Your "Register" 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 Project Flex event. Hover over Website & Registration and, under Website, click Event Website. To the right of the Summary, click Customize.



2 Add the Already Registered button to the header. From the Website Page menu 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. The Website Navigation will appear to the right of the canvas. In the Confirmation Options section, toggle "Display Already Registered link" to green.
 
 User-added image
 
Edit the text, if necessary.

Once you're done, click Save to save 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 Project Flex event. Hover over Website & Registration and, under Registration, click Registration Process. 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, click Theme Colors to the right of the canvas. 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. 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.
 
User-added image

Once you're done, click Save to save the draft, or click Publish to make it visible to invitees.
 
 

Adding and Customizing Widgets
 
1 Access the site designer. Begin by selecting your Project Flex event. Hover over Website & Registration and, under Registration, click 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.
 
User-added image 
 
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, determine the ratio.
 

3 Add content widgets. Now it's time to add content to your section. Drag and drop a widget onto the canvas.
 
User-added image

Use the section to the right of the canvas to make any updates to the widget.
 
3 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, and make your changes.
 
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 save 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 Project Flex event. To open the registration process, hover over Website & Registration and, under Registration, click Registration Process. For the website, hover over Website & Registration and, under Website, click Event Website.

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 User-added image, 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 save the draft, or click Publish to make it visible to invitees.

 

 

Did this article resolve your issue?

Yes
No

Did this article resolve your issue?

What can we do to make it better?

Did this article resolve your issue?

What can we do to make it better?

Did this article resolve your issue?


Excellent! Thank you for your feedback

Did this article resolve your issue?


We are sorry to hear that!  For more assistance, open a case and a Product Consultant will contact you directly.

  • 1
  • 2
  • 3
  • 4
  • 5
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, using widgets, and incorporating motion are important to building out your webpages.
 

Adding a Header
 
1 Access the site designer. Begin by selecting your Project Flex event. To go to registration, hover over Website & Registration and, under Registration, click Registration Process. For the website, hover over Website & Registration and, under Website, click Event Website.

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 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 Horizontally 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.
User-added image
 
Once you're done, click Save to save the draft, or click Publish to make it visible to invitees.

3 Determine which pages the default header applies to. Click the Registration Page or Website Page dropdown in the top-left. Scroll down to Default Header and Footer, and click on User-added image to open the settings.

Here, you can rename the title of the page and determine if you want to apply the default header to newly created pages.

By default, the header 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.

 
User-added image

Then click Apply.

Once you're done, click Save to save the draft, or click Publish to make it visible to invitees.
 

Placing Your "Register" Buttons
 
1 Access the global theme section of the site designer. Your "Register" 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 Project Flex event. Hover over Website & Registration and, under Website, click Event Website. To the right of the Summary, click Customize.



2 Add the Already Registered button to the header. From the Website Page menu 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. The Website Navigation will appear to the right of the canvas. In the Confirmation Options section, toggle "Display Already Registered link" to green.
 
 User-added image
 
Edit the text, if necessary.

Once you're done, click Save to save 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 Project Flex event. Hover over Website & Registration and, under Registration, click Registration Process. 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, click Theme Colors to the right of the canvas. 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. 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.
 
User-added image

Once you're done, click Save to save the draft, or click Publish to make it visible to invitees.
 
 

Adding and Customizing Widgets
 
1 Access the site designer. Begin by selecting your Project Flex event. Hover over Website & Registration and, under Registration, click 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.
 
User-added image 
 
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, determine the ratio.
 

3 Add content widgets. Now it's time to add content to your section. Drag and drop a widget onto the canvas.
 
User-added image

Use the section to the right of the canvas to make any updates to the widget.
 
3 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, and make your changes.
 
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 save 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 Project Flex event. To open the registration process, hover over Website & Registration and, under Registration, click Registration Process. For the website, hover over Website & Registration and, under Website, click Event Website.

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 User-added image, 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 save the draft, or click Publish to make it visible to invitees.

 

 

Did this article resolve your issue?

Yes
No

Did this article resolve your issue?

What can we do to make it better?

Did this article resolve your issue?

What can we do to make it better?

Did this article resolve your issue?


Excellent! Thank you for your feedback

Did this article resolve your issue?


We are sorry to hear that!  For more assistance, open a case and a Product Consultant will contact you directly.

  • 1
  • 2
  • 3
  • 4
  • 5
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, using widgets, and incorporating motion are important to building out your webpages.
 

Adding a Header
 
1 Access the site designer. Begin by selecting your Project Flex event. To go to registration, hover over Website & Registration and, under Registration, click Registration Process. For the website, hover over Website & Registration and, under Website, click Event Website.

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 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 Horizontally 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.
User-added image
 
Once you're done, click Save to save the draft, or click Publish to make it visible to invitees.

3 Determine which pages the default header applies to. Click the Registration Page or Website Page dropdown in the top-left. Scroll down to Default Header and Footer, and click on User-added image to open the settings.

Here, you can rename the title of the page and determine if you want to apply the default header to newly created pages.

By default, the header 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.

 
User-added image

Then click Apply.

Once you're done, click Save to save the draft, or click Publish to make it visible to invitees.
 

Placing Your "Register" Buttons
 
1 Access the global theme section of the site designer. Your "Register" 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 Project Flex event. Hover over Website & Registration and, under Website, click Event Website. To the right of the Summary, click Customize.



2 Add the Already Registered button to the header. From the Website Page menu 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. The Website Navigation will appear to the right of the canvas. In the Confirmation Options section, toggle "Display Already Registered link" to green.
 
 User-added image
 
Edit the text, if necessary.

Once you're done, click Save to save 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 Project Flex event. Hover over Website & Registration and, under Registration, click Registration Process. 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, click Theme Colors to the right of the canvas. 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. 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.
 
User-added image

Once you're done, click Save to save the draft, or click Publish to make it visible to invitees.
 
 

Adding and Customizing Widgets
 
1 Access the site designer. Begin by selecting your Project Flex event. Hover over Website & Registration and, under Registration, click 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.
 
User-added image 
 
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, determine the ratio.
 

3 Add content widgets. Now it's time to add content to your section. Drag and drop a widget onto the canvas.
 
User-added image

Use the section to the right of the canvas to make any updates to the widget.
 
3 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, and make your changes.
 
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 save 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 Project Flex event. To open the registration process, hover over Website & Registration and, under Registration, click Registration Process. For the website, hover over Website & Registration and, under Website, click Event Website.

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 User-added image, 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 save the draft, or click Publish to make it visible to invitees.

 

 

Did this article resolve your issue?

Yes
No

Did this article resolve your issue?

What can we do to make it better?

Did this article resolve your issue?

What can we do to make it better?

Did this article resolve your issue?


Excellent! Thank you for your feedback

Did this article resolve your issue?


We are sorry to hear that!  For more assistance, open a case and a Product Consultant will contact you directly.

  • 1
  • 2
  • 3
  • 4
  • 5

Did this article resolve your issue?

Yes
No

Did this article resolve your issue?

What can we do to make it better?

Did this article resolve your issue?

What can we do to make it better?

Did this article resolve your issue?


Excellent! Thank you for your feedback

Did this article resolve your issue?


We are sorry to hear that!  For more assistance, open a case and a Product Consultant will contact you directly.

  • 1
  • 2
  • 3
  • 4
  • 5
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, using widgets, and incorporating motion are important to building out your webpages.
 

Adding a Header
 
1 Access the site designer. Begin by selecting your Project Flex event. To go to registration, hover over Website & Registration and, under Registration, click Registration Process. For the website, hover over Website & Registration and, under Website, click Event Website.

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 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 Horizontally 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.
User-added image
 
Once you're done, click Save to save the draft, or click Publish to make it visible to invitees.

3 Determine which pages the default header applies to. Click the Registration Page or Website Page dropdown in the top-left. Scroll down to Default Header and Footer, and click on User-added image to open the settings.

Here, you can rename the title of the page and determine if you want to apply the default header to newly created pages.

By default, the header 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.

 
User-added image

Then click Apply.

Once you're done, click Save to save the draft, or click Publish to make it visible to invitees.
 

Placing Your "Register" Buttons
 
1 Access the global theme section of the site designer. Your "Register" 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 Project Flex event. Hover over Website & Registration and, under Website, click Event Website. To the right of the Summary, click Customize.



2 Add the Already Registered button to the header. From the Website Page menu 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. The Website Navigation will appear to the right of the canvas. In the Confirmation Options section, toggle "Display Already Registered link" to green.
 
 User-added image
 
Edit the text, if necessary.

Once you're done, click Save to save 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 Project Flex event. Hover over Website & Registration and, under Registration, click Registration Process. 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, click Theme Colors to the right of the canvas. 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. 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.
 
User-added image

Once you're done, click Save to save the draft, or click Publish to make it visible to invitees.
 
 

Adding and Customizing Widgets
 
1 Access the site designer. Begin by selecting your Project Flex event. Hover over Website & Registration and, under Registration, click 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.
 
User-added image 
 
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, determine the ratio.
 

3 Add content widgets. Now it's time to add content to your section. Drag and drop a widget onto the canvas.
 
User-added image

Use the section to the right of the canvas to make any updates to the widget.
 
3 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, and make your changes.
 
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 save 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 Project Flex event. To open the registration process, hover over Website & Registration and, under Registration, click Registration Process. For the website, hover over Website & Registration and, under Website, click Event Website.

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 User-added image, 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 save the draft, or click Publish to make it visible to invitees.

 

 

Did this article resolve your issue?

Yes
No

Did this article resolve your issue?

What can we do to make it better?

Did this article resolve your issue?

What can we do to make it better?

Did this article resolve your issue?


Excellent! Thank you for your feedback

Did this article resolve your issue?


We are sorry to hear that!  For more assistance, open a case and a Product Consultant will contact you directly.