¿Cómo utilizar Newsletters en el Editor de bloques de Waclis?
La sección Newsletters del Editor de bloques de Waclis permite crear áreas destinadas a invitar a los visitantes de tu Página web a suscribirse para recibir novedades, contenidos, promociones u otras comunicaciones.
Dentro del Editor de bloques encontrarás diferentes diseños en:
Secciones → Newsletters
Según la composición elegida, puedes personalizar elementos como:
título;
descripción;
campo de correo electrónico;
botón;
imágenes;
fondos;
colores;
textos informativos;
condiciones o referencias a políticas;
comportamiento responsive.
Antes de comenzar: una Newsletter visual no garantiza una suscripción real
Esta es la aclaración más importante de este tutorial.
Puedes crear una sección como:
RECIBE NUESTRAS NOVEDADES
Ingresa tu correo electrónico.
[ correo@ejemplo.com ] [ SUSCRIBIRME ]
y hacer que visualmente se vea perfecta.
Sin embargo, eso no significa automáticamente que al presionar:
SUSCRIBIRME
el correo:
se guarde;
se agregue a una lista;
llegue a una herramienta de email marketing;
genere una confirmación;
quede disponible para futuras campañas.
Por eso debes diferenciar:
DISEÑO DE LA NEWSLETTER
≠
MECANISMO REAL DE SUSCRIPCIÓN
¿Qué debe ocurrir realmente?
Conceptualmente:
Visitante ingresa su email
↓
presiona Suscribirme
↓
el sistema procesa el dato
↓
el correo se registra en el destino correspondiente
↓
el visitante recibe una confirmación visual adecuada
Antes de publicar una Newsletter, comprueba este flujo completo.
¿Qué es una Newsletter?
En este contexto, una Newsletter es una sección destinada a obtener una suscripción voluntaria para futuras comunicaciones.
Por ejemplo:
RECIBE NUESTRAS NOVEDADES
Entérate de nuevos productos, contenidos y lanzamientos.
Correo electrónico
[________________________]
[ SUSCRIBIRME ]
¿Para qué puedes utilizarla?
Puede utilizarse para invitar al visitante a recibir:
novedades;
lanzamientos;
nuevos productos;
contenidos;
artículos;
promociones;
eventos;
noticias de la empresa;
información relevante para clientes;
otras comunicaciones relacionadas con la propuesta.
La suscripción necesita una razón
Evita limitar la sección a:
Newsletter
[ Email ]
[ Enviar ]
El visitante debería comprender:
¿Qué voy a recibir?
¿Por qué podría interesarme?
Ejemplo
RECIBE NUESTRAS NOVEDADES
Conoce nuevos productos, lanzamientos y contenidos directamente en tu correo.
[ TU CORREO ELECTRÓNICO ]
[ SUSCRIBIRME ]
Otro ejemplo
MANTENTE AL DÍA
Recibe novedades y contenidos relacionados con nuestros servicios.
[ correo@ejemplo.com ]
[ QUIERO RECIBIR NOVEDADES ]
Newsletter vs Formulario de contacto
Aunque ambos pueden utilizar Input y Button, tienen objetivos diferentes.
Formulario de contacto
Busca obtener información para responder una consulta.
Por ejemplo:
Nombre
Mensaje
[ ENVIAR CONSULTA ]
Newsletter
Busca registrar una suscripción.
Por ejemplo:
[ SUSCRIBIRME ]
No conviertas una Newsletter en un formulario comercial completo
Si quieres enviar novedades, normalmente no necesitas pedir:
Nombre
Apellido
Empresa
Cargo
Teléfono
Ciudad
Dirección
solo para permitir una suscripción.
Menos campos suele ser mejor
En muchos casos puede ser suficiente:
Correo electrónico
y, opcionalmente:
Nombre
si existe una necesidad real.
Pregunta por cada campo
¿Necesitamos este dato para enviar la Newsletter?
Si la respuesta es no, considera eliminarlo.
Newsletter vs CTA
Un CTA puede decir:
RECIBE NUESTRAS NOVEDADES
[ SUSCRIBIRME ]
y dirigir a otra página.
Una Newsletter suele incluir directamente el mecanismo de suscripción.
Newsletter vs Redes sociales
Ambas pueden utilizarse para mantener contacto con la audiencia.
Pero:
Newsletter
→ comunicación mediante correo u otro sistema de suscripción.
Redes sociales
→ seguimiento en plataformas sociales.
Puedes utilizar ambas, pero no necesitas mezclarlas dentro de una única sección.
¿Cómo agregar una sección Newsletter?
Ingresa al Editor de bloques de la página o área editable donde quieras incorporarla.
Después abre:
Secciones
y selecciona:
Newsletters
Paso 1: elige una composición
Waclis mostrará los diseños disponibles.
Según la alternativa puedes encontrar composiciones como:
Título
Descripción
Input
Button
o:
Imagen
+
Título
+
Descripción
+
Formulario
o:
Fondo
+
Contenido centrado
+
Campo de suscripción
La estructura exacta dependerá del diseño elegido.
Paso 2: agrega la sección
Selecciona la composición deseada.
Después podrás editar cada elemento individualmente.
Paso 3: utiliza Navigator
Una Newsletter puede tener conceptualmente una estructura como:
Section
└── Container
├── Heading
├── Paragraph
└── Form
├── Input
└── Html Button
O:
Section
└── Grid Row
├── Grid Column
│ └── Image
│
└── Grid Column
├── Heading
├── Paragraph
└── Form
├── Input
└── Html Button
Utiliza Navigator para identificar correctamente:
Section;
Form;
Input;
Button;
Image;
textos.
Paso 4: define qué recibirá el suscriptor
Antes de escribir el título decide:
¿Qué vamos a enviar?
Por ejemplo:
Novedades de productos
Nuevos artículos
Promociones
Noticias de la empresa
Información especializada
Sé claro
Por ejemplo:
RECIBE NOVEDADES DE PRODUCTOS
Sé el primero en conocer nuevos lanzamientos y colecciones.
comunica algo concreto.
Evita
Suscríbete a nuestra Newsletter
como único mensaje si el visitante no sabe qué recibirá.
Puedes utilizar Newsletter como nombre, pero agrega contexto
Por ejemplo:
NEWSLETTER
Recibe contenidos, novedades y lanzamientos directamente en tu correo.
Paso 5: redacta el Heading
Ejemplos:
Recibe nuestras novedades
Mantente al día
Conoce primero nuestras novedades
Nuevos contenidos en tu correo
Suscríbete y mantente informado
Mantén el Heading breve
Evita:
Ingresa tu dirección de correo electrónico para comenzar a recibir periódicamente todas nuestras novedades
Puede convertirse en:
Recibe nuestras novedades
y desarrollar el resto debajo.
Paso 6: explica qué recibirá
Por ejemplo:
Recibe nuevos productos, promociones y contenidos seleccionados directamente en tu correo.
Otro ejemplo
Te enviaremos novedades relacionadas con nuestros servicios y contenidos.
No prometas una frecuencia que no puedas mantener
Por ejemplo:
Todos los lunes a las 9:00
si no existe realmente ese calendario editorial.
Si existe una frecuencia real
puedes comunicarla.
Por ejemplo:
Recibe nuestro resumen mensual.
cuando sea correcto.
No prometas “sin spam” como sustituto de explicar el contenido
Es más útil indicar:
qué recibirán;
con qué finalidad.
Paso 7: configura el Input
El campo principal suele ser:
Correo electrónico
Utiliza una denominación clara.
Label visible
Puede utilizarse:
Correo electrónico
[_____________________]
Placeholder
Puede complementar:
tu@email.com
No utilices únicamente Placeholder si eso hace que el campo pierda contexto al comenzar a escribir
Una etiqueta visible puede mejorar la claridad.
Si el diseño es muy compacto
puede utilizar:
[ Tu correo electrónico ] [ SUSCRIBIRME ]
pero comprueba que el propósito siga siendo evidente.
No solicites dos veces el correo
Evita estructuras como:
Confirmar email
si no existe una necesidad específica.
Para una Newsletter simple suele generar fricción innecesaria.
Nombre opcional
Si realmente necesitas personalizar las comunicaciones, puedes solicitar:
Nombre
además del correo.
Ejemplo
Nombre
[____________]
[____________]
[ SUSCRIBIRME ]
Pero considera el costo
Cada dato adicional hace más largo el proceso.
Si no utilizarás realmente el nombre, puede ser mejor no solicitarlo.
Paso 8: configura el Button
Utiliza una acción relacionada con la suscripción.
Por ejemplo:
Suscribirme
Quiero recibir novedades
Recibir novedades
Unirme
cuando sea coherente con el mensaje.
Evita
Enviar
si puedes utilizar:
Suscribirme
porque comunica mejor qué está ocurriendo.
No utilices “Comprar” o “Contactar”
si el objetivo real es registrarse para comunicaciones.
El Button debe corresponder al flujo
Por ejemplo:
RECIBE NUEVOS ARTÍCULOS
[ Email ] [ SUSCRIBIRME ]
es coherente.
Text y funcionamiento son conceptos diferentes
En Html Button puedes modificar:
Text
pero cambiar:
Enviar
por:
Suscribirme
no define por sí solo cómo se registra ese email.
Paso 9: comprueba la funcionalidad real
Una Newsletter debe probarse realmente.
Realiza una suscripción de prueba
Por ejemplo:
correo-prueba@ejemplo.com
y completa el proceso.
Después verifica
¿El correo se registró?
¿Dónde se registró?
¿La herramienta correspondiente lo recibió?
¿Apareció un mensaje de éxito?
¿El visitante puede saber que la suscripción se completó?
No asumas que la suscripción llega a tu correo
Una Newsletter normalmente necesita registrar al suscriptor en el destino preparado para futuras comunicaciones.
Comprueba cuál es el comportamiento real de la implementación que estás utilizando.
No asumas que se guarda automáticamente en Waclis
La sección visual no garantiza un destino específico.
Si no sabes dónde se registra
todavía no consideres finalizada la implementación.
Form visual creado desde Componentes
También puedes construir:
Form
├── Input
└── Html Button
utilizando componentes.
Pero nuevamente:
Formulario visual
≠
Lista de suscriptores configurada automáticamente
Necesitas un mecanismo real
El formulario debe estar vinculado al proceso que corresponda para registrar la suscripción.
No agregues JavaScript al azar
Si la Newsletter visual no registra emails, no pegues código externo sin comprender:
qué herramienta se utiliza;
dónde deben guardarse;
qué integración existe.
Si la Newsletter ya funciona
Conserva su estructura funcional.
Puedes modificar:
Heading;
Paragraph;
colores;
fondo;
Padding;
Border;
Typography.
Pero evita eliminar arbitrariamente:
Classes;
atributos;
identificadores;
Form;
elementos relacionados con el flujo.
Paso 10: mensaje de confirmación
Después de la suscripción, el visitante necesita comprender si el proceso terminó correctamente.
Conceptualmente puede ser:
¡Gracias por suscribirte!
o un mensaje equivalente definido por el mecanismo real.
No agregues un mensaje de éxito siempre visible
Por ejemplo:
¡Suscripción realizada correctamente!
debajo del Form antes de que el usuario se haya suscrito sería incorrecto.
El mensaje debe aparecer como consecuencia real del proceso.
También puede existir un error
Por ejemplo:
Ingresa un correo electrónico válido.
si la implementación contiene esa validación.
No inventes validaciones mediante texto estático
Si escribes:
✓ Email válido
sin que exista una comprobación real, puede generar una experiencia incorrecta.
Prueba un email incorrecto
Cuando exista validación, prueba algo como:
correo-invalido
y comprueba qué ocurre.
Paso 11: consentimiento y comunicaciones
Una suscripción implica que el visitante está solicitando recibir futuras comunicaciones.
Dependiendo:
del país;
actividad;
tipo de comunicaciones;
información solicitada;
pueden existir requisitos relacionados con:
consentimiento;
política de privacidad;
finalidad de los datos;
posibilidad de dejar de recibir comunicaciones.
La forma concreta debe definirse según el contexto aplicable a cada empresa.
Puedes incluir información clara
Por ejemplo:
Al suscribirte recibirás novedades relacionadas con nuestros productos y contenidos.
Si corresponde, puedes incorporar un Link
Por ejemplo:
Consulta nuestra Política de privacidad.
No utilices textos vagos
Por ejemplo:
Acepto los términos.
si no queda claro:
cuáles;
dónde consultarlos;
qué implican.
Newsletter y consulta comercial son finalidades diferentes
No confundas:
Enviar consulta
con:
Aceptar recibir promociones
Suscripción opcional dentro de un Formulario de contacto
Puede existir:
☐ Quiero recibir novedades
cuando corresponda.
Eso es diferente a enviar la consulta principal.
No conviertas automáticamente cada contacto en suscriptor
El flujo de la Newsletter debería representar una acción clara de suscripción.
Frecuencia de comunicaciones
Si conoces y mantienes una frecuencia definida, puedes explicarla.
Por ejemplo:
Recibe nuestro resumen mensual.
Si la frecuencia es variable
puede ser mejor:
Recibe nuestras principales novedades.
sin prometer una periodicidad específica.
Propuesta de valor de la Newsletter
La pregunta más importante para el visitante es:
¿Por qué debería darte mi correo?
Ejemplo débil
Suscríbete.
Ejemplo más útil
Recibe nuevos lanzamientos, contenidos y novedades directamente en tu correo.
Newsletter para una Página web de productos
Puede utilizar:
CONOCE PRIMERO NUESTRAS NOVEDADES
Recibe información sobre nuevos productos y colecciones.
[ EMAIL ] [ SUSCRIBIRME ]
Newsletter para una empresa de servicios
RECIBE NUEVOS CONTENIDOS
Compartimos novedades, guías e información relacionada con nuestros servicios.
[ EMAIL ] [ SUSCRIBIRME ]
Newsletter para Blog
NUEVOS ARTÍCULOS EN TU CORREO
Recibe nuestros últimos contenidos.
[ EMAIL ]
[ SUSCRIBIRME ]
No necesitas ofrecer descuentos si no existen
Evita:
Suscríbete y recibe un 10 % de descuento
si esa promoción no está realmente configurada.
Si existe un beneficio de suscripción
puedes comunicarlo claramente.
Por ejemplo:
Suscríbete y recibe [beneficio real].
y mantener las condiciones correspondientes.
Promociones de suscripción temporales
Si utilizas:
Suscríbete antes del 31 de agosto y...
deberás actualizarlo o eliminarlo cuando termine.
Mantén este contenido actualizado
Especialmente:
descuentos;
regalos;
promociones;
condiciones.
Posición de la Newsletter
Puede colocarse en diferentes áreas según la Página web.
Cerca del final de Home
Por ejemplo:
Productos
↓
Testimonios
↓
Newsletter
↓
área inferior
Puede resultar una ubicación natural.
Después de Blog
ARTÍCULOS
↓
¿QUIERES RECIBIR NUEVOS CONTENIDOS?
Newsletter
Después de contenido útil
El visitante acaba de comprobar el tipo de información que publica la empresa.
Puede tener más contexto para decidir suscribirse.
Newsletter al comienzo
También puede utilizarse, pero evalúa si es la acción más importante en ese momento.
No interrumpas la presentación principal solamente para pedir un correo demasiado pronto.
Newsletter en landing page
Puede utilizarse si la captación de suscriptores es el objetivo.
Pero si la landing está orientada a:
Solicitar presupuesto
una gran Newsletter puede competir con el CTA principal.
Prioriza el objetivo de la página
Newsletter vs compra
En una Página web comercial, probablemente:
Comprar
sea una acción más importante que:
Suscribirse
en determinadas etapas.
La Newsletter puede ubicarse más abajo o con menor protagonismo.
Diseño compacto
Puede funcionar como:
RECIBE NOVEDADES
[ Tu correo ] [ SUSCRIBIRME ]
Diseño amplio
██████████████████████████████████████
RECIBE NUESTRAS NOVEDADES
Nuevos productos y contenidos en tu correo.
[ Correo electrónico ]
[ SUSCRIBIRME ]
██████████████████████████████████████
No existe un único formato correcto
El tamaño debería corresponder a la importancia de la acción.
Composición horizontal
Desktop:
RECIBE NOVEDADES [ Email ] [ SUSCRIBIRME ]
Mobile
Puede transformarse en:
RECIBE NOVEDADES
[ Email ]
[ SUSCRIBIRME ]
No intentes conservar todo en una línea en celular
Puede producir:
Input demasiado estrecho;
Button cortado;
texto ilegible.
Utiliza Grid cuando corresponda
Una composición puede tener:
Grid Row
├── Grid Column
│ └── contenido
└── Grid Column
└── Form
Adapta las columnas responsive.
Form horizontal
Conceptualmente:
[ Input ][ Button ]
Mobile
Puede convertirse en:
[ Input ]
[ Button ]
si el espacio lo requiere.
No utilices Margin grande para colocar el Button a la derecha
Utiliza la estructura del Form o Grid.
Input ancho
El email puede contener direcciones largas.
Dale suficiente espacio.
Ejemplo
nombre.apellido@empresa-ejemplo.com
necesita más ancho que:
a@b.com
No diseñes únicamente utilizando una dirección corta de prueba
Button
Puede tener:
Suscribirme
y necesitar un ancho razonable.
En celular
un Button con gran parte del ancho puede ser cómodo.
No reduzcas su Font size excesivamente para mantener Input + Button en una sola línea
Apila si es necesario.
Newsletter con imagen
Puede utilizar una composición:
[ IMAGEN ] [ CONTENIDO + FORM ]
¿La imagen aporta valor?
Puede utilizarse para mostrar:
revistas;
contenidos;
productos;
email conceptual;
fotografía relacionada.
Pero no es obligatoria.
Una Newsletter puede funcionar perfectamente sin imagen
Esto también ayuda a mantener:
simplicidad;
velocidad;
foco.
Newsletter con Background Image
Si colocas texto y Form sobre una imagen:
revisa:
contraste;
Overlay;
Inputs;
Button.
Input sobre fotografía
Un campo transparente puede perderse.
Puede ser mejor utilizar:
fondo sólido;
borde visible.
No compruebes solamente el texto
Debes comprobar también el área editable.
Ejemplo
Fondo oscuro:
Input blanco
+
texto oscuro
puede funcionar bien.
Fondo claro
puede necesitar borde visible.
Background Color
Una Newsletter funciona muy bien con un simple fondo de color.
Por ejemplo:
██████████████████████████████
RECIBE NUESTRAS NOVEDADES
[ Email ]
[ Suscribirme ]
██████████████████████████████
No necesitas una gran imagen para que destaque
Puedes utilizar:
color de marca;
Typography;
Padding.
Padding
Necesita suficiente espacio para distinguirse.
Evita una sección demasiado comprimida
Novedades [email][enviar]
si eso dificulta la lectura.
Tampoco necesita ocupar una pantalla completa
si solo contiene:
título;
email;
Button.
Equilibra la altura
Border radius
Si la Newsletter se presenta como Card:
╭────────────────────────────╮
│ │
│ RECIBE NOVEDADES │
│ [ Email ] [ Suscribirme ] │
│ │
╰────────────────────────────╯
puedes utilizar Border radius coherente con el resto del sitio.
Classes compartidas
Puedes utilizar conceptualmente:
newsletter-section
newsletter-content
newsletter-title
newsletter-text
newsletter-form
newsletter-input
newsletter-button
Linked styles
Es normal que Input y otros elementos compartan Classes con otros componentes de la misma composición.
No es necesario crear un ID para evitarlo si quieres que conserven el mismo diseño.
Si quieres una excepción
Utiliza:
Class adicional;
ID único;
cuando corresponda.
No elimines Classes funcionales
Si la Newsletter ya registra correctamente las suscripciones:
conserva la estructura que permite ese funcionamiento.
Clonar la Newsletter
Si necesitas una composición similar en otra zona:
selecciona la unidad completa;
utiliza Clonar elemento;
reemplaza:
Heading;
descripción;
imagen;
textos;
ID si existe.
Pero atención
Clonar toda la sección no significa que quieras registrar los datos en un destino diferente.
La copia mantendrá la estructura funcional existente salvo que se modifique.
Comprueba siempre el flujo real.
No crees dos formularios distintos sin comprobar dónde registra cada uno
Clonar un Input
Si deseas agregar:
Nombre
además del Email, selecciona la unidad completa correspondiente.
Por ejemplo:
Wrapper
├── Label
└── Input
Después comprueba la funcionalidad
Agregar el Input visualmente no garantiza que:
Nombre
se registre junto con el correo.
El mecanismo de procesamiento debe contemplarlo.
Esta comprobación es obligatoria
Realiza una suscripción de prueba y verifica qué datos llegaron al destino.
Eliminar un campo
Selecciona la unidad completa.
No dejes:
Nombre
sin Input.
Si solo necesitas Email
elimina otros campos que sean innecesarios, siempre comprobando que no formen parte de la lógica funcional requerida.
Recuerda
Waclis no solicita confirmación al eliminar.
Utiliza:
Deshacer
si seleccionaste incorrectamente.
IDs personalizados
Si la Newsletter utiliza IDs personalizados y clonas una estructura:
revisa que no queden duplicados.
Form y atributos
Si una Newsletter funcional ya existe, algunos atributos pueden tener una finalidad concreta.
No renombres arbitrariamente:
Name;
Id;
Classes;
otros atributos;
sin comprender el impacto.
Para cambiar el texto visible
modifica:
Heading;
Paragraph;
Label;
Text del Button.
No necesitas renombrar atributos funcionales para hacer la interfaz más clara.
Diseño de Input
Puedes personalizar:
Width;
Height;
Border;
Border radius;
Background;
Text Color;
Padding.
Ejemplo
[ tu@email.com ]
debería ofrecer suficiente espacio.
No hagas un Input demasiado bajo
Debe ser cómodo de seleccionar y escribir.
Contraste
Comprueba:
Placeholder;
texto ingresado;
borde;
fondo;
Button.
Escribe realmente dentro del campo
Por ejemplo:
usuario@empresa.com
y comprueba que se vea.
No compruebes solamente el Placeholder
Estado de foco
Si personalizas CSS, conserva una señal clara de qué campo está activo.
Button
Debe diferenciarse claramente del Input.
Por ejemplo:
[ Email ] [ SUSCRIBIRME ]
Evita que Input y Button parezcan el mismo control
CSS personalizado
Si necesitas personalización avanzada, utiliza scope.
Por ejemplo:
.newsletter-section .newsletter-input {
width: 100%;
border-radius: 8px;
}
Button
.newsletter-section .newsletter-button {
border-radius: 8px;
}
Responsive
@media (max-width: 768px) {
.newsletter-section .newsletter-form {
display: flex;
flex-direction: column;
}
}
solo si la estructura concreta lo necesita y no puedes resolverla mejor con las herramientas visuales disponibles.
No utilices CSS global
Evita:
input {
height: 50px;
}
Puede afectar:
buscador;
Formulario de contacto;
otros Inputs;
distintas páginas.
Limita el alcance
No utilices JavaScript para cambiar el diseño
Color, tamaño y espacios corresponden principalmente a:
Estilo;
CSS.
JavaScript y suscripción
Si necesitas lógica funcional adicional, no agregues código sin comprender el mecanismo de suscripción existente.
Integraciones externas
Una Newsletter puede necesitar comunicarse con una herramienta o proceso específico.
La sección visual por sí sola no define esa integración.
Si utilizas una herramienta externa
comprueba:
que la conexión sea la correcta;
que el contacto se registre;
qué datos se envían;
cómo se procesa la suscripción.
No publiques credenciales dentro del HTML
Nunca coloques:
contraseñas;
tokens privados;
claves secretas;
en un bloque visible o código del frontend esperando integrar un servicio.
Si una integración requiere credenciales
debe implementarse mediante el mecanismo seguro correspondiente, no exponiéndolas en el bloque.
Newsletter y privacidad
Recopila únicamente información necesaria para el objetivo de la suscripción.
Para enviar novedades normalmente no necesitas datos excesivos.
No solicites
documento;
dirección completa;
información privada innecesaria;
solo para enviar una Newsletter.
Newsletter responsive
Comprueba:
Heading;
Paragraph;
Input;
Button;
texto legal o informativo.
Desktop
RECIBE NOVEDADES
[ Correo electrónico ][ SUSCRIBIRME ]
Mobile
RECIBE NOVEDADES
[ Correo electrónico ]
[ SUSCRIBIRME ]
Este apilado suele ser más cómodo
especialmente si el Button tiene texto largo.
Texto informativo en móvil
Por ejemplo:
Al suscribirte recibirás novedades relacionadas con...
puede ocupar varias líneas.
Comprueba suficiente Line height.
No reduzcas este texto a un tamaño ilegible
Newsletter con nombre + email
Desktop:
[ Nombre ] [ Email ] [ Suscribirme ]
puede parecer compacto.
Pero en móvil probablemente sea mejor:
[ Nombre ]
[ Email ]
[ Suscribirme ]
No mantengas tres controles comprimidos
Hide based on device screen width
No escondas la Newsletter en móvil solo porque el diseño desktop no se adapta.
Primero intenta reorganizarla responsive.
Versión separada mobile
Puede justificarse en casos específicos, pero duplica:
textos;
Forms;
IDs;
mantenimiento.
Si existen dos Forms
comprueba ambos mecanismos de suscripción.
No basta con probar solo desktop.
Más de una Newsletter en la página
Puede existir, pero evalúa si tiene sentido.
Por ejemplo:
Newsletter al inicio
+
Newsletter al final
puede resultar repetitivo.
En páginas largas
una segunda invitación puede tener sentido, pero mantén:
mensaje coherente;
misma finalidad.
No presentes dos promesas diferentes si ambos Inputs registran en la misma lista
Por ejemplo:
Arriba:
Recibe promociones
Abajo:
Recibe únicamente contenidos educativos
si en realidad ambos llevan a las mismas comunicaciones.
La promesa debe corresponder al uso real de la suscripción.
Mantén coherencia entre lo prometido y lo enviado
Este punto es esencial.
Si el visitante se suscribe para:
nuevos artículos
y después recibe principalmente:
promociones comerciales
la expectativa puede no coincidir.
Explica correctamente la finalidad
Newsletter y frecuencia de actualización
La sección también necesita mantenimiento.
Revisa periódicamente:
propuesta;
beneficio;
promociones;
política enlazada;
integración;
funcionamiento.
Un Form que funcionaba puede dejar de funcionar
por cambios en:
integraciones;
servicios;
configuración;
estructura.
Por eso es conveniente hacer pruebas periódicas.
Especialmente después de editar
Prueba nuevamente.
¿Qué hacer si presiono Suscribirme y no ocurre nada?
Primero comprueba:
que estés probando mediante Ver página;
estructura del Form;
Button;
atributos existentes;
si la sección tenía funcionalidad anteriormente;
si existe realmente un mecanismo de suscripción.
No intentes resolverlo con CSS
CSS no registra emails.
¿Qué hacer si se muestra el mensaje de éxito pero el correo no aparece en la lista?
El problema pertenece al procesamiento funcional.
Debes verificar el destino real de los datos.
No consideres la prueba aprobada solamente porque aparece un mensaje visual.
¿Qué hacer si el correo se registra pero no aparece confirmación?
La suscripción puede estar funcionando, pero la experiencia del visitante necesita una respuesta visual apropiada.
Revisa el mecanismo que gestiona el estado posterior al envío.
¿Qué hacer si permite enviar un email vacío?
Puede faltar validación.
Comprueba la implementación funcional antes de agregar mensajes visuales manuales.
¿Qué hacer si acepta hola como correo?
Puede necesitar una validación de formato, dependiendo del comportamiento implementado.
No presentes una falsa validación mediante HTML estático.
¿Qué hacer si agregué Nombre pero solo llega Email?
La parte funcional probablemente no contempla ese nuevo campo.
Revisa cómo se procesan los datos.
¿Qué hacer si el Button queda al lado del Input en desktop pero se sale en móvil?
Reorganiza:
Input
↓
Button
en pantallas pequeñas.
¿Qué hacer si el Input es demasiado pequeño?
Revisa:
columna;
Width;
Padding;
Button.
Prioriza espacio suficiente para el email.
¿Qué hacer si el Button tiene demasiado ancho?
Revisa:
Width;
Display;
Grid.
No es necesario que ocupe toda la fila en desktop.
¿Qué hacer si el fondo impide leer el campo?
Utiliza:
Background sólido para el Input;
Border;
contraste;
Overlay.
¿Qué hacer si el Placeholder es casi invisible?
Modifica su tratamiento visual con cuidado o utiliza un Label visible.
¿Qué hacer si cambiar el Input modifica otro formulario?
Comprueba:
Linked styles
y las Classes utilizadas.
Puede que la regla sea demasiado general.
Utiliza una Class de alcance específico
Por ejemplo:
newsletter-input
en lugar de modificar globalmente:
input
¿Qué hacer si al clonar se repite un ID?
Cambia el identificador de la copia.
Los IDs deben ser únicos dentro de la página.
¿Qué hacer si eliminé el Form completo?
Utiliza:
Deshacer
si fue accidental.
¿Qué hacer si eliminé solo el Input y quedó el Button?
Utiliza Navigator para limpiar o reconstruir la unidad correctamente.
¿Qué hacer si la Newsletter queda demasiado alta?
Revisa:
Padding;
imagen;
Heading;
Paragraph;
Min Height.
Una sección de suscripción no necesita necesariamente ocupar una pantalla completa.
¿Qué hacer si queda demasiado pequeña?
Aumenta el espacio necesario para que:
mensaje;
campo;
acción;
sean fáciles de identificar.
Animaciones
Puedes utilizar:
Avanzado → Animate on scroll
sobre la Section completa.
No necesitas animar
Heading;
Input;
Button;
por separado.
Una Newsletter es una interacción funcional.
Mantén la interfaz estable.
Hover
Puede utilizarse sobre:
Button
como respuesta visual.
No agregues Hover sobre el Input como si fuera una Card clicable
El estado de foco es más relevante.
Ejemplo práctico: Newsletter sencilla
Queremos:
RECIBE NUESTRAS NOVEDADES
Conoce nuevos productos y contenidos directamente en tu correo.
Correo electrónico
[________________________]
[ SUSCRIBIRME ]
Paso 1
Abre:
Secciones → Newsletters
Paso 2
Selecciona una composición.
Paso 3
Utiliza Navigator para localizar:
Section
→ Form
→ Input
→ Button
Paso 4
Modifica Heading.
Paso 5
Modifica Paragraph.
Paso 6
Configura el campo de correo.
Paso 7
Modifica el texto del Button:
Suscribirme
Paso 8
Personaliza:
fondo;
Typography;
Input;
Button;
Padding.
Paso 9
Revisa desktop.
Paso 10
Revisa tablet.
Paso 11
Revisa celular.
Comprueba que:
[ Email ]
[ Suscribirme ]
se visualice correctamente si necesita apilarse.
Paso 12
Guarda.
Paso 13
Utiliza:
Ver página
Paso 14
Ingresa un email de prueba.
Paso 15
Presiona:
Suscribirme
Paso 16
Comprueba:
respuesta visual;
registro del contacto;
destino;
datos recibidos.
Solo después de esta prueba debes considerar terminada la Newsletter
Ejemplo práctico: Newsletter compacta
MANTENTE AL DÍA
[ Tu email ] [ SUSCRIBIRME ]
Puede funcionar bien cerca del final de la Página web.
Ejemplo práctico: Newsletter con contenido
NUEVOS CONTENIDOS EN TU CORREO
Compartimos guías, novedades y recursos relacionados con nuestros servicios.
[ Email ]
[ QUIERO RECIBIRLOS ]
Ejemplo práctico: Newsletter de productos
CONOCE PRIMERO LAS NOVEDADES
Recibe información sobre nuevos productos y colecciones.
[ Email ]
[ SUSCRIBIRME ]
Ejemplo práctico: Newsletter con imagen
Desktop:
[ IMAGEN ] [ RECIBE NUESTRAS NOVEDADES ]
[ Texto ]
[ Email ] [ Suscribirme ]
Mobile:
[ IMAGEN ]
RECIBE NUESTRAS NOVEDADES
Texto
[ Email ]
[ Suscribirme ]
¿Qué campos debería tener una Newsletter?
En muchos casos:
es suficiente.
Puede incluir Nombre
si existe una razón real.
Evita agregar datos solo porque el diseño tiene espacio
¿Es recomendable pedir teléfono?
Normalmente no es necesario si el único objetivo es enviar correos.
Si la empresa tiene otro flujo comercial, evalúa si realmente sigue siendo una Newsletter o un formulario de captación comercial diferente.
¿Es recomendable pedir empresa?
Solo si esa información es realmente necesaria para la finalidad de la lista.
¿Es recomendable pedir fecha de nacimiento?
Únicamente si existe una necesidad legítima y coherente con la finalidad de la suscripción.
No recopiles datos por si algún día podrían servir.
Newsletter simple = menor fricción
Conceptualmente:
↓
Suscribirme
Newsletter avanzada
Puede añadir:
preferencias
solo si realmente se utilizarán.
Ejemplo de preferencias
Quiero recibir información sobre:
☐ Productos
☐ Servicios
☐ Contenidos
si el sistema realmente registra y utiliza esas preferencias.
No agregues Checkboxes que luego no tengan ningún efecto
Si el usuario marca:
Solo contenidos
pero recibirá todo de todos modos, la interfaz será engañosa.
La funcionalidad debe corresponder a lo que prometes
IA para redactar una Newsletter
ChatGPT, Claude o Gemini pueden ayudarte.
Por ejemplo:
Necesito una sección Newsletter para una Página web de [sector].
La suscripción permitirá recibir:
[describir contenido real]
Redacta:
- Heading máximo de 7 palabras.
- Descripción máxima de 22 palabras.
- Texto del Button máximo de 4 palabras.
Utiliza español neutro.
No inventes descuentos, regalos ni frecuencias de envío.
IA para revisar la propuesta
Tengo esta Newsletter:
Título:
[texto]
Descripción:
[texto]
Button:
[texto]
El visitante recibirá realmente:
[contenido]
Revisa si la promesa de suscripción coincide con lo que recibirá.
No agregues beneficios nuevos.
IA para reducir campos
Nuestra Newsletter pide:
- Nombre.
- Apellido.
- Empresa.
- Cargo.
- Teléfono.
- Email.
- Ciudad.
El único objetivo es enviar novedades por correo.
Indícame qué campos son probablemente innecesarios para este objetivo y cómo simplificar el formulario.
No escribas código.
IA para estructura responsive
Quiero una Newsletter en Waclis.
Desktop:
- título a la izquierda;
- Form a la derecha;
- Input y Button en la misma fila.
Celular:
- título arriba;
- texto debajo;
- Input ancho completo;
- Button debajo.
Explícame cómo estructurarlo mediante Grid Row y componentes visuales antes de sugerir CSS.
IA para CSS
Estoy personalizando una Newsletter dentro de Waclis.
La Newsletter YA FUNCIONA correctamente y no quiero modificar su lógica de suscripción.
La sección utiliza:
.newsletter-section
El formulario:
.newsletter-form
El Input:
.newsletter-input
El Button:
.newsletter-button
Necesito:
- Input y Button en fila en desktop;
- apilados en celular;
- altura de 48 px;
- Border radius de 8 px;
- separación de 10 px;
- Button cómodo en móvil.
No modifiques HTML.
No cambies atributos del Form.
No agregues JavaScript.
No elimines Classes existentes.
Devuélveme solamente CSS visual limitado a .newsletter-section.
IA para diagnosticar una Newsletter que no funciona
Si tienes la estructura necesaria:
Tengo una Newsletter visual dentro de Waclis.
Actualmente:
- el Input aparece;
- el Button aparece;
- al enviar no veo que el correo se registre.
Voy a proporcionarte únicamente el HTML del Form.
Analiza qué información falta para determinar cómo debería procesarse la suscripción.
No inventes endpoints, APIs ni servicios que no aparezcan en el código.
No agregues credenciales al frontend.
Esta forma de consulta evita que la IA suponga una integración inexistente.
Buenas prácticas para Newsletters
Recomendamos:
explicar qué recibirá el suscriptor;
utilizar una propuesta clara;
solicitar pocos datos;
utilizar Email como campo principal;
agregar Nombre solamente cuando sea útil;
utilizar un Button descriptivo;
diferenciar suscripción de contacto comercial;
informar correctamente la finalidad;
mantener promociones y condiciones actualizadas;
conservar la estructura funcional si ya funciona;
no modificar atributos que no comprendes;
comprobar responsive;
utilizar Navigator;
limitar CSS a la sección;
probar la suscripción realmente;
verificar que el contacto se registre en el destino correcto.
Errores frecuentes
Crear una Newsletter visual y asumir que automáticamente registra emails
Debe existir un mecanismo funcional.
No comprobar dónde llegan los suscriptores
Realiza una prueba real.
Utilizar solamente “Newsletter” sin explicar qué recibirá el visitante
Agrega una propuesta de valor.
Pedir demasiados campos
Simplifica.
Solicitar teléfono para una simple lista de correos sin necesidad
Evalúa el objetivo.
Pedir información que luego no se utiliza
Reduce datos.
Utilizar un Button “Enviar”
“Suscribirme” suele explicar mejor la acción.
Mostrar un mensaje de éxito estático
Debe aparecer como consecuencia real de una suscripción correcta.
Agregar validaciones visuales inexistentes
La funcionalidad debe respaldarlas.
Agregar un nuevo campo y asumir que se registra automáticamente
Comprueba el procesamiento.
Clonar Inputs sin revisar atributos
Puede afectar la funcionalidad.
Eliminar Classes o atributos de un Form que ya funciona
Puedes romper la suscripción.
Agregar JavaScript al azar
Primero identifica cómo funciona la integración.
Colocar credenciales privadas en HTML o JavaScript público
Nunca expongas claves secretas en el frontend.
Prometer descuentos inexistentes
La oferta debe ser real.
Prometer una frecuencia de envío que no se cumple
Mantén el mensaje preciso.
Mantener una promoción vencida
Actualiza la Newsletter.
Hacer Input y Button demasiado estrechos en celular
Apílalos.
Ocultar la Newsletter en móvil porque no se adapta
Corrige el responsive.
Utilizar CSS global sobre todos los Inputs
Limita el alcance.
Hacer que la Newsletter compita con el CTA principal de una landing
Prioriza el objetivo de la página.
No comprobar el email realmente registrado
Una confirmación visual no basta.
Flujo recomendado
1. DEFINIR QUÉ RECIBIRÁ EL SUSCRIPTOR
↓
2. DEFINIR QUÉ DATOS SON NECESARIOS
↓
3. ELEGIR DISEÑO
↓
4. AGREGAR NEWSLETTER
↓
5. REVISAR NAVIGATOR
↓
6. MODIFICAR HEADING
↓
7. REDACTAR PROPUESTA DE SUSCRIPCIÓN
↓
8. CONFIGURAR INPUT
↓
9. CONFIGURAR BUTTON
↓
10. REVISAR INFORMACIÓN / CONSENTIMIENTO SI CORRESPONDE
↓
11. PERSONALIZAR ESTILO
↓
12. ADAPTAR RESPONSIVE
↓
13. GUARDAR CAMBIOS
↓
14. VER PÁGINA
↓
15. INGRESAR EMAIL DE PRUEBA
↓
16. SUSCRIBIRSE
↓
17. COMPROBAR RESPUESTA
↓
18. VERIFICAR REGISTRO DEL SUSCRIPTOR
Checklist antes de publicar una Newsletter
Sé exactamente qué comunicaciones recibirá el suscriptor.
El Heading explica el objetivo.
La descripción explica qué recibirá.
No prometo información que no se enviará.
No prometo descuentos inexistentes.
No prometo una frecuencia que no pueda mantenerse.
Solicito únicamente los datos necesarios.
El Email es fácil de identificar.
Los campos adicionales son realmente útiles.
El Button describe la acción.
El Form tiene un mecanismo real de suscripción.
Sé dónde se registran los contactos.
Realicé una suscripción de prueba.
Confirmé que el email quedó registrado.
Confirmé que los campos adicionales se registran si existen.
El usuario recibe una respuesta clara después del envío.
Los errores se muestran correctamente cuando existe validación.
La información sobre privacidad o consentimiento necesaria está presente cuando corresponde.
No quedan textos de ejemplo.
No quedan campos innecesarios.
Revisé Navigator.
No eliminé Classes funcionales.
No modifiqué atributos sin comprender su función.
Los IDs personalizados son únicos.
Revisé elementos clonados.
Linked styles tiene el alcance esperado.
Desktop se ve correctamente.
Tablet se ve correctamente.
Celular se ve correctamente.
Input y Button se reorganizan correctamente.
El email puede escribirse cómodamente.
El texto ingresado tiene buen contraste.
El Button es cómodo de utilizar en móvil.
No existe scroll horizontal inesperado.
El CSS personalizado está limitado a esta sección.
No agregué JavaScript innecesario.
No expuse credenciales privadas.
Las promociones continúan vigentes si existen.
Guardé los cambios.
Realicé la validación final mediante Ver página.
En resumen
La sección Newsletters permite crear áreas destinadas a captar suscriptores para futuras comunicaciones.
Una estructura básica puede ser:
HEADING
Descripción
[ EMAIL ]
[ SUSCRIBIRME ]
Por ejemplo:
RECIBE NUESTRAS NOVEDADES
Conoce nuevos productos y contenidos directamente en tu correo.
[ Tu correo electrónico ]
[ SUSCRIBIRME ]
La clave está en comunicar claramente:
qué recibirá el visitante + qué dato debe ingresar + qué acción está realizando.
En muchos casos:
puede ser suficiente.
No agregues:
teléfono;
empresa;
cargo;
dirección;
si no son realmente necesarios para la finalidad de la suscripción.
Y recuerda el principio más importante:
una Newsletter que se ve bien no necesariamente está suscribiendo a nadie.
Después de editar:
Guardar Cambios
↓
Ver página
↓
Ingresar Email
↓
Suscribirse
↓
Comprobar respuesta
↓
Verificar que el contacto fue registrado
Si el Form ya funciona:
conserva su estructura funcional y personaliza únicamente lo necesario.
No elimines arbitrariamente:
Classes;
atributos;
identificadores;
elementos internos.
Para cambios visuales utiliza primero:
Contenido → Estilo → Grid → CSS localizado
y evita modificar la lógica si no es necesario.
En responsive, una composición:
Desktop
[ Email ][ Suscribirme ]
puede convertirse en:
Mobile
[ Email ]
[ Suscribirme ]
para mantener ambos controles cómodos.
Una buena Newsletter debe ser:
clara;
breve;
fácil de completar;
transparente respecto de lo que se recibirá;
responsive;
y realmente funcional.
El objetivo no es solamente conseguir un correo.
Es conseguir una suscripción consciente y útil, correctamente registrada para poder cumplir la comunicación que prometiste.
¿Necesitas más ayuda?
Si este artículo no resolvió tu consulta, nuestro equipo puede ayudarte personalmente.
Soporte por WhatsApp