Create a hero section with background, heading, and CTA for WordPress Greenshift
Generates WordPress Greenshift hero sections with background, heading, and CTA components.
/plugin marketplace add vcode-sh/vibe-tools/plugin install greenshift-blocks@vibe-toolspage title or hero descriptionGenerate an attractive hero section for a WordPress page.
greenshift-blocks skill documentation in docs/docs/03-layouts.md and docs/05-animations.mdSection (alignfull, background image/video)
└── Content Container (centered, max-width)
├── Subtitle (optional, uppercase, animated)
├── Heading (h1, large font, animated with delay)
├── Description (optional, max-width for readability)
└── CTA Buttons (optional, inline-flex)
align: "full" and isVariation: "contentwrapper"backgroundImage: ["url(...)"] or video objectoverlay: {"color":"#000000","opacity":0.3}Hero sections have dark backgrounds - text needs explicit white color.
Heading (h1):
"color":["var(--wp--preset--color--white, #ffffff)"]marginBottom for spacingSubtitle/Description:
"color":["rgba(255,255,255,0.9)"] for softer whiteExample heading JSON:
{"textContent":"Title","tag":"h1","styleAttributes":{"color":["var(--wp--preset--color--white, #ffffff)"],"marginBottom":["var(--wp--preset--spacing--50, 1.5rem)"]}}
hero-homepage.html)IMPORTANT: Always save output to a .html file. Never just display the code in chat.