paragraphs_bundles

Enhance Your Drupal Site with Paragraphs Bundles & PB Import modules

The Paragraphs Bundles module offers a lightweight, jQuery-free solution with full customization, including colors, borders, and layouts. With five breakpoints for device compatibility, it is easy to use and integrates seamlessly with the Solo theme. Choose from 30 paragraph bundles like 3D Carousel, Accordion, Hero, and Lightbox Image Grid to enhance your site's functionality and design.

💻 Try out a demonstration

Some of the Paragraphs Bundles modules are now available as Views styles.The Vanilla Views suite F.L.A.S.H.C.R.P.T.B FlashCrptb is a collection of ten powerful Drupal modules designed to enhance the visual and interactive experience of Drupal Views using pure, lightweight Vanilla JavaScript, these modules Accordion, Basic Carousel, 3D Carousel, 3D FlipBox, Hero, Lightbox, Parallax, Reveal, Slideshow, and Tabs.

Comprehensive Landing Page Examples Showcasing All Paragraph Bundles with Solo Theme

Blue Skyline - Bright Den - Calm Corner - Color Whirl - Dawn View - Dream Road - Dusk Deck - Earth Base - Green Park - Jewel Place - Ocean Field - Peace Beach - Red Hill - Ring Retreat - Secret Garden - Shadow Line - Shine Land - Sky Pattern - Space Art - Star Circle - Star Gate - Star Home - Summit Point - Sun Plains

The theme includes 50 professional predefined color schemes that can be installed with a single click.

Berry Blue Dreams - Blueberry Skies Quartet - Blushing Magnolia - Celestial Blue Depths - Charcoal Gray - Classic Ivory Lace - Cotton Candy Whispers - Crimson Denim Night - Deep Ocean Shadows - Deep Sea Echo - Denim Twilight - Dusk Shadow Fusion - Eclipse Noir - Enchanted Forest Zest - Ethereal White Harmony - Flaming Sapphire - Galactic Stone Hues - Gentle Ivory Breeze - Gunmetal Echo - Indigo Pulse - Ivory Whisper - Jungle Denim Fusion - Lemon Lime Forest - Luminous Alabaster - Magnolia Afternoon - Metallic Nebula - Midnight Denim Swirl - Midnight Garden Trio - Midnight Navy Duo - Midnight Whispers - Monochrome Splash - Mystic Ash Twilight - Nightfall in Paris - Nocturnal Velvet - Obsidian Cascade - Ocean Depths Mystery - Parisian Skyline - Porcelain Brilliance - Porpoise Dream - Pristine Porcelain Glow - Raspberry Nightfall - Razzle Onyx Elegance - Royal Azure Flame - Rustic Redwood Charm - Salmon Denim Fade - Silken Shadow Whisper - Smokey Quartz Symphony - Soft Silk Elegance - Twilight Ash Mystique - Urban Stone Shadows

Paragraphs Bundles Live Examples

1. Paragraph Bundle 3D Carousel Example
2. Paragraph Bundle Carousel Example
3. Paragraph Bundle 3D Flip Box Example
4. Paragraph Bundle Accordion Example
5. Paragraph Bundle Alert Example
6. Paragraph Bundle Block Content Example
7. Paragraph Bundle Card Three Columns Example
8. Paragraph Bundle Card Two Columns Example
9. Paragraph Bundle Contact Form Example
10. Paragraph Bundle Drupal Block Example
11. Paragraph Bundle Grid Example
12. Paragraph Bundle Hero Example
13. Paragraph Bundle Icon Example (Google Material Symbols & Image)
14. Paragraph Bundle Image (Original Size) Example
15. Paragraph Bundle Image Background Example
16. Paragraph Bundle Image Overlay Example
17. Paragraph Bundle Lightbox Image Grid Example
18. Paragraph Bundle Link Example
19. Paragraph Bundle Modal Example
20. Paragraph Bundle Node Reference Example
21. Paragraph Bundle One Column Example
22. Paragraph Bundle Parallax Example
23. Paragraph Bundle Responsive Image Narrow Example
24. Paragraph Bundle Responsive Image Wide Example
25. Paragraph Bundle Simple Example
26. Paragraph Bundle Slideshow Example
27. Paragraph Bundle Tabs Example
28. Paragraph Bundle Three Columns Example
29. Paragraph Bundle Two Columns Example
30. Paragraph Bundle Views Example
31. Paragraph Bundle Webform Example
32. PB Content & PB Block Types Example - Understanding the PB Paragraphs Content Type and PB Block Type

Features

• Independent: The module does not depend on jQuery, making it lightweight, efficient, and able to work with any Drupal theme.
• Customizable: Each paragraph bundle is fully customizable. You can set your own colors, border, layout, box shadow, margin, and padding.
• 5 Breakpoints: Each bundle, whether it consists of two or three columns, offers five breakpoints. These breakpoints allow your content to be compatible with any device.
• Easy to Use: All bundles are easy to customize, providing a user-friendly experience.
• Integration: The Paragraph and Field Group modules are utilized by this module to form custom bundles. However, for further customization, it can be integrated with the Solo theme.

The module allows the creation of paragraph bundles that consist of two group field horizontal tabs: Content and Display.

Display Tab

The Display tab provides a comprehensive set of customization options for the appearance of the paragraph bundle. It includes six color input fields for:

• Background color
• Background color hover
• Text color
• Text color hover
• Border color
• Border color hover

In addition to these, there are seven more fields for further customization:

• Border
• Border radius
• Margin
• Padding
• Max Width
• Box shadow
• Background color opacity

These 13 fields are the default and are found in most bundles. However, the number of fields can vary according to the bundle type.

Content Tab

The Content tab is where the actual content fields of the bundle are located. The number of fields here will depend on the bundle type.

Return to the beginning ☝️

30 Paragraph Bundles and One Content Type

The module supports the creation of 30 different types of paragraph bundles, one content type, and one block type.

They are categorized according to their functionality and purpose into four groups: Display Formats, Interactive Elements, Layout Structures, and Content Integration.

1. Display Formats: These modules focus on presenting content in visually appealing and dynamic formats.

1. 3D Carousel: Presents content in a rotating 3D carousel format.
2. 3D Flip Box: Displays content in boxes that flip in a 3D space.
3. Lightbox Image Grid: Arranges images in a responsive grid layout and opens each image in a Lightbox.
4. Slideshow: Showcases content in a slideshow format.
5. Responsive Image Narrow: Adapts images to fit different screen sizes, either in square formats.
6. Responsive Image Wide: Adapts images to fit different screen sizes, either in rectangle formats.
7. Parallax: Creates a parallax scrolling effect for images or other content.

2. Interactive Elements: Modules that enhance user interaction and engagement through dynamic and interactive features.

1. Accordion: Displays content in a collapsible format, allowing users to expand or hide sections.
2. Tabs: Organizes content in a tabbed interface.
3. Modal: Displays content in a modal window, often used for login forms, notifications, or additional information.
4. Alert: Shows alert messages or important information in an interactive format.

3. Layout Structures: These modules provide different structural layouts to organize content on a page.

1. Grid: Displays content in a grid layout, adjustable between one and twelve columns.
2. One Column: A simple, single-column layout.
3. Two Columns: Divides content into two columns.
4. Three Columns: Arranges content in three separate columns.
5. Card Two Columns: Displays content in a card-style layout within two columns.
6. Card Three Columns: Displays content in a card-style layout within three columns.
7. Hero: Typically a large, full-width banner or image, often used at the top of a page.

Return to the beginning ☝️

4. Content Integration: Modules that are used to integrate or display specific types of content or external services.

1. Node Reference: For referencing any content.
2. Block Content: For placing and arranging blocks of content.
3. Drupal Block: Integrates Drupal blocks into the layout.
4. Image: A module dedicated to displaying individual images.
5. Image Overlay: Adds overlay effects to images.
6. Link: Specifically for adding and managing hyperlinks.
7. PB Content & PB Block: Special modules for integrating Paragraph Bundles' own content and block system.
8. Image Background: Create any content with an image background.
9. Simple: Likely a straightforward, minimalistic content display.
10. Icon: Display Google Material Symbols or Image Icon.
11. Views: Integrates the Views module, a powerful Drupal tool for organizing and displaying content.
12. Contact Form: Embeds contact forms.
13. Webform: Embeds web forms for user input and interaction.

Each of these categories helps in organizing the modules based on their primary function, making it easier to understand and utilize them in a Drupal setup.

Each of these bundles can be customized using the options provided in the Content and Display tabs. This module provides a robust and flexible solution for creating and managing custom paragraph bundles in Drupal.

The PB Block is a custom block that includes a paragraph field. This block can be utilized whenever you need to create a paragraph block and reference it in any content type or position it in any region. It is compatible with all themes.

The PB Content is a custom content type with disabled left and right regions, and it comes with its own width settings. This content type comprises two group field horizontal tabs: Content and Display. Works with Solo Theme Only.

Display Tab

• A list of all solo regions that can be disabled.
• A field to select the maximum content width (800px / 50rem, 1024px / 64rem, 1280px / 80rem, 1440px / 90rem, 1600px / 100rem, 1920px / 120rem, 2560px / 160rem or 100%).
• An input field to select the content background color.
• A slide range field to select the background opacity value from (1 to 100).

Content Tab

• A paragraph field to add any paragraph bundle. Note that the width setting for the paragraph bundle is disabled; the content settings will override it.
• A block content reference field. Here, you can reference any paragraph block field created by PB Block.

There may be instances where a unique page layout is required on the website, devoid of elements like the header, footer, main menu, etc., or perhaps with a different color scheme. By integrating this feature with the paragraph bundles of one, two, or three columns, you can craft any layout to your liking.

Requirements

• Paragraph module
• Field Group module

Installation

Download and enable the Paragraph and Field Group modules if you haven't already. Download and enable this module.

Usage

After enabling the module, you can start creating custom paragraph bundles. Each bundle can be customized with its own colors, border, layout, box shadow, margin, and padding.

back to top ☝️

Developed & Designed By: Alaa Haddad

A Personal Thank You for Your Support

Every project you see here, including this one, reflects countless hours of work driven by my passion for making Drupal better for everyone. Your support truly makes a difference, and there are a few simple ways you can help these projects grow and reach others who might benefit:

• Use & Share Feedback: Have you found this project (or any of my other work) helpful? Let me know what worked well or how it could be improved. Real user input drives better tools for the entire community.
• Click "Like" on Drupal.org: It may seem small, but liking this project on Drupal.org helps others discover and trust these tools.
• Spread the Word: Share these projects on social media, Slack groups, or anywhere Drupal folks connect. Your word of mouth helps these tools find the people who need them.
• Explore More of My Work: Check out my other projects on Drupal.org to see what else might support your workflow or inspire your next build.

W3CSS Theme (d8w3css) - Solo - W3CSS Paragraphs - Paragraphs Bundles - Amun - Amunet - Anhur - Acquia Purge Varnish - Cloudflare Purge - Reference Blocked Users - Solo Copy Blocks - Solo Utilities - PB Import - VVJA - Accordion - VVJC - 3D Carousel - VVJB - Basic Carousel - VVJF - 3D FlipBox - VVJH - Hero - VVJL - Lightbox - VVJP - Parallax - VVJR - Reveal - VVJS - Slideshow - VVJT - Tabs - Module Matrix - Selectify - Utilikit

If you have any questions, ideas, or feedback about my Drupal.org projects, I’d love to hear from you! To keep things open and helpful for the entire community, I encourage you to post directly in the project's issue queue on Drupal.org. This way, your questions—and the answers can benefit others who may have the same needs.

At the end of the day, my goal is to make Drupal easier and more enjoyable for everyone, especially small businesses and site builders who want to create professional sites without extra hassle. Together, we can build something even better. Thank you for your support, and for being part of this journey!