Antecedentes

El Campo de fondo entrega su widget personalizado el mismo panel de fondo que usan las secciones de Elementor: una pestaña clásica para colores e imágenes sólidos, una pestaña degradada con dos topes de color y una pestaña de video para fondos en movimiento. Dentro de los complementos maestros Creador de widgets, agregas el campo una vez, lo apuntas a un selector CSS y cada decisión en segundo plano pasa al panel Elementor.

Como todo control de Widget Builder, Background es compatible Condiciones para visibilidad del panel, la salida del token en todo el generador pasa por Motor de plantilla de sintaxis de ramita. Ambas guías explican la configuración y las limitaciones.

El fondo es un control de grupo, la misma familia que la tipografía y el borde. Eso significa que el modelo de conexión difiere de los campos de texto o color: no hay ningún token para pegar en su CSS. Completas la opción Selector y Elementor escribe los estilos de fondo en ese selector.

Qué hace el campo Antecedentes #

• Renderiza el control del grupo de fondo de Elementor en el panel de tu widget, con pestañas para cada tipo de fondo que permitas.
• Pestaña clásica: un color sólido o una imagen con la posición, el tamaño y la configuración habituales.
• Tabul de gradent: dos topes de color con controles de ubicación, ángulo y tipo.
• Pestaña de vídeo: un fondo de movimiento detrás del elemento seleccionado.
• Escribe el propio CSS al selector que proporcione, sin ningún token de plantilla involucrado.

¿Primer widget? Comience con el Descripción general del creador de widgets antes de los controles del grupo de cableado.

Antes de empezar #

• WordPress con Elementor instalado y activo.
• Complementos maestros para Elementor instalado y activo. ¿Nuevo en el complemento? Ver el guía de instalación.
• Un widget personalizado abierto en el editor Widget Builder. Nuestro ejemplo es un widget héroe cuyo <div class="hero-box"> el contenedor debe tener un fondo elegido por el editor.

Cómo agregar un campo de fondo #

En el editor Widget Builder, desplácese por el panel de campos de la izquierda hasta encontrar el archivo Antecedentes campo, listado con los otros campos del grupo de estilos, como Tipografía y Sombra de caja.

Arrástrelo a una sección debajo del Estilo tab, su hogar natural. Una vez que aterriza, las opciones del campo se abren a la izquierda.

Opciones de campo de fondo explicadas #

• Etiqueta: el texto que se muestra encima del control en Elementor, por ejemplo “Hero Background”.
• Nombre: el identificador único únicamente para el campo, letras, números y guiones bajos.
• Selector: el selector CSS al que se aplica el fondo. Esta es la conexión en sí, que se trata en la siguiente sección.
• Tipos: qué pestañas muestra el control, desde clásico, degradado y video. Recortar la lista mantiene el panel enfocado; un widget de tarjeta rara vez necesita la pestaña de video.
• Excluir: elimina los subcontroles individuales del grupo cuando desea una versión reducida del panel.
• Descripción, Mostrar etiqueta, separador y condiciones se comportan como lo hacen en todos los campos.

Apunta el campo a tu selector #

Aquí está la parte que hace tropezar a las personas si están acostumbradas a los campos de tokens: el campo Antecedentes no tiene {{shortcode}} para tu CSS. Un fondo es un conjunto de propiedades, por lo que no puede imprimir a través de un token; a {{ token }} para este campo no resulta nada útil. En su lugar, completa el Selector option y Elementor generan los estilos.

Para el contenedor héroe, el selector es:

{{WRAPPER}} .hero-box

• {{WRAPPER}} representa el contenedor del widget y abarca únicamente el fondo de este widget. Los controles de grupo usan el selector exactamente como está escrito, por lo que escribe {{WRAPPER}} tú mismo; nada se antepone a ti.
• .hero-box es el elemento dentro de su widget HTML que recibe el fondo.

Cuidado: vete {{WRAPPER}} apagado y el selector coincide con todos .hero-box en la página, el fondo de un widget aterriza en todos ellos. Los controles de grupo toman el selector sin formato, lo que hace que este sea el error más fácil de enviar.

Mantenga un fondo alternativo en la pestaña CSS del widget. Es lo que muestra el widget en una nueva caída, y los valores del control lo anulan una vez que un editor elige algo. Un color alternativo sólido se mantiene dos veces, ya que también cubre el momento antes de que una imagen de fondo pesada termine de cargarse, que de otro modo parpadea en blanco en conexiones lentas.

Utilice el control de fondo en Elementor #

Agregue el widget a una página en Elementor, recargando el editor si la página ya estaba abierta. El control aparece debajo de su etiqueta con una pestaña por tipo permitido.

En la pestaña clásica, elija un color o elija una imagen de la biblioteca multimedia con configuración de posición, tamaño y repetición. Cambie a la pestaña de gradiente para dos paradas de color con ángulo y ubicación, o a la pestaña de video para un fondo de movimiento. La vista previa se actualiza a medida que avanza.

Casos de uso comunes #

• Widgets de héroe y banner donde cada sitio quiere su propia imagen o gradiente detrás del titular.
• Fondos de tarjetas en tablas de precios, cuadrículas de equipos y listas de funciones.
• Tiras de llamada a la acción que cambian entre un color de marca y una foto por campaña.
• Encabezados de vídeo, con la pestaña de video habilitada solo en los widgets creados para ella.
• Paneles superpuestos, apuntando el selector a una capa interna encima del medio.

Consejos para trabajar con el campo Antecedentes #

• La opción Selector es toda la conexión. No busque un token de fondo en la pestaña CSS; no hay ninguno.
• Inicie siempre el selector con {{WRAPPER}}. Los controles de grupo lo usan sin formato, por lo que un selector de clase simple se filtra a cada coincidencia en la página.
• Recorta la lista de tipos. Ofrecer solo widgets clásicos y degradados mantiene los widgets de tarjetas simples y evita que los editores suelten videos a los que no pertenecen.
• Mantenga estilos alternativos en el widget CSS. Un color de fondo predeterminado en su hoja de estilo hace que el widget se pueda presentar antes de que alguien abra el control.
• Contraste del texto mental. Cuando los editores controlen el fondo, empareje el widget con controles de color para el texto que se encuentra encima.

Preguntas frecuentes #

Envolviendo #

El campo Fondo del creador de widgets trae la edición de fondo de nivel de sección a cualquier elemento de un widget personalizado: nombre el campo, configure el Selector en {{WRAPPER}} además de tu clase, y elige qué tipos ve el editor. Sigue el mismo modelo de selector que el Campo de tipografía, entonces, una vez que un grupo controla los clics, el resto también lo hace. Explora el resto del Widgets y extensiones de complementos maestros, y mira el página de precios por lo que incluye cada plan.