Mediante el uso del editor de texto e imágenes, puede ilustrar el contenido de su texto con imágenes, y crear páginas de presentación y artículos visualmente atractivos.
Estas son algunas de las formas en las que se pueden agregar imágenes a su sitio web:
- Como elemento alineado a través de un elemento de texto de la categoría Texto e imágenes.
- Mediante el elemento Imagen y texto, en el que se pueden agregar imágenes adicionales como elementos alineados.
- Como un elemento de imagen individual de la categoría Texto e imágenes.
Es importante recordar que si agrega una imagen mediante el elemento Imagen, como en el ejemplo anterior, no podrá tener elementos de contenido adicionales junto a ella, como texto y video. No es el caso de las otras dos alternativas.
Hay algunas opciones para cargar las imágenes deseadas:
- Arrastrar y soltar imágenes de carpetas locales o de otras páginas web en el panel de propiedades.
- Buscar imágenes de los archivos locales en su computadora; para ello, haga clic dentro del área Agregar imagen.
- Agregar desde la URL para una imagen publicada en otro sitio. Simplemente, copie la dirección de la imagen, péguela dentro del campo URL y haga clic en Agregar imagen. (Las imágenes que contengan el símbolo “#” o un signo de interrogación “?” en su nombre solo se pueden cargar a través de Arrastrar & soltar o la URL.)
Otra alternativa sería hacer uso de la pestaña Biblioteca de imágenes y elegir entre una variedad de imágenes disponibles.
Una vez que cargue una imagen, se ajustará de forma automática al tamaño predeterminado. Elija entre tres tamaños predefinidos de imagen: pequeño, mediano, grande y real, o defina su propio tamaño (tamaño personalizado). Si bien se le puede cambiar el tamaño a una imagen, el sistema mantiene la imagen original para que se pueda ajustar más adelante. Todas las imágenes con el tamaño cambiado aparecerán con detalles mejorados en una pantalla de alta resolución Retina Display.
Haga clic en una imagen, para abrir a la derecha un panel de edición con opciones de personalización, tamaño de configuración, borde, estilos de ajuste y efectos.
Puede cambiar la imagen seleccionada en cualquier momento haciendo clic en el botón Cambiar. Elija Editar y la imagen se abrirá en un editor externo, donde puede realizar una edición básica de imágenes, como recortar, voltear, girar, cambiar el tamaño y agregar efectos especiales limitados.
Las opciones predeterminadas le permitirán especificar el tamaño y la altura que desea para establecer dimensiones de la imagen personalizadas. Al cambiar el tamaño, se recomienda hacer clic en el ícono del candado para restringir las proporciones de la imagen y evitar la distorsión. Por ejemplo, cuando cambiamos el ancho, la altura se ajustará de forma proporcional para garantizar que la relación y la perspectiva se mantengan respecto a las de la imagen original. Para regresar una imagen a su tamaño original, haga clic en el enlace Restablecer.
Si cambia el ancho y el tamaño de una imagen en el editor, esta solo se ajustará a las nuevas dimensiones de forma visual cuando el navegador cargue la página, pero el archivo de la imagen mantiene el tamaño original. Para optimizar imágenes más grandes y lograr una carga más rápida, se recomienda cambiar el tamaño de las imágenes en un programa externo de edición de imágenes, antes de cargar la imagen al editor de texto e imágenes.
El campo Título activado por el ratón le permite especificar texto descriptivo relacionado con la imagen, que aparecerá cuando un usuario coloque el cursor sobre la imagen. Las leyendas dinámicas también son importantes para la correcta optimización del motor de búsqueda de su sitio web; por lo tanto, se recomienda agregarlos en imágenes clave de sus páginas.
Para modificar aún más la imagen, puede aplicar un Efecto de imagen, que será visible una vez que el cambio se haya guardado; para ello, haga clic fuera del elemento editado.
Establecer la alineación de imagen y agregar un enlace sobre la imagen son otras opciones disponibles. Seleccionar el ícono para agregar un enlace, revelará el siguiente menú secundario en la parte inferior del menú de la derecha.
Para ajustar el espacio alrededor de la imagen en relación con el contenido adicional del texto, especifique el relleno en píxeles de la parte superior, inferior, izquierda y derecha.
Si desea agregar un borde a las imágenes, especifique el ancho del borde de la imagen en píxeles y seleccione el color de borde deseado. Al hacer clic en el ícono de color del borde, se abrirá un cuadro de herramientas de colores donde puede aplicar o eliminar el color del borde.
Las imágenes activadas por el ratón agregan un elemento de interactividad al sitio y, además, pueden indicar que algo sucederá si se hace clic en la imagen. Esto puede ser útil en los casos en los que se ha agregado in enlace sobre la imagen.
Para crear una imagen activada por el ratón con efectos de transición, cargue un segundo archivo de imagen debajo de la opción Imagen activada por el ratón. Una vez que se haya cargado la imagen activada por el ratón, puede seleccionar entre una lista de transiciones para usar entre las dos imágenes.
Si bien los efectos de fundido de entrada y de disolver a primera vista parecen muy similares, hay una gran diferencia cuando se aplican las imágenes que tienen partes transparentes. Con el fundido de entrada, la imagen normal se mantiene, mientras que la imagen activada por el ratón se intensifica en la parte superior y ambas se combinan. Con el efecto de disolver, la imagen normal se atenúa, mientras que la imagen activada por el ratón se intensifica en la parte superior.
Según el tamaño de imagen que seleccionó, los controles le permiten ajustar las imágenes en el editor de texto e imágenes. Puede recortar fácilmente la imagen y hacer zoom en un área específica de una imagen sin tener que usar otra herramienta. Podrá ver el resultado instantáneamente y en el contexto de la página. Esta función también se aplica a las imágenes al pasar el ratón por encima. La función de recorte y zoom de la imagen está disponible cuando las Opciones avanzadas están habilitadas; la imagen de origen debe ser más grande que la imagen visualizada.
Al hacer clic en imágenes más grandes que su tamaño de visualización, aparecerá una barra deslizante de zoom que le permite acercar o alejar, y arrastrar y ubicar la imagen dentro de las dimensiones especificadas. Esto hace que sea fácil centrarse en un área específica, como se muestra en el ejemplo a continuación. Las imágenes con una variación al pasar el ratón por encima mostrarán un ícono de cambio en la esquina superior derecha. Al hacer clic en el ícono, se habilitarán todas las opciones de edición para la imagen al pasar el ratón por encima.