Articles

The Articles widget allows you to display a dynamic list or grid of various content types from your store, such as product categories, brands, suppliers, or CMS pages and categories. You can control the source of the content, the layout (grid, masonry, inline), which elements to show (image, title, excerpt, CTA), and apply styling to create engaging content showcases.

Content tab

Configure the source, layout, and content elements for the articles display.

Articles widget Content tab - Source & Query

Source & Query

Source

Chooses the type of content to display: Catalog (Categories, Brands, Suppliers) or CMS (Categories, Pages).

Category Root (Catalog)

Selects the parent category whose subcategories will be displayed; this setting applies when 'Source' is 'Catalog › Categories'.

Category Root (CMS)

Selects the parent CMS category whose subcategories or pages will be displayed; this setting applies when 'Source' is 'CMS › Categories' or 'CMS › Pages'.

Order By

Sets the sorting criteria for the articles: Default, Position, Title, Date (ID), or Random.

Order Direction

Chooses the sorting direction: Ascending or Descending; this setting is not applicable for 'Random' order.

Offset

Specifies the number of articles to skip from the beginning of the list (e.g., enter '2' to skip the first two articles).

Limit

Sets the maximum number of articles to display; leave empty or enter '0' for no limit.

Articles widget Content tab - Heading

Article Heading

Heading

Enter an optional main title to display above the articles grid.

Display (Heading)

Adjusts the predefined visual size for the main heading (Small, Medium, Large, XL, or XXL).

HTML Tag (Heading)

Selects the appropriate HTML tag (H1-H6, Div, Span, or Paragraph) for the main heading.

Articles widget Content tab - Layout & Display

Layout & Display

Layout

Chooses the arrangement of articles: Grid, Masonry, or Inline (horizontal scroll).

Columns

Sets the number of columns for Grid or Masonry layouts on different devices.

Column Width (Inline Layout)

Sets the width of individual columns when 'Layout' is 'Inline'.

Scroll Snap (Inline Layout)

Enables articles to snap to the start of the viewport when scrolling horizontally in 'Inline' layout.

Articles widget Content tab - Image

Image

Image

Toggles the visibility of the article's featured image (e.g., category image, brand logo).

Image Size (Category)

Chooses the predefined image size for category images; this setting applies if 'Source' is 'Catalog › Categories'.

Image Size (Brand)

Chooses the predefined image size for brand logos; this setting applies if 'Source' is 'Catalog › Brands'.

Image Size (Supplier)

Chooses the predefined image size for supplier logos; this setting applies if 'Source' is 'Catalog › Suppliers'.

Image Position

Sets the position of the image relative to the text content within each article box (Top, Left, Right, or Bottom).

Articles widget Content tab - Title

Title (Per Article)

Title

Toggles the visibility of the individual article's title (e.g., category name, brand name, page title).

Title Display

Adjusts the predefined visual size for individual article titles.

Title HTML Tag

Selects the appropriate HTML tag for individual article titles.

Subtitle

Chooses what to display as a subtitle below the title: None, Meta Title, Meta Description, Read Time, or Custom text.

Before (Subtitle - Read Time)

Enter text to display immediately before the 'Read Time' subtitle; this setting is visible if 'Subtitle' is 'Read Time'.

After (Subtitle - Read Time)

Enter text to display immediately after the 'Read Time' subtitle; this setting is visible if 'Subtitle' is 'Read Time'.

Custom Subtitle Text

Enter your custom text if 'Subtitle' is set to 'Custom'.

Articles widget Content tab - Excerpt

Excerpt

Excerpt

Toggles the visibility of a short excerpt or description for each article.

Excerpt Length

Sets the maximum number of characters for the excerpt; this setting is visible if 'Excerpt' is enabled.

Articles widget Content tab - Call to Action

Call to Action

Call to Action

Toggles the visibility of a 'Read more' or 'View products' link for each article.

Text (CMS)

Customizes the text for the call to action link for CMS pages/categories (e.g., "Read More »"); this setting is visible when 'Call to Action' is enabled and 'Source' is not a Catalog type.

Text (Catalog)

Customizes the text for the call to action link for catalog categories/brands/suppliers (e.g., "View Products"); this setting is visible when 'Call to Action' is enabled and 'Source' is a Catalog type.

Apply Link On

Determines whether the link applies only to the default element (e.g., title, button) or to the entire article box.

Articles widget Content tab - No Results

No Results

Empty Message

Enter a message to display when no articles are found matching the query criteria.

Style tab

Customize the appearance of the main heading, layout, article boxes, images, and content.

Articles widget Style tab - Heading

Styles below apply only if a Heading is entered in the Content tab.

Heading

Spacing

Adjusts the space below the main heading.

Alignment

Aligns the main heading horizontally.

Text Color

Sets the color of the main heading text.

Typography

Controls the font family, size, weight, and other typographic settings for the main heading.

Text Stroke

Applies an outline effect to the main heading text.

Text Shadow

Applies a shadow effect to the main heading text.

Articles widget Style tab - Layout

Layout

Columns Gap

Adjusts the horizontal spacing between article columns.

Rows Gap

Adjusts the vertical spacing between article rows.

Alignment

Aligns the entire articles block (container of all articles).

Vertical Alignment

Aligns the content (image and text) vertically within each article box when 'Image Position' is 'Left' or 'Right'.

Articles widget Style tab - Box

Article Box

Box Shadow (Normal & Hover)

Applies a shadow effect to individual article boxes for both their normal and hover states.

Background Color (Normal & Hover)

Sets the background color for article boxes for both their normal and hover states.

Border Color (Normal & Hover)

Sets the border color for article boxes for both their normal and hover states.

Border Width

Controls the thickness of the border around each article box.

Border Radius

Adjusts the roundness of the corners for each article box.

Padding (Box)

Defines the inner padding for the entire article box (around both image and text content).

Content Padding

Defines the inner padding specifically for the text content area within each article box.

Articles widget Style tab - Image

Styles below apply only if 'Image' is enabled in the Content tab.

Image

Spacing

Adjusts the space between the image and the text content within an article.

Aspect Ratio

Sets a fixed aspect ratio for the images.

Object Fit

Controls how images resize to fit their container when an aspect ratio is set (Fill, Cover, Contain, or Scale Down).

Width

Sets the width of the image container within the article box.

Border Radius

Adjusts the roundness of the corners for the images.

CSS Filters (Normal & Hover)

Applies visual effects like blur or brightness to images for both their normal and hover states.

Hover Animation

Applies an animation effect to the image when the mouse hovers over it.

Transition Duration

Sets the time it takes for image hover effects to transition smoothly.

Articles widget Style tab - Content Elements

Title (Article)

Color

Sets the text color for individual article titles.

Typography

Controls the font family, size, weight, and other typographic settings for individual article titles.

Spacing

Adjusts the space below individual article titles.

Subtitle

Color

Sets the text color for the article subtitles.

Typography

Controls the font family, size, weight, and other typographic settings for article subtitles.

Spacing

Adjusts the space below article subtitles.

Excerpt

Color

Sets the text color for article excerpts.

Typography

Controls the font family, size, weight, and other typographic settings for article excerpts.

Spacing

Adjusts the space below article excerpts.

Call to Action

Color

Sets the text color for the 'Read more' or 'View products' link.

Typography

Controls the font family, size, weight, and other typographic settings for the call to action link.

Articles widget Style tab - No Results

No Results

Styles below apply only if 'Empty Message' is entered in the Content tab.

Color

Sets the text color for the 'No Results' message.

Typography

Controls the font family, size, weight, and other typographic settings for the 'No Results' message.

Advanced tab

Access advanced layout, motion, and custom CSS options.

Advanced Tab Layout

Layout

Margin

Set the outer spacing around the widget's container, with options for PX or % units, and individual control for Top, Right, Bottom, and Left.

Padding

Set the inner spacing within the widget's container, with options for PX, EM, or % units, and individual control for Top, Right, Bottom, and Left.

Width

Control the width of the widget: Default, Full Width (100%), Inline (auto), Custom (numeric value), or Calculate (CSS calc function).

Full width
  • Vertical align : Align the widget vertically within its parent column to start, center, end, or stretch.
  • Size : Control how the widget grows to fill available space within its container (None, Grow, Custom).
    • Grow : Define the flex-grow factor when 'Size' is set to 'Custom'.
Inline
  • Vertical align : Align the widget vertically within its parent column to start, center, end, or stretch.
  • Size : Control how the widget grows to fill available space within its container (None, Grow, Custom).
    • Grow : Define the flex-grow factor when 'Size' is set to 'Custom'.
Custom
  • Custom Width : Set a specific width for the widget using a slider with PX, %, or VW units.
  • Vertical align : Align the widget vertically within its parent column to start, center, end, or stretch.
  • Size : Control how the widget grows to fill available space within its container (None, Grow, Custom).
    • Grow : Define the flex-grow factor when 'Size' is set to 'Custom'.
Calculate
  • Calc : Define the widget's width using a CSS calc() expression (e.g., "100% - 20px").
  • Min Width : Set a minimum width for the widget, ensuring it doesn't become narrower than this value using a slider with PX, %, or VW units.
  • Vertical align : Align the widget vertically within its parent column to start, center, end, or stretch.
  • Size : Control how the widget grows to fill available space within its container (None, Grow, Custom).
    • Grow : Define the flex-grow factor when 'Size' is set to 'Custom'.
Order

Set the display order of this widget relative to other widgets within the same column using Flexbox (Start, End, Custom).

Custom
  • Custom Order : Enter a specific numerical order value when 'Order' is set to 'Custom'.
Position

Set the CSS position property for the widget: Default (Static), Absolute, or Fixed.

Note: Custom positioning is not considered best practice for responsive web design and should not be used too frequently.
Absolute/Fixed
  • Horizontal Orientation: Set the horizontal reference point (Left or Right) for custom positioning within its nearest positioned ancestor.
  • Offset : Specifies the distance using PX, %, VW, or VH units between the element and the left or right edge of its containing block.
  • Vertical Orientation: Set the vertical reference point (Top or Bottom) for custom positioning within its nearest positioned ancestor.
  • Offset : Specifies the distance using PX, %, VW, or VH units between the element and the top or bottom edge of its containing block.
Z-index

Control the stacking order of the widget if it overlaps with other elements; higher values appear on top.

CSS ID

Assign a unique custom ID to the widget's wrapper, allowing for specific CSS targeting or JavaScript interaction (without the '#' prefix).

CSS Classes

Add custom CSS class names (space-separated) to the widget's wrapper, allowing for custom styling or JavaScript targeting (without the '.' prefix).

Element Cache

Improves loading times by storing a static version of this element.

Advanced Tab Motion Effects
Scrolling Effects

Enhance elements with various dynamic effects triggered by the user's scrolling behavior.

  • Vertical Scroll: Configure the scroll direction, speed, and viewport range for vertical scrolling effects.
  • Horizontal Scroll: Set the scroll direction, speed, and viewport range for horizontal scrolling effects.
  • Transparency: Adjust the transparency based on the direction, level, and viewport range.
  • Blur: Apply a blur effect with customizable direction, level, and viewport range.
  • Rotate: Rotate the element using direction, speed, and viewport settings.
  • Scale: Scale the element with direction, speed, and viewport controls.
  • Apply Effects on: Choose whether to apply scrolling effects on desktop, tablet, or mobile devices.
  • Effects Relative to: Define whether the effects are relative to the default container, the viewport, or the entire page.
Mouse Effects

Enable mouse based effects for added interactivity.

  • Mouse Track: Adjust the direction and speed of the effect as the user moves the mouse across the page.
  • 3D Tilt: Enable 3D tilt effects with controllable direction and speed for a more immersive experience.
Sticky Effects

Fix elements at the top or bottom of the viewport as the user scrolls for persistent visibility.

  • Sticky on: Apply sticky effects on desktop, tablet, or mobile devices.
  • Offset: Set the offset in pixels to trigger the sticky effect after scrolling.
  • Dynamic Offset: Use a CSS selector to dynamically set the offset based on other elements on the page.
  • Effects Offset: Configure the pixel offset to control when additional effects apply.
  • Stay in Column: Choose whether the sticky element remains within its column during scrolling (yes or no).
  • Hide on Scroll: Set the offset and transition duration for hiding the sticky element when scrolling down.
Entrance Animation

Apply predefined animations to elements when they appear on screen.

  • Fading: Elements gradually fade in or out of view.
  • Revealing: Create smooth reveal effects as elements come into view.
  • Sliding & Revealing: Combine sliding motion with reveal effects.
  • Scaling & Revealing: Adjust the size of elements as they are revealed.
  • Zooming: Apply zoom in or out effects during element appearance.
  • Bouncing: Elements enter with a bouncing motion for attention-grabbing effects.
  • Sliding: Elements slide into view from different directions.
  • Rotating: Apply rotation effects as elements enter or leave the viewport.
  • Attention Seekers: Highlight elements with exaggerated, noticeable animations.
  • Specials: Unique animations for elements that require special effects.
Advanced Tab Transform
Opacity

Adjust the transparency level of the element to create fade effects during normal or hover states.

Rotate

Rotate the element along the X, Y, or Z axes for dynamic visual effects. Use deg (degrees) values or apply 3D rotation.

Offset

Shift the position of the element horizontally (X-axis) or vertically (Y-axis) to control its exact placement within the layout.

Scale

Resize the element, with the option to keep proportions (yes or no) and adjust the scale factor to enlarge or shrink the element.

Skew

Skew the element along the X and Y axes to tilt its appearance.

Flip Horizontal/Vertical

Flip the element horizontally or vertically by selecting the anchor points (X: left, center, right; Y: top, center, bottom) for precise control over the flip transformation.

Trigger by (On hover)

Choose whether the hover transformation is triggered by interaction with the widget, column, or section.

Transition Duration (On hover)

Set the time duration in milliseconds that the hover transition effect takes to complete.

Transition Delay (On hover)

Specify a delay in milliseconds before the hover transition effect begins.

Advanced Tab Background

Background

Background Type

Select the background type: None, Classic, or Gradient.

Classic
Color
Set a solid background color to provide a consistent base for your design.
Image
Upload an image to use as the background. Additional settings include:
  • Loading: Choose whether to load the background image lazily or immediately.
  • Position: Define the image's position within the background (e.g., center, top-left).
  • Attachment: Set the background image to scroll with the page or remain fixed.
  • Repeat: Determine if the image repeats or stays single across the background area.
  • Size: Control the size of the background image, such as cover, contain, or custom dimensions.
Backdrop Filters
Apply visual filters to the background, such as blur, brightness, or contrast, enhancing its appearance.
Transition Duration (On hover)
Set the time duration in milliseconds that the hover transition effect takes to complete.
Gradient
Color
Select the primary color for the gradient background.
Location
Define the starting position of the primary color in the gradient effect.
Second Color
Select the secondary color to blend into the gradient.
Location
Set the starting point of the secondary color within the gradient.
Angle
Adjust the angle at which the gradient flows (e.g., horizontal, vertical, diagonal).
Backdrop Filters
Apply visual filters to the gradient background for added depth and effects.
Transition Duration (On hover)
Set the time duration in milliseconds that the hover transition effect takes to complete.

Classic
Advanced Tab Border

Border

Border Type (Normal & Hover)

Select the style for the widget container's border (e.g., None, Solid, Dashed, Dotted, Double).

Border Width (Normal & Hover)

Set the thickness of the border on each side (Top, Right, Bottom, Left) in PX.

Border Color (Normal & Hover)

Define the color of the element's border.

Border Radius (Normal & Hover)

Adjust the roundness of the widget container's corners, with options for PX or % units.

Box Shadow (Normal & Hover)

Apply a shadow effect to the widget container, with controls for color, position, blur, and spread.

Transition Duration (On Hover)

Set the speed (in seconds) of the transition animation for border and shadow hover effects.

Advanced Tab Visibility

Scheduled and Customer Group settings apply if 'Extended Visibility Section' is enabled in Creative Elements > Settings > Experiments.

Visibility

Responsive Visibility

Control the display of elements across different devices.

  • Hide On Desktop: Enable to hide this element specifically on desktop screen sizes.
  • Hide On Tablet: Enable to hide this element specifically on tablet screen sizes.
  • Hide On Mobile: Enable to hide this element specifically on mobile screen sizes.
Note: Using responsive visibility options (Hide On Desktop/Tablet/Mobile) too frequently is not considered best practice for responsive web design as it can lead to duplicated content or accessibility issues.
Scheduled Visibility

Enable to set a specific time range during which this element will be visible.

  • From : Set the start date and time for the element's visibility when 'Schedule' is enabled.
  • To : Set the end date and time for the element's visibility when 'Schedule' is enabled.
Note: Dates are set according to your website's timezone.
Customer Group Visibility

Filter the visibility of this element based on customer groups: All, Show for specific groups, or Hide for specific groups.

  • Groups: Select the specific customer groups to include or exclude for visibility when 'Customer Group' filter is active.
Advanced Tab Custom CSS
Custom CSS

Apply custom CSS to style the widget beyond the default settings.

Note: This requires CSS knowledge—use carefully, as incorrect syntax can impact other areas of the site.

/* For main element */
selector { 
  color: red; 
}

/* For child element */
selector .child-element { 
  margin: 10px; 
}

/* Or use any custom selector */
.my-class { 
  text-align: center; 
}

If you want to learn the basics of CSS, W3Schools is a great resource for that.

© WebshopWorks - Professional PrestaShop Addons