Feature Large B Widget

Feature Large B Widget

Last updated 11.02.22

This Feature Large B Widget is a plug and play component designed to hold text, a large photo and up to two buttons with or without a background color or image. It’s styled to look great no matter what your content. This document goes over recommended image sizes and configuration settings.

  • This feature widget allows for a more vertical, larger image to be displayed next to text 
  • The layout can be flipped 
  • Option for up to 2 buttons 
  • Recommended image width is 960 pixels for large, 640 for medium, and 320 for small. (Recommended to not be over 100kb) 
  • This requires a very large, high quality photo 
  • Height is dependent on amount of text next to it as it will stretch any image as it gets longer 
  • We recommend putting the text in first, so you can get a better idea of the height necessary of the photo. 
  • Availability of background colors 

Add Feature Large B to the page

1. Select where on the page you would like the widget to appear. 
2. Click on the blue plus add widget icon   
3. Select the Feature Large B widget from the widget pop up 
4. Once the widget is added to the page, hover over the added widget until it displays the properties and trash icons. Click on the gear-shaped properties icon. 

Feature Large B Properties

5. In the Feature Large B properties pop up, adjust various settings including text content, background color, number of buttons (1-2), button text, button style and button color. The photo can be flipped to be on the left or right. 

Note each button is styled separately. They can be different colors and styles.

6. Click Apply button to update the widget with selected properties. The properties pop up will automatically close.

How to delete the Feature Large B Widget

Hover over the Feature Large B widget until it displays the properties and trash icons and click on the trash icon to delete. 

How to reposition the Feature Large B Widget

Hover over the Feature Large B widget until it displays the grab icon on the left. Simply drag and drop in a new location. 

Feature Large B Widget Properties

PROPERTYDESCRIPTION
VisibleChecking and unchecking the checkbox toggles widget visibility on the page. This allows for prepping the content in edit mode before widget debut.
HeaderText entry field for a limited large headline.
Button Properties: Number of ButtonsThe widget can feature none, one or two buttons by selecting a number from the menu. If the user selects 0 no buttons will display.  Anything other than 0 the Button and the below properties will display  
[Button] TextEnter text to be featured on each button. Typically shorter text is better for ease of reading and to keep the design tidy. If text field is blank, the button will not display.
[Button] StyleSelect pre-built style options from the menu. Note that if two buttons are featured, each one may have its own style. Below is the list of styles that can be selected:
• Default - a rectangular shape with a solid-color fill
• Round - a pill shape with a solid-color fill
• Radius - a rectangle with slightly rounded corners with a solid-color fill
• Hollow - a rectangular outline shape with a transparent fill
• Expanded - an extra-wide rectangular shape with a solid-color fill
• Disabled - a rectangular shape faded back to denote that it is disabled
• Clear - a transparent button with only text visible
[Button] ColorSelect from your custom brand colors or grayscale options from the menu for button fills or outlines. Note that if two buttons are featured, each one may have its own color. Below is the list of colors that may be selected:
• Default  
• Primary Color  
• Primary Color – Light  
• Primary Color – Dark  
• Secondary Color  
• Secondary Color – Light  
• Secondary Color – Dark  
• Gradient  
• White  
• Light Gray  
• Medium Gray  
• Dark Gray  
• Black

[Button] Target Below are the targets to choose from:
Default – this will open in the same tab of the browser and is typically used to move around within your site
Blank – this will open in a new tab of the browser and is typically used for links that leave your site
[Button] Target URL The URLs attached to the button can simply link to another page of the website, to an anchor link on a page, to a different website, can automatically open a pre-addressed email, link to a phone number or a document from the Media Library Application.
Check the “URL is Internal” checkbox to access the Pages Application or the Media Library Application to select a page in the site or a document.
Flip LayoutThe Flip Layout checkbox swaps the image on the right layout to an image on the left layout to add variety to the design.
Invert Text ColorTypically the widget can guess if the text should be dark or white depending on what color background is behind it. But if the visual can be improved by a change from one to the other, click the Invert Text Color checkbox.
Background Color The background color attribute effects the color behind the text and the image to the full width of the page. Initially, Default is selected, which is no color added. Select from your custom brand colors or grayscale options from the menu. Additionally, you can select any color by adding the hexidecimal color code. Below is the list of Background colors that can be selected:
• Default (None)
• Primary
• Primary Color - Light
• Primary Color - Dark
• Secondary
• Secondary - Light
• Secondary - Dark
• Gradient
• White
• Light Gray
• Medium Gray
• Dark Gray
• Black
• Custom (enter color in hex format – ex. #2c6090)
Background Image SmallAs an alternative to a background color it is possible to select a large image to appear behind the text and image of the widget. Care should be taken to allow for text readability and clean design.

Clicking the Select button opens a dialog box allowing you to select an image via the Media Library Application.

For the small background image for mobile devices the recommended size 320 x 213 pixels. Image should not be more than 100kb in file size.
Background Image MediumClicking the Select button opens a dialog box allowing you to select an image via the Media Library Application.
For the medium background image for tablets the recommended size is 640 x 427 pixels. Image should not be more than 100kb in file size.
Background Image LargeClicking the Select button opens a dialog box allowing you to select an image via the Media Library Application.
For the large background image for desktop the recommended size 960 x 640 pixels. Image should not be more than 100kb in file size.

Feature Large B Widget Examples

A dramatic effect is created when several of these widgets are stacked.

Feature Large B Widget

This Feature Large B Widget is a plug and play component designed to hold text, a large photo and up to two buttons with or without a background color or image. It’s styled to look great no matter what your content. This document goes over recommended image sizes and configuration settings.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Venenatis cras sed felis eget velit aliquet. Sed cras ornare arcu dui vivamus. In dictum non consectetur a erat nam at lectus. Mauris cursus mattis molestie a iaculis at. Euismod elementum nisi quis eleifend quam adipiscing vitae proin. Id donec ultrices tincidunt arcu non. Fringilla urna porttitor rhoncus dolor purus. Arcu risus quis varius quam. Eget mi proin sed libero enim sed faucibus. Maecenas ultricies mi eget mauris pharetra et ultrices neque.

Feature Large B Widget

This Feature Large B Widget is a plug and play component designed to hold text, a large photo and up to two buttons with or without a background color or image. It’s styled to look great no matter what your content. This document goes over recommended image sizes and configuration settings.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Venenatis cras sed felis eget velit aliquet. Sed cras ornare arcu dui vivamus. In dictum non consectetur a erat nam at lectus. Mauris cursus mattis molestie a iaculis at. Euismod elementum nisi quis eleifend quam adipiscing vitae proin. Id donec ultrices tincidunt arcu non. Fringilla urna porttitor rhoncus dolor purus. Arcu risus quis varius quam. Eget mi proin sed libero enim sed faucibus. Maecenas ultricies mi eget mauris pharetra et ultrices neque.

Feature Large B Widget

This Feature Large B Widget shows the layout flipped. When adding multiple Feature Large B Widgets back to back on a page we suggest flipping the layouts. Flipping layouts will divide the section information and give your website a dynamic design.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Venenatis cras sed felis eget velit aliquet. Sed cras ornare arcu dui vivamus. In dictum non consectetur a erat nam at lectus. Mauris cursus mattis molestie a iaculis at. Euismod elementum nisi quis eleifend quam adipiscing vitae proin. Id donec ultrices tincidunt arcu non. Fringilla urna porttitor rhoncus dolor purus. Arcu risus quis varius quam. Eget mi proin sed libero enim sed faucibus. Maecenas ultricies mi eget mauris pharetra et ultrices neque.