Medios

El campo Medios agrega un selector de imágenes a un widget personalizado creado con los complementos maestros Creador de widgets. Los editores eligen una imagen de la biblioteca multimedia o cargan una nueva en Elementor, y su plantilla imprime su URL, ID o texto alternativo. Úselo para fotos de perfil, logotipos, imágenes de héroes, tomas de productos y cualquier otra ranura para imágenes individuales.

Los medios son uno de los campos que puede utilizar en el Widget Builder de la versión gratuita. El complemento gratuito incluye un Widget Builder limitado y viene con el conjunto completo de campos Complementos maestros Pro.

Qué hace el campo de los medios #

• Agrega el cuadro de imagen de Elementor al panel de su widget, con un botón Elegir imagen.
• Elegir imagen abre la ventana multimedia de WordPress, donde los editores cargan un archivo, eligen uno de la biblioteca multimedia o insertan uno de una URL.
• El campo almacena las imágenes url, id y alt texto y su plantilla imprime lo que necesita.
• Funciona en la pestaña HTML y en la pestaña CSS, por ejemplo como imagen de fondo.

Si aún no ha creado un widget, lea el Descripción general del creador de widgets primero.

Antes de empezar #

• WordPress con Elementor instalado y activo.
• Complementos maestros para Elementor instalados y activos. El guía de instalación configuración de cubiertas.
• Un widget abierto en Widget Builder. El ejemplo de esta guía es un widget de “Tarjeta de perfil” con un campo de Medios llamado profile_photo y un campo de texto para el nombre.

Cómo agregar un campo Medios #

1. Ir a Complementos maestros > Creador de widgets y abre tu widget.
2. En el Contenido tab, agregue una sección, por ejemplo “Perfil”.
3. Tipo media en el cuadro de búsqueda de campo de la izquierda.
4. Arrastrar Medios en la sección. Su configuración se abre en la barra lateral izquierda.

Se explicaron las opciones de campo de medios #

• Etiqueta es el texto encima del cuadro de imagen en Elementor, por ejemplo “Foto de perfil”.
• Nombre ¿es el ID único del campo y el inicio de sus tokens profile_photo da {{ profile_photo.url }}. Sólo letras, números y guiones bajos.
• Descripción aparece debajo del cuadro de imagen en Elementor.
• Tipos de medios enumera la imagen (la predeterminada), video, audio, PDF, SVG, hoja de cálculo, documento, presentación y archivo. En nuestras pruebas esta configuración no llegó a Elementor. Un campo configurado en Video todavía aparecía como un selector de imágenes normal, así que trate el campo Medios como un campo de imagen.

No hay una configuración de imagen predeterminada, por lo que una nueva copia del widget comienza sin imagen hasta que un editor elige una. Las configuraciones comunes funcionan más abajo que en otros campos.

Imprime la imagen en tu plantilla #

El campo contiene varios valores e imprimes cada uno con un punto:

• {{ profile_photo.url }} es la URL del archivo de imagen. {{ profile_photo }} por sí solo imprime la misma URL.
• {{ profile_photo.id }} es el ID de la biblioteca multimedia de la imagen.
• {{ profile_photo.alt }} es el texto alternativo que tenía la imagen en la Mediateca cuando el editor la eligió.

Envuelve el <img> etiquete un cheque, para que nada se imprima mientras el campo está vacío:

{% if profile_photo.url %}
  <img class="profile-photo" src="{{ profile_photo.url }}" alt="{{ profile_photo.alt }}">
{% endif %}

El token también funciona en la pestaña CSS, por ejemplo para una imagen de fondo:

.profile-card {
  background-image: url('{{ profile_photo }}');
}

Si sus estilos de imagen no se aplican, haga que el selector sea más específico. Elementor tiene sus propias reglas para imágenes dentro de widgets y en nuestras pruebas .profile-photo el solo no ganó contra ellos, mientras .profile-card .profile-photo hizo.

Hacer clic Guardar configuración cuando hayas terminado.

Utilice el control de medios en Elementor #

Agregue el widget a una página o recargue el editor si la página ya estaba abierta. El cuadro de imagen muestra la imagen actual. Pase el cursor sobre él y haga clic Elija Imagen para cambiarlo o use el ícono de la papelera para borrarlo.

Se abre la ventana Insertar medios. Cargue un archivo debajo Cargar archivos, elige uno debajo Biblioteca multimedia, sau utiliza Insertar desde URL. El panel de detalles de la derecha muestra el texto alternativo de la imagen, que es lo que {{ profile_photo.alt }} impresiones. Rellénelo allí antes de hacer clic Seleccionar.

Casos de uso comunes #

• Fotos de perfil y tarjetas de miembro del equipo.
• Logotipos en encabezados, pies de página y listas de clientes.
• Imágenes de héroes y pancartas, como <img> etiqueta o fondo CSS.
• Imágenes de productos o características dentro de tarjetas.

Consejos para trabajar con el campo de los medios #

• Proteja siempre el <img> etiquetar con {% if profile_photo.url %} entonces un campo vacío no deja una imagen rota.
• Imprimir {{ profile_photo.alt }} en el atributo alt y agregue texto alt en la biblioteca multimedia antes de elegir la imagen.
• Usar object-fit: cover con un ancho y alto fijos cuando es necesario alinear imágenes de diferentes formas.
• Dale a las reglas de imagen dos clases, como por ejemplo .profile-card .profile-photo, por lo que los propios estilos de imagen de Elementor no los anulan.
• Para varias imágenes, utilice el Campo de galería. Para iconos o símbolos SVG, utilice el Campo de iconos.

Preguntas frecuentes #

Envolviendo #

Agregue el campo Medios, imprima {{ field_name.url }} y {{ field_name.alt }} dentro de un {% if %} verifique y proporcione a sus estilos de imagen un selector específico. Luego, los editores recogen o cargan imágenes directamente desde Elementor. Para que un enlace vaya con la imagen, agregue un campo URLși verifică precios por lo que incluye cada plan.