Sec Simple Listing

 

The Sec Simple Listing module displays content in organized, filterable lists with icons and links. Common use cases include:

• Job listings and career pages
• Event calendars and upcoming activities
• Publication archives and resources
• News releases and press announcements
• Product catalogs and feature lists
• Team member directories
• Service offerings and packages
• Portfolio items and case studies

 

Module Options

Intro to Title

The smaller text displayed above the main title. Leave blank to hide this field on the page.

Title

The main heading for the section. This field is optional and can be left blank.

Title - Header Type

Choose the HTML heading level for SEO purposes:

• H1: Page title (use once per page)
• H2: Major sections
• H3: Subsections
• H4: Minor subsections

Important: This setting controls the HTML heading type for Google indexing, not the visual font size. To adjust font appearance, use Style → Title Size

Description

Add any amount of body text to describe your listing section. Leave blank if no description is needed.

How do I add and manage list items?

List Item

Add, edit, clone, or delete list items. List items are sub-elements that contain multiple configurable settings.

Managing list items:

• Add: Click the add button to create new items
• Edit: Modify existing item settings
• Clone: Duplicate an item to save time
• Delete: Remove unwanted items

Tip: Clone similar items and modify details rather than creating each from scratch.

List Item(s) → Title

Add the title for each list item. This appears as the main heading for the item.

List Item(s) → Description

Add a description using the Rich Text Editor. You can include:

• Formatted text (bold, italic, lists)
• Links
• Multiple paragraphs
• Basic HTML formatting

Best practice: Keep descriptions concise (50-150 words) for scanability.

List Item(s) → Link

The Link dropdown allows you to choose the link type:

• External: Link to external websites
• Content: Link to HubSpot pages
• File: Link to downloadable files
• Email Address: Create mailto links
• Phone Number: Create tel links
• Blog: Link to blog posts

Based on your selection, you can enter the URL, choose content, select a file, or configure contact details.

List Item(s) → Link → Open in New Window

Toggle to open links in a new window/tab.

Default: Opens in the same window/tab.

Tip: For breadcrumb navigation showing the user's path, it's recommended to open in the same window/tab. For external links, open in a new window.

List Item(s) → Link → Link Type

Check "No Follow" to indicate the link is not associated with your website.

Important: This setting has SEO implications if used incorrectly. Only use for untrusted or paid links.

List Item(s) → Link → Use Internal URL instead

Configure internal URLs for anchor links on this page or other pages instead of using the external URL setting.

Use case: Create links like #contact-form or /about#team

List Item(s) > Choose Link Icon Variant

Select the icon source for your list items.

To use the included icon library, set to Fontawesome Icon (FREE). For Font Awesome Pro accounts, select Fontawesome Icon (PRO).

If you have a Font Awesome Pro account and would like to use a custom icon library, select Fontawesome Icon (PRO).

List Item(s) > Choose Link Icon Variant > Fontawesome Icon (FREE)

How do I use Font Awesome Free icons?

• Set Fontawesome Icon Variant to Fontawesome Icon (FREE)
• Click Select icon to open the included library (v 5.0.10)
• Browse and select your desired icon
• Once selected, you can Replace or Remove the icon

List Item(s) > Choose Link Icon Variant > Fontawesome Icon (PRO)

How do I use Font Awesome Pro icons?

If you have a Font Awesome Pro account:

1. Set Fontawesome Icon Variant to Fontawesome Icon (PRO)
2. Paste the icon class from your Font Awesome Pro library
3. Ensure you've completed the initial FontAwesome Pro configuration

Important: Make sure you've completed the initial configuration for FontAwesome Pro, if you limit the URL to your website will cause the icons to not display in the page editor.

List Item(s) → Additional Info

Add supplementary text information with optional icons. This is useful for displaying metadata like dates, locations, or categories.

List Item(s) → Additional Info(s) → Text

Add the text for the additional information field.

Examples:

• "Location: Remote"
• "Date: March 15, 2025"
• "Duration: 2 hours"
• "Category: Technology"

List Item(s) → Additional Info(s) → Choose Icon Variant

Select an icon for the additional info using the same FontAwesome Icon (FREE) or (PRO) options as the main list item icons.

Tip: Use consistent icons across similar information types (e.g., calendar icon for all dates, location pin for all locations).

How do I set up filtering for list items?

List Item(s) → Filtering → Categories

Add comma-separated categories for each list item to enable filtering.

To group items in the same category:

• Use the exact same category name across multiple items
• Category names are case-sensitive
• Separate multiple categories with commas

Examples:

• Single category: Technology
• Multiple categories: Technology, Featured, Remote

Filter - Use Category "All"

If you configured filter categories, use this checkbox to show or hide the "All" category which displays all list items.

Checked: "All" button appears in filter bar Unchecked: Only specific categories appear

Filter - Active Category

Add the category name to set as the default when the page loads.

Example: Enter Featured to show only featured items initially.

Tip: Use this to highlight specific content while still allowing users to view all categories.

List Item(s) → Style → Overwrite Hover Colors

Option to Overwrite the Box Overlay and Box Text Colors used On Hover for the List Item.

This can also be overwritten for all List Items in the module under Style → Overwrite Hover Colors ↓.

List Item(s) → Animation

Ability to change the Animation Type and Delay for the individual List Item. 

List Item(s) → Standard Text / Translation → Link Text

Change the default link text "GET HIRED NOW" for the List Item.

What layout options are available?

Layout → Choose Layout

Two main layout options determine how list items are displayed:

Box Layout

• List items displayed in card-style boxes
• Includes hover effects and overlays
• Best for visual content with images or icons

Text Layout

• List items displayed in text-based format
• More compact, list-style appearance
• Best for content-heavy listings without images

Layout → Choose Layout → Box

Layout → Choose Layout → Text

Layout → Filter Layout

Choose how category filters are displayed:

• List: Filters appear as horizontal buttons
• Dropdown: Filters appear in a dropdown menu

Tip: Use dropdown for 5+ categories to save space. Use list for 2-4 categories for easier access.

Layout → Intro Width

Control the width of section text:

• Narrow (default): Limits the width of intro title, title, and description text
• Default: Text fills available module width based on Full Width/Content Width settings

Layout → Centered

Enable to center-align section text (intro title, title, and description).

Default: Left-aligned content.

Layout → Padding & Margin Top and Bottom

Select spacing options:

• Standard: Default theme spacing
• None: No spacing
• Small: Minimal spacing
• Medium: Moderate spacing
• Large: Maximum spacing
• First Section with Header: Special spacing for first page section

Refer to your theme settings for these for more information on this sizing. 

How do I style the module?

Style → Color Scheme

Choose the base color scheme:

• Light: Light background with dark text
• Dark: Dark background with light text

Important: When you change the module background color, toggle the color scheme to ensure text remains legible.

Style → Intro Title Style - Text

Control intro title text appearance:

• Default: Inherits from Theme Settings based on color scheme
• Color: Override with custom color
• Gradient: Override with gradient effect

Style → Intro Title Style - Background

Set background behind intro text:

• Default: Transparent (text displays directly on module background)
• Color: Apply solid background color for highlight effect
• Gradient: Apply gradient background for highlight effect

Style → Intro Title Style - Border Radius

Configure rounded corners for the background highlight (in pixels). If not set, defaults to your Theme Settings.

Style → Title Style

Control main title appearance:

• Default: Inherits from Theme Settings based on color scheme
• Color: Override with custom color
• Gradient: Override with gradient effect

Style →  Title Size

Choose visual size for the title:

• Default: Matches Title Header-Type (H1-H4)
• Override: Select H1, H2, H3, H4, H5, or H6 for styling based on Theme Settings

Important: This changes visual appearance only, not the SEO heading type.

Style →  Overwrite Box Color

Enable to change the box color for the "Box" layout.

Note: Box Color refers to the background color of the list item box, not the hover color.

Style → Overwrite Box Color → Color Scheme

Choose between:

• Light: Light background with dark text
• Dark: Dark background with light text

Tip: When you change the module background color, adjust the box color scheme to ensure text remains legible.

Style → Overwrite Box Color → Custom Box Background Color

Customize the box color:

• Change default Light or Dark color using Hex values
• Control color opacity on a scale of 0 to 100%

Example: Use 90% opacity for a subtle overlay effect that allows background colors to show through.

Style → Overwrite Hover Colors

Enable to change the Box Overlay and Box Text Colors used on hover for all list items.

This can also be overwritten for individual List Items under List Item(s) → Style → Overwrite Hover Colors ↑.

Style → Background

Choose from multiple background types:

• Background Color: Solid color fill
• Background Image/Video: Media background
• Background Gradient: Color gradient effect
• Transparent: No background

Style → Different Filter Style?

Enable to change the background color for the filter bar independently from the main module background.

Style → Different Filter Style? → Filter Color Scheme

Choose between:

• Light: Light background with dark text
• Dark: Dark background with light text

Style → Different Filter Style? → Filter Background Color

Configure custom color and opacity for the filter background.

Tip: Use a slightly different shade than the main background to visually separate filters from content.

Style → Shape Divider

Add optional shape dividers to the top or bottom of the module for visual separation between sections.

Refer to Settings for configuring Shape Dividers for more details about these choices.

How do I enable the slider functionality?

Slider

See Simple Listing Slider in Action

The Slider settings are located above the Layout section, when clicked it will open these settings to activate the slider.

Slider → Use Slider?

Check this box to activate slider functionality for your list items. This displays items in a carousel format.

Slider → Number of visible items

Set how many items display at once:

• Default is 2
• Minimum is 1
• Maximum is unlimited (though higher numbers affect layout)

Slider → Number of items to slide

Set how many items advance with each transition:

• Default is 1
• Don't set higher than the number of visible items
  
  

Slider → Transition Option

Choose how users navigate the slider:

Manual

• Users click arrows or bullet points
• Users press arrow keys on keyboard
• No automatic advancement

Autoplay (default)

• Slides advance automatically at set intervals
• User can still manually navigate

Continuous

• Slides advance continuously without pause
• Creates seamless, constant motion

Slider → Transition Time

Set the duration of the slide transition in milliseconds. Applies to Autoplay or Continuous options.

Recommended: 300-800ms for smooth transitions

Slider → Transition Effect

The effect is set to Slide for smooth horizontal transitions.

Slider → Autoplay - Interval Timeout

Set the pause duration between automatic slides in milliseconds. Applies to Autoplay or Continuous options.

Recommended: 4000-6000ms (4-6 seconds) for users to read content

Slider → Navigation - Arrows

Check to activate left and right arrows on the slider for navigation.

Recommended: Always enable for clear user control.

Slider → Navigation - Bullets

Check to activate bullet points below the slider for navigation.

Recommended: Enable for users to see how many slides exist and their current position.

Slider → Keyboard Control

Check to activate slider control via arrow keys on the keyboard.

Important: Only works when the slider is visible in the browser viewport. This setting is recommended for accessibility.

How do I add animations to the module?

Animation

Enable or disable Animate on Scroll for the entire module. Turning off here applies only to this section.

Note: To turn animation off globally for all modules, refer to Theme Options for Animations.

Animation → Section

Set animation type and delay for the entire section container.

Animation → Intro to Title

Set animation type and delay specifically for the intro title text.

Animation → Title

Set animation type and delay specifically for the main title.

Animation → Description

Set animation type and delay specifically for the description text.

Animation → Filter

Set animation type and delay specifically for the filter bar.

Tip: Animate the filter bar with a slight delay (100-200ms) after the main content for a layered reveal effect.

How do I set animations for individual list items?

List Item(s) → Animation

Change the Animation Type and Delay for each individual list item independently.

This allows you to:

• Create staggered animation effects as items appear
• Disable animation for specific items
• Control the timing of each item's entrance

Tip: Add 50-100ms delays between consecutive items for a cascading reveal effect.

How do I control module visibility?

Visibility

Choose to hide your module on specific screen sizes:

• Hide on desktop only
• Hide on tablet only
• Hide on mobile only
• Show on all devices (default)

Use case: Display simplified list views on mobile while showing detailed box layouts on desktop.

For more information see common module information. 

Standard Text/Translations → Filter Text "All"

Change the default filter text from "All" to your preferred label.

Examples:

• "All Items"
• "View All"
• "Show Everything"
• "All Categories"

Tip: Use language that matches your content type (e.g., "All Jobs" for job listings, "All Events" for event calendars).

List Item(s) → Standard Text / Translation → Link Text

Change the default link text "GET HIRED NOW" for individual list items.

Examples:

• "Learn More"
• "View Details"
• "Apply Now"
• "Register Here"
• "Read Article"

Best practice: Use action-oriented text that clearly indicates what happens when clicked.

How do I set up anchor links?

Anchor Link ID

Set an anchor link identifier for the module. Use anchor links to:

• Create direct links to specific sections
• Build on-page navigation menus (like Sticky Sub-Menu)
• Allow users to jump to sections without scrolling

Example: Set Anchor Link ID as "job-listings" to create links like yoursite.com/careers#job-listings

For full instructions refer to Setting up Anchor Links.

How do I add custom CSS classes?

Custom Class

Add a Custom Class identifier to use in the child.css file for individual customizations.

This allows you to:

• Apply unique styling to specific listing modules
• Override theme styles for particular instances
• Create reusable custom styles across multiple pages

See full instructions for setting a Custom Class for Section Modules.

---

What is the "Is in Viewport" setting?

Is in Viewport?

This performance setting determines how CSS is loaded for the module.

When to check this box:

• Module is at the top of the page
• Module is located within the browser viewport on page load
• Ensures CSS loads immediately on page load

When to uncheck this box:

• Module is outside of the initial viewport
• Module is below the fold, especially on mobile
• Allows CSS to load asynchronously for better performance

Important: This setting impacts Page Speed and Core Web Vitals scores.

Learn more about this setting as it relates to Page Speed and Core Vitals.