Introducción
Uso de Sitely
Elementos
Cómo
Las imágenes son una parte importante de la mayoría de los sitios web. Ayudan a que tus visitantes se involucren con tus páginas y entiendan mejor el mensaje de tu sitio. En Sitely, tienes muchas formas de usar y añadir contenido de imagen a tus páginas. La opción más simple es arrastrar una imagen desde tu computadora (desde el Finder) directamente al lienzo de Sitely. Se colocará en el lienzo como un elemento de imagen y normalmente se verá así::
La imagen, en la mayoría de los casos, se colocará con sus dimensiones y relación de aspecto originales. Para ajustar el tamaño de la imagen manteniendo sus proporciones, mantén presionada la tecla Mayús (Shift) mientras arrastras un tirador de la esquina. También puedes cambiar las dimensiones de la imagen arrastrando cualquiera de los tiradores de redimensionamiento sin mantener presionada la tecla Mayús. Esta acción aumentará el tamaño del cuadro de imagen manteniendo la imagen dentro de sus límites. Esto se denomina hacer que la imagen ‘Ajuste’ y puede verse en el panel de estilo.
En el ejemplo anterior se ha seleccionado la casilla ‘Estirar’, así como la opción de ‘Ajustar’ la imagen. Esta sección del panel de estilo también te indica si tus imágenes serán adecuadas para mostrarse en dispositivos de alta resolución. En la mayoría de los casos, se debe evitar cualquier imagen de menos de 2x si quieres mantener un aspecto de alta calidad en tu sitio web. La otra opción de ‘Estirar’ es ‘Rellenar’. Al seleccionar esta opción, la imagen se ampliará proporcionalmente hasta llenar por completo la caja.
La opción Rellenar recortará efectivamente la imagen; en este ejemplo, la parte superior e inferior de la imagen se recortan. De forma predeterminada, la imagen recortada se centrará dentro de la caja de imagen. Sin embargo, puedes cambiar el enfoque de la imagen con los iconos de colocación en el panel de estilo. Allí puedes elegir mostrar en la caja la parte superior, media o inferior de tu imagen. Si se tratara de una imagen apaisada colocada en una caja vertical, podrías configurar la caja para mostrar la izquierda, el centro o la derecha de la imagen.
Puedes usar las opciones de estilo en el panel de Estilo para añadir bordes, redondeado de esquinas, sombras, opacidad o filtros a tus imágenes. Aquí tienes algunos ejemplos de las opciones disponibles.
Redondeado
+ Borde
Redondeado
+ Sombra
Redondeado completo
Redondeado + Borde + Filtro de escala de grises
El elemento de imagen es una gran herramienta cuando empiezas a diseñar tu página web. Coloca efectivamente un marcador de posición de imagen en el lienzo que luego puedes rellenar con la imagen que elijas. Cuando se coloca por primera vez en el lienzo, se ve así.
Cuando estés listo para añadir imágenes, simplemente selecciona el marcador de posición y añade tu imagen desde el panel de estilo.
Al hacer clic en el botón ‘Añadir…’ podrás buscar una imagen en tu computadora. También tienes otras fuentes de imagen para elegir. Al hacer clic en el selector ‘Bitmap (PNG, JPEG, GIF)’ se mostrarán las fuentes disponibles.
Suelen ser elementos puramente gráficos como logotipos, iconos o ilustraciones. Se crean en aplicaciones de gráficos vectoriales y suelen tener un tamaño de archivo muy pequeño. Son buenos en diseño web porque se pueden escalar a cualquier tamaño manteniendo su nitidez. También tienen la ventaja de que se pueden recolorear directamente en Sitely usando la opción de superposición de color en el panel de estilo. Aquí tienes un ejemplo de un logotipo en SVG tanto en su forma monocroma básica como con una superposición de color aplicada.
Algunos SVG ya estarán creados con varios colores. Pueden utilizarse tal cual y conservarán todas las ventajas del formato SVG. Sin embargo, usar la opción de superposición de color eliminará la característica multicolor del SVG. Aquí tienes un ejemplo:
Sitely es compatible con las combinaciones híbridas foto‑video que pueden capturar los iPhone. Al introducir tanto la imagen como el archivo de video exportado desde Fotos, puedes crear una página que permita a tus visitantes ver e interactuar con la Live Photo. Puedes obtener los archivos de imagen y video de una Live Photo sincronizando tus fotos con Fotos en el Mac y luego seleccionando la foto y usando el comando File -> Export Unmodified Original.
Esta opción te da acceso rápido a tres de las bibliotecas de imágenes de stock más populares de Internet: Pixabay, Unsplash y Pexels. Solo pulsa el botón ‘Seleccionar’, elige tu plataforma y comienza la búsqueda de la imagen perfecta.
Nota importante: Aunque las imágenes de stock de estas plataformas generalmente estarán disponibles para su uso bajo condiciones de licencia muy liberales y sin costo, el acceso a las bibliotecas a través de la interfaz de Sitely no implica que las imágenes puedan usarse sin restricciones en todas las situaciones, particularmente las imágenes que puedan contener rostros de personas reales o marcas comerciales. Se recomienda verificar los términos de licencia específicos de cualquier imagen que utilices en el sitio web de la plataforma correspondiente.
Esta opción te permite añadir un feed de Instagram a tu página. Esencialmente, tu sitio web obtendrá las imágenes de tu feed, eliminando la necesidad de que actualices tu sitio cuando cambien las imágenes de tu feed. Tendrás que autorizar a Sitely para acceder a tu feed mediante las opciones de configuración antes de poder usar esta función.
Esta opción te permite añadir imágenes alojadas en un servidor remoto introduciendo la URL de la imagen en el panel de estilo. Esto a menudo se denomina ‘hot-linking’ y solo debe usarse si eres el propietario del sitio al que enlazas o tienes permiso del propietario del sitio.
Todas figuran en el panel de estilos, como se muestra aquí. Al marcar las casillas de estilo se revelarán ajustes adicionales para cada opción. Además, podrás adjuntar cualquiera de las acciones al hacer clic de Sitely a tus imágenes, así como efectos de animación al desplazar o de una sola vez.
Esta opción te permite elegir una segunda imagen para mostrar diferencias entre imágenes. Se usa a menudo en inmobiliaria, retoque fotográfico, ilustración, restauración y arte.
Cómo te sientas respecto a proteger imágenes es algo personal. Inevitablemente, poner algo en la web lo hace público y podría invitar a que alguien lo robe. Aunque alguien decidido a robar tu contenido siempre encontrará la forma, hay algunas cosas que se pueden hacer para mitigar, sin dejar de mostrar tu trabajo.
En el nivel más simple, puedes evitar que la imagen se arrastre desde la página o se guarde tras un clic derecho. Para muchos de nuestros clientes, históricamente esta ha sido una solución “suficientemente buena” que estaban buscando.
Incrustar información de copyright en la imagen, que se tomará de la imagen original si está disponible, también suele ser una buena solución. Por ejemplo, los fotógrafos la encontrarán en la cámara o en su software de procesado como Lightroom.
Ambas técnicas no ayudarán con usuarios algo más sofisticados, que verán el código fuente de la página, o con rastreadores que descargan imágenes en nombre de sistemas de IA o servicios de búsqueda de imágenes. Para esos casos desarrollamos una opción novedosa “Ocultar de búsqueda e IA”, que no es imposible de sortear, pero requiere un adversario enfocado, con conocimientos técnicos y que quiera tu imagen específicamente.
En última instancia, si reconoces que quien la quiera simplemente tomará la imagen pero aún necesitas mostrarla, puedes optar por reducir la resolución de la imagen, de modo que quien logre capturarla nunca tenga la mejor calidad.
Las imágenes se pueden aplicar a otros elementos de tu página de Sitely. Por ejemplo, puedes rellenar una caja estándar con una imagen. Aunque esto pueda parecer idéntico a añadir una caja de imagen a la página, esta opción te da un conjunto diferente de funciones en comparación con un elemento de imagen estándar. Lo primero que notarás son algunas opciones de estilo adicionales en el panel de estilo.
Esta opción envía tu imagen detrás de tu página web, dejando la caja original como una especie de ventana a través de la cual puedes ver la imagen del fondo. La imagen en sí permanecerá fija, mientras que la caja se desplazará sobre ella al hacer scroll en la página, revelando diferentes partes de la imagen.
Aquí puedes añadir desenfoque a tu imagen, lo cual es una forma sencilla de crear un fondo colorido para algo como la cabecera del sitio. Aquí tienes un ejemplo de una imagen desenfocada superpuesta con una caja de texto.
Estas opciones te permiten crear efectos interesantes, especialmente para imágenes a las que puedas estar aplicando efectos de desplazamiento. Estos filtros no cambian la imagen como tal, sino el fondo detrás de la imagen. Esto significa que la imagen debe ser parcialmente transparente o contener un área transparente (como en una imagen PNG) para que se vean los efectos. Para ver cómo funciona, se ha aplicado un filtro de Desenfoque a la imagen ‘Eye’ de la derecha. A medida que esta página se desplaza, la imagen se moverá hacia arriba y comenzará a superponerse con el contenido que hay encima. Cuando se superpone, el contenido detrás de la imagen se desenfocará. Hay varios efectos con los que puedes experimentar, así que pruébalos todos para familiarizarte con su funcionamiento.
Esto es para quienes tienen algún conocimiento de efectos de fusión. Se usan a menudo en artes gráficas para crear efectos interesantes. Para que la fusión funcione, debe haber al menos dos elementos, uno colocado encima del otro. El efecto de fusión se aplica al elemento superior. La opción elegida fusionará ambos elementos para crear un efecto. En este ejemplo, se ha fusionado una caja roja con una imagen usando el efecto de fusión ‘quemar color’.
+
Texto sobre una imagen desenfocada
En situaciones donde tengas varias cajas anchas en una página y quieras que muestren la misma imagen de fondo, simplemente añade la misma imagen como fondo para cada caja y activa la opción ‘Fijo en ventana’. Esto establecerá la imagen de fondo para todas las cajas de la página hasta que se encuentre una nueva imagen de fondo. Esto permite crear elementos de página interesantes, como en el siguiente ejemplo.
En este ejemplo, se han añadido dos cajas anchas a la página, cada una con un desplazamiento de fondo aplicado. Se aplicó la misma imagen de fondo a ambas cajas y se seleccionó la opción ‘Fijo en ventana’.
La opción de desplazamiento de fondo oculta una parte de la imagen de fondo, lo que permite añadir otro contenido en la parte oculta de la página. Esta opción está disponible en cualquier caja de ancho completo añadida a la página. La opción se ve así.
Las cajas anchas y los bloques de diseño, incluidas las cuadrículas de imágenes/videos y las Rejillas de diseño, también pueden tener imágenes como fondo. Estos elementos abarcan todo el ancho del navegador y pueden crear elementos de página de ancho completo espectaculares en tu sitio web. Esta función se usa comúnmente para crear una sección Hero del sitio, como en la ilustración siguiente.
Añades imágenes a bloques de diseño y cajas anchas en la sección de fondo del panel de estilo. Se te presentarán las mismas opciones que en las cajas de imagen estándar, además de algunas opciones de relleno adicionales como degradados y patrones.
Las imágenes usadas como fondos son particularmente efectivas cuando se utilizan con la opción ‘Fijo en ventana’, creando un efecto tipo paralaje donde la página web se desplaza sobre la imagen al hacer scroll.
Las imágenes también se pueden añadir como fondo de los botones seleccionando el botón en el lienzo y, después, eligiendo ‘imagen’ en las opciones de relleno de Fondo del panel de estilo. Podrás añadir imágenes diferentes para cada estado del botón para crear interacción del usuario al pasar el cursor/hacer clic. Una forma común de usar esta función es utilizar variaciones de la misma imagen para los estados normal y hover. Por ejemplo, tener la imagen del estado normal a todo color y la del estado hover en versión monocroma. Así es como creamos el botón ilustrado aquí.
Una forma más práctica de crear botones con imagen podría ser colocar una imagen en el lienzo y luego hacer clic derecho sobre ella y seleccionar ‘Convertir a botón’ en el menú contextual.
Botón
Si colocas en el lienzo una imagen con un fondo y primer plano claramente definidos, Sitely puede intentar editar o incluso eliminar el fondo por ti con un solo clic. Al eliminar el fondo, la imagen se convertirá en un PNG transparente, lo que te permitirá colocarla sobre otro fondo de tu elección. Aquí tienes un ejemplo de cómo funciona esta función.
Con la imagen original seleccionada, marca la casilla editar fondo en el panel de estilo. Elige la opción para eliminar el fondo. El resultado será una imagen transparente como se ve aquí. También puedes hacer que Sitely recorte automáticamente la imagen al primer plano.
También se pueden añadir otros efectos de fondo con la misma opción: solo selecciona el efecto que quieras en la lista desplegable. Aquí tienes ejemplos de las distintas opciones disponibles.
Imagen original
Fondo bokeh
Fondo de color sólido
Desenfocar primer plano
Por favor, informa de cualquier deficiencia en esta documentación y la solucionaremos lo antes posible.
Actualizado para Sitely 6
Este sitio web utiliza cookies.
Consulta nuestra política de privacidad para más detalles.
