Elementos de diseno, texto y animaciones
Los elementos de diseno son los componentes individuales que utiliza para construir contenido dentro de los bloques de su sitio web. Desde texto e imagenes hasta botones y animaciones, dominar estos elementos le da control total sobre la apariencia de su sitio y la experiencia del usuario.
Acceso rapido: Haga clic en cualquier elemento en modo Edicion para ver sus opciones de personalizacion en el panel derecho.
Elementos de texto
El texto es la base del contenido web. El constructor de sitios web proporciona herramientas completas de formato de texto:
Encabezados (H1-H6)
| Nivel | Uso | Buena practica |
|---|---|---|
| H1 | Titulo principal de la pagina | Uselo solo una vez por pagina para SEO |
| H2 | Encabezados de seccion | Divisiones principales del contenido |
| H3 | Encabezados de subseccion | Temas dentro de las secciones |
| H4-H6 | Encabezados menores | Jerarquias detalladas |
Opciones de formato de texto
- Familia de fuentes: Elija entre las fuentes del tema o la biblioteca de Google Fonts
- Tamano de fuente: Tamanos predefinidos (Pequeno, Normal, Grande, Extra grande) o valores personalizados en pixeles
- Peso de fuente: Ligero, Normal, Medio, Semi-negrita, Negrita
- Estilo de fuente: Normal, Cursiva, Subrayado, Tachado
- Color del texto: Colores del tema, colores personalizados o degradados
- Alineacion del texto: Izquierda, Centro, Derecha, Justificado
- Altura de linea: Controle el espacio entre lineas
- Espaciado entre letras: Ajuste el espacio entre caracteres
Resaltados y efectos de texto
- Resaltado de fondo: Agregue un fondo de color al texto
- Sombra de texto: Agregue profundidad con efectos de sombra
- Texto en degradado: Aplique degradados de color al texto
- Insignias: Pequenas etiquetas para enfatizar
Imagenes
Las imagenes hacen que su contenido sea visualmente atractivo. Aqui tiene todo lo que puede hacer con ellas:
Agregar imagenes
- Subir: Desde su dispositivo (JPG, PNG, GIF, WebP, SVG)
- Unsplash: Busque millones de fotos gratuitas y de alta calidad
- URL: Enlace a imagenes externas
- Iconos: Elija de la biblioteca de iconos
Personalizacion de imagenes
| Opcion | Descripcion |
|---|---|
| Tamano | Controles de ancho y alto, opcion de mantener la proporcion |
| Forma | Cuadrado, Redondeado, Circulo, Radio de borde personalizado |
| Borde | Color, grosor, estilo (solido, guiones, puntos) |
| Sombra | Sombra proyectada con controles de desenfoque, extension y desplazamiento |
| Filtros | Brillo, Contraste, Saturacion, Escala de grises, Sepia, Desenfoque |
| Superposicion | Superposicion de color con opacidad |
| Texto alternativo | Descripcion para accesibilidad y SEO |
| Enlace | Haga la imagen clicable hacia una URL o pagina |
Optimizacion de imagenes
Las imagenes se optimizan automaticamente al subirlas:
- Redimensionadas segun la ubicacion de visualizacion
- Comprimidas para una carga mas rapida
- Convertidas a formatos modernos (WebP) cuando es compatible
- Carga diferida para el rendimiento
Videos
Integre videos para atraer a sus visitantes con contenido dinamico:
Fuentes de video
- YouTube: Pegue la URL del video para una integracion automatica
- Vimeo: Alojamiento de video profesional
- Subir: Aloje videos directamente (MP4, WebM)
- Video de fondo: Videos en bucle como fondo de seccion
Opciones de video
- Reproduccion automatica: Comienza a reproducirse automaticamente (silenciado para navegadores)
- Bucle: Repite el video continuamente
- Controles: Mostrar/ocultar controles del reproductor
- Miniatura: Imagen de vista previa personalizada
- Responsive: Se ajusta al ancho del contenedor
Botones
Los botones de llamada a la accion guian a los visitantes a actuar:
Estilos de botones
| Estilo | Apariencia | Ideal para |
|---|---|---|
| Primario | Fondo solido, color principal del tema | Llamadas a la accion principales |
| Secundario | Color mas claro o contorno | Acciones alternativas |
| Contorno | Solo borde, fondo transparente | Acciones sutiles |
| Enlace | Solo texto, sin fondo | Navegacion, menos enfasis |
Personalizacion de botones
- Tamano: Pequeno, Mediano, Grande, Bloque (ancho completo)
- Forma: Cuadrado, Redondeado, Pastilla
- Icono: Agregue un icono antes o despues del texto
- Enlace: URL, pagina, ancla, correo electronico, telefono
- Efectos al pasar: Cambio de color, escala, sombra
Iconos
Los iconos comunican significado rapidamente y agregan interes visual:
Biblioteca de iconos
- Iconos de Font Awesome (miles disponibles)
- Iconos SVG personalizados
- Soporte de emojis
Opciones de iconos
- Tamano: Desde 12px hasta 120px y mas
- Color: Colores del tema o personalizados
- Fondo: Solido, degradado o transparente
- Forma: Ninguna, Circulo, Cuadrado, Redondeado
- Rotacion: Voltee o rote los iconos
Enlaces
Conecte su contenido con enlaces clicables:
Tipos de enlaces
- Pagina interna: Enlace a otras paginas de su sitio
- URL externa: Enlace a otros sitios web
- Ancla: Salto a una seccion de la misma pagina
- Correo electronico: Abre el cliente de correo (mailto:)
- Telefono: Llamada con un clic en movil (tel:)
- Archivo: Descarga de documentos
Opciones de enlaces
- Abrir en nueva pestana: Mantenga a los visitantes en su sitio
- No-follow: Para enlaces externos/patrocinados
- Estilo: Color, subrayado, efectos al pasar
Listas
Organice la informacion de forma clara con listas:
Tipos de listas
- Listas con vinetas: Elementos no ordenados con varios estilos de vinetas
- Listas numeradas: Secuencias ordenadas
- Listas con iconos: Iconos personalizados en lugar de vinetas
- Lista de verificacion: Tareas con casillas de verificacion
Animaciones
Agregue movimiento para hacer su sitio dinamico y atractivo:
Categorias de animaciones
| Tipo | Activador | Ejemplos |
|---|---|---|
| Al desplazar | Cuando el elemento entra en la zona visible al desplazarse | Fundido, Deslizamiento hacia arriba, Zoom, Rebote |
| Al aparecer | Cuando la pagina se carga o el elemento aparece por primera vez | Fundido, Deslizamiento, Escala, Rotacion |
| Al pasar el cursor | Cuando el raton pasa sobre el elemento (imagenes) | Zoom, Rotacion, Brillo, Superposicion |
Opciones de animacion
- Efecto: Elija entre mas de 20 efectos de animacion
- Duracion: Cuanto tiempo dura la animacion
- Retraso: Espera antes de que comience la animacion
- Direccion: Desde que direccion entra el elemento
- Repeticion: Una sola vez o cada vez que sea visible
Efectos de animacion populares
| Efecto | Descripcion |
|---|---|
| Fundido | Aparece gradualmente desde la transparencia |
| Deslizamiento hacia arriba | Entra desde abajo |
| Deslizamiento izquierda/derecha | Entra desde los lados |
| Zoom | Crece desde un tamano mas pequeno |
| Rebote | Rebota hasta su posicion |
| Volteo | Rotacion 3D |
| Rotacion | Gira para aparecer |
Buenas practicas
Consejos de diseno
- Use fuentes consistentes en todo el sitio - limitese a 2-3 familias de fuentes
- Asegure suficiente contraste de color para la legibilidad (directrices WCAG)
- Agregue texto alternativo a todas las imagenes para la accesibilidad
- Use las animaciones con moderacion - demasiadas pueden distraer
- Haga los botones lo suficientemente grandes para tocar en movil (minimo 44x44 pixeles)
Consideraciones de rendimiento
- Comprima las imagenes antes de subir archivos grandes
- Use el formato SVG para iconos en lugar de imagenes cuando sea posible
- Limite la cantidad de fuentes personalizadas cargadas
- Evite la reproduccion automatica de videos en movil
- Pruebe el rendimiento de las animaciones en dispositivos mas lentos