
This bundle leverages Drupal core modules such as Media, Media Library, and Responsive Image to provide a dynamic and responsive design. The user interface of the bundle is divided into two main tabs: Display and Content, each hosting a variety of fields to control the appearance and content of the hero section.
Display Tab:
The Display tab contains fields that allow users to customize the visual aspects of the hero section. These fields include:
- Background Color: This option lets you pick a color for the background area of your paragraph. It's like choosing a paint color for the wall behind your text.
- Background Color Hover: This is a fun feature! When you move your mouse cursor over the paragraph, the background color changes to the color you pick here. It's like a magic trick for your paragraph!
- Text Color: Here, you can decide what color the words in your paragraph will be. It's like selecting the ink color for writing your paragraph.
- Text Color Hover: Similar to the background hover, this changes the text color when you hover your mouse over the paragraph. Imagine the text changing color like a chameleon when you move your mouse over it.
- Border Color: This option lets you choose a color for a thin line that surrounds your paragraph, like framing a picture.
- Border Color Hover: When you hover your mouse over the paragraph, the border color changes to what you choose here. It's another way to make your paragraph interactive and eye-catching.
- Border: In this section, you have the option to choose from 11 solid line styles, each varying in thickness, for your paragraph's border.
- Border Radius: This option allows you to round the corners of your paragraph's border. You have 6 styles to choose from, ranging from slightly rounded to completely circular corners.
- Margin: This sets the space between your paragraph and other elements on the page. You can choose from 6 options to determine how much space you want around your paragraph.
- Padding: Padding is the space between your text and the border of the paragraph. This option gives you 8 choices to decide how much space you want inside the border.
- Max Width: This lets you control how wide your paragraph can be. You can choose from 7 different widths in pixels, or set it to 100% which will make the paragraph stretch as wide as its container allows.
- Box Shadow: You have 2 options here to add a shadow effect to your paragraph. This makes it look like your paragraph is slightly raised above the page, giving it some depth.
- Background Color Opacity: This is a slider that lets you adjust how see-through the background color is. Sliding it down makes the background more transparent, allowing whatever is behind it to show through a bit.
An extra field is included for this bundle:
- Text Position: A field to control the position of the text over the hero image, enhancing layout flexibility.
Content Tab:
Under the Content tab, users can manage the actual content and media of the hero section. This includes:
- Title: A field for the main title of the hero section.
- Body: Provides space for additional text over the hero image.
- Media Field: Allows for the uploading of a hero image. Upon uploading, three additional fields appear:
- Alternative Text: Improves accessibility by describing the image.
- Title: Provides a title for the image.
- Image Caption: Offers a caption for the image.
- Link Field: If the image is intended to be clickable, this field allows for a URL to be added.
- Image Link Title: Sets the title attribute for the linked image, offering additional context or information.
Responsive Image Configuration:
The view mode for the image in this bundle is configured to convert images to the WebP format and uses custom responsive image styles. These styles are responsive to device size, ensuring optimal loading and display across different devices. There are five distinct image styles, each tailored to a specific range of device sizes, enhancing the performance and visual appeal of the website.
In summary, this paragraph bundle is a comprehensive solution for creating a customizable, responsive hero section in Drupal. It provides extensive control over both the visual design and content, making it a versatile tool for website builders and content managers. The integration with Drupal's core modules and the attention to responsive design principles ensure that the hero section will be both functional and aesthetically pleasing across various devices and screen sizes.
Comments