The Services widget is designed to create a clean, structured grid for showcasing your company’s services, features, or key offerings. It focuses on clear presentation with strong typography and visual containers.

Content Settings: #

Control the layout and structure of your services grid.

• Horizontal Alignment: Control the horizontal alignment of the content (text, icons) within each service item (Left, Center, Right).
• Vertical Alignment: Control the vertical alignment of the content within each service item (Top, Middle, Bottom).
• Number of Services: Define the total number of service items to display.
• Filter by Category: Choose to display services from specific categories or select Show All Categories.
• Order By: Sort your services by various parameters such as Date.
• Order: Determine the sorting direction as DESC (Descending) or ASC (Ascending).
• Columns Per Row: Set how many service items appear in a single row on desktop view (e.g., 3 or 4).
• Item Height (px): Set a fixed height in pixels (e.g., 360px) for all service boxes. This creates a uniform, clean grid.
• Gap Between Items: Adjust the spacing between individual service cards in the grid.
• Gap Between Content: Fine-tune the internal vertical spacing between the service title, description, and other elements.
• Subtitle: Toggle this to Show or Hide the subtitle/meta text associated with the service.

Style Tab: Image #

This section controls how the background images for each service item are displayed within their respective grid cards.

• Background Size: Determine how the image scales within the container (e.g., Cover to fill the area or Contain to show the full image).
• Background Position: Set the focal point of the image (e.g., Center Center) to ensure the most relevant part of the visual remains visible.
• Background Repeat: Choose whether the image should tile; selecting No Repeat is standard for high-quality service thumbnails.

Style Tab: Typography #

This section allows you to customize the text appearance for both the Title and Subtitle elements of the service items, featuring separate controls for Normal and Hover states.

Title: #

Normal / Hover States: Switch between these tabs to define different looks when the card is static versus when a user interacts with it.

• Color: Set the specific text color for the service title.
• Typography: Access full font controls (family, size, weight, line-height) by clicking the pencil icon.

Subtitle: #

Normal / Hover States: Define unique styling for the subtitle based on the card’s interaction state.

• Color: Select the color for the subtitle text.
• Typography: Configure the font settings specifically for the subtitle to maintain a clear visual hierarchy.

Style Tab: Background Overlay #

Background Type: Choose between Classic (solid color or image) or Gradient (color transition) to style the overlay.

Style Tab: Service Item #

The Service Item section allows you to define the structural appearance and interactive behavior of the individual service card containers.

• Item Padding: Set the internal spacing for the service card to control how much room exists between the container edges and the content.
• Border Type: Choose a border style (such as solid, dashed, or none) for the service card.
• Border Radius: Round the corners of the card by entering pixel values for Top, Right, Bottom, and Left. The current setting shows a uniform radius of 10px.
• Box Shadow: Click the pencil icon to apply a shadow effect to the card, adding depth to the grid layout.