Heading One – H1
Feature Heading Style h1
Feature Heading Style h2
Feature Heading Style h3
Feature Heading Style h4
Feature Heading Style h5
This paragraph text demonstrates the global body copy style. It’s ideal for clear website content, landing page copy, and service descriptions, with relaxed line-height and subtle letter spacing for readability.
Heading Two – H2
Use H2s for key sections like “Web Design Services”, “Our Process” or “Why Choose Us”. You can also use strong text to highlight important benefits or conversion points.
Heading Three – H3
H3s work well for sub-sections on service pages, feature lists, or pricing inclusions on your website.
Heading Four – H4
Use H4 for finer detail – FAQs, feature labels, or small content blocks.
Heading Five – H5
Rarely used, but available for deeper hierarchy on long-form pages.
Heading Six – H6
Smallest heading style – useful for labels or meta information.
Lists & Structured Content
Unordered list (great for service features):
- Custom WordPress & Elementor website builds
- SEO-friendly site architecture and clean code
- Conversion-focused landing pages and funnels
Ordered list (example project flow):
- Discovery call & strategy workshop
- Wireframes, design concepts & content mapping
- Development, testing & launch support
Card Component – Service Block
Website Design & Build
Mobile-responsive, fast-loading websites designed to match your brand and convert more visitors into enquiries. We handle everything from layout and copy structure to technical setup and launch.
Talk about your projectLayout Utilities for Web Pages
Below are examples of the global layout classes
(grid-50-50, grid-60-40, grid-3, etc.)
and how to use them to structure your web design content.
50 / 50 Layout – .grid-50-50
Service Copy
Use this layout for two-column sections like “Web Design” and “SEO” side-by-side, or text on one side and imagery on the other.
Typical usage:
<div class="grid-50-50">
<div>Service content</div>
<div>Support content / image</div>
</div>
Supporting Content
Great for pairing benefits with visuals, mockups or screenshots.
60 / 40 Layout – .grid-60-40
Main Pitch (60%)
Perfect for homepage hero sections: strong copy on the left, with a supporting image or video on the right.
<div class="grid-60-40">
<div>Hero copy & CTAs</div>
<div>Mockup / laptop image</div>
</div>
Highlight Block (40%)
Use this for key stats, testimonials, or a summary of your core offers.
40 / 60 Layout – .grid-40-60
Sidebar Content (40%)
Ideal for side navigation, filters, or a “Why work with us” summary alongside deeper copy.
<div class="grid-40-60">
<div>Sidebar / highlights</div>
<div>Detailed information</div>
</div>
Main Content (60%)
Use this column for full service descriptions or long-form sales copy.
Three Columns – .grid-3
Web Design
Clean, on-brand designs tailored to your goals.
SEO Setup
Technical and on-page foundations for organic growth.
Ongoing Support
Hosting, care plans and continuous improvements after launch.
Four Columns – .grid-4
Project 1
Local service business website.
Project 2
eCommerce store redesign.
Project 3
Multi-location brand rollout.
Project 4
Landing page funnel for paid campaigns.
Flex Utilities – .flex-between
Use .flex-between to space items edge-to-edge – perfect for
pricing labels, stats, or calls-to-action in your layout.
<div class="flex-between">
<span>From $2,500 + GST</span>
<span>Average 4–6 week build</span>
</div>