This bundle, utilizing Drupal core modules such as Media and Media Library, provides a versatile framework for creating visually appealing overlays with a range of styling and content options. The user interface is divided into two primary tabs: Display and Content.
Display Tab
This tab is focused on the visual styling and layout of the overlay. The fields available 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 included with the parallax bundle is:
- Text Position: A field to control the position of the text over the hero image.
Content Tab
This tab allows for the input and organization of the content within the overlay.
- Title: For adding a hero title to the overlay.
- Paragraph Field (Parallax Section): A pre-selected field to add another paragraph bundle named "Parallax Section."
Parallax Section
This section, nested within the main content, has its own Display and Content tabs with similar fields as the parent bundle.
Display
- Includes similar fields as the main bundle for consistent styling plus one required field, the section height.
Content
- Media Field: To upload an image. Accompanying fields include:
- Alternative Text
- Title
- Image Caption
- Link Field: If the image is intended to be clickable.
- Image Link Title Field: Specifies the title attribute for the image.
- Body: For additional content in the parallax bundle.
View Mode
The view mode for this image bundle is configured to prioritize web performance and quality:
- Utilizes the image URL.
- Converts the image to the WebP format for efficiency.
- Maintains the original image size for quality preservation.
Conclusion
This paragraph bundle in Drupal is a powerful tool for creating dynamic, visually appealing image overlays. The extensive customization options available in both the Display and Content tabs allow for a high degree of flexibility and creativity in designing web page elements. The integration with Drupal's core modules like Media and Media Library ensures a smooth and user-friendly experience, making it an ideal choice for web developers and content creators aiming to enhance the visual impact of their sites.
Comments