W3CSS Paragraphs ⚡️

⚡️ What does the w3css paragraphs module entail? This module offers a collection of paragraph bundles constructed using the W3.CSS front-end framework. It is compatible with the ⚡️W3CSS Theme. This gives you the capability to generate an infinite number of UI designs utilizing the features of the paragraph bundle.

🌟 Introducing Solo: The Revamped W3CSS Theme on Drupal! 🌟

Hey Drupal Enthusiasts!

I'm excited to share that the W3CSS theme has evolved into Solo! It's sleeker, faster, and packed with new features, now available on Drupal.org. Along with the theme, I've also upgraded the W3CSS paragraphs to the new and improved Paragraphs Bundles, enhancing your content creation experience.

Why Upgrade to Solo?

Fresh, modern design
Enhanced customization and performance
Seamless integration with Drupal

📥 Download Solo Today!

⭐ Upgrade to Solo – where innovation meets elegance! ⭐
Upgrade with ease and give your website a stunning new look. We'd love your feedback!

How to Upgrade Part One - Part Two

The primary module, w3css_paragraphs, encompasses the initial two fundamental paragraph bundles: Text and Image. All other child bundles are contained within a separate bundle/module.

*All images utilize the media module.

Merge the capabilities of the w3.css front-end framework with Drupal Paragraphs, a robust module enabling content creators to construct layouts and structured pages.

With the w3.css Paragraphs Drupal module, you can swiftly create features such as Slideshow, Accordions, Hero Banner, Image Overlay, Parallax, 3D Carousels, Modals, Tabs (Horizontal or Vertical), 3D Flip Box, One Column Layout, Two Columns Layout, and Three Columns Layout in a matter of minutes.

Additionally, Drupal allows for referencing Text, Images, Blocks, Webform, Links, and Views.

Bundle Types: for each bundle type I created a demo, feel free to check it.

As usual everything in the demo is out of the box, nothing is customized.

⚡️W3CSS Paragraphs Content Type

Understanding the W3CSS Paragraphs Content Type:
This content type disables the left and right regions by default, with a standard width of 100%. However, you have the flexibility to adjust the width as per your requirements from the paragraph bundle display.
You have the option to disable any of the following regions: Main Navigation Regions, Header Region, Welcome Region, Highlighted Region, Top Regions, Page Title Region, Breadcrumb Region, Bottom Regions, Footer Regions, Footer Menu, and Hide Copyright.
There may be instances where you'd want to design a webpage with a unique layout, perhaps without the header, footer, main menu, etc., or maybe you'd want to experiment with different color schemes. This feature, when combined with the paragraph bundles of one, two, or three columns, allows you to create any layout you envision.

Features of the Bundle Type (may vary with different paragraph bundles):

⚡️Background colors: Choose from 30 different colors.
⚡️Background color Hover: 30 color options available.
⚡️Text colors: 30 color options available.
⚡️Text color hover: 30 color options available.
⚡️Border color: Choose from 30 different colors.
⚡️Border color hover: 30 color options available.
⚡️Background color opacity: After selecting the background color, you can adjust the opacity from 5% to 95% (in increments of 10%). This gives you a total of 330 color variations. Note that the opacity applies only to the background color.
⚡️Width: Options range from 30% to 100%.
⚡️Borders: Choose from 11 different styles.
⚡️Round Borders: 6 styles available.
⚡️Margin: 6 styles available.
⚡️Padding: Choose from 8 different styles.
⚡️Card: Add a 2px or 4px bordered shadow.
⚡️W3CSS Classes: An extra field for any w3.css classes.

# DEPENDENCIES

W3CSS Theme: https://www.drupal.org/project/d8w3css
Paragraphs: https://www.drupal.org/project/paragraphs
Field Group: https://www.drupal.org/project/field_group

For Some Sub Modules:

You must enable the Contact Formatter module to install W3CSS Paragraphs Contact Form.
You must enable the Link Attributes widget module to install W3CSS Paragraphs quicklinks.
You must enable the Views Reference Field module to install W3CSS Paragraphs Views.
You must enable the Webform module to install W3CSS Paragraphs Webform.
You must enable the Menu Reference Render (Formatter) module to install W3CSS Paragraphs Menu.

# INSTALLATION
Install as any other contrib module.

Developed & Designed By: Alaa Haddad

If you have any questions or comments, please use Drupal.org for communication with me.

Supporting organizations:

Flash Web Center, LLC

Drupal Care

Project information

Maintenance fixes only
Considered feature-complete by its maintainers.
Module categories: Content Editing Experience, Content Display
365 sites report using this module
Created by flashwebcenter on 10 December 2021, updated 6 February 2024
Drupal 10 is here!
All bundles are updated to Drupal 10 except: Menu.
Stable releases for this project are covered by the security advisory policy.
Look for the shield icon below.