The List Widget allows you to display news and articles in a structured list format. You can customize the layout, colors, fonts, and other design elements to match your website's style.

Presets

There are multiple presets available for the News Wall widget to fit different layouts and your aesthetic preferences.

Default Style - A clean and structured list with a focus on readability.

Circular - A unique format where images appear rounded, making the design stand out.

Small Card - A smooth, modern design with rounded edges for a more visually appealing look.

Newspaper Style - A text-focused approach with no images, ideal for a simple and professional look.

Dracula - A sleek, modern style with a black background and white text, perfect for websites with a dark theme.

Modern - Articles are displayed in framed boxes with a classic layout.

Customize Settings

Customization options allow you to tailor the widget to fit your needs. These settings can be adjusted for desktop, tablet, and mobile views.

1. General Settings

Card Style – Choose the overall design of the list widget, such as Modern or Classic.

Number of Posts – Set how many articles should be displayed at a time.

Widget Padding – Adjust the spacing between the widget and other elements on the page.

Cards Padding – Modify the space between individual items in the list for better readability.

Max Width – Set a maximum width for the widget to control its size on the page.

Auto Height – Toggle this setting to allow the widget to adjust its height automatically based on the content.

Max Height – Define a maximum height for the widget to prevent it from taking up too much space.

Open Links – Choose how links should open (new window, same window, or popup).

Font Family – Select a font style to match your website’s branding.

Background Color – Choose a background color using a hex code to fit your site's design.

Auto Scroll – Enable or disable automatic scrolling through content in the widget.

Pagination -

Enable to load more content via a "Load More" button.
If pagination is enabled, customize the button’s style, font color, and text. You can also set how many posts appear before the button is triggered.

UTM Tags - UTM parameters help track traffic sources. If enabled, you can set:

UTM Source
UTM Medium
UTM Campaign
UTM Content
UTM Term

Custom CSS Section - Add custom CSS to apply specific design modifications beyond built-in settings. This allows for advanced styling and customization.

Nofollow Links - Enable or disable "no follow" attributes for links to control search engine indexing behavior.

2. Card Settings

These expandable sections allow you to fine-tune how individual card elements appear in your List widget.

Title

Enable - Toggle the display of titles on posts.
Font Size - Adjust the title font size using the plus (+) and minus (-) buttons.
Font Height - Customize the line height of the title for better readability.
Bold Font - Enable or disable bold styling for the title.
Italic Font - Enable or disable italic styling for the title.
Color - Choose a custom color for the title text using a hex code.
Align - Set text alignment (left, center, right).
Clip After X Lines - Limit the number of lines displayed in the title before truncating.

Description

Enable - Toggle the display of descriptions in posts.
Font Size - Adjust the description font size using the plus (+) and minus (-) buttons.
Font Height - Customize the description height of the title for better readability.
Color - Choose a custom color for the description text using a hex code.
Clip After X Lines - Limit the number of lines displayed in the description before truncating.

Hover

Clickable Card - Enable or disable whether the entire card is clickable.
Enable Shadow - Add a shadow effect to the card.
Enable Background - Toggle background visibility on hover.

Image

Show Image - Enable or disable the display of images in posts.
Clickable Image - Set whether images should act as links.
Radius - Adjust how rounded the edges of article cards should be.
Lazy Loading - Enable to load images only when they come into view.
Position - Choose whether images should appear on the Left or Right.

Social Sharing

Active - Enable or disable social sharing buttons on each card.
Round Icons - Choose between round or square social media icons.
Select Social Networks - Choose which social media platforms to include in the sharing options.

Border

Enable - Toggle border visibility.
Color - Choose a border color using a hex code.
Border Radius - Adjust the border radius for rounded or sharp edges.

Source & Time

Show Source & Time – Enable or disable the display of the article source and timestamp.
Show Author – Toggle the visibility of the author's name.
Position – Choose where the source and time should appear (in the Header or Footer).
Font Size – Adjust the size of the source and time text.
Color – Select the font color for the source and time.
Date Format – Customize how the date appears (e.g., MMM DD, YYYY).
Time Format – Choose how the time is displayed (e.g., None, 12-hour, 24-hour format).
Date Color – Set a specific color for the date text.

Enable Audio Player (Podcast) - Toggle to enable podcast audio playback.

Background Color - Set the footer background color using a hex code.

3. Title Settings

These settings allow you to control how the title of your feed (e.g. The New York Times - Breaking News, US News, World News and Videos) appears in your widget.

Show Title - Toggle this option to enable or disable the display of the feed title in your widget.

Font Size - Adjust the font size of the title using the plus (+) and minus (-) buttons.

Color - Choose a custom color for the title text using a hex code.

Padding Bottom - Modify the space between the title and the content below it for better spacing and layout control.

Mobile and Tablet Settings

At the top of the screen, you’ll find different icons that allow you to switch between Desktop, Tablet, and Mobile views. By clicking the settings icon, you can also configure breakpoints in pixels for different devices.

In the left bar, you can switch between Tablet and Mobile to adjust settings specific to each device type. Make sure to toggle the Enable general settings for tablet / mobile first.