Feature Large C Widget

Feature Large C Widget

Last updated 03.29.24

The Feature Large C widget is a plug and play component designed to hold two columns of text on a background color, a large background photo behind and up to two buttons. It’s styled to look great no matter what your content. This document goes over recommended image sizes and configuration settings. 

  • This feature widget is created for displaying a large amount of text. It allows for a title, and 2 columns of text.  
  • A background color to the text can be applied 
  • A background image to the text & color may also be applied.  
  • Recommended widths in pixels are Large = 1920, Medium = 1024 and Small = 640 
  • Like the rest of the feature widget, image height is dependent on amount of content.  
  • Background image should be something generic—as most of the image will not be visible as it is hidden behind the text & color. 

Add Feature Large C 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 C Properties

5. In the Feature Large C properties pop up, adjust various settings including text content, background color, background photo, number of buttons (1-2), button text, button style and button color. 
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 C Widget

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

How to reposition the Feature Large C Widget

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

Feature Large C 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.
Content [left column]Text entry field for any amount of body copy in the default paragraph style. Note this property has a text editor for adding text effects, images, small tables and text links.
Content 2 [right column]Text entry field for any amount of body copy in the default paragraph style. Note this property has a text editor for adding text effects, images, small tables and text links.
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.
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 640 x640 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 1024 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 1920 x 640 pixels. Image should not be more than 100kb in file size.

Feature Large C Widget Examples

Feature Large C Widget

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Bibendum ut tristique et egestas quis ipsum suspendisse ultrices gravida. Eu augue ut lectus arcu. Proin sed libero enim sed. Mauris sit amet massa vitae. Lacus sed turpis tincidunt id aliquet risus. 

Eget lorem dolor sed viverra ipsum nunc aliquet bibendum enim. Scelerisque purus semper eget duis at tellus at urna condimentum. Lorem sed risus ultricies tristique nulla aliquet. Nunc congue nisi vitae suscipit tellus mauris a diam maecenas. Dictum fusce ut placerat orci nulla. Sem integer vitae justo eget magna fermentum iaculis. Nec feugiat nisl pretium fusce id velit.

Feature Large C Widget

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 15725 37th ave N , Suite 7, Plymouth MN 55446

Lorem ipsum dolor sit amet, consectetur adipiscing elit

  • Eiusmod tempor incididunt ut labore et dolore magna aliqua.
  • Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  • Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Feature Large C Widget

Eget est lorem ipsum dolor sit amet consectetur adipiscing

Purus ut faucibus pulvinar elementum integer enim neque volutpat ac. Amet risus nullam eget felis eget nunc lobortis. Arcu non odio euismod lacinia at quis risus sed. Pulvinar sapien et ligula ullamcorper malesuada proin. Quis hendrerit dolor magna eget est lorem ipsum dolor. Quam lacus suspendisse faucibus interdum posuere lorem ipsum. Curabitur gravida arcu ac tortor dignissim convallis aenean et. Donec massa sapien faucibus et molestie. Nisi quis eleifend quam adipiscing vitae proin. Tempor id eu nisl nunc. Aliquam id diam maecenas ultricies. Porttitor leo a diam sollicitudin tempor id eu nisl. Lacus vel facilisis volutpat est velit egestas dui. Cras ornare arcu dui vivamus arcu felis bibendum ut. Consectetur lorem donec massa sapien faucibus et molestie. Ultricies tristique nulla aliquet enim tortor at auctor.

Metus aliquam eleifend mi in nulla posuere sollicitudin. Habitant morbi tristique senectus et netus et malesuada fames. Mi ipsum faucibus vitae aliquet. Odio morbi quis commodo odio aenean sed adipiscing diam donec. Ut enim blandit volutpat maecenas. Risus ultricies tristique nulla aliquet enim tortor at auctor. In tellus integer feugiat scelerisque varius morbi. Consequat nisl vel pretium lectus quam id. Volutpat consequat mauris nunc congue nisi. Ornare arcu odio ut sem nulla.

Rutrum tellus pellentesque eu tincidunt tortor aliquam nulla. Feugiat pretium nibh ipsum consequat nisl vel pretium lectus. Accumsan tortor posuere ac ut. Arcu odio ut sem nulla pharetra diam sit amet nisl. Sed blandit libero volutpat sed. Erat velit scelerisque in dictum. Facilisis sed odio morbi quis commodo odio. Sagittis eu volutpat odio facilisis mauris sit amet massa. At erat pellentesque adipiscing commodo. Suspendisse potenti nullam ac tortor vitae purus. Amet luctus venenatis lectus magna fringilla urna porttitor rhoncus dolor. Placerat vestibulum lectus mauris ultrices eros in cursus. Tincidunt id aliquet risus feugiat in ante metus.

Ut consequat semper viverra nam libero justo laoreet sit amet. Aliquam etiam erat velit scelerisque in. Nibh mauris cursus mattis molestie. Purus non enim praesent elementum. Elementum eu facilisis sed odio. Tortor aliquam nulla facilisi cras fermentum odio eu feugiat. Arcu odio ut sem nulla pharetra diam sit amet nisl. Mauris a diam maecenas sed. Ultrices mi tempus imperdiet nulla malesuada. Nisl pretium fusce id velit ut tortor. Velit egestas dui id ornare arcu odio ut sem. Vel eros donec ac odio tempor orci dapibus ultrices. Aliquet bibendum enim facilisis gravida neque convallis a.

Ut eu sem integer vitae justo. Cras sed felis eget velit aliquet sagittis id. Cursus in hac habitasse platea dictumst. Urna nec tincidunt praesent semper. Proin sagittis nisl rhoncus mattis rhoncus urna neque viverra. Diam maecenas sed enim ut sem viverra aliquet. Cursus euismod quis viverra nibh cras pulvinar mattis nunc. Lectus arcu bibendum at varius vel pharetra vel turpis. Vulputate sapien nec sagittis aliquam malesuada. Odio tempor orci dapibus ultrices in iaculis. Justo eget magna fermentum iaculis eu non diam phasellus. Egestas diam in arcu cursus euismod quis viverra.] Gravida arcu ac tortor dignissim convallis aenean et tortor at. Egestas quis ipsum suspendisse ultrices gravida dictum. Montes nascetur mus mauris vitae. Et magnis dis parturient montes nascetur mus mauris vitae. Consectetur a erat nam at lectus urna duis convallis.

Rhoncus urna neque viverra justo nec. Non odio euismod lacinia at quis risus sed. Congue nisi vitae suscipit tellus mauris a diam maecenas sed. Ut enim blandit volutpat maecenas. A erat nam at lectus urna duis convallis convallis. Nec sagittis aliquam malesuada bibendum. Ac tortor dignissim convallis aenean et tortor at risus viverra. Dictumst quisque sagittis purus sit amet volutpat consequat mauris nunc. Amet purus gravida quis blandit turpis cursus in hac habitasse. Morbi tristique senectus et netus. Ipsum dolor sit amet consectetur adipiscing elit duis tristique sollicitudin. Curabitur vitae nunc sed velit dignissim. Tristique magna sit amet purus gravida quis blandit turpis cursus. At ultrices mi tempus imperdiet. Mauris cursus mattis molestie a iaculis.

Lectus quam id leo in vitae turpis massa. Pellentesque adipiscing commodo elit at imperdiet. Scelerisque eu ultrices vitae auctor. Netus et malesuada fames ac. Morbi tristique senectus et netus et malesuada. Imperdiet nulla malesuada pellentesque elit eget gravida cum. Aliquam sem et tortor consequat id porta nibh. Donec ac odio tempor orci dapibus. Volutpat commodo sed egestas egestas fringilla phasellus faucibus scelerisque. Malesuada fames ac turpis egestas. Nunc faucibus a pellentesque sit amet porttitor.

Augue lacus viverra vitae congue eu. Aliquam ut porttitor leo a. Pellentesque nec nam aliquam sem et tortor consequat id porta. Id ornare arcu odio ut sem nulla. Sapien pellentesque habitant morbi tristique senectus et netus. Suspendisse ultrices gravida dictum fusce ut placerat orci nulla. Id interdum velit laoreet id. At varius vel pharetra vel turpis nunc. Aliquam ultrices sagittis orci a scelerisque purus semper eget. Fames ac turpis egestas integer. Pellentesque habitant morbi tristique senectus. Non blandit massa enim nec dui. Vel fringilla est ullamcorper eget nulla facilisi etiam dignissim. Eleifend quam adipiscing vitae proin sagittis nisl. Arcu cursus vitae congue mauris rhoncus aenean vel. Nunc vel risus commodo viverra maecenas accumsan lacus vel facilisis. Nulla facilisi nullam vehicula ipsum a. Tempus quam pellentesque nec nam aliquam sem.