Module Description
⚡️ What is w3css paragraphs? This module provides a suite of paragraph bundles made with the W3.CSS front-end framework. It works with the ⚡️W3CSS Theme You have the power to create unlimited UI design by using the paragraph bundle features.
The parent module w3css_paragraphs has the first two basic paragraph bundles (Text and Image) All other children bundles are in a separate bundle/module. *All images are using the media module.
Combine the power of the w3.css front end framework with Drupal Paragraphs, the powerful module that allows content creators to build layouts and structured pages.
Using the w3.css Paragraphs Drupal module, you'll be able to create in less than minutes features like 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. You can also use Drupal 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 Simple Watch how to build it
* ⚡️W3CSS Paragraphs Image
* ⚡️W3CSS Paragraphs Responsive Image (Wide)
* ⚡️W3CSS Paragraphs Responsive Image (Narrow) Watch how image or responsive image
* ⚡️W3CSS Paragraphs 3D Flip Box Watch how to build it
* ⚡️W3CSS Paragraphs Card Watch how to build it
* ⚡️W3CSS Paragraphs Hero Watch how to build it
* ⚡️W3CSS Paragraphs Image Overlay Watch how to build it
* ⚡️W3CSS Paragraphs Modal Watch how to build it
* ⚡️W3CSS Paragraphs Parallax Watch how to build it
* ⚡️W3CSS Paragraphs Contact Form Watch how to build it
* ⚡️W3CSS Paragraphs Drupal Block Watch how to build it
* ⚡️W3CSS Paragraphs Menu
* ⚡️W3CSS Paragraphs Quicklinks Watch how to build it
* ⚡️W3CSS Paragraphs Views Watch how to build it
* ⚡️W3CSS Paragraphs Webform Watch how to build it
* ⚡️W3CSS Paragraphs One Column
* ⚡️W3CSS Paragraphs Two Columns
* ⚡️W3CSS Paragraphs Three Columns Watch how to use the one, two or three layout
* ⚡️W3CSS Paragraphs 3D Carousel - Images ⚡️W3CSS Paragraphs 3D Carousel - Text Watch how to build it
* ⚡️W3CSS Paragraphs Accordion Watch how to build it
* ⚡️W3CSS Paragraphs Slideshow Watch how to build it
* ⚡️W3CSS Paragraphs Tabs (Horizontal/Vertical) Watch how to build it
* ⚡️W3CSS Paragraphs Content Type
What is W3CSS Paragraphs Content Type?
* The left and right regions are disabled for this content type.
* The default width is 100% and you can override the width from the paragraph bundle display.
* You can disable any of these 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.
Sometimes you want to create a page on the website that has a totally different layout. Maybe you don't want to print/show the header, footer, main menu, etc. or perhaps you want to use different colors. When you combine this feature with the paragraph bundles one, two or three columns you can create any layout you desire.
Bundle Type Features (some paragraph bundles may have more or less):
* ⚡️Background colors: 30 Colors to choose from.
* ⚡️Background color Hover: 30 Colors to choose from.
* ⚡️Text colors: 30 Colors to choose from.
* ⚡️Text color hover: 30 Colors to choose from.
* ⚡️Border color: 30 Colors to choose from.
* ⚡️Border color hover: 30 Colors to choose from.
* ⚡️Background color opacity: after you choose the background color you can choose the opacity for the background color. 5% - 10% - 20% - 30% - 40% - 50% - 60% - 70% - 80% - 90% - 95% (11 x 30 = 330 total colors you can create.) The opacity will be applied to the background color only.
* ⚡️Width: 30% - 40% - 50% - 60% - 70% - 80% - 90% - 100%.
* ⚡️Borders: 11 styles to choose from.
* ⚡️Round Borders: 6 Styles to choose from.
* ⚡️Margin: 6 styles to choose from.
* ⚡️Padding: 8 styles to choose from.
* ⚡️Card: Add 2px or 4px bordered shadow.
* ⚡️W3CSS Classes: One 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.
The parent module w3css_paragraphs has the first two basic paragraph bundles (Text and Image) All other children bundles are in a separate bundle/module. *All images are using the media module.
Combine the power of the w3.css front end framework with Drupal Paragraphs, the powerful module that allows content creators to build layouts and structured pages.
Using the w3.css Paragraphs Drupal module, you'll be able to create in less than minutes features like 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. You can also use Drupal 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 Simple Watch how to build it
* ⚡️W3CSS Paragraphs Image
* ⚡️W3CSS Paragraphs Responsive Image (Wide)
* ⚡️W3CSS Paragraphs Responsive Image (Narrow) Watch how image or responsive image
* ⚡️W3CSS Paragraphs 3D Flip Box Watch how to build it
* ⚡️W3CSS Paragraphs Card Watch how to build it
* ⚡️W3CSS Paragraphs Hero Watch how to build it
* ⚡️W3CSS Paragraphs Image Overlay Watch how to build it
* ⚡️W3CSS Paragraphs Modal Watch how to build it
* ⚡️W3CSS Paragraphs Parallax Watch how to build it
* ⚡️W3CSS Paragraphs Contact Form Watch how to build it
* ⚡️W3CSS Paragraphs Drupal Block Watch how to build it
* ⚡️W3CSS Paragraphs Menu
* ⚡️W3CSS Paragraphs Quicklinks Watch how to build it
* ⚡️W3CSS Paragraphs Views Watch how to build it
* ⚡️W3CSS Paragraphs Webform Watch how to build it
* ⚡️W3CSS Paragraphs One Column
* ⚡️W3CSS Paragraphs Two Columns
* ⚡️W3CSS Paragraphs Three Columns Watch how to use the one, two or three layout
* ⚡️W3CSS Paragraphs 3D Carousel - Images ⚡️W3CSS Paragraphs 3D Carousel - Text Watch how to build it
* ⚡️W3CSS Paragraphs Accordion Watch how to build it
* ⚡️W3CSS Paragraphs Slideshow Watch how to build it
* ⚡️W3CSS Paragraphs Tabs (Horizontal/Vertical) Watch how to build it
* ⚡️W3CSS Paragraphs Content Type
What is W3CSS Paragraphs Content Type?
* The left and right regions are disabled for this content type.
* The default width is 100% and you can override the width from the paragraph bundle display.
* You can disable any of these 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.
Sometimes you want to create a page on the website that has a totally different layout. Maybe you don't want to print/show the header, footer, main menu, etc. or perhaps you want to use different colors. When you combine this feature with the paragraph bundles one, two or three columns you can create any layout you desire.
Bundle Type Features (some paragraph bundles may have more or less):
* ⚡️Background colors: 30 Colors to choose from.
* ⚡️Background color Hover: 30 Colors to choose from.
* ⚡️Text colors: 30 Colors to choose from.
* ⚡️Text color hover: 30 Colors to choose from.
* ⚡️Border color: 30 Colors to choose from.
* ⚡️Border color hover: 30 Colors to choose from.
* ⚡️Background color opacity: after you choose the background color you can choose the opacity for the background color. 5% - 10% - 20% - 30% - 40% - 50% - 60% - 70% - 80% - 90% - 95% (11 x 30 = 330 total colors you can create.) The opacity will be applied to the background color only.
* ⚡️Width: 30% - 40% - 50% - 60% - 70% - 80% - 90% - 100%.
* ⚡️Borders: 11 styles to choose from.
* ⚡️Round Borders: 6 Styles to choose from.
* ⚡️Margin: 6 styles to choose from.
* ⚡️Padding: 8 styles to choose from.
* ⚡️Card: Add 2px or 4px bordered shadow.
* ⚡️W3CSS Classes: One 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.
Module Link
Project Usage
298
Security Covered
Covered By Security Advisory
Version Available
Production
Module Summary
This module aims to provide a suite of paragraph bundles using the W3.CSS front-end framework to allow for easy creation of various UI design features in Drupal websites.
Data Name
w3css_paragraphs
OPENAI CHATBOT
OPENAI CHATBOT
