Introduction
Consistency is key when designing a professional website. Instead of editing each element individually, the Global Styling settings in Swiftwebsites.ai let you control fonts, colors, and layout across your entire site.
With just a few clicks, you can set global text styles, choose brand colors, add new fonts, and adjust your website’s layout. All updates automatically apply everywhere for a unified design.
Text Styling
Access text settings by clicking the brush icon to open Global Styling.
Adjust default styles for:
Headings (H1, H2, etc.)
Paragraphs
Links
Modify attributes such as:
Font size
Letter spacing
Line height
Changes apply across the website. Inline styling (text edited individually) overrides global settings, so avoid mixing both for consistency.
Mobile Styling
Global text styles can also be adjusted specifically for mobile devices.
Example: Make headings smaller on mobile for better readability.
Color Palette
In Global Styling, you’ll see your primary and secondary color palette.
Change a primary color (e.g., from green to red) and it updates across your entire design.
Use global colors for consistency and branding, or choose custom colors for specific elements.
Assign colors by selecting a widget → choose from global palette or custom picker.
Adding New Fonts
Click Add Font to choose from over 900 Google Fonts.
Select the font family and weight you’d like to use.
The new font becomes available across your website and in the global styling menu.
Limit to 2–3 fonts max for consistency and performance (no more than 5 fonts allowed).
Adding too many fonts can slow your site and make designs look unstructured.
Website Layout
Control overall site width in Global Styling:
Standard width is around 1100–1200px (recommended for most sites).
Adjust narrower for a boxed look or wider for modern, spacious layouts.
Choose between:
Full Width - content stretches edge-to-edge
Boxed - margins on the sides, often with background color or image for contrast
Adjust in real-time to preview how the site will look.
Best Practices
Keep font usage simple (stick to 2–3 styles max).
Choose a primary brand color and 2–3 complementary secondary colors.
Use Global Styling instead of inline edits for consistency across all pages.
Test your text and layout in mobile view to ensure readability.
Use the boxed layout strategically when you want more focus on content or to add creative side backgrounds.
Quick Workflow Recap
Open Global Styling via the brush icon.
Adjust text: headings, paragraphs, links, and spacing.
Set a primary and secondary color palette.
Add and assign new Google Fonts (up to 5 max).
Modify the website’s overall layout: width, full-width, or boxed.
Preview changes on desktop and mobile before saving.