Dynamic Features Widget

The Dynamic Features widget is a flexible and interactive tool designed by the 10Web team for showcasing your product or service features in a structured and visually engaging way. With options to customize layouts, styles, media, and animations, you can present complex information as intuitive and digestible feature blocks.

Adding Dynamic Features widget

1. Open the 10Web Builder editor.
2. Drag and drop the Dynamic Features widget into your desired section.

Content tab

Layout

• Skin: Choose from 7 skins (Skin 1–7).
• Feature List Design: Select from Style 1 to Style 7.
• Media Position: Set to left or right.
• Alignment: Align content to top, middle, or bottom.
• Justify Content: Choose start, center, end or space between.
• Buttons Position: Display buttons either under heading or under features.

Title & Description

• Title and Description Toggle: Turn these fields on or off.
• Text Fields: Enter your main heading and supporting text.

Feature List

• Feature Items: Each feature in the list includes the following editable fields:Title: Enter a custom title for the feature (e.g., “Feature 1”).Description: Provide a short description to explain the benefit or functionality of the feature.Feature Image: Upload or select an image to visually represent the feature.
• Item Controls:Duplicate: Easily duplicate an existing feature item.Remove (X): Delete an individual feature from the list.
• Add Item: Click + Add Item to create new features dynamically.
• Features Description Toggle: Switch on or off to show or hide all item descriptions globally.

Progress Indicator

• Autoplay: Toggle on to automatically cycle through features without user interaction.
• Loading Duration: Set the duration (in milliseconds) for the autoplay cycle (e.g., 5000 for 5 seconds).
• Progress Indicator Type: Choose how the progress is visually represented. Available types include Bar and Circle
• Progress Indicator Position: Select the position of the indicator to be Left or Right
• Icon: Toggle on to display an icon inside the progress indicator.
• Choose Icon: Click to select an icon that will appear in the center of the indicator.

Media

• Animation: Choose from Fade, Soft Shift, Zoom or Vertical Slider.
• Animation Duration: Set how long the animation lasts.

Buttons

• Button 1: Toggle to show or hide the first button.Text: Enter the text label for the button (e.g., "Learn More").Link: Add the destination URL or anchor (e.g., #section).Icon: Click to choose an icon to appear next to the button text. You can enable or disable the icon display.Button ID: Enter a unique ID for the button if needed for styling or JavaScript functionality. This field supports A–Z, 0–9, and underscores (no spaces).
• Button 2: Toggle to show or hide the second button.Text: Enter the text label for Button 2.Link: Add a URL or anchor for navigation.Icon: Choose an icon for Button 2, similar to Button 1.Button ID: Provide a unique identifier for Button 2 using A–Z, 0–9, or underscores (no spaces).

Style tab

Layout

Box

• Gap Between Content & Media: Define the space between the content block (title, description, buttons) and media elements (e.g., 100px).

Background Type: Set to Classic to enable a solid color or image background.

• Color: Choose a background color using the color picker or transparency settings.
• Padding: Adjust internal spacing for the box on all sides (top, right, bottom, left) in pixels.
• Border:
  
  Normal & Hover States: Style the border separately for default and hover states.
  Border Type: Select from available styles (e.g., Default).
  Border Radius: Round the corners individually or uniformly with pixel values.

Background Type: Set to Gradient to create a smooth transition between two colors.

• Color: Select the starting color of the gradient.
• Location: Define the percentage where the starting color ends (e.g., 0%).
• Second Color: Choose the ending color of the gradient.
• Location: Set the position where the second color begins (e.g., 100%).
• Type: Choose between Linear or Radial gradient styles.
• Angle: For linear gradients, set the angle in degrees to control the direction (e.g., 180° for top to bottom).
  
  Padding: Specify internal spacing for all sides (top, right, bottom, left) in pixels.

Border

• Normal & Hover States: Customize the border style independently for each state.
• Border Type: Select the desired style (e.g., Default).
• Border Radius: Adjust the corner rounding using pixel values for each side or apply uniform radius.

Content

• Background Color: Set the content background color.
• Width: Adjust the content width using a percentage slider (e.g., 50%).
• Padding: Set inner spacing around content (top, right, bottom, left).
• Border (Normal & Hover States):
  
  Border Type: Select from available border styles.
  Border Radius: Customize corner rounding.

Title & Description

• Title Typography: Adjust font family, size, weight, line height, letter spacing, and more.
• Title Color: Choose a custom color for the title text.
• Title Space Below: Define spacing below the title (in pixels).
• Description Typography: Customize font properties for the description.
• Description Color: Set the color of the description text.
• Description Space Below: Set the spacing below the description (e.g., 48px).

Features List

• Space Below Feature List: Set spacing between the features list and the next section (e.g., 48px).
• Gap Between Features: Control vertical spacing between individual feature items.
• Gap Between Title & Description: Adjust spacing between each feature's title and description (e.g., 12px).

Typography & Colors

• Style States: Define styles for Normal, Hover, and Active states.
• Title Typography: Customize font settings for feature titles.
• Title Color: Set the title text color.
• Description Typography: Set typography for feature descriptions.
• Description Color: Choose a description color.

Background

• Padding: Adjust the inner space around each feature item (e.g., 24px top/bottom, 0 left/right).
• Background Color: Set background color for feature items with styling for Normal, Hover, and Active states.

Border

• Border Type: Select from styles like Solid, Dashed, Dotted, etc.
• Border Width: Define border thickness per side (e.g., 1px bottom).
• Border Color: Choose the color of the border.
• Border Radius: Round the corners of each item independently or uniformly.

Mobile View

• Features View Type: Select how the features will display on mobile — Tab or Slider.

Progress Indicator

• Gap Between Feature Title: Set the spacing between the progress indicator and the feature title. Adjustable via slider or input (e.g., 12px).
• Size: Define the overall diameter of the progress indicator (e.g., 40px).
• Width: Adjust the thickness of the progress line (e.g., 14px).
• Color: Set the background color of the progress indicator using a color picker or transparency option.
• Progress Color: Choose the color that fills the progress path.
• Icon Size: Control the size of the icon displayed within the progress indicator (e.g., 12px).

Media

• Width: Set the media width using viewport width units (vw). Adjustable via slider or manual input (e.g., 100vw).
• Height: Define the media height using viewport height units (vh). Adjustable via slider or manual input (e.g., 100vh).
• Justify Media: Choose horizontal alignment for the media content. Options include:
  Left
  Center
  Right
• Media Size: Select how the media fits within its container. Available options:
  
  Cover: Scales the media to cover the entire area.
  Contain: Scales the media to fit entirely within the container while maintaining its aspect ratio. The entire image will be visible, but it may not fill the container completely, resulting in empty space
• Media Position: Set the focal point of the media. Available options:
  
  Left Top: Aligns the media to the top-left corner.
  Left Center: Aligns the media vertically centered and horizontally to the left.
  Left Bottom: Aligns the media to the bottom-left corner.
  Center Top: Aligns the media horizontally centered and vertically to the top.
  Center Center: Aligns the media both horizontally and vertically in the center.
  Center Bottom: Aligns the media horizontally centered and vertically to the bottom.
  Right Top: Aligns the media to the top-right corner.
  Right Center: Aligns the media vertically centered and horizontally to the right.
  Right Bottom: Aligns the media to the bottom-right corner.
• Border Type: Choose the border style for the media container (e.g., Default).
• Border Radius: Customize the corner roundness of the media container individually (Top, Right, Bottom, Left) or uniformly using pixel values.

Buttons

Button 1

• Padding: Customize the inner spacing around the button text. Values can be set individually for top, right, bottom, and left (in pixels).
• Typography: Adjust the font settings including family, size, weight, letter spacing, and more.
• Text Shadow: Add and customize a shadow effect for the button text.
• State Styling (Normal / Hover): Define different styles for the normal and hover states.
  
  Text Color: Choose a text color for each state.
  Background Type: Select from solid or gradient backgrounds.
  Color: Set the background color for the button.
  Box Shadow: Apply shadow effects to enhance button depth and interaction feedback.
• Border Type: Choose a border style (e.g., Default).
• Border Radius: Set custom corner roundness for the button using individual values for each corner (top, right, bottom, left).

Buttons Group

• Space Below: Define the vertical spacing between the button group and the section that follows (e.g., 32px).
• Gap Between: Set the horizontal space between multiple buttons in the group (e.g., 20px).

Advanced tab

You can customize the widget further using the settings available in the Advanced tab. These options provide additional styling and functionality adjustments, allowing you to tailor the widget to better fit your design needs.