Using the Access Portal or Public Webpage Site Designer

  • 1
  • 2
  • 3
  • 4
  • 5

Did this article resolve your issue?

Yes
No

What can we do to make this article better?

What can we do to make this article 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
The access portal and public webpage Site Designer allows you to build a responsive site for hosting your portal's content. Follow the steps below to create your access portal's login and content pages. Need to create or edit the portal's settings? Reference this article instead.
 
NOTE: If multiple languages are enabled, you can translate added text in the Language tab.
 
Adding a Header
 
1 Access the Site Designer. Begin by clicking Admin in the top right. Hover over Access
Portals and, under Manage, click Access Portals. Click the name of the access portal or public webpage you want to customize.

Click Open Site Designer.
 

2 Add a header. In the top left of the canvas, click the Portal Page dropdown, then in the Header and Footer section, click Default Header and Footer.
 
User-added image

On the canvas, hover over the Header section, and click the orange section header. To the right of the canvas, click Add Image. Open a folder from the Media Library, then select an image. Click the arrow in the top-left to go back to the section settings, then ensure Scale to Fit and Horizontal Repeat are selected to keep the image's proportions.



User-added image 
 
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? Close out of the section widget settings, then, on the canvas, click the Website Navigation widget.
 

User-added image

 
Click Customize, then Widget. Scroll down to the Spacing section and use the sliders to increase or decrease the spacing. 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 to increase or decrease the spacing.
 

User-added image


Once you're done, click Save to preserve the draft, or Publish to make it visible to portal users.

 
3 Determine which pages the default header applies to. Click the Portal Page dropdown in the top-left. Scroll down to Default Header and Footer, and click the User-added image icon 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.

The header will apply to all pages by default. 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.

4 Add the language selector, if necessary. On the canvas, hover over the Header section, and click the Website Navigation widget. Additional settings will appear to the right. In the Configuration Options section, toggle "Display language selector" to blue.
 

Once you're done, click Save to preserve the draft, or Publish to make it visible to portal user guests.

Customize the Website's Theme
 
1 Access the Global Theme section. Instead of individually editing each widget, customize the global theme to apply your style selections to all widgets at once.


Begin by clicking Admin in the top right. Hover over Access Portals and, under Manage, click Access Portals. Click the name of the portal or public webpage you want to customize.

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 page.


 
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 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 will display.
 
User-added image

Once you're done, click Save to preserve the draft, or Publish to make it visible to portal user guests.
 
Adding and Customizing Widgets
 
1 Access the Site Designer. Begin by clicking Admin in the top right. Hover over Access
Portals and, under Manage, click Access Portals. Click the name of the portal or web page you want to customize.

Click Open Site Designer.
 
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 sponsors 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.

 
To determine how many columns your section has, click Build to the right of the canvas. In the Structure and 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.
 
NOTE: Pressing just Enter in a text box field to create a double-spaced line break. Hold Shift and press Enter to make it single-spaced.
 
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, then click Widget, and make your changes.
 
NOTE: Reference the breadcrumbs in the very bottom-left of your canvas. These 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 Publish to make it visible to portal user guests.

 

Did this article resolve your issue?

Yes
No

What can we do to make this article better?

What can we do to make this article 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 this article better?

Did this article resolve your issue?

What can we do to make this article 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 this article better?

Did this article resolve your issue?

What can we do to make this article 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 this article better?

Did this article resolve your issue?

What can we do to make this article 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 this article better?

Did this article resolve your issue?

What can we do to make this article 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 this article better?

Did this article resolve your issue?

What can we do to make this article 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.