Support Request – Clean Layout & Styling With SP Page Builder On Joomla 4 (Project: "Silberhorn")
Ricardo Kappel
Dear SP Page Builder Team,
we are currently rebuilding an existing HTML/CSS website with Joomla 4, using Cassiopeia as the base template and SP Page Builder for content presentation. Our goal is to achieve a clean, responsive, and unified design for structured content like articles, podcasts, contact and legal info.
✅ What we’re doing: Migrating a static website into a modular Joomla 4 setup.
Using SP Page Builder to create and structure content pages (text, images, headings, tabs, accordions).
We aim for a consistent layout across all pages and modules.
⚠️ Challenges we face: Spacing issues: There are unusually large gaps between <h2> headings and the first paragraph below. We had to use margin-top: -40px !important in CSS, which is obviously not an elegant or maintainable solution. We'd prefer to solve this directly in Page Builder if possible.
Consistent design styles: We'd like to define global styles (e.g., for paragraphs, H2, buttons) so all pages follow the same typography and spacing without manual tweaking. We are unsure how to best implement this using Page Builder's tools or templates.
Layout and responsiveness: We’re also struggling with white background gaps and inconsistent content widths on different devices. We'd love a best-practice approach for managing these aspects (rows/containers/backgrounds).
🙏 Our Questions: What is the recommended approach to define global typography and spacing styles with SP Page Builder?
How can we control vertical spacing between elements, especially headings and paragraphs, without needing custom CSS hacks?
Is there a clean way to integrate or override site-wide CSS without breaking Builder layout/styling?
Do you have recommendations for creating a podcast section with a nice player layout (e.g., categorized overview, tabbed view, or playlist)?
Could you recommend one of your existing templates (from https://www.joomshaper.com/joomla-templates) that would be a good fit for our use case? We're looking for something minimalistic, modern, and text-focused, with good mobile support and flexibility for editorial content.
We appreciate any tips, best practices, or example layouts you can share. Thank you very much in advance for your support!
Best regards, Rick Kappel "Silberhorn" Project https://dr-silberhorn.de/ https://dr-silberhorn.eu/
Ofi Khan
Accepted AnswerDear Rick,
Thank you for reaching out and providing detailed insights into your project. It's great to see your commitment to achieving a clean, responsive, and unified design using Joomla 4, Cassiopeia, and SP Page Builder. Let's address each of your concerns and provide guidance to help you move forward effectively.
- Global Typography and Spacing Styles
SP Page Builder v5.5.5 introduces Global Typography Settings, allowing you to define consistent font styles across your site. You can set global rules for fonts, sizes, weights, line heights, and more—all from a centralized panel.
How to access:
- Navigate to the SP Page Builder Dashboard.
- Go to Settings > Typography Settings.
- Define your preferred styles for headings, body text, and links.
These settings will automatically apply to relevant addons, ensuring consistency without manual adjustments.
Documentation:
- Managing Vertical Spacing Without CSS Hacks
Instead of using custom CSS, utilize the built-in spacing controls within SP Page Builder.
Follow the steps:
- Select the addon in your page layout.
- Access the Spacing settings.
- Adjust the Margin and Padding values as needed.
This approach allows precise control over spacing between elements, maintaining a clean design without external CSS overrides.
- Overriding Site-Wide CSS Cleanly To implement custom styles without disrupting SP Page Builder layouts:
- Navigate to Extensions > Templates > Template Name > Custom Code.
- Add your CSS rules in the Custom CSS field.
This method ensures your custom styles are applied globally while preserving the integrity of SP Page Builder's design structure.
- Designing a Podcast Section SP Page Builder offers a Sound Cloud addon, enabling you to embed podcast tracks seamlessly.
Documentation:
SP Page Builder Soundcloud Addon
For a categorized overview or playlist, consider using Tabs or Accordion addons to organize episodes effectively.
Documentation:
SP Page Builder Accordion Addon
- Template Recommendations Based on your preference for a minimalistic, modern, and text-focused design with strong mobile support, here is a JoomShaper templates that align with your requirements:
- Additional Tips
- Layout Consistency: Utilize SP Page Builder's Layout Bundles to maintain a consistent structure across pages.
- Responsive Design: Ensure that each section and addon is configured with responsive settings to provide optimal viewing across devices.
- Custom Sections: Leverage the Add New Section feature to create custom layouts tailored to your content needs.
I hope this guidance assists you in refining your website. Should you have further questions or need additional support, feel free to reach out.
Best regards
Ofi Khan
Accepted AnswerJust checking in to see if you have feedback on the provided solution. If the answer resolved your query, you can mark it as accepted to close the post and guide others with similar questions. You’ll find a button to accept answers below each comment.
If you need further assistance, feel free to let us know!