Main page content
Paragraph Bundle Carousel Example
Paragraph Bundle Carousel
The Carousel Paragraph Bundle is an innovative and visually stunning addition to Drupal websites, designed to offer a dynamic and interactive way to display content. This bundle is crafted with a user-friendly interface, comprising two primary tabs: Display and Content, each with a range of customizable fields to fine-tune the carousel's appearance and functionality. ...
Solo - The Free Responsive Drupal 10/11/12 Theme with 24 Regions and Mega Menu
Unmatched Customization with 24 Regions
Solo gives you 24 fully customizable regions for complete control over your website’s layout. Design structured, professional pages with dedicated content, sidebar, and footer sections – all responsive by default.
A Smarter, Cleaner Interface
Solo’s intelligent design automatically hides unused settings, keeping the admin interface clean and clutter-free. Focus on your site’s content while Solo handles the details.
Responsive Perfection for Every Device
Solo is built for mobile-first design, adapting seamlessly to any screen size. Whether visitors browse on desktop, tablet, or phone, your site remains clear, fast, and beautifully structured.
5 Breakpoints for Perfect Layouts
Fine-tune your site’s responsiveness with 5 adjustable breakpoints for both layouts and menus. Ensure perfect display at every screen size with Solo’s advanced mobile-first approach.
Navigate with Style
Solo includes intuitive navigation options – from multi-level dropdowns to mega menus and sidebar navigation. Perfect for content-heavy sites that need structured, user-friendly browsing.
Customize Colors to Match Your Brand
With 15 color fields per region and 50+ built-in color schemes, Solo gives you complete design freedom. Match your website’s look to your brand in just a few clicks.
Layouts That Adapt to Your Content
Solo’s flexible layouts let you choose between 7 two-column, 3 three-column, and 4 four-column designs. Adapt pages dynamically without coding.
Complete Control Over Your Drupal 10/11 Site’s Layout & Design
24 Regions for Ultimate Layout Flexibility
Solo gives you 24 fully customizable regions, allowing you to structure your site exactly how you want. Whether you need dedicated areas for headers, sidebars, footers, or call-to-action sections, Solo adapts to your design needs effortlessly.
Fully Responsive Across All Devices
Solo is designed mobile-first, ensuring your site looks perfect on desktops, tablets, and smartphones. With five customizable breakpoints, you can fine-tune layouts and menus for an optimized experience on every screen size.
Intelligent, Clutter-Free Interface
Solo’s smart admin interface hides unused regions automatically, keeping your dashboard clean and organized. Focus on what matters without being overwhelmed by unnecessary settings.
Effortless Navigation & Flexible Layouts in Solo
Flexible Breakpoints
Fine-tune your site's responsiveness with five adjustable breakpoints for both layouts and menus, ensuring your content looks great on desktops, tablets, and smartphones.
Advanced Menu Options
Solo’s three-level main menu lets you build intuitive site navigation, with options for hover or click-based mega menus—perfect for content-rich sites.
Sidebar Menu Navigation
Complement your main navigation with an optional sidebar menu, making it easier for users to explore categories, documentation, or secondary links.
Effortless Customization – Design Your Drupal 10/11 Site Your Way
Personalized Color Options
With 15 customizable color fields per region, Solo allows you to match your website's design to your brand’s unique identity.
Set distinct colors for menus, backgrounds, buttons, and text—ensuring a polished, cohesive look across your entire site.
Flexible Layout Choices
Solo provides a wide range of layout customization options to help you design the perfect structure for your content. Choose from:
- ✔ 7 styles for two-column layouts
- ✔ 3 styles for three-column layouts
- ✔ 4 styles for four-column layouts
Whether you need a minimal blog layout or a complex multi-section homepage, Solo adapts to your needs effortlessly.
Solo Theme Customizable Color Guide
Background Color
Variable: --r-bg
Description: Sets the background color for the region.
Example: #page-wrapper { background-color: var(--r-bg); }
Text Color
Variable: --r-tx
Description: Defines the color for general text in the region.
Example: #page-wrapper { color: var(--r-tx); }
Heading Color
Variable: --r-h1
Description: Determines the color for h1, h2, and h3 headings.
Example: h1, h2, h3 { color: var(--r-h1); }
Link Color
Variable: --r-lk
Description: Sets the color for text links.
Example: a { color: var(--r-lk); }
Link Hover Color
Variable: --r-lk-h
Description: Specifies the hover color for text links.
Example: a:hover { color: var(--r-lk-h); }
Border Color
Variable: --r-br
Description: Defines the border color for the region.
Example: #page-wrapper { border-color: var(--r-br); }
Form Background
Variable: --r-bg-fr
Description: Sets the background color for input fields.
Example: input { background-color: var(--r-bg-fr); }
Menu Link Color
Variable: --r-tx-lk
Description: Sets the text color for menu links.
Example: .nav__menu-item a { color: var(--r-tx-lk); }
Menu Link Hover
Variable: --r-tx-lk-h
Description: Defines the hover color for menu links.
Example: .nav__menu-item a:hover { color: var(--r-tx-lk-h); }
Menu Background
Variable: --r-bg-lk
Description: Specifies the background color for menu links.
Example: .nav__menu-item a { background-color: var(--r-bg-lk); }
Menu Hover Background
Variable: --r-bg-lk-h
Description: Sets the hover background color for menu links.
Example: .nav__menu-item a:hover { background-color: var(--r-bg-lk-h); }
Button Text
Variable: --r-tx-bt
Description: Defines the text color for buttons.
Example: button { color: var(--r-tx-bt); }
Button Hover Text
Variable: --r-tx-bt-h
Description: Sets the hover text color for buttons.
Example: button:hover { color: var(--r-tx-bt-h); }
Button Background
Variable: --r-bg-bt
Description: Specifies the background color for buttons.
Example: button { background-color: var(--r-bg-bt); }
Button Hover Background
Variable: --r-bg-bt-h
Description: Sets the hover background color for buttons.
Example: button:hover { background-color: var(--r-bg-bt-h); }
Solo’s Powerful Region System – Total Layout Control for Drupal
Solo’s Powerful Region System – Total Layout Control for Drupal
Solo provides an advanced region system that gives you full flexibility over your site’s layout. The theme features two types of regions:
- Single Regions – Independent sections with their own wrappers, ideal for key site elements like the Header, Primary Menu, System Messages, and Breadcrumbs.
- Grouped Regions – Multiple regions combined into a shared wrapper for balanced layouts, such as the Top, Main, Bottom, and Footer sections.
Single Regions
Solo includes standalone regions for key site components, ensuring focused content placement: ✔ Popup Login Block ✔ Fixed Search Block ✔ Header ✔ Primary Sidebar Menu ✔ Primary Menu ✔ Welcome Text ✔ Highlighted ✔ System Messages ✔ Page Title (Hidden on Home Page) ✔ Breadcrumb ✔ Footer Menu Container
Grouped Regions
Grouped regions share a common wrapper, allowing for a well-structured and evenly spaced design: ✔ TOP: Top First, Second, and Third Containers ✔ MAIN: Left Sidebar, Content, Right Sidebar ✔ BOTTOM: Bottom First, Second, Third, and Fourth Containers ✔ FOOTER: Footer First, Second, and Third Containers
By combining Single and Grouped regions, Solo offers unmatched flexibility in structuring your website, whether you need isolated elements or a cohesive content layout.
Solo Theme Regions – Ultimate Layout Flexibility for Drupal
Highlighted Content
Feature important announcements, alerts, or promotions in this region to grab user attention instantly.
Popup Login
Provide a seamless sign-in experience with a pop-up login block that doesn’t require page reloads.
Fixed Search
Keep search functionality always accessible with a fixed search bar that stays visible as users scroll.
Header & Branding
Showcase your site logo, branding, and navigation in the topmost section for a strong first impression.
Sidebar Menu
Improve navigation with a sidebar menu that keeps secondary content easily accessible.
Primary Menu
Guide visitors through your site with a structured main navigation menu, placed prominently in the header.
Welcome Text
Use this hero text region to introduce your site, display a tagline, or encourage action.
Top Containers
Three flexible top regions for banners, call-to-actions, or extra content before the main section.
System Messages
Display notifications, errors, or success messages in a clear and structured format.
Page Title
Ensure visitors always know where they are with a dedicated page title region.
Breadcrumb Navigation
Improve UX with breadcrumb navigation, allowing users to track their browsing path.
Sidebars
Enhance content discoverability with **left and right sidebar regions** for widgets or extra links.
Main Content Area
The primary space for articles, blog posts, or any core content on your site.
Bottom Containers
Four bottom content areas ideal for widgets, additional navigation, or social links.
Footer Blocks
Three structured footer sections for copyright, branding, or quick links.
Footer Menu
Quick access to essential pages like terms, policies, and contact info.
Customize Your Drupal Site Layout with Solo – Width, Breakpoints & Spacing
Total Control Over Site Width and Layout
Solo makes it effortless to customize your website's width with a single click. Whether you need a compact 800px layout or a full-width 100% dynamic design, Solo provides eight predefined width options. Apply them globally, per content type, or even on individual pages—offering total flexibility to match your vision.
Breakpoint Brilliance for Every Screen
Ensure perfect responsive design with Solo’s five customizable breakpoints. Adjust both site-wide breakpoints and menu breakpoints to guarantee optimal viewing across desktops, tablets, and mobile devices. One-click customization makes sure your Drupal site always looks sharp on any screen.
Flexible Spacing and Typography
Fine-tune your site’s visual balance with Solo’s intuitive spacing and typography controls. Adjust the spacing between regions with five predefined options, modify font sizes site-wide, and even import custom Google Fonts to create a unique brand identity.
Seamless Social Customization with Solo
Effortlessly customize your social presence with Solo! Choose from three icon sizes (Small, Medium, Large), tailor icon colors with a single input, and decide whether to showcase them with a simple checkbox. Featuring 17 social media and communication icons—including Facebook, Instagram, TikTok, and more—Solo makes connecting with your audience seamless and stylish.
Enhanced Customization Features
Tailor every detail with ease. Solo allows quick CSS modifications directly in the header—no need for a sub-theme. Adjust date formats with three predefined styles or switch the layout for multi-value fields to appear inline for a cleaner look. These features make customization fast, easy, and effective.
User-Centric Features for a Polished Experience
Enhance user experience with Solo’s smart design options. Transform login, register, and password pages by disabling sidebars to center forms for a professional, user-friendly layout. Reorder the header and main menu regions to optimize navigation and visual flow. For content-heavy pages, enable Reading Mode to set the content width at 600px, improving readability.
Dynamic Animations and Smooth Interactions
Elevate your site’s interactivity with engaging animations that bring hidden blocks into view as users scroll. This dynamic feature not only enhances aesthetics but also boosts engagement, providing a modern, fluid browsing experience.
Global Font Family Customization
Style your site like never before! With Solo, choose from 50 Google fonts to globally define your website's font family, giving it a unique and professional touch.
Custom Headers with H1, H2, H3 Fonts
Make your headers pop! Solo offers 26 Google fonts exclusively for H1, H2, and H3 tags, ensuring your titles stand out.
Special Google Fonts for HTML Tags
Tailored typography at your fingertips. Apply 25 special Google fonts to any HTML tag and watch your content come alive with personality.
W3.CSS Integration
Unleash design flexibility with Solo! Effortlessly upload and use the w3.css library locally on your site, ensuring custom styles and faster loading times.
Paragraph Bundle Grid Example
Mission
Our mission is to make Drupal more accessible and user-friendly, empowering businesses of all sizes, especially small enterprises with powerful tools that streamline content customization and enhance digital experiences.
Need help with your Drupal project? Hire Me through Flash Web Center, LLC.