
The new Paragraph Bundle Icon module is an advanced tool designed to enrich your web pages by seamlessly integrating icons into your layouts. This bundle allows extensive customization of icon properties as well as text, providing a robust set of tools for creating visually compelling and interactive content. Here's a detailed breakdown of the features and functionalities provided in this bundle, which includes two main tabs: "Display" and "Content."
Display Tab
The "Display" tab is where the user can customize the visual aspects of the paragraph bundle. This tab is typically broken down into several fields:
- 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.
Content Tab
The "Content" tab is focused on the textual content and any associated links.
- Title: This field is for entering the title of the text. The title is typically displayed in a larger, more prominent font.
- Body: This is a WYSIWYG (What You See Is What You Get) text field for entering and formatting long text. Users can typically adjust fonts, sizes, alignments, and other common text formatting options.
- Link Field: An optional field for adding a hyperlink to wrap the icon/image and title. This can be used to direct readers to additional information or resources.
- Icon Selection Tabs: Two tabs to choose between using a Google Material Symbol or uploading your own image.
- Google Icon Tab: Select a Google Material Symbol to use as an icon.
- Icon Color: Customize the color of the icon.
- Icon Style: Choose from outlined, rounded, or sharp styles.
- Icon Font Size: Adjust the size of the icon.
- Fill, Weight, Grade, Optical Size: Four adjustable settings to refine the icon's appearance and alignment with the text.
- Image Icon Tab: Upload an image to use as the icon.
- Image Field: A single field to upload the image. Using this field will disable the Google Icon tab, ensuring exclusive icon use.
Conclusion
The Paragraph Bundle Icon module is a versatile solution, combining the functionality of text formatting with the dynamic integration of icons, suitable for creating engaging and visually structured content on any web page.
Comments