# Sunlectric Solar WordPress

Sunlectric Solar WordPress case study cover with desktop and mobile previews

COMMERCIAL SOLAR   /   WORDPRESS   /   VERSION 1.10.1

Case study   ·   One-page preview   ·   Multi-page preview   ·   Contact

A commercial solar WordPress theme by Joseph Edwards (RawPowered). Its bundled Hero Studio gives site owners direct control over the homepage's slides, media, copy, design, and motion.

Bundled Hero Studio
No separate slider plugin needed for the theme homepage		 Responsive presentation
Desktop, mobile, one-page, and multi-page		 Theme-wide controls
Fonts, colors, logos, header, contact, and map
## See the site in motion

Animated scroll through the Sunlectric Solar desktop page

Animated from the October 28, 2026 static HTML capture. Click to open the interactive page preview. The hosted WordPress lab uses different Hero Studio copy and slide settings.

## Explore the experience
Desktop homepage first screen; open the full-page capture
Desktop · Full-page capture		 Mobile homepage first screen; open the full-page capture
Mobile · Full-page capture
| Preview | What it shows | | --- | --- | | [One-page solar site](demo.html) | Hero, services, project story, questions, and consultation path | | [Multi-page solar site](demo-multipage.html) | Homepage with separate About Us and Contact Us pages | | [About Us](about.html) | Company story and editorial page layout | | [Contact Us](contact.html) | Inquiry layout and optional OpenStreetMap placement |
About Us page preview
About Us		Contact Us page preview
Contact Us
View footer map options

Standard footer Footer with OpenStreetMap

The captures above document the repository's responsive HTML representation of the theme. The charcoal, lime, and glass framing belongs to this RawPowered case study; the solar website has its own navy, gold, orange, and blue identity. ## Hero Studio

Sunlectric Hero Studio in WordPress showing the live slide canvas and editor navigation

Actual Hero Studio in the local WordPress theme lab, captured October 30, 2026.

### A built-in visual editor for the most visible part of the site **Appearance → Hero Studio** manages the theme's bundled homepage hero. Site owners can build an image or video slideshow with tailored copy and calls to action, then see the result before publishing. These controls ship with Sunlectric. The bundled homepage does not need a separately purchased slider or an additional slider plugin to use them.

Preview cycling through three real Sunlectric slides captured from local WordPress

Three actual WordPress slide captures assembled with crossfades for README playback. This is not a continuous screen recording.

Live WordPress slide one showing a commercial solar rooftop
01 / Commercial solar		 Live WordPress slide two showing a logistics facility
02 / Energy planning		 Live WordPress slide three showing an evening solar rooftop
03 / Project path
Build the story
Up to eight slide slots, with three enabled in the starter setup		 Shape the look
Media, overlays, typography, layout, and two buttons per slide		 Direct the motion
Transitions, layer timing, autoplay, and playback controls
The workspace keeps the slide strip, live canvas, selected element controls, and motion timeline together. Click a layer to edit it; hide a layer without deleting its copy. Desktop and mobile views update as settings change, and full-screen preview plays the draft slideshow before it is saved. ### Inside the editor
Hero Studio slide list and editor controls
Slide workspace		 Hero Studio selected layer settings
Layer inspector
Hero Studio motion timeline and timing controls
Motion timeline		 Hero Studio image and video controls
Image and video media
Hero Studio playback settings
Playback		 Hero Studio design settings
Hero design

Captured from the local WordPress Admin on October 30, 2026. Images are cropped for readability.

| Design area | Controls available now | | --- | --- | | **Slides and media** | Add, remove, enable, and select slides. Use a still image or muted MP4/WebM video; the image serves as the video poster and fallback. | | **Copy and actions** | Edit the eyebrow, headline, supporting text, and two buttons for each slide. Set each button's label and destination; choose button shape, size, font, and colors in the shared hero design controls. | | **Type and color** | Inherit the site's fonts, use a hero font, or choose a slide font. Adjust headline scale for desktop and mobile, weight, line height, letter spacing, and text color. Set the hero's text alignment. | | **Overlays** | Choose gradient, even tint, vignette, or no overlay. Set overlay color and opacity to keep text readable over different imagery. | | **Transitions** | Crossfade, lateral slide, rise, soft zoom, curtain reveal, or instant, with a 300-2000 ms transition duration. | | **Layer animation** | Give the background and text layers their own entry and exit styles, start times, and durations. Drag timeline bars or enter values; reset the stagger when needed. | | **Playback** | Run a slideshow or one static image or video. Set a 4-12 second slide hold, autoplay, numbered bars/dots/arrows, a pause control, and subtle desktop parallax. | | **Preview and publish** | Review unsaved changes on desktop, mobile, or in a full-screen modal; save when the composition is ready. | The first slide is server-rendered in HTML, so the headline and initial visual remain available before JavaScript runs. Reduced-motion preferences suppress decorative motion and automatic playback. The live editor is part of this theme; an Elementor-built homepage manages its own hero separately. Hero Studio is an actively developed part of Sunlectric. Future releases can expand the editor, while the table above describes the controls included in **v1.10.1**. ## Theme options

Sunlectric settings in the WordPress Customizer

Sunlectric settings in the local WordPress Customizer, captured October 30, 2026.

Header and menu settings
Header and menu		 Brand color settings
Brand colors		 Typography settings
Typography		 Site layout and contact settings
Site options
| Area | Settings | | --- | --- | | Presentation | One scrolling page or a multi-page site with About Us and Contact Us | | Typography | Site body, heading, and navigation fonts, including selected Google Fonts | | Brand colors | Main palette and header colors | | Header and menu | Main, scrolled, and mobile logos; sticky header, scroll shrink, and menu transitions | | Contact | Form recipient and preview mode until a recipient is configured | | Map | Keyless OpenStreetMap on Contact Us or above every page footer | The Denver map point is an example. The theme includes [OpenStreetMap attribution](https://www.openstreetmap.org/copyright). The contact form sends through WordPress mail and does not store submissions in the site database; delivery depends on the host's mail setup. ## Build and compatibility

WordPress 6.4+
Theme templates and settings
PHP 7.4+
Server-rendered homepage
JavaScript
Hero Studio and front-end interactions

HTML5
Page structure
CSS3
Responsive layouts
WebP
Compressed theme imagery
The starter layouts run with WordPress core. Free Elementor is optional for a separately built homepage. Below-the-fold photos load lazily; the first hero image loads eagerly. Theme asset URLs use file-specific cache versions so editor CSS and JavaScript update together. **Hosted check, October 30, 2026:** Version 1.10.1 was installed on a WordPress 7.1.4 lab. The full-width Hero Studio, slide strip, element inspector, timeline, desktop and mobile previews, and three-slide homepage rendered successfully. The browser reported no console errors. The lab URL remains internal to testing. ## Availability This public repository contains a case study and static HTML previews. The installable WordPress theme and PHP source are maintained in a separate private repository. Contact [Joseph Edwards](https://github.com/RawPowered) for access and terms. The solar photographs are generic commercial stock. The previews contain no production database, credentials, submissions, or client uploads. Contact actions in the HTML preview do not submit information.