Componentes maestros
Escaparate
Página interna para la validación visual y estructural de los componentes maestros del sistema de diseño Gutenberg Etchenet.
Encabezado de sección
Encabezado de sección maestro
El título, el estribillo y el encabezado utilizan clases tipográficas validadas.
Contrato de componentes
Clases: etch-header ethet-section-header ethet-content, etch-label ethet-section-kicker, etch-h2 ethet-section-title ethet-gradient-title, etch-sub ethet-section-lead
Estructura : núcleo/grupo + núcleo/párrafo + núcleo/encabezado + núcleo/párrafo
Reutilizar: Modifique únicamente el texto.
Restricciones: Nunca reutilices los tamaños/colores de un HTML antiguo.
Chevron a continuación
Navegación entre secciones validado
El componente es un botón nativo de Gutenberg representado visualmente como una flecha.
Contrato de componentes
Clases: Sección siguiente de Ethet, bloque de navegación descendente de Etch; botón de navegación descendente de Etch, flecha del botón de Ethet, icono del botón de Ethet
Estructura : núcleo/botones + núcleo/botón
Reutilizar: Cambie únicamente la URL y la etiqueta del editor.
Restricciones: No cree un botón de texto visible.
Máster final de CTA
Listos para evolucionar
¿Cuál es su presencia en línea?
El marco visual pertenece al contenedor del botón. El enlace interno permanece transparente y sin doble borde.
Contrato de componentes
Clases: ethet-cta-wrap grabado-cta-wrap; ethet-cta-box grabado-cta-box; ethet-cta-buttons
Estructura : contenedor principal/de grupo + caja principal/de grupo + botones principales
Reutilizar: Modifique los textos, los enlaces y las etiquetas; no cambie la estructura.
Restricciones: No se permiten marcos dobles en .wp-block-button__link.
Cuadrícula de estadísticas
Cifras clave alineado
Cuadrícula digital con mapas de altura uniformes y alineación de la parte inferior de la cuadrícula.
20+
años de experiencia
100+
sitios web creados
53
Reseña de 5 estrellas en Google
16 años
duración máxima para el cliente
Contrato de componentes
Clases: cuadrícula de estadísticas eteth; tarjeta-ethet-stat; número-stat-ethet; etiqueta-ethet-stat
Estructura : cuadrícula principal/de grupo + tarjetas principales/de grupo + párrafos
Reutilizar: Cambia únicamente los números y las etiquetas.
Restricciones: align-items:end, not stretch; no clases etcha-stat.
Cuadrícula de cartas 3
Tarjetas de servicio maestros
Versión oficial obtenida de creation-site-web-test: estructura de tres columnas, iconos de colores, insignias, listas y acciones.
Contrato de componentes
Clases: columnas de tarjetas ethet diseño ethet tarjetas de servicio mcs-master; columna de tarjeta ethet; tarjeta etch tarjeta etch-sol tarjeta ethet; color del icono de la tarjeta ethet: azul/verde azulado/morado
Estructura : core/columns + core/column + core/group card + core/html icon + paragraph badge + heading + paragraph + list + buttons
Reutilizar: Reutiliza esta misma estructura de creation-site-web-test. Modifica los textos, enlaces y listas solo si la página de negocio lo requiere.
Restricciones: No reemplace con mcs_card_grid genérico; no estandarice los iconos; no elimine insignias, listas ni acciones.
Cuadrícula de tarjetas 4 — por validar
Cuatro tarjetas de servicio para estabilizar
Estado no validado: esta sección prueba la altura común, la alineación interna y la estabilidad con textos de diferentes longitudes.
Servicio de reparación del hogar
50 €/30 min, desplazamiento incluido.
Teleasistencia
A partir de 10 €/10 min con un texto más largo para probar la estabilidad de la altura.
Capacitación
Windows, software, web
Crédito fiscal
50 % para particulares
Contrato de componentes
Clases: grabados-g4 cuadrícula-mcs-4-pendiente; tarjeta grabados estado de grabados cuadrícula-mcs-4-tarjeta
Estructura : cuadrícula central/de grupo + cuatro tarjetas centrales/de grupo
Reutilizar: Estado pendiente de validación. No reutilizar en una página de negocios hasta que la variante esté bloqueada.
Restricciones: Altura común requerida; no la utilice para estadísticas numéricas: utilice la cuadrícula de estadísticas.
Tarjetas de características
Característica variante validado
Esta sección conserva el mismo componente maestro que la cuadrícula de tarjetas 3. Sirve como referencia de reutilización, no como una variante reconstruida.
Contrato de componentes
Clases: Mismo contrato que Cards Grid 3 Master
Estructura : Referencia única: mcs_service_cards_master de creation-site-web-test / ETCH-S3
Reutilizar: Reutilice la misma fuente única. Si es necesaria una variante, debe documentarse antes de su uso.
Restricciones: Prohibido: mapas antiguos simplificados, iconos genéricos, espaciado aproximado.
Tarjetas de precios
Mapas de precios maestros
Variante de precios web de la página de inicio de TEST.
Tarjetas de pasos — para validar
Una configuración sencilla en WordPress
El componente prueba una lista de pasos de ancho completo: número a la izquierda, título y descripción a la derecha, con lectura estable tanto en ordenadores de escritorio como en dispositivos móviles.
Instala el plugin
Instala el plugin desde WordPress.org o sube el archivo ZIP desde Plugins → Añadir nuevo.
Habilitar las reseñas de Etchenet para Google Business
Una vez activado, el plugin añade su interfaz de configuración a la administración de WordPress.
Configurar la fuente de las reseñas
Proporcione la clave API de Google y el ID del lugar, o utilice únicamente reseñas manuales e importación mediante CSV/Excel.
Mostrar carrusel
Inserta el código corto en una página, artículo o área compatible con códigos cortos.
Contrato de componentes
Clases: lista-de-pasos-de-grabado mcs-step-list-pending; tarjeta-de-paso-de-grabado mcs-step-card-pending; contenido-de-paso-mcs-pending
Estructura : Lista principal/de grupo + tarjeta principal/de grupo + contenido principal/de grupo + encabezado + párrafo, contador CSS nativo
Reutilizar: Validar antes de reutilizar en páginas de negocios. No reconstruir en una cuadrícula compacta.
Restricciones: Un paso por línea; número a la izquierda; título y descripción agrupados a la derecha; sin márgenes artificiales.