Añadir una imagen.

Learn DXPR BuilderBuild pagesAdd contentTekst en media

Añade una foto o ilustración que rellena su columna y escala con la pantalla.

Arte de remolino colorido mostrado con el elemento de imagen de DXPR Builder

Añade una imagen

Abre tu página con la sesión iniciada: los controles del constructor aparecen cuando pasas el cursor sobre la zona de contenido. Crea tu primera página muestra lo básico.

  1. Pasa el cursor sobre la columna y haz clic en + en su barra de controles, o haz clic en Add Elements en una página vacía. Abre la pestaña Content y haz clic en Image. Queda arriba de la columna y su diálogo de ajustes se abre.
  2. En Image, haz clic en Select Image. En el Media browser, filtra por nombre si quieres, marca una foto y haz clic en Insert selected.
  3. Haz clic en el encabezado SEO para expandirlo. Reemplaza cualquier texto en Alt attribute con una descripción corta de la foto.
  4. Haz clic en Save en el diálogo. Luego haz clic en Save en la barra de herramientas arriba de la zona de contenido para guardar la página.

Lo que ves

El Image width predeterminado es 100%. Los lectores de pantalla anuncian tu texto alternativo. Para comprobar la escala, pon View mode en Preview y estrecha la ventana de tu navegador. Las visitas ven tus cambios cuando guardas y publicas.

Configura tu imagen

Pasa el cursor sobre el elemento y abre More > Settings en su barra de controles. Opciones:

  • Image: elige una imagen de los medios o el explorador de archivos de tu sitio, sube un archivo, o pega una URL externa.
  • Image width: un ancho CSS como 100% o 300px. El valor predeterminado es 100%.
  • Image height: un alto fijo como 400px. Déjalo vacío para conservar la forma de la foto.
  • Image link: vuelve la imagen clicable. Introduce una URL o elige una página.
  • Image link target: Same window o New window. Se muestra cuando añades un enlace.
  • Alt attribute: en la sección SEO, una descripción para lectores de pantalla y buscadores.
  • Title attribute: en la sección SEO, información extra que se muestra como tooltip en hover.

Carga de imágenes y velocidad de página

DXPR Builder gestiona la carga de imágenes nuevas automáticamente para mantener las páginas rápidas y evitar saltos de contenido. Las imágenes al inicio de la página y dentro de pestañas, carruseles y marquesinas quedan listas para mostrarse. Las imágenes más abajo pueden cargar mientras las visitas se desplazan.

Las imágenes pueden venir de tu biblioteca de medios, archivos subidos o URLs externas. Deja que las imágenes terminen de cargar en el editor antes de guardar para que DXPR Builder reserve el espacio justo. Reemplazar una imagen actualiza sus dimensiones sin cambiar tu tamaño de muestra elegido.

Las imágenes que ya están en tu sitio no se mejoran automáticamente. La velocidad de página también depende del tamaño de archivo de imagen y otro contenido. Comprueba tu página publicada en pantallas estrechas y anchas.

Si no lo ves

  • Image no está en la pestaña Content. Tu perfil de usuario lo oculta. Pide a una cuenta administradora que lo active en User profiles.
  • Ya no está tras recargar. La página no se guardó. Añádelo de nuevo y haz clic en Save en la barra de herramientas arriba de la zona de contenido.
  • El elemento de imagen está vacío. No hay imagen en el campo Image. Pasa el cursor sobre el elemento y abre More > Settings, y haz clic en Select Image.
  • Aparece un icono de imagen rota. El archivo se borró o movió en la biblioteca de medios. Pasa el cursor sobre el elemento y abre More > Settings, quita la selección y elige una imagen nueva.
  • La imagen está estirada o aplastada. Image width e Image height tienen valores fijos que no coinciden con la foto. Limpia Image height para restaurar su forma.

¿Qué sigue?

Panel Style para cambiar espaciado y fondo de tu imagen.