Saltar al contenido principal

Secciones de página de inicio y marketing

Vertex incluye más de 30 secciones listas para la página de inicio diseñadas para tiendas B2B y de suministro industrial: rotadores hero, multicolumnas editoriales, marcas de confianza, barras KPI, acordeones FAQ con JSON-LD emitido automáticamente, banners de conversión y secciones fusionadas 50/50 que combinan dos ideas relacionadas en una sola banda (marcas + pedido rápido, recursos + FAQ).

Tema Vertex — Paleta de la página de inicio

Combine como prefiera — el orden es suyo

Cada sección aquí es una sección OS 2.0 independiente. Arrástrelas en cualquier orden en el personalizador. Tampoco tiene que usarlas en la página de inicio — colóquelas en page.about.json, page.services.json o cualquier plantilla de página personalizada.

Secciones de hero y apertura​

hero​

Archivo de sección: sections/hero.liquid

Rotador multi-diapositiva con avance automático, navegación por puntos y composición editorial (sobre-título + titular + subtitular + CTAs duales). Por defecto una diapositiva para el LCP más rápido — las diapositivas adicionales son mejora progresiva.

Ajustes de bloque por diapositiva: imagen (con selección de ancho consciente de móvil mediante <picture><source>), texto sobre-título, titular, subtitular, etiqueta + URL de CTA principal, etiqueta + URL de CTA secundario, alineación (izquierda / centro).

Ajustes de sección: intervalo de avance automático (segundos), interruptor mostrar puntos, esquema de color.

Consejo de LCP

Mantenga la página de inicio en una sola diapositiva hero si Lighthouse Performance es una prioridad. Cada diapositiva extra añade una imagen de tamaño hero al payload inicial. El predeterminado se entrega con 1 diapositiva por esta razón.

Archivo de sección: sections/featured-collection.liquid

Cuadrícula de productos que se extrae de un selector de colección. Acepta bloques @app para conformidad con la Theme Store.

Ajustes: selector de colección, cabecera, productos por fila (2 / 3 / 4 / 5), columnas en móvil (1 / 2), mostrar enlace Ver todo, esquema de color.

collection-list​

Archivo de sección: sections/collection-list.liquid

Cuadrícula de categorías con superposiciones de imagen y títulos centrados sobre cada tile. Columnas y proporción configurables.

Bloques editoriales​

image-with-text​

Archivo de sección: sections/image-with-text.liquid

Emparejamiento clásico 50/50 o asimétrico de imagen + texto. Útil para Sobre nosotros, Nuestro proceso, Por qué nosotros.

Ajustes: imagen, cabecera, cuerpo (texto enriquecido), etiqueta + URL de CTA, diseño (image-left / image-right), esquema de color.

multicolumn​

Archivo de sección: sections/multicolumn.liquid

Cuadrícula de 2, 3 o 4 columnas. Cada columna tiene un icono (o imagen), cabecera, cuerpo y enlace opcional. Úsela para propuestas de valor (Envío en el mismo día · NET-30 · Precios por volumen · Certificado ISO 9001).

Ajustes de bloque por columna: icono (imagen), cabecera, cuerpo, etiqueta + URL de enlace.

rich-text​

Archivo de sección: sections/rich-text.liquid

Bloque centrado de introducción o sobre nosotros. Cabecera + cuerpo de texto enriquecido + CTA opcional. Úselo con moderación — es el bloque "salto de página".

timeline​

Archivo de sección: sections/timeline.liquid

Crónica de año + hito para una página Sobre nosotros. Por bloque: año, título, cuerpo.

Confianza y prueba social​

testimonials​

Archivo de sección: sections/testimonials.liquid

Tarjetas con valoración y tratamiento de cabecera con superposición de avatar. Cada tarjeta tiene una valoración (1–5 estrellas), cita, nombre del cliente, cargo, empresa e imagen de avatar.

Ajustes por bloque: nombre, cargo, empresa, cita (texto enriquecido), valoración (1–5), avatar (imagen).

logo-list​

Archivo de sección: sections/logo-list.liquid

Logos de marca con desplazamiento tipo marquee con líneas de cuadrícula con desvanecimiento. Úselo para Confiado por / Como apareció en / Marcas que ofrecemos.

Ajustes por bloque: imagen de logo, URL opcional. A nivel de sección: velocidad de desplazamiento, mostrar líneas de cuadrícula.

press-coverage​

Archivo de sección: sections/press-coverage.liquid

Tira de logos + citas destacadas. Combina logos de prensa con citas cortas atribuidas — "...el McMaster-Carr de WordPress." — Trade Weekly.

stats-bar​

Archivo de sección: sections/stats-bar.liquid

Banda KPI en modo oscuro. Úsela para números titulares — 40 000+ SKU · NET-30 · Envío 24 h · ISO 9001.

Ajustes por bloque: número (texto grande), etiqueta (texto pequeño).

Muestre rangos, no cifras exactas

"40 000+ SKU" se lee más fuerte que "40 127 SKU" y no requiere actualizar la sección cada vez que cambia el inventario. Lo mismo con el volumen de pedidos.

Conversión y CTA​

cta-banner​

Archivo de sección: sections/cta-banner.liquid

Llamada a la acción pre-footer con efecto de superposición sobre el footer — la banda se rompe visualmente sobre el footer para un acabado editorial.

Ajustes: cabecera, subtitular, CTA principal, CTA secundario, imagen (opcional), interruptor Ocultar para clientes B2B.

El interruptor Ocultar para clientes B2B es un detalle pequeño pero crítico. Si el CTA dice "Hágase distribuidor" o "Solicite un presupuesto", no quiere mostrárselo a un comprador que ya es un distribuidor con sesión iniciada. Active esto y la sección desaparece cuando customer.b2b? es true.

newsletter​

Archivo de sección: sections/newsletter.liquid

Suscripción por email con botón de alta. Usa el formulario nativo de newsletter de cliente de Shopify — los suscriptores aterrizan en su lista de clientes de Shopify con la marca newsletter.

industries-grid​

Archivo de sección: sections/industries-grid.liquid

Cuadrícula editorial de tarjetas para mostrar los verticales a los que sirve — HVAC · Manufactura · Instalaciones · Marítimo · Aeroespacial.

Ajustes por bloque: imagen, título, enlace.

resource-hub​

Archivo de sección: sections/resource-hub.liquid

Lista de descargas para hojas técnicas, MSDS, folletos, certificaciones. Cada entrada es un enlace de archivo.

Ajustes por bloque: título, archivo (PDF), descripción, icono opcional.

services-grid​

Archivo de sección: sections/services-grid.liquid

Tiles con superposición de imagen para ofertas de servicio — Corte a medida · Kitting personalizado · Consultoría in situ · Gestión de inventario.

FAQ​

faq​

Archivo de sección: sections/faq.liquid

Acordeón basado en disclosure (construido sobre <details> / <summary> nativos para soporte completo de teclado + lector de pantalla). Emite automáticamente FAQPage JSON-LD para rich snippets de Google.

Ajustes por bloque: pregunta (texto), respuesta (texto enriquecido).

Rich snippets desde el primer momento

La sección emite el grafo JSON-LD automáticamente — obtendrá rich snippets FAQ en los resultados de búsqueda de Google sin tocar código. Asegúrese de que las preguntas son preguntas reales que hacen los compradores (no copy de marketing), ya que se aplican las directrices de contenido de Google.

Secciones fusionadas de doble propósito​

Algunas secciones combinan dos ideas en una sola banda, ahorrando espacio vertical y creando ritmo editorial.

dual-brands-quickorder​

Archivo de sección: sections/dual-brands-quickorder.liquid

Fusionada 50/50: cuadrícula de logos de marca a un lado, pad de pegar y añadir al carrito de pedido rápido al otro. Excelente para páginas de inicio B2B donde quiere mostrar marcas de confianza Y un camino de conversión en la misma banda.

dual-resources-faq​

Archivo de sección: sections/dual-resources-faq.liquid

Fusionada 50/50: descargas de recursos (hojas técnicas, folletos) a un lado, acordeón FAQ al otro. Emparejamiento común para industrias intensivas en soporte.

Recomendaciones de orden de secciones​

Orden sugerido para una página de inicio MRO / suministro industrial:

  1. Hero — la propuesta de valor + CTA principal (catálogo vs. RFQ)
  2. Barra de estadísticas — marcas de credibilidad instantánea
  3. Colección destacada — best sellers o categoría de top of funnel
  4. Multicolumna — Por qué nosotros en 3 columnas
  5. Cuadrícula de industrias — los verticales a los que sirve
  6. Lista de logos — marcas que ofrece
  7. Marcas duales + pedido rápido — emparéjelo con el CTA de lista profesional
  8. Testimonios — citas de comprador con valoraciones
  9. Hub de recursos — descargas
  10. FAQ — objeciones principales
  11. Banner CTA — Solicitar presupuesto (oculto para B2B con sesión iniciada)
  12. Newsletter — alta a lista profesional

Vertex Theme — Homepage palette

Qué sigue​