El Editor de bloques de Waclis incluye algunos componentes que cumplen funciones más específicas que los elementos habituales de texto, imágenes, Cards o Buttons.
Entre ellos encontramos:
Font Icon
Lottie
PayPal
Twitter dentro de Widgets
otros componentes especiales que pueden aparecer en la biblioteca.
Además, Waclis dispone de componentes relacionados como:
Svg Icon
Social icons
que pueden cumplir funciones similares en determinados diseños.
En este tutorial aprenderás:
cuándo utilizar Font Icon;
qué diferencia existe entre Font Icon y Svg Icon;
cómo utilizar iconos sin convertirlos en información ambigua;
qué es Lottie y cuándo conviene utilizar una animación;
cómo evitar animaciones excesivas;
cómo revisar Lottie en celular;
qué precauciones tomar con recursos externos;
qué representa el Widget PayPal;
por qué agregar PayPal visualmente no garantiza que un cobro esté correctamente configurado;
qué debes comprobar antes de utilizar una acción de pago;
por qué nunca debes insertar credenciales privadas en HTML público;
cómo trabajar con el Widget Twitter;
qué diferencia puede existir con Twitter dentro de Incrustados;
cómo utilizar Navigator;
cómo clonar estos componentes correctamente;
cómo evitar CSS global que afecte iconos o Widgets;
qué comprobar antes de guardar.
Antes de comenzar: no todos estos componentes tienen el mismo nivel de riesgo
Podemos dividirlos conceptualmente en tres grupos.
Componentes visuales
Por ejemplo:
Font Icon
Su función principal es visual.
Componentes animados
Por ejemplo:
Lottie
Incorporan movimiento o una animación.
Componentes con una posible acción externa
Por ejemplo:
PayPal
pueden relacionarse con una acción comercial o un proveedor externo.
Esto cambia la forma de probarlos
Un Font Icon puede considerarse correctamente configurado cuando:
representa correctamente el concepto;
se ve bien;
funciona en responsive.
Lottie además necesita comprobar
animación;
rendimiento;
comportamiento mobile.
PayPal requiere todavía más cuidado
No alcanza con comprobar:
“aparece un botón”
Debes comprender:
qué ocurre realmente cuando el visitante interactúa con él.
1. ¿Cómo utilizar Font Icon?
El componente:
Font Icon
se encuentra dentro de:
Componentes → Elementos
y permite incorporar un icono dentro del contenido.
¿Para qué puede utilizarse?
Puede acompañar:
características;
beneficios;
servicios;
datos de contacto;
Buttons;
Cards;
accesos;
elementos informativos.
Ejemplo
[ ICONO ]
ENVÍOS
Realizamos...
Otro
[ ICONO TELÉFONO ]
+54...
Otro
[ ICONO ]
SEGURIDAD
Descripción...
El icono complementa el contenido
No debería sustituir automáticamente el texto.
Ejemplo poco claro
[ ICONO ]
sin ningún texto.
El visitante puede no saber qué significa.
Mejor
[ ICONO ]
ENVÍOS
Font Icon vs Svg Icon
Waclis dispone también de:
Svg Icon
Ambos pueden utilizarse para mostrar iconografía
pero técnicamente representan recursos distintos.
Font Icon
utiliza un icono basado en la fuente o sistema de iconos disponible para el componente.
Svg Icon
utiliza un recurso vectorial SVG.
A nivel práctico
puedes pensar:
FONT ICON
→ iconografía disponible mediante el componente correspondiente
SVG ICON
→ gráfico vectorial SVG
¿Cuál conviene?
Dependerá de:
diseño;
iconografía disponible;
consistencia visual;
necesidad del proyecto.
No mezcles cinco estilos diferentes de iconos
Por ejemplo:
Card 1 → icono lineal
Card 2 → icono relleno
Card 3 → emoji
Card 4 → SVG ilustrado
puede generar una composición poco coherente.
Mantén una familia visual
Especialmente dentro de una misma sección.
Ejemplo
BENEFICIOS
[ icono ] Rapidez
[ icono ] Seguridad
[ icono ] Soporte
Los tres iconos deberían sentirse parte del mismo sistema.
Font Icon vs Image
No utilices una imagen PNG pequeña para cada icono si Font Icon o Svg Icon pueden resolverlo correctamente.
Un icono suele necesitar
tamaño pequeño;
nitidez;
adaptación.
Una Image sigue siendo apropiada cuando necesitas:
fotografía;
ilustración;
logo;
recurso visual complejo.
Font Icon no reemplaza una fotografía.
Font Icon vs emoji
Un emoji como:
🚚
puede ser válido en determinados diseños informales,
pero su apariencia puede variar según:
dispositivo;
sistema operativo;
navegador.
Si buscas consistencia visual
puede ser mejor utilizar un icono diseñado para la interfaz.
No utilices iconos solamente para llenar espacios
Pregunta:
¿El icono ayuda a reconocer el contenido?
Si no aporta:
puedes omitirlo.
Iconos y significado
Elige símbolos que sean comprensibles.
Ejemplo
Sobre / Email
puede ser intuitivo.
Pero un símbolo ambiguo:
★
podría significar:
destacado;
favorito;
calidad;
calificación.
Acompáñalo con texto cuando el significado no sea evidente.
Iconos decorativos
Un icono puede ser puramente decorativo.
En ese caso
no debería convertirse en el único elemento que comunique información esencial.
Iconos dentro de Buttons
Puedes tener:
[ icono ] Descargar catálogo
El texto indica claramente la acción.
Evita:
[ ↓ ]
como único CTA
si el visitante podría no comprender qué descargará.
Mejor:
[ ↓ Descargar catálogo ]
Icono antes o después
Puede depender de la acción.
Ejemplo
← Volver
O:
Ver más →
Mantén consistencia.
Navigator y Font Icon
Una estructura puede ser:
Card
├── Font Icon
├── Heading
└── Paragraph
Si quieres duplicar la Card
clona:
Card
No solamente Font Icon.
Después actualiza
icono;
Heading;
Paragraph;
Link si existe;
ID.
Error frecuente
Original:
[ camión ]
ENVÍOS
Copia:
[ camión ]
SEGURIDAD
Cambiaste el título
pero dejaste el icono anterior.
Revisa contenido e icono juntos
Tamaño
Un icono debe guardar proporción con el texto.
Ejemplo
Un Heading:
24 px
con un icono:
150 px
puede hacer que el icono domine demasiado.
Tampoco:
8 px
si deja de ser reconocible.
Ajusta según el diseño.
Color
Puede utilizar:
color de marca;
color del texto;
otro color del sistema visual.
Pero no utilices un color diferente en cada icono
sin una lógica.
Linked styles
Puede ser muy útil.
Todos los iconos de una sección pueden compartir:
feature-icon
Así mantienen:
tamaño;
color;
separación.
Si modificas uno y cambian todos:
puede ser exactamente lo deseado.
Para una excepción
agrega una Class adicional.
No utilices un ID diferente para cada icono
solo para cambiar el mismo estilo repetidamente.
Responsive
Revisa especialmente:
tamaño;
posición;
espacio con el texto.
En mobile
una estructura desktop:
[ ICONO ][ TÍTULO ][ TEXTO ]
puede necesitar reorganizarse.
Por ejemplo:
[ ICONO ]
TÍTULO
TEXTO
Utiliza Grid cuando corresponda.
No posiciones iconos mediante:
left: 200px;
top: 40px;
2. ¿Cómo utilizar Social icons?
Aunque el objetivo principal de este tutorial son los componentes especiales, Social icons está estrechamente relacionado con Font Icon y merece una aclaración.
Social icons puede ser más apropiado cuando necesitas representar
redes sociales;
plataformas sociales;
accesos a perfiles.
Por ejemplo:
[ Instagram ] [ Facebook ] [ LinkedIn ]
según los iconos y perfiles que utilice tu Página web.
Font Icon
puede ser más genérico.
Social icons
está orientado específicamente a redes o plataformas sociales.
No utilices un icono social si no existe un destino real
Ejemplo incorrecto
[ Instagram ]
sin Link.
El visitante esperará poder seleccionarlo.
Revisa cada URL
Especialmente después de clonar.
No utilices un perfil de ejemplo
en producción.
No hagas que todos los iconos lleven a la misma red.
Si una red no se utiliza
es mejor retirarla.
Social icons y Hover
Puede resultar útil:
normal
→ color neutro
hover
→ color de marca
Pero no hagas cambios excesivos.
3. ¿Cómo utilizar Lottie?
El componente:
Lottie
se encuentra dentro de:
Componentes → Widgets
y permite incorporar una animación compatible con el componente.
¿Qué es Lottie?
A nivel práctico,
puedes pensar en Lottie como:
un recurso de animación gráfica que puede incorporarse dentro de una interfaz o Página web.
Puede utilizarse para
ilustraciones animadas;
acompañar una explicación;
estados visuales;
elementos decorativos;
destacar una sección.
Ejemplo
[ ANIMACIÓN ]
CONFIGURA TU CUENTA
En pocos pasos...
Otro
SOLICITUD ENVIADA
[ ANIMACIÓN ]
solo si ese estado corresponde realmente al comportamiento de la página.
No utilices Lottie solamente porque se mueve
Pregunta
¿La animación aporta información, contexto o una mejora visual razonable?
Si la respuesta es no
una:
Image;
Svg Icon;
ilustración estática;
puede ser suficiente.
Movimiento no siempre significa mejor diseño
Una página con:
Lottie
+
Slider
+
Counter animado
+
Flip box
+
Animate on scroll
puede resultar excesiva.
El visitante necesita comprender
no contemplar todos los efectos posibles.
Lottie vs GIF
Ambos pueden mostrar movimiento,
pero son recursos diferentes.
No necesitas convertir automáticamente una animación existente a otro formato.
Utiliza el recurso que corresponda a la funcionalidad disponible.
Lottie vs video
Lottie puede ser apropiado para:
animación gráfica;
ilustración.
Video
para:
demostraciones;
personas;
escenas;
tutoriales;
contenido audiovisual.
No utilices Lottie para intentar reemplazar un videotutorial completo.
¿Cómo agregar Lottie?
abre Componentes;
localiza Widgets;
selecciona Lottie;
agrégalo dentro de la Section;
utiliza Navigator;
selecciona el Widget;
revisa Contenido.
Las opciones exactas pueden depender del componente disponible
Por eso:
utiliza los campos que aparezcan en tu configuración y no asumas propiedades que no están visibles.
El recurso puede depender de una fuente o archivo compatible
según las opciones que presente el Widget.
No utilices URLs desconocidas
Utiliza recursos:
propios;
confiables;
autorizados.
Lottie externo
Si la animación depende de un recurso externo:
puede dejar de funcionar si:
se elimina;
cambia su URL;
deja de estar disponible.
Igual que otros Embeds
la disponibilidad externa necesita mantenimiento.
Navigator y Lottie
Una estructura puede ser:
Section
└── Container
└── Grid Row
├── Column
│ └── Lottie
└── Column
├── Heading
└── Paragraph
Este es un patrón muy útil
Desktop
[ ANIMACIÓN ][ TEXTO ]
Mobile
ANIMACIÓN
TEXTO
O:
TEXTO
ANIMACIÓN
según la prioridad.
No utilices Position absolute
para colocar la animación al costado.
Utiliza Grid.
Tamaño
Una animación no debería necesariamente ocupar toda la pantalla.
Por ejemplo
un pequeño recurso de apoyo puede utilizar:
300–500 px
de ancho según el diseño.
No son valores obligatorios.
El tamaño depende de:
contenido;
Section;
dispositivo.
Lottie y mobile
Revisa:
ancho;
altura;
carga;
movimiento.
Una animación de:
700 px
puede ser excesiva en un teléfono.
Utiliza tamaños fluidos.
No escondas automáticamente la animación en mobile
solo porque no la adaptaste.
Primero intenta ajustarla.
Si la animación es puramente decorativa
y realmente no aporta en mobile,
puedes evaluar ocultarla mediante:
Avanzado → Hide based on device screen width
Pero esa es una decisión de contenido
no una solución automática.
Recuerda
los iconos superiores de dispositivos:
solo previsualizan
Hide based on device:
cambia la visibilidad real
No confundas ambas funciones.
Animación continua
Si una Lottie se reproduce continuamente:
pregunta si eso distrae.
Especialmente cerca de:
formularios;
lectura extensa;
CTA.
Una animación constante puede robar atención.
No asumiremos controles específicos de:
loop;
speed;
autoplay;
si no aparecen en el componente seleccionado.
Si existen
utilízalos conscientemente.
Movimiento y accesibilidad
Evita animaciones:
excesivamente rápidas;
parpadeantes;
constantemente intrusivas.
La animación debería complementar el contenido.
No hagas depender información esencial de una secuencia animada
Por ejemplo
No muestres:
Paso 1
Paso 2
Paso 3
únicamente dentro de una animación sin alternativa textual,
si el proceso es importante.
Mejor:
Heading
List / Timeline
+
animación complementaria
Lottie y Animate on scroll
Lottie ya posee movimiento.
Agregar además:
Animate on scroll → zoom
al mismo componente puede producir un efecto excesivo.
Usa una sola capa de animación cuando sea suficiente.
Lottie dentro de Flip box
Esto genera:
interacción
+
animación
Puede funcionar,
pero aumenta complejidad.
Pregunta si realmente aporta.
Lottie dentro de Slider
Mismo principio.
No sobrecargues.
Clonar Lottie
Si clonas una Card:
Card
├── Lottie A
├── Heading A
└── Paragraph A
para crear B,
actualiza:
animación;
Heading;
Paragraph;
ID.
No cambies solamente el texto.
Si las dos Cards deben compartir la misma animación
puede mantenerse,
pero debe ser una decisión consciente.
Lottie y rendimiento
Una animación puede ser más compleja que una Image.
No agregues:
10 Lotties
en una sola Section
si tres elementos estáticos resolverían mejor el diseño.
Prueba especialmente en:
celular;
conexiones más lentas.
4. ¿Cómo utilizar PayPal?
El componente:
PayPal
aparece dentro de:
Componentes → Widgets
Este componente requiere especial cuidado
porque puede estar relacionado con una acción comercial.
Primera regla
Agregar PayPal al lienzo no significa automáticamente que un sistema de pagos esté correctamente configurado.
La presencia visual
[ PAYPAL ]
no permite concluir por sí sola:
“ya puedo cobrar”
Debes comprobar la configuración y el comportamiento real.
Esto es similar al principio que vimos con Formularios
FORMULARIO VISIBLE
≠
PROCESAMIENTO CONFIGURADO
Aquí:
WIDGET PAYPAL VISIBLE
≠
PAGO CONFIGURADO Y VERIFICADO
¿Qué debes revisar?
Después de agregar el Widget:
selecciónalo;
abre Contenido;
revisa los campos que realmente aparecen;
identifica qué información solicita;
no inventes valores;
no introduzcas credenciales secretas en contenido público;
comprende qué acción ejecutará.
No documentamos campos que no hemos confirmado
La configuración exacta del Widget PayPal puede depender de la implementación disponible.
Por eso:
utiliza únicamente las opciones que realmente muestre el Editor.
No confundas PayPal con un Button normal
Un Button:
COMPRAR
es solamente un control visual o de navegación hasta que exista una acción configurada.
PayPal puede estar destinado a una integración específica
pero debes comprobarla.
No sustituyas
un flujo de compra de Waclis
por un Widget PayPal sin comprender qué proceso estás creando.
Por ejemplo
si tu Página web ya dispone de:
carrito;
checkout;
medio de pago;
no agregues un botón adicional de PayPal en una Card
sin saber si debe integrarse con ese proceso.
Podrías crear dos recorridos diferentes
COMPRA NORMAL
y:
PAGO DIRECTO
sin una lógica comercial clara.
Antes de utilizar PayPal pregunta
¿Qué debe ocurrir después de que el visitante selecciona este componente?
La respuesta debería ser concreta
No:
“debería pagar”
Sino una explicación real del flujo.
Por ejemplo
qué producto;
qué importe;
qué confirmación;
qué ocurre después;
cuando corresponda a la implementación.
No inventes importes
Si el Widget utiliza un valor:
debe coincidir con la operación real.
No muestres:
USD 100
en el texto
y proceses:
USD 120
La información visual y funcional debe coincidir.
Moneda
Mismo principio.
Si el contenido visible indica una moneda:
el procesamiento debería coincidir.
No asumas conversiones automáticas.
Producto
Si el pago corresponde a:
Producto A
no clones el bloque para:
Producto B
sin revisar también la configuración funcional del Widget.
Este es un error crítico
Card A
PRODUCTO A
$ 100
[ PAYPAL A ]
La clonas:
PRODUCTO B
$ 200
[ PAYPAL A ]
Visualmente parece Producto B,
pero el Widget podría conservar la configuración anterior.
Siempre revisa la configuración después de clonar
No basta con cambiar
título;
precio visible.
Debes revisar el Widget.
PayPal y credenciales
Nunca coloques en:
HTML;
CSS;
JavaScript público;
campos visuales;
credenciales secretas.
Por ejemplo
contraseñas;
claves privadas;
secretos de API;
tokens privados.
El código frontend puede ser visible para los visitantes.
Si una integración oficial requiere información sensible
debe gestionarse mediante el mecanismo seguro correspondiente,
no escribirse dentro del bloque público.
Si un campo del Widget no sabes qué significa
no pegues una credencial “para probar”.
Confirma primero qué espera.
PayPal y pruebas
Antes de utilizar un flujo de cobro en producción:
comprueba el recorrido completo mediante el método de prueba apropiado para la implementación utilizada.
No basta con
hacer clic
y observar que se abre una ventana.
Necesitas saber:
qué operación inicia;
qué información se transmite;
qué ocurre cuando se completa;
qué ocurre cuando se cancela;
qué verá el usuario.
Si no puedes comprobar el funcionamiento
no presentes el Widget como una forma de pago operativa.
PayPal y diseño
Una vez confirmada la funcionalidad,
puedes trabajar la composición.
Por ejemplo:
Producto
Descripción
Precio
[ PAYPAL ]
Pero evita que el diseño haga parecer:
un botón de pago
algo que todavía no está configurado.
PayPal responsive
Prueba:
desktop;
tablet;
celular.
Especialmente
Width;
Column;
contenido alrededor.
No recortes el Widget mediante:
overflow: hidden
sin comprobar que todos sus controles sigan visibles.
No modifiques elementos internos del proveedor indiscriminadamente
Parte de la interfaz puede pertenecer al servicio externo.
No asumas que puedes personalizar desde CSS de Waclis todo lo que aparece dentro.
PayPal y privacidad
Una integración de pagos puede implicar comunicación con un tercero.
Revisa las políticas y configuración aplicables al flujo utilizado.
Este tutorial no sustituye asesoramiento:
legal;
fiscal;
financiero.
Tampoco describe una configuración comercial específica de PayPal
porque dependerá del Widget y de la cuenta utilizada.
Nuestra regla en el Editor es sencilla
no publiques un componente de pago hasta haber comprobado exactamente qué hace.
5. ¿Cómo utilizar Twitter dentro de Widgets?
Además del componente Twitter que aparece dentro de:
Componentes → Incrustados
también tenemos identificado un componente:
dentro de:
Widgets
Es importante no asumir que ambos son idénticos
Pueden ofrecer:
estructuras;
opciones;
comportamientos;
diferentes.
Si ves ambos componentes
prueba el que corresponda al tipo de contenido que necesitas.
Utiliza sus campos reales
No copies la configuración de uno dentro del otro automáticamente.
El objetivo general puede ser incorporar contenido relacionado con el servicio,
pero la implementación concreta puede variar.
¿Cómo decidir?
agrega el componente en una zona de prueba;
selecciona el elemento;
abre Contenido;
observa qué tipo de recurso solicita;
configura un recurso válido;
comprueba el resultado;
elimina la variante que no necesites.
No publiques ambos
mostrando exactamente el mismo contenido
sin una razón.
Twitter externo depende del proveedor
Al igual que otros Incrustados:
una publicación puede eliminarse;
cambiar de visibilidad;
dejar de estar disponible.
No hagas que una publicación externa sea la única fuente de información crítica.
Agrega contexto cuando sea necesario.
Ejemplo
NOVEDAD
Resumen propio de la información.
[ PUBLICACIÓN ]
Más información...
En lugar de:
[ PUBLICACIÓN ]
sin explicación.
6. Componentes personalizados
Dentro del Editor también puede aparecer la categoría:
Componentes personalizados
Estos componentes pueden haber sido creados específicamente para una necesidad determinada.
Por ejemplo
podrías encontrar un componente personalizado con un nombre propio.
No existe una regla única para todos
Cada componente personalizado puede tener:
estructura;
opciones;
CSS;
interacción;
diferentes.
Metodología recomendada
Antes de modificar uno:
1. Insertar / seleccionar
↓
2. Abrir Navigator
↓
3. Abrir Contenido
↓
4. Revisar Estilo
↓
5. Identificar estructura
↓
6. Probar antes de modificar HTML
No asumas que un componente personalizado funciona igual que:
Card;
Dropdown;
Slider;
solo por su apariencia.
Si tiene interacción
conserva:
IDs;
Classes;
atributos internos;
hasta comprender su función.
Componentes personalizados y clonación
Especial cuidado.
Al clonar
puede existir una relación entre:
control;
panel;
ID;
JavaScript.
Después de clonar:
prueba el original y la copia.
No compruebes solamente la nueva instancia.
Navigator en componentes especiales
Repasemos.
Font Icon
Card
└── Font Icon
Lottie
Section
└── Lottie
PayPal
Product Card
└── PayPal
Section
└── Twitter Widget
Componente personalizado
Custom Component
├── elementos internos
└── interacción potencial
Cuanto más específico sea el componente
más importante es comprender qué nivel has seleccionado.
Seleccionar padre
Puede ayudarte.
Pero no continúes subiendo niveles sin observar Navigator.
Podrías llegar a:
Section
y eliminarla accidentalmente.
Recuerda
Waclis no solicita confirmación al eliminar.
Utiliza Deshacer
si ocurre.
Clonar componentes especiales
Antes de clonar pregunta:
¿Quiero otra instancia del componente o solamente copiar su apariencia?
Font Icon
clonar suele ser sencillo,
pero cambia el icono si el significado cambia.
Lottie
revisa:
recurso;
texto asociado.
PayPal
revisa especialmente:
configuración funcional.
revisa:
recurso externo.
Componente personalizado
revisa toda la estructura.
IDs después de clonar
Mantén:
ID
→ único
Pero recuerda
en componentes funcionales
un ID puede tener una relación interna.
No lo renombres al azar.
Si necesitas modificar un componente complejo
utiliza:
Editar código HTML <>
para estudiar primero la estructura.
Classes
Pueden compartirse para diseño.
Por ejemplo:
feature-icon
O:
lottie-wrapper
Pero no elimines Classes internas de:
Lottie;
PayPal;
Widgets;
componentes personalizados;
sin comprenderlas.
Linked styles
Puede ayudarte a detectar estilos compartidos.
En Font Icon
puede ser ideal.
En componentes externos
puede ser más delicado.
Por ejemplo
cambiar:
Width
de un wrapper compartido
puede modificar todas las instancias.
Verifica el alcance.
CSS global peligroso: iconos
Evita:
i {
font-size: 60px;
}
globalmente.
Puede afectar numerosos iconos del sitio.
También:
svg {
width: 80px;
}
globalmente.
Puede afectar:
logos;
controles;
iconos;
gráficos.
Utiliza scope.
Ejemplo:
.features-section .feature-icon {
font-size: 36px;
}
CSS global peligroso: Lottie
No apliques:
canvas,
svg {
width: 100% !important;
}
sin saber qué estructura utiliza la animación.
Puede afectar muchos otros elementos.
Tampoco:
animation: none !important;
globalmente,
porque podrías desactivar otras animaciones.
CSS global peligroso: PayPal
Evita intentar modificar globalmente:
button {
...
}
para cambiar únicamente PayPal.
Podrías afectar:
Formularios;
CTA;
navegación;
otros Widgets.
Además
parte del contenido externo podría no ser estilizable directamente desde tu CSS.
CSS global peligroso: Widgets
Evita:
iframe {
...
}
como regla universal.
Ya vimos que puede afectar:
mapas;
videos;
documentos;
Widgets externos.
Utiliza una Class propia en el contenedor.
Ejemplo:
paypal-section-custom
O:
lottie-section-custom
Estilo localizado
Puede ser:
.lottie-section-custom {
text-align: center;
}
O:
.lottie-section-custom .lottie-wrapper {
max-width: 480px;
margin-left: auto;
margin-right: auto;
}
Estos nombres son ejemplos.
Debes utilizar la estructura real.
Responsive general
Los cuatro grupos deben probarse en:
desktop;
tablet;
celular.
Font Icon
Revisa tamaño.
Lottie
Revisa:
tamaño;
movimiento;
espacio.
PayPal
Revisa interacción.
Twitter Widget
Revisa:
ancho;
contenido externo;
scroll.
No basta con seleccionar el icono de teléfono en el Editor
Esa es una previsualización.
La comprobación final es:
Ver página
Componentes especiales y Animate on scroll
Font Icon puede utilizar una animación moderada.
Lottie ya está animado.
PayPal no necesita aparecer dando vueltas o rebotando.
Twitter tampoco necesita una animación adicional.
Utiliza Animate on scroll con moderación.
Especialmente en acciones sensibles
como:
PAGAR
la interfaz debería priorizar:
claridad;
estabilidad;
confianza.
No efectos espectaculares.
Font Icon + Hover
Tiene sentido si:
forma parte de Link;
forma parte de Card interactiva.
No agregues Hover llamativo
a un icono puramente informativo.
Puede parecer clicable.
Lottie + Hover
No siempre es necesario.
La animación ya aporta movimiento.
No agregues:
zoom
+
rotación
+
Lottie
simultáneamente.
PayPal + Hover
No alteres de forma extrema una acción de pago.
Mantén coherencia con el comportamiento del Widget.
Recursos externos y mantenimiento
Lottie, Twitter o PayPal pueden depender de:
recursos;
cuentas;
servicios externos.
Revisa periódicamente.
Un recurso puede:
dejar de estar disponible;
cambiar;
requerir nueva configuración.
Font Icon
normalmente es menos dependiente de contenido externo individual,
pero puede depender del conjunto de iconos disponible en la Página web.
No cambies librerías o CSS global
sin revisar iconos existentes.
Especial cuidado con Font Icon después de modificar CSS
Si todos los iconos desaparecen:
busca reglas sobre:
font-family
Un Font Icon puede depender de una familia de fuente específica.
No sobrescribas globalmente:
i {
font-family: "Mi Fuente";
}
Podrías reemplazar la fuente que genera los iconos.
Este es un error especialmente importante.
Typography global y Font Icon
Un selector general puede afectar iconos.
Por eso evita:
i,
span {
font-family: Arial !important;
}
Utiliza selectores específicos para textos.
Font Icon y color heredado
En determinadas estructuras
un icono puede heredar:
color
del elemento padre.
Si cambia inesperadamente:
revisa la jerarquía.
No necesitas asignar un ID individual inmediatamente.
Lottie y tamaño del contenedor
Si la animación aparece:
muy pequeña
puede deberse al wrapper.
Revisa:
Width;
Max Width;
Column.
No escales mediante:
transform: scale(3);
como primera solución.
Ajusta el contenedor.
Lottie cortada
Puede existir:
overflow: hidden
o:
height fija
en un padre.
Utiliza Navigator.
Lottie fuera de la Section
Puede existir:
Position
problemático.
No utilices Position absolute para el layout principal.
PayPal no responde
Si el Widget no responde:
revisa primero:
configuración;
recurso externo;
navegador;
estructura;
cambios realizados.
No agregues JavaScript adicional inmediatamente.
Si el componente no está configurado
un script improvisado no sustituye una integración correcta.
PayPal muestra un importe inesperado
No continúes con la publicación.
Revisa:
producto;
cantidad;
moneda;
configuración;
según las opciones del Widget.
Nunca supongas que el valor visible en un Paragraph controla el pago
Por ejemplo:
Paragraph:
$ 100
no significa que el Widget sepa:
cobrar $ 100
Son elementos diferentes.
Este principio es crítico.
PayPal después de clonar
Prueba cada instancia independientemente.
No asumas:
Widget A
y:
Widget B
tienen configuraciones diferentes solamente porque sus Cards muestran distintos productos.
Comprueba.
Twitter no carga
Comprueba:
recurso;
visibilidad;
disponibilidad;
proveedor.
No intentes reparar con CSS una publicación privada.
Componente personalizado no funciona
Primero identifica:
si funcionaba antes;
qué modificaste;
IDs;
Classes;
estructura.
No lo reemplaces completamente antes de diagnosticar.
HTML del elemento
Editar código HTML <>
puede ser especialmente útil en:
Lottie;
PayPal;
Widgets;
componentes personalizados.
Pero el primer uso debería ser:
comprender la estructura.
No:
“abrir y borrar todo lo que no entiendo”.
Estrategia segura
1. Seleccionar componente
↓
2. Abrir HTML
↓
3. Identificar wrapper / IDs / Classes
↓
4. Cerrar
↓
5. Planificar
↓
6. Modificar lo mínimo
Code editor global
No lo utilices para:
cambiar icono;
mover Lottie;
cambiar Margin.
Utiliza:
Contenido;
Estilo;
Navigator.
JavaScript
No agregues JavaScript para:
agrandar Font Icon;
centrar Lottie;
redondear un Wrapper.
CSS es suficiente para cambios visuales.
En PayPal
especialmente:
no escribas un script casero para “hacer que cobre” si no sabes cómo funciona la integración.
Las operaciones de pago requieren una implementación apropiada.
Componentes especiales y Bootstrap
Waclis utiliza Bootstrap 4 en el entorno actual.
Si pides ayuda a ChatGPT, Claude o Gemini:
indica:
Waclis utiliza Bootstrap 4.
No reemplaces estructuras existentes por ejemplos de Bootstrap 5 sin verificar.
Esto es especialmente importante en componentes personalizados.
Ejemplo práctico 1: beneficios con Font Icon
Queremos:
[ ICONO ] [ ICONO ] [ ICONO ]
RAPIDEZ SEGURIDAD SOPORTE
Descripción... Descripción... Descripción...
Paso 1
Crea:
Grid Row
Paso 2
Agrega tres columnas.
Paso 3
En la primera agrega:
Font Icon
Paso 4
Agrega:
Heading;
Paragraph.
Paso 5
Clona la unidad completa.
Paso 6
Actualiza:
icono;
título;
texto.
Paso 7
Revisa Linked styles.
Paso 8
Revisa mobile.
Paso 9
Guardar Cambios.
Paso 10
Ver página.
Ejemplo práctico 2: Lottie + texto
Desktop:
[ LOTTIE ][ TEXTO ]
Estructura:
Grid Row
├── Column 5
│ └── Lottie
└── Column 7
├── Heading
├── Paragraph
└── Button
Mobile:
LOTTIE
TEXTO
BUTTON
Comprueba que la animación:
no sea excesiva;
no domine el CTA.
Ejemplo práctico 3: Lottie decorativa
Gracias por contactarnos
[ LOTTIE ]
Responderemos...
Solo utilízala si ese mensaje realmente aparece en el contexto correcto.
No coloques:
“Solicitud enviada”
en una página antes de que el visitante envíe algo.
No simules estados funcionales.
Ejemplo práctico 4: Card con Social icons
SÍGUENOS
[ ICONO ][ ICONO ][ ICONO ]
Configura cada Link real.
Elimina plataformas no utilizadas.
Ejemplo práctico 5: PayPal
Supongamos que has decidido utilizar el Widget dentro de un flujo específico.
Paso 1
Agrega:
PayPal
Paso 2
Abre Navigator.
Paso 3
Selecciona el Widget.
Paso 4
Revisa Contenido.
Paso 5
Completa únicamente los datos que correspondan a la configuración real.
Paso 6
No coloques secretos.
Paso 7
Comprueba que el contenido visible coincida con la operación.
Paso 8
Revisa responsive.
Paso 9
Guardar Cambios.
Paso 10
Ver página.
Paso 11
Comprueba el recorrido funcional mediante el método de prueba adecuado.
Paso 12
No lo publiques como medio de pago hasta comprender completamente el resultado.
Ejemplo práctico 6: Twitter Widget
NOVEDADES
[ TWITTER ]
Más información...
Después:
prueba el recurso;
revisa mobile;
confirma que sigue siendo público.
No dependas exclusivamente de la publicación para comunicar un cambio importante.
¿Qué hacer si Font Icon aparece como un cuadrado?
Puede deberse a que:
no cargó la fuente correspondiente;
se modificó Font family;
CSS global afectó el icono.
Revisa primero CSS personalizado.
Especialmente reglas sobre:
i
span
font-family
No cambies inmediatamente a Image.
¿Qué hacer si todos los iconos desaparecieron después de modificar Typography?
Probablemente aplicaste una regla demasiado general.
Revisa el alcance.
¿Qué hacer si un icono se ve distinto al resto?
Comprueba:
familia;
tamaño;
estilo;
Class.
No necesariamente necesitas otro componente.
¿Qué hacer si quiero cambiar solo un icono?
Selecciona ese Font Icon.
Si el cambio de Estilo afecta todos:
pueden compartir Class.
Si quieres una excepción:
agrega una Class adicional.
¿Qué hacer si quiero cambiar el icono, no el estilo?
Utiliza Contenido y la opción correspondiente que presente el componente.
No lo reemplaces desde CSS si existe un selector de icono adecuado.
¿Qué hacer si Lottie no aparece?
Revisa:
recurso;
Container;
Width;
Height;
disponibilidad externa;
CSS.
¿Qué hacer si Lottie aparece pero no se mueve?
Primero comprueba el recurso y comportamiento del componente.
No agregues otra biblioteca inmediatamente.
¿Qué hacer si Lottie ocupa demasiado?
Revisa:
Column;
Max Width;
wrapper.
No utilices Transform.
¿Qué hacer si Lottie ralentiza la página?
Pregunta si realmente necesitas la animación.
Puede ser mejor:
Svg Icon;
Image.
¿Qué hacer si quiero diez Lotties?
Evalúa si:
1 o 2
serían suficientes.
Movimiento constante en toda la página puede ser contraproducente.
¿Qué hacer si PayPal se ve pero no sé si cobra?
Entonces:
todavía no está listo para producción.
Primero debes comprender y probar el flujo.
¿Qué hacer si PayPal me solicita un dato que no reconozco?
No pegues:
token;
contraseña;
secreto;
por prueba.
Consulta la configuración correspondiente del servicio o la documentación específica antes de continuar.
¿Qué hacer si cloné PayPal y ambos cobran lo mismo?
Revisa la configuración del Widget clonado.
No intentes corregir solamente el precio visible.
¿Qué hacer si quiero utilizar PayPal como simple Link?
Si tu único objetivo es navegar hacia una URL,
puede que un:
Link
sea más apropiado.
No utilices un Widget funcionalmente más complejo para una tarea simple.
¿Qué hacer si Twitter aparece dos veces en la biblioteca?
Recuerda que tenemos identificado:
Twitter dentro de Widgets;
Twitter dentro de Incrustados.
No asumas que son duplicados exactos.
Revisa Contenido y comportamiento de cada uno.
Utiliza el que corresponda a tu necesidad.
¿Qué hacer si un componente personalizado deja de funcionar al clonarlo?
Busca:
IDs duplicados;
referencias;
Classes;
elementos internos.
Utiliza HTML del elemento para diagnosticar.
No agregues JavaScript adicional hasta comprender la causa.
IA para elegir entre Font Icon y Svg Icon
Puedes utilizar ChatGPT, Claude o Gemini.
Por ejemplo:
Tengo estas Cards:
[lista de conceptos]
Necesito elegir iconos para:
- [conceptos]
Indica qué concepto visual podría representar cada uno.
Los iconos deben ser:
- simples;
- fáciles de reconocer;
- coherentes entre sí.
No inventes funcionalidades.
IA para revisar consistencia de iconos
Estoy utilizando estos iconos:
[descripción]
Analiza si pertenecen a una misma lógica visual.
Señala:
- mezcla de estilos;
- símbolos ambiguos;
- iconos que no corresponden al texto.
No cambies el contenido.
IA para CSS localizado de iconos
Tengo una sección en Waclis:
.features-section
Los iconos utilizan:
.feature-icon
Necesito:
- tamaño 40 px desktop;
- 34 px mobile;
- espacio inferior;
- no afectar otros Font Icon, Svg Icon ni iconos del Header.
Waclis utiliza Bootstrap 4.
No cambies HTML.
Devuélveme solamente CSS limitado a .features-section.
IA para detectar CSS que rompe Font Icon
Mis Font Icon dejaron de mostrarse después de agregar este CSS:
[pegar]
Busca reglas sobre:
i
span
font-family
font-style
font-weight
::before
que puedan estar reemplazando la fuente del icono.
No modifiques el CSS.
Solo identifica riesgos.
IA para decidir si Lottie aporta valor
Quiero agregar una animación Lottie en esta sección:
[describir sección]
Analiza si:
- aporta contexto;
- es puramente decorativa;
- puede distraer del CTA;
- una Image o Svg Icon sería suficiente.
Considera desktop y mobile.
No inventes una animación.
IA para CSS de Lottie
Tengo una Lottie en:
.lottie-feature-section
Wrapper:
.lottie-wrapper
Necesito:
- max-width 480 px desktop;
- width 100 % mobile;
- centrada;
- sin position:absolute;
- no afectar otras animaciones.
Waclis utiliza Bootstrap 4.
No agregues JavaScript.
Devuélveme CSS localizado.
IA para detectar CSS problemático en Lottie
Esta animación Lottie dejó de verse correctamente.
HTML:
[pegar]
CSS:
[pegar]
Busca:
- width;
- height;
- overflow;
- transform;
- position;
- display.
No agregues una nueva librería.
No reescribas el componente.
IA para revisar PayPal antes de modificar
Este es únicamente el HTML de un Widget PayPal existente en Waclis:
[pegar]
Necesito identificar:
- wrapper;
- campos visibles;
- IDs;
- Classes;
- atributos;
- referencias externas.
No cambies nada.
No generes credenciales.
No agregues JavaScript.
No asumas que el pago está configurado.
IA para comparar dos Widgets PayPal clonados
Tengo dos Cards que deberían representar operaciones diferentes.
Card A:
[HTML]
Card B:
[HTML]
Compara:
- valores;
- identificadores;
- URLs;
- atributos;
- configuración del Widget.
Señala qué elementos siguen duplicados.
No inventes valores correctos.
IA para detectar secretos antes de publicar
Revisa este fragmento que se utilizará en una Página web pública:
[pegar]
Busca elementos que parezcan:
- contraseñas;
- claves privadas;
- secretos API;
- tokens privados.
No repitas los valores completos en tu respuesta.
Indica únicamente dónde existe un posible secreto y que debe retirarse.
IA para Twitter Widget
Tengo dos componentes relacionados con Twitter en Waclis:
- uno dentro de Widgets;
- otro dentro de Incrustados.
Estas son las opciones de Contenido que muestra cada uno:
[pegar opciones]
Compara qué tipo de recurso parece esperar cada componente.
No inventes funcionalidades que no aparecen en las opciones.
IA para componente personalizado
Este es el HTML de un componente personalizado de Waclis:
[pegar]
Antes de modificarlo identifica:
- contenedor raíz;
- elementos repetibles;
- IDs;
- Classes;
- controles;
- paneles;
- Links.
No modifiques nada.
No agregues JavaScript.
IA para detectar CSS global peligroso
Revisa este CSS de Waclis:
[pegar]
Busca reglas globales que puedan afectar:
- Font Icon;
- Svg Icon;
- Social icons;
- Lottie;
- PayPal;
- Widgets externos.
Presta especial atención a:
i
svg
span
button
iframe
font-family
transform
overflow
position
No modifiques el código.
Buenas prácticas para Font Icon
Recomendamos:
utilizar iconos comprensibles;
acompañarlos con texto cuando corresponda;
mantener una familia visual;
no utilizar iconos como relleno;
evitar CSS global sobre i;
no reemplazar Font family globalmente;
utilizar Linked styles;
revisar responsive.
Buenas prácticas para Social icons
Recomendamos:
mostrar solamente redes utilizadas;
configurar Links reales;
probar cada destino;
mantener tamaño coherente;
evitar iconos sin acción;
revisar Hover.
Buenas prácticas para Lottie
Recomendamos:
utilizar animaciones que aporten;
limitar cantidad;
evitar movimiento excesivo;
comprobar mobile;
mantener tamaños razonables;
no depender exclusivamente de la animación;
utilizar recursos confiables;
revisar rendimiento;
no agregar Animate on scroll innecesario.
Buenas prácticas para PayPal
Recomendamos:
comprender primero la finalidad del Widget;
revisar todos sus campos reales;
no asumir que está configurado;
no utilizar credenciales secretas en frontend;
comprobar el recorrido completo;
verificar importe y moneda cuando correspondan;
revisar cada Widget después de clonar;
no utilizarlo como sustituto improvisado del checkout;
no publicar hasta confirmar funcionamiento;
priorizar claridad frente a efectos visuales.
Buenas prácticas para Twitter y otros Widgets externos
Recomendamos:
comprobar el recurso real;
agregar contexto;
revisar disponibilidad;
probar mobile;
no depender exclusivamente del contenido externo;
mantener la integración actualizada.
Errores frecuentes
Utilizar un Font Icon sin contexto
Acompáñalo con texto cuando el significado no sea evidente.
Mezclar estilos de iconos
Mantén coherencia.
Utilizar emojis como sustituto de toda la iconografía
Evalúa consistencia.
Aplicar i { font-family: ... } globalmente
Puede romper Font Icon.
Aplicar svg { width: ... } globalmente
Puede afectar muchos elementos.
Clonar Card y dejar el icono anterior
Actualiza icono y contenido.
Utilizar diez animaciones Lottie en una página
Reduce movimiento.
Agregar Lottie solo porque se mueve
Utilízala cuando aporte.
Hacer depender contenido importante de una animación
Agrega texto.
Utilizar Lottie + Hover + Animate on scroll sin necesidad
Evita exceso.
Ocultar Lottie en mobile como primera solución
Intenta adaptarla.
Creer que PayPal está listo porque aparece un botón
Debes comprobar funcionamiento.
Cambiar precio visible y asumir que cambia el pago
Son configuraciones diferentes.
Clonar un Widget PayPal sin revisar su configuración
Puede conservar la operación anterior.
Colocar secretos o tokens privados en HTML
Nunca.
Agregar JavaScript casero para “hacer funcionar” un pago
Utiliza una integración apropiada.
No comprobar moneda o importe
Verifica la operación real.
Publicar PayPal sin probar el flujo
No lo hagas.
Confundir Twitter Widget con Twitter Incrustado
Revisa las opciones reales de cada uno.
Aplicar CSS global sobre button
Puede afectar PayPal y todos los Buttons.
Aplicar CSS global sobre iframe
Puede afectar Widgets externos.
Eliminar Classes internas de un componente personalizado
Puede romper la interacción.
Clonar componentes personalizados con IDs duplicados
Revisa la estructura.
Abrir Code editor global para una modificación visual
Utiliza primero Estilo.
No utilizar Navigator
Aumenta considerablemente el riesgo de modificar el nivel incorrecto.
Flujo recomendado para Font Icon
1. DEFINIR EL CONCEPTO
↓
2. AGREGAR FONT ICON
↓
3. ELEGIR UN ICONO COHERENTE
↓
4. AGREGAR TEXTO SI CORRESPONDE
↓
5. REVISAR NAVIGATOR
↓
6. PERSONALIZAR TAMAÑO Y COLOR
↓
7. REVISAR LINKED STYLES
↓
8. REVISAR MOBILE
↓
9. GUARDAR CAMBIOS
↓
10. VER PÁGINA
Flujo recomendado para Lottie
1. DEFINIR SI LA ANIMACIÓN APORTA
↓
2. AGREGAR LOTTIE
↓
3. CONFIGURAR EL RECURSO
↓
4. UTILIZAR NAVIGATOR
↓
5. AJUSTAR CONTENEDOR
↓
6. EVITAR ANIMACIONES ADICIONALES INNECESARIAS
↓
7. REVISAR DESKTOP
↓
8. REVISAR TABLET
↓
9. REVISAR CELULAR
↓
10. GUARDAR CAMBIOS
↓
11. VER PÁGINA
↓
12. COMPROBAR LA ANIMACIÓN REAL
Flujo recomendado para PayPal
1. DEFINIR EL OBJETIVO COMERCIAL
↓
2. AGREGAR / SELECCIONAR PAYPAL
↓
3. ABRIR NAVIGATOR
↓
4. REVISAR CONTENIDO
↓
5. COMPRENDER CADA CAMPO
↓
6. CONFIGURAR ÚNICAMENTE DATOS REALES
↓
7. NO INSERTAR SECRETOS
↓
8. COMPROBAR INFORMACIÓN VISIBLE
↓
9. REVISAR RESPONSIVE
↓
10. GUARDAR CAMBIOS
↓
11. VER PÁGINA
↓
12. PROBAR EL FLUJO MEDIANTE EL MÉTODO APROPIADO
↓
13. CONFIRMAR RESULTADO
↓
14. SOLO ENTONCES UTILIZARLO EN PRODUCCIÓN
Flujo recomendado para Widgets externos
1. IDENTIFICAR EL PROVEEDOR
↓
2. CONFIGURAR UN RECURSO VÁLIDO
↓
3. AGREGAR CONTEXTO
↓
4. UTILIZAR NAVIGATOR
↓
5. REVISAR RESPONSIVE
↓
6. GUARDAR CAMBIOS
↓
7. VER PÁGINA
↓
8. INTERACTUAR REALMENTE
↓
9. REVISAR PERIÓDICAMENTE
Checklist de Font Icon
El icono representa correctamente el contenido.
No es ambiguo.
Tiene texto cuando lo necesita.
Mantiene el mismo estilo que los demás.
El tamaño es coherente.
El color tiene suficiente contraste.
No apliqué CSS global sobre i.
No sobrescribí Font family.
Al clonar actualicé el icono.
Mobile se ve correctamente.
Checklist de Social icons
Solo aparecen redes utilizadas.
Cada icono tiene un destino real.
Los Links no están duplicados.
No quedan perfiles de ejemplo.
Los iconos se reconocen.
Desktop funciona.
Mobile funciona.
Probé todos los Links.
Checklist de Lottie
La animación aporta valor.
No es únicamente relleno.
El recurso es confiable.
Se visualiza correctamente.
El movimiento no distrae.
No depende únicamente de Hover.
No agregué animaciones excesivas.
El tamaño es adecuado.
Desktop funciona.
Tablet funciona.
Celular funciona.
No ralentiza innecesariamente la página.
Probé la animación mediante Ver página.
Checklist de PayPal
Sé exactamente para qué utilizaré el Widget.
Revisé los campos disponibles.
No inventé configuraciones.
No inserté contraseñas.
No inserté secretos de API.
No inserté tokens privados.
La información visible coincide con la operación.
El producto correcto está asociado cuando corresponde.
El importe es correcto cuando corresponde.
La moneda es correcta cuando corresponde.
Después de clonar revisé el Widget completo.
Desktop funciona.
Tablet funciona.
Celular funciona.
Probé el flujo real mediante el método apropiado.
Sé qué ocurre al completar.
Sé qué ocurre al cancelar.
No publiqué una acción de pago sin verificar.
Checklist de Widgets externos
El recurso sigue disponible.
El contenido es público para quien corresponda.
El Widget correcto está seleccionado.
Agregué contexto cuando corresponde.
No depende exclusivamente del contenido externo.
Width y Height son adecuadas.
Mobile funciona.
No apliqué CSS global peligroso.
Guardé los cambios.
Probé realmente la interacción.
Checklist general
Elegí el componente por su función.
No lo elegí solamente por el efecto.
Utilicé Navigator.
Identifiqué el nivel correcto.
No quedan contenidos de ejemplo.
Los IDs personalizados son únicos.
Las Classes estructurales se conservaron.
Linked styles tiene el alcance esperado.
No apliqué CSS global sobre i.
No apliqué CSS global sobre svg.
No apliqué CSS global sobre button.
No apliqué CSS global sobre iframe.
No modifiqué Font family globalmente.
No agregué JavaScript innecesario.
No coloqué credenciales privadas.
Desktop funciona.
Tablet funciona.
Celular funciona.
Guardé los cambios.
Revisé mediante Ver página.
Probé realmente cualquier interacción funcional.
En resumen
Estos componentes requieren niveles de comprobación diferentes.
Font Icon
FONT ICON
→ representación visual
Utilízalo para acompañar información,
pero no hagas depender todo el significado de un símbolo ambiguo.
Social icons
SOCIAL ICONS
→ acceso visual a redes reales
No muestres plataformas que no utilizas
y prueba cada Link.
Lottie
LOTTIE
→ animación gráfica
Utilízala cuando el movimiento aporte,
no simplemente porque el componente está disponible.
PayPal
PAYPAL
→ Widget potencialmente relacionado con una acción comercial
Y aquí la regla es crítica:
WIDGET VISIBLE
≠
PAGO VERIFICADO
Antes de utilizarlo comercialmente
debes comprender:
QUÉ HACE
↓
QUÉ DATOS UTILIZA
↓
QUÉ IMPORTE / OPERACIÓN REPRESENTA
↓
QUÉ OCURRE AL COMPLETAR
↓
QUÉ OCURRE AL CANCELAR
No coloques credenciales secretas en el bloque público.
Twitter y otros Widgets
WIDGET EXTERNO
→ depende también del proveedor
Y recuerda que puede existir más de una forma de incorporar contenido relacionado con el mismo servicio.
No asumas que:
Twitter de Widgets
y:
Twitter de Incrustados
son necesariamente idénticos.
Revisa sus opciones reales.
En componentes personalizados
la regla es:
OBSERVAR ESTRUCTURA
ANTES DE MODIFICAR
Utiliza:
Navigator;
Contenido;
Estilo;
antes de recurrir a HTML.
Y cuando necesites HTML
abre:
Editar código HTML <>
primero para comprender.
Finalmente
el flujo general es:
ELEGIR COMPONENTE
↓
ENTENDER SU FUNCIÓN
↓
CONFIGURAR
↓
REVISAR NAVIGATOR
↓
REVISAR RESPONSIVE
↓
GUARDAR CAMBIOS
↓
VER PÁGINA
↓
PROBAR REALMENTE
Un componente visual se comprueba visualmente.
Un componente interactivo se comprueba interactuando.
Y un componente que puede participar en una operación comercial:
debe comprobarse funcionalmente antes de presentarlo al visitante como operativo.
¿Necesitas más ayuda?
Si este artículo no resolvió tu consulta, nuestro equipo puede ayudarte personalmente.
Soporte por WhatsApp