Feature Large F Widget

Feature Large F Widget

Last updated 02.13.25

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

  • Built to display a picture, text & button(s) 
  • Can flip layout for text box to be on opposite side 
  • Best for large horizontally orientated photos 
  • Can have a background image 
  • Recommended width of image is 1920 (desktop), 1024 (tablet), 640 (mobile) pixels or larger but should not be more than 100kb. 
  • Height is dependent on amount of content (text)…the more text, the taller the image will need to be to fill the space 

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

  1. In the Feature Large D properties pop up, adjust various settings including text content, background color, number of buttons (1-2), button text, button style and button color. The text box can be flipped to be on the left or right. Note each button is styled separately. They can be different colors and styles.
  2. Click Apply button to update the widget with selected properties. The properties pop up will automatically close.

How to delete the Feature Large F Widget

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

How to reposition the Feature Large F Widget

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

Feature Large F 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.
Enable H1 Header Tag
Checkbox to add the H1 Header Tag to the widget to improve SEO. Each web page should only contain one H1 Header Tag. Please ensure no other H1 is present on this page when checking this box.
SubheaderText entry field for subhead in H4 styled text below header and above paragraph content.
ContentText 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 Buttons The 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 Select Page
Checked: clicking the Select Button opens a dialog box to access content pages within the current site only.
Note that it is possible to type directly in the Target URL field to add the URL to an anchor tag within the site, to type in a third-party URL to leave the site, to open an email (mailto: emailaddress.com) or link to a phone number (tel: 000-000-000).
Unchecked: opens dialog box to specifically access the Media Library to select an image or document.
Flip LayoutThe Flip Layout checkbox swaps the text box on the right layout to a text box 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)
Text Background ColorThe background color attribute effects the color behind the text only in the text box. 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 ImageClicking the Select button opens a dialog box allowing you to select an image via the Media Library Application.

Small
For the small background image for tablets the recommended size is 600 x 640 pixels. Image should not be more than 100kb in file size.

Medium
For the medium background image for tablets the recommended size is 1024 x 512 pixels. Image should not be more than 100kb in file size.

Large
For the large background image for desktop the recommended size 1920 x 640 pixels. Image should not be more than 100kb in file size.
AnimationClicking the checkbox will engage a parallax scroll animation effect automatically for this single widget.

Feature Large F Widget Examples

Feature Large F with Animation

Subheader Text

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

Feature Large F No Animation

Subheader Text

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