Page Hero

Qué hace esta sección

Hero/header section for any page

Dónde se coloca

• Se puede usar como máximo 1 vez/veces en una página.
• Esta sección está en todos los planes: no necesita ningún complemento.

Estilos

Distintos aspectos para la misma sección. Puedes cambiar el estilo más tarde; tu contenido se mantiene.

Los primeros 2 estilos de cada sección están abiertos en todas las tiendas. El resto se desbloquea con el complemento Editor de páginas, todos a la vez.

• Centered

  Gratiscentered

  Center-aligned badge, bold title and subtitle

  Propios de este estilo: showBadge, badgeText, title, highlightedWord, subtitle, accentColor, textAlign, textColor

• Split

  Gratissplit

  Left-aligned text with right decorative illustration

  Propios de este estilo: showBadge, badgeText, title, highlightedWord, subtitle, accentColor, textAlign, textColor, splitTagLabel

• Minimal

  Editor de páginasminimal

  Compact, clean heading with breadcrumb styling

  Propios de este estilo: showBadge, badgeText, title, highlightedWord, subtitle, textAlign, textColor, accentColor

• Gradient

  Editor de páginasgradient

  Vibrant gradient background with bold display title

  Propios de este estilo: showBadge, badgeText, title, highlightedWord, subtitle, accentColor, textAlign, textColor

• Magazine

  Editor de páginasmagazine

  Editorial layout with large accent label, separator and title

  Propios de este estilo: showBadge, badgeText, title, highlightedWord, subtitle, buttons, accentLabel, accentColor, textAlign, textColor

• Hero Image

  Editor de páginashero-image

  Full-width background image with centered text overlay

  Propios de este estilo: showBadge, badgeText, title, highlightedWord, subtitle, image, overlayOpacity, accentColor, textAlign, textColor

• Image Bottom

  Editor de páginasimage

  Full-width background image with text anchored at the bottom

  Propios de este estilo: showBadge, badgeText, title, highlightedWord, subtitle, image, overlayOpacity, accentColor, textAlign, textColor

• Wave

  Editor de páginaswave

  Gradient hero with an elegant SVG wave divider at the bottom

  Propios de este estilo: showBadge, badgeText, title, highlightedWord, subtitle, accentColor, textAlign, textColor, showGlow

• Neon

  Editor de páginasneon

  Dark cinematic hero with glowing neon text and grid pattern

  Propios de este estilo: showBadge, badgeText, title, highlightedWord, subtitle, accentColor, textAlign, textColor

• Bold

  Editor de páginasbold

  Oversized display typography that makes the title impossible to miss

  Propios de este estilo: showBadge, badgeText, title, highlightedWord, subtitle, accentColor, textAlign, textColor

• Floating

  Editor de páginasfloating

  Centered title with animated floating category pill tags

  Propios de este estilo: showBadge, badgeText, title, highlightedWord, subtitle, floatingTags, accentColor, textAlign, textColor

• Diagonal

  Editor de páginasdiagonal

  Bold two-panel layout split by a sharp diagonal — accent color floods the left, content lives right

  Propios de este estilo: showBadge, badgeText, title, highlightedWord, subtitle, buttons, accentColor, textAlign, textColor

• Retro

  Editor de páginasretro

  Newspaper brutalist design with thick borders and a flat color block — strong editorial identity

  Propios de este estilo: showBadge, badgeText, title, highlightedWord, subtitle, accentColor, textAlign, textColor

• Stack

  Editor de páginasstack

  Three rotated cards create depth — the front card holds your title and badge

  Propios de este estilo: showBadge, badgeText, title, highlightedWord, subtitle, accentColor, textAlign, textColor

• Billboard

  Editor de páginasbillboard

  Gigantic split typography: outline text stacked over solid accent — impossible to miss

  Propios de este estilo: showBadge, badgeText, title, highlightedWord, subtitle, accentColor, textAlign, textColor

• Typewriter

  Editor de páginastypewriter

  Animated cycling words — the headline continuously morphs through your categories

  Propios de este estilo: showBadge, badgeText, title, highlightedWord, subtitle, typewriterWords, accentColor, textAlign, textColor

• Glassmorphism

  Editor de páginasglass

  Colorful blurred blobs behind a frosted glass content card — premium and modern

  Propios de este estilo: showBadge, badgeText, title, highlightedWord, subtitle, accentColor, textAlign, textColor

• Geometric

  Editor de páginasgeometric

  Large CSS-drawn geometric shapes frame bold editorial left-aligned text

  Propios de este estilo: showBadge, badgeText, title, highlightedWord, subtitle, accentColor, textAlign, textColor

• Split Image

  Editor de páginassplit-image

  Full-bleed image on the left, bold headline on the right — dramatic visual divide

  Propios de este estilo: showBadge, badgeText, title, highlightedWord, subtitle, image, overlayOpacity, accentColor, textAlign, textColor

• Aurora

  Editor de páginasaurora

  Animated northern-lights gradient pulsing behind oversized gradient-clipped text

  Propios de este estilo: showBadge, badgeText, title, highlightedWord, subtitle, accentColor, textAlign, textColor

• Sporty

  Editor de páginassporty

  Full-bleed image with bottom-left anchored bold text. Athletic inner-page hero matching the sporty slider visual language.

  Propios de este estilo: showBadge, badgeText, title, highlightedWord, subtitle, image, overlayOpacity, accentColor, textAlign, textColor

• Joy Gradient

  Editor de páginasjoy-gradient

  Playful lilac→aqua collection banner with a rounded bottom, blurred decorative circles and floating fruit icons

  Propios de este estilo: showBadge, badgeText, title, highlightedWord, subtitle, crumbText, gradFrom, gradTo, inkColor, bottomRadius

Ajustes

Los campos que aparecen en el panel Ajustes de sección, a la derecha, al seleccionar esta sección.

Comunes a todos los estilos

• bg
• contentMaxWidth
• sectionMaxWidth
• horizontalPadding
• verticalPadding
• verticalAlignment
• horizontalAlignment
• horizontalMargin
• verticalMargin
• spacingOverrides
• animationType
• animationDuration
• animationDelay
• animationEasing
• animationStagger
• animationRepeat
• animationParallax
• imageParallax
• animationScrollEffect
• height