PortoLite: a section-based WordPress theme for agencies and service businesses
Summary. Most WordPress "page builder" themes either lock you into one heavy builder plugin or ship a pile of CSS that every page loads whether it needs it or not. PortoLite takes a different approach: pages are assembled from ACF flexible-content sections, each with its own stylesheet that only loads when that section is actually on the page — including a working dark mode.
Status. PortoLite is still in development and has not been released yet. This is a look at how it is built, not an installation guide for a finished product.
The problem
Agency and service-business sites usually need the same thing: a handful of well-designed sections — hero, services, team, testimonials, call to action — that can be rearranged per page.
The typical solution is a drag-and-drop page builder, which brings its own DOM, its own CSS framework, and a lot of instability disguised as flexibility. The result is pages that load styles and scripts for builder features they never use.
The solution
PortoLite builds pages from ACF flexible-content sections instead of a page-builder DOM. Each section is a distinct layout with its own fields, its own template part, and its own stylesheet — so a page only ever loads the CSS and JavaScript its own sections need.
Every design value — colour, spacing, radius, shadow, duration — resolves to one design-token file. That is also what makes dark mode possible with a handful of token overrides instead of a second stylesheet.
Requirements
- WordPress 6.0 or later, PHP 7.4 or later
- Advanced Custom Fields PRO — the section builder is built on flexible content, repeater and gallery fields
- Kirki — powers the Customizer controls
- PortoLite Core, a bundled companion plugin that registers the Team custom post type
The theme prompts for all three on activation, so you do not need to hunt them down separately.
Step-by-step installation
- In your WordPress admin, go to Appearance → Themes → Add New → Upload Theme.
- Select the PortoLite ZIP file, click Install Now, then Activate.
- Install the recommended plugins — ACF PRO, Kirki, PortoLite Core — when prompted.
- Create a new page, set its template to Page (Flexible Sections), and start adding sections under Page Sections.
Building a page with sections
Each section — hero, services, team, testimonials, call to action — is added, reordered and configured directly from the page editor through ACF flexible content. There is no separate builder interface to learn.
Ordinary pages, posts, archives and the blog all work normally without the section builder. It only applies when a page uses the "Page (Flexible Sections)" template.
Design tokens and dark mode
Every colour, type size, spacing step, radius, shadow and animation duration the theme uses lives in one file: assets/css/portolite-tokens.css.
Change the brand colour once — in Appearance → Customize → Typography Setting → Brand colour — and every button, link, icon and accent updates at once, with the hover shade and a readable text colour worked out automatically.
Dark mode is a handful of those same tokens redefined under a body class. Because every section is written using the tokens, dark mode reaches all of them, including sections added later.
Common mistakes to avoid
- Skipping the recommended plugins. The section builder will not work without ACF PRO active. Install it when prompted rather than dismissing the notice.
- Editing colours in individual section stylesheets. Always change the token in
portolite-tokens.css, or override it from a child theme. Otherwise the next section you add will not match. - Expecting the section builder on every page. It is opt-in per page through the "Page (Flexible Sections)" template. Regular pages and posts use standard WordPress templates.
FAQ
- Do I have to use the section builder?
- No. Ordinary pages, posts, archives and the blog all work without it.
- Can I change the theme's colours?
- Yes. The brand colour has a Customizer picker that updates everything at once. Anything else resolves to a custom property in
portolite-tokens.css. - Does the theme work without JavaScript?
- Mostly. The FAQ accordion, marquee band, feature-list previews and CTA parallax are CSS-only. Carousels and scroll animations need their libraries, which load only on pages using a section that needs them.
- Does it require a page builder plugin like Elementor?
- No. PortoLite's own ACF-based section builder replaces that need.
Conclusion
If you are tired of a page-builder plugin loading its entire framework on pages that use three of its thirty features, PortoLite's section-based approach is built to load only what a page actually uses — sections, tokens and dark mode included.
Source on GitHub All my projects