107 módulos. Todos gratis.
Cada módulo del selector, agrupado como lo agrupa el editor, con lo que hace cada uno. Abre Agregar módulo en el editor y busca por nombre o por lo que necesitas.
// 01 — 8 módulos
Estructura
El armazón de la página: contenedores, menús, el logo y la navegación.
Contenedor
Caja que contiene otros módulos y los ordena en fila o columna.
Carrusel de contenido
Convierte los módulos que metas dentro en diapositivas: testimonios, tarjetas, planes, fotos con texto. Con flechas, puntos y cambio automático.
Ancla
Un punto de destino invisible al que se salta con «#nombre» desde un botón o un menú, con desplazamiento suave y hueco para la cabecera fija.
Navegación de puntos
Puntos fijos al costado de la página que saltan a cada sección y marcan en cuál se está. Para páginas largas de una sola pieza.
Logo
Logo o nombre de la tienda, con enlace al inicio.
Menú
Enlaces de navegación; en móvil se pliega tras una hamburguesa.
Menú nativo
Un menú construido en la pantalla Menús, con sub-menús anidados.
Mega menú
Menú de cabecera cuyos ítems abren un panel ancho con varias columnas de enlaces, títulos y una foto de promoción. Para tiendas con muchas categorías.
// 02 — 18 módulos
Básicos
Títulos, texto, botones y las piezas pequeñas que usa cualquier página.
Aviso
Mensaje destacado con icono y color según su tono.
Etiqueta
Etiqueta corta para destacar algo (Nuevo, Oferta…).
Botón
Llamada a la acción con icono, tamaño y variantes.
Botón doble
Dos botones juntos con un separador («o») en medio: una acción principal y otra secundaria, siempre alineadas.
Separador
Línea divisoria con grosor, estilo, ancho e icono opcional.
Icono
Un icono suelto del set, con tamaño, forma de fondo (círculo, cuadrado, contorno), alineación y enlace opcional.
Título
Encabezado editable, de h1 a h6, con enlace opcional.
Cita
Frase destacada con su autor.
Espacio
Aire entre módulos, con alto ajustable por dispositivo.
Texto
Párrafo con negritas, enlaces y listas.
Texto en curva
Una frase que sigue una curva: arco, ola, círculo o diagonal. Para sellos, insignias y titulares con carácter.
Texto con interferencia
Un titular que parpadea como una señal de vídeo averiada, en dos colores.
Letras que se barajan
Un titular cuyas letras se barajan y se colocan en su sitio al aparecer o al pasar el ratón.
Texto con degradado animado
Un titular relleno con un degradado de hasta tres colores que se desliza despacio por las letras.
Texto relleno de imagen
Letras grandes y gruesas rellenas con una foto, que puede desplazarse despacio por dentro.
Texto revelado por una franja
Un titular que descubre una franja de color al entrar en pantalla.
Forma
Una forma decorativa (círculo, mancha, puntos, onda, garabato…) para poner detrás de una foto o en la esquina de una sección.
Copyright
La línea del pie con el © y el año, que se actualiza solo cada 1 de enero, y los enlaces legales al lado. Escribe {año} donde vaya el año.
// 03 — 26 módulos
Contenido
Formas de presentar información: listas, tablas, contadores, líneas de tiempo, entradas.
Barras de progreso
Barras con porcentaje que se llenan al verse.
Horario de atención
Los días y horas en que atiende el negocio, con el día de hoy resaltado y «Cerrado» marcado distinto. Para la página de contacto y el pie.
Gráfico
Gráfico de barras, líneas, área, torta, dona o radar hecho con los números que escribes: ventas por mes, reparto de un presupuesto, comparación de dos años.
Tabla comparativa
Compara planes o productos en columnas, con palomitas y cruces por fila y una columna recomendada. Escribe «si» o «no» y salen los iconos.
Calendario de eventos
Los próximos eventos de la tienda —lanzamientos, talleres, ferias— con fecha, hora y lugar, agrupados por mes y con los pasados atenuados.
Reloj mundial
La hora actual en varias ciudades, cada una con su zona horaria, actualizada sola. Para tiendas que atienden desde otro huso o venden a varios países.
Círculo de progreso
Porcentaje dibujado en un círculo.
Beneficios
Grilla de beneficios con icono, título y texto.
Tarjeta que gira
Tarjeta con frente y reverso: gira al pasar el mouse.
Beneficio
Icono (o imagen) con título y descripción, ideal para beneficios.
Lista con iconos
Lista de puntos con un icono en cada línea.
Imagen y texto
Imagen a un lado y texto al otro, con botón opcional.
Contador
Cifra destacada que sube hasta su valor al verse.
Persona
Foto, nombre, cargo y redes de alguien del equipo.
Lista de entradas
Lista entradas, páginas o cualquier tipo de contenido. Diseñas UNA ficha con los módulos que quieras y el sitio la repite por cada una, rellenando el título, la fecha, la imagen o cualquier campo personalizado.
WordPress shortcode
Mete cualquier shortcode de WordPress en el diseño: un carrito de WooCommerce, un formulario de reservas, un deslizador de otro plugin. Se ejecuta al servir la página, así que lo que enseña está siempre al día.
Pieza de contenido
Una pieza del blog o de la entrada que solo puede dibujar el sitio: los comentarios, los enlaces a la anterior y la siguiente, las categorías, las páginas de un listado. La dibuja el sitio al servir la página, así que siempre es la que toca. Para el título, la fecha o el contenido usa un texto normal con {{post.title}} dentro.
Carta de precios
Lista de servicios o platos con su precio a la derecha, unidos por una línea de puntos: la carta de un restaurante, de una peluquería o de un taller.
Estrellas
Valoración en estrellas con texto al lado.
Pasos
Los pasos de un proceso en horizontal, numerados y unidos por flechas: cómo comprar, cómo funciona un servicio, qué pasa después de pagar.
Tabla
Tabla de datos (tallas, comparativas, horarios).
Índice de la página
Lista automática de los títulos de la página, con enlaces.
Testimonio
La opinión de una clienta, con foto y estrellas.
Testimonios
Opiniones de clientes con estrellas, autor y foto.
Línea de tiempo
Hitos en orden, con fecha, título y descripción.
Texto que se escribe
Titular con palabras que se escriben y cambian solas.
// 04 — 24 módulos
Medios
Imágenes, galerías, vídeo, audio, mapas y fotos interactivas.
Antes y después
Dos fotos comparadas con una manilla que se arrastra.
Audio
Reproductor de audio con los controles del navegador.
Galería
Varias fotos en grilla, con ampliación al hacer clic.
Imagen
Foto con proporción, pie, enlace y efectos al pasar el mouse.
Acordeón de imágenes
Paneles de foto uno al lado del otro que se ensanchan al pasar el ratón y muestran su título y su texto. Para categorías o colecciones destacadas.
Imagen que se desplaza
Una imagen alta (la captura de una web, un cartel) dentro de un marco que se recorre sola al pasar el ratón. Para portafolios y demos.
Lupa de imagen
Una foto con lupa: al pasar el ratón se ve la zona ampliada dentro de un círculo. Para telas, joyas y cualquier detalle que valga la pena mirar de cerca.
Imagen revelada por una franja
Una foto que descubre una franja de color al entrar en pantalla.
Imagen que se inclina
Una foto que se inclina en 3D siguiendo el ratón, con brillo y título opcionales.
Imagen con forma de mancha
Una foto recortada en forma de mancha orgánica que puede ir cambiando despacio, con otra mancha de color detrás.
Imágenes flotantes
Varias imágenes colocadas libremente en un lienzo, cada una flotando arriba y abajo a su ritmo.
Imagen al azar
Muestra en cada visita una imagen distinta de una lista, elegida al azar.
Foto al pasar el ratón
Una lista de enlaces grandes; al pasar el ratón por una fila aparece su foto flotando junto al puntero.
Trazado animado
Un icono o un trazado SVG que se dibuja solo, línea a línea, al entrar en pantalla o al pasar el ratón. Para logos de línea, firmas y adornos.
Foto con puntos
Marca zonas de una foto con globos de información y enlaces.
Banner
Foto con texto encima en cualquiera de las 9 posiciones.
Animación Lottie
Una animación vectorial Lottie (archivo .json de After Effects o de LottieFiles): ligera, nítida a cualquier tamaño, en bucle o al pasar el ratón.
Mapa
Mapa de Google Maps u OpenStreetMap: basta con la dirección.
Carrusel
Diapositivas con foto, texto y botón, con flechas y puntos.
Vídeo
Video de YouTube/Vimeo o archivo propio, con proporción a elección.
Lista de vídeos
Un vídeo grande y las miniaturas de los demás al lado o debajo; al tocar una, cambia el grande. Para tutoriales, colecciones y series.
Vídeo pegajoso
Un vídeo que, al seguir bajando por la página, se encoge a una esquina y sigue reproduciéndose ahí. Para demos y presentaciones largas.
Visor 360°
Un producto que se gira arrastrando, a partir de una secuencia de fotos tomadas alrededor (24 o 36 suelen bastar). Puede girar solo hasta que alguien lo toca.
Visor de PDF
Un PDF (catálogo, carta, ficha técnica) incrustado en la página, con alto a elegir y botón de descarga.
// 05 — 9 módulos
Interactivos
Pestañas, acordeones, conmutadores y paneles que abre el visitante.
Acordeón / FAQ
Preguntas y respuestas que se abren al hacer clic.
Volver arriba
Botón para volver al inicio de la página.
Alternador de contenido
Un interruptor con dos opciones (mensual/anual, particular/empresa) que cambia entre los dos bloques que metas dentro. El primero es la opción A; el segundo, la B.
Círculo interactivo
Una rueda de iconos alrededor de un centro que muestra el título y el texto del punto que se toca. Para valores, servicios o etapas.
Progreso de lectura
Una barra fina fija en el borde de la pantalla que se llena mientras el visitante baja por la página. Para páginas largas y artículos.
Abrir barra lateral
Botón que abre la barra lateral del sitio (izquierda o derecha). Funciona cuando esa barra está creada y publicada.
Panel lateral
Un botón que abre un panel deslizante (izquierda, derecha o abajo) con los módulos que metas dentro: un menú extra, un formulario, filtros, un carrito de ideas.
Pestañas
Contenido en pestañas, sin recargar la página.
Plegable
Bloque que se abre y cierra al hacer clic.
// 06 — 12 módulos
Marketing
Portadas, llamadas a la acción, formularios, popups y precios.
Ventana emergente
Popup con cupón o formulario: al entrar, al bajar o al salir.
Botón de WhatsApp
Botón flotante con el mensaje ya escrito y horario de atención.
Barra de anuncio
Franja de aviso con enlace, icono y opción de cerrar.
Verificación de edad
Una cortina que pregunta si el visitante es mayor de edad antes de dejarle ver la tienda, y recuerda su respuesta. Obligatoria para alcohol y tabaco.
Cuenta regresiva
Reloj que cuenta hasta una fecha (ofertas, lanzamientos).
Llamada a la acción
Caja destacada con título, texto y botón.
Portada (hero)
Banda de bienvenida con título, bajada, botones y foto de fondo.
Tira de logos
Logos en fila, con desplazamiento continuo opcional.
Cinta de texto
Una cinta de frases que se desplaza sin parar, como un teletipo: avisos de envío, novedades, promociones. Cada frase puede enlazar.
Formulario de contacto
Formulario configurable que llega por correo, con anti-spam.
Boletín
Bloque para captar correos, con título, campo y botón.
Tabla de precios
Planes con precio, beneficios y botón, con uno destacado.
// 07 — 6 módulos
Tienda
Piezas para WooCommerce y para encontrar cosas en el sitio.
Mini cart
Lo que hay en el carrito, sin salir de la página: cada producto con su cantidad, lo que cuesta cada línea, el total, y botones para añadir, quitar o cambiar la cantidad. Se actualiza solo cuando se añade algo en cualquier parte de la página.
Cart rows
Diseña UNA fila del carrito con los módulos que quieras y el sitio la repite por cada producto. Escribe {{item.name}}, {{item.qty}}, {{item.price}} o {{item.total}} dentro, y los botones para cambiar la cantidad funcionan solos.
Shop piece
Una pieza de WooCommerce dentro de tu diseño. El pago se separa en facturación, envío, resumen, formas de pago y cupón, así que puedes colocarlo como quieras en vez de tomar el formulario tal como viene. El sitio dibuja cada pieza al servir la página, así que siempre está bien.
Migas de pan
Ruta de navegación (Inicio › Categoría › Producto).
Buscador
Campo de búsqueda que lleva a los resultados de la tienda.
Garantías
Fila de garantías (envío, pago seguro, devoluciones).
// 09 — 2 módulos
Avanzado
Tu propio código y HTML.
Código
Bloque de código con formato monoespaciado (se muestra, no se ejecuta).
HTML
Paste your own HTML (widgets, embeds, external forms).
Ahora, a construir
La guía explica cómo funcionan el editor, los ajustes y las plantillas.