El Creador de widgets de complementos maestros convierte su propio HTML, CSS y JavaScript en un widget Elementor real, con controles editables en el panel Elementor. Usted diseña el panel de opciones, lo conecta a su código con códigos cortos y el widget se comporta como cualquier elemento nativo de Elementor. Sin PHP, sin complemento repetitivo, sin editor de código separado para hacer malabarismos.
Dos sistemas se ejecutan debajo de todo lo descrito aquí: Condiciones deje que cualquier control se muestre u oculte según el valor de otro campo, y el Motor de plantilla de sintaxis de ramita convierte los nombres de tus campos en tokens, {% if %} cheques y {% for %} bucles en las pestañas HTML, CSS y JS. Ambas guías cubren la configuración y las limitaciones.
Esta guía recorre el panel de opciones de Widget Builder exactamente como aparece en la pantalla: agregar un nuevo widget, arrastrar campos a las pestañas Contenido, Estilo y Avanzado, escribir código, usar códigos cortos dinámicos, cargar bibliotecas CDN y, finalmente, exportar o importar. un widget como archivo JSON. Puede encontrar la función en el Página del creador de widgets y dentro del pleno widgets y extensiones lista.
Qué hace el creador de widgets #
La mayoría de los complementos le brindan un conjunto fijo de widgets. Este le brinda las herramientas para crear el suyo propio. Creas un panel de opciones a partir de tipos de campos ya preparados (encabezado, texto, color, número, dimensiones, conmutador y más), ingresas tu código y vinculas los campos a ese código con tokens de código corto simples. Guarde el widget y los complementos maestros registre tanto un código corto como un widget Elementor que pueda arrastrar a cualquier página.
Piense en ello como el puente entre un fragmento estilo CodePen y un widget Elementor totalmente editable. Una vez creado, cualquier persona de su equipo puede modificar los colores, el espaciado y el texto del editor Elementor sin siquiera abrir la fuente.
Antes de empezar #
- WordPress con el Elementor creador de páginas instalado y activo.
- Complementos maestros para Elementor instalado y activo. ¿Nuevo en el complemento? Sigue el guía de instalación primero.
- Html y CSS básicos. JavaScript es opcional y sólo es necesario para widgets interactivos.
Abra el Creador de widgets y agregue un nuevo widget #
Desde el panel de WordPress, vaya a Complementos maestros → Creador de widgets. Esto abre el Widgets de complementos maestros pantalla, que enumera todos los widgets personalizados que ha creado junto con su categoría, autor y código corto generado. En la parte superior verás tres botones: Agregar nuevo widget, Importar widget, y Vídeotutorial.
Hacer clic Agregar nuevo widget. A Crear nuevo widget el cuadro de diálogo aparece con dos campos:
- Título del widget (obligatorio): un nombre descriptivo para su widget, por ejemplo “Sección Hero”. Esto es lo que buscarás en el panel Elementor más adelante, así que hazlo algo que reconozcas.
- Categoría de widget: la categoría Elementor en la que está agrupado el widget (Favoritos de forma predeterminada). Las categorías mantienen sus widgets personalizados organizados en el editor.
Ingrese un título, elija una categoría y haga clic Guardar cambios. Master Addons abre el editor Widget Builder para su nuevo widget.
Dentro de la interfaz del Widget Builder #
El constructor se divide en tres áreas de trabajo, de izquierda a derecha:
- Panel de campos (izquierda): una biblioteca con capacidad de búsqueda de tipos de control que arrastra a su widget, como encabezado, texto, área de texto, URL, color, número, conmutador, seleccionar, elegir, WYSIWYG, código y fecha y hora.
- Panel de configuración (centro): el Contenido, Estilo, y Avanzado pestañas donde organiza esos campos en secciones. Este es el panel de opciones real que sus usuarios verán en Elementor.
- Panel de cod (derecha): el HTML, CSS, JS, y INCLUYE pestañas donde escribe el marcado, estilos, scripts y referencias de la biblioteca.
La barra superior contiene el nombre del widget con un ícono de configuración de equipo al lado, además Vista previa y Guardar configuración botones.
Cree el panel de opciones: pestañas Contenido, Estilo y Avanzado #
Aquí es donde diseñas los controles. Elija un campo del panel izquierdo y arrástrelo a una sección debajo Contenido, Estilo, sau Avanzado pestaña. Siga la misma lógica que utiliza Elementor: texto y enlaces en Contenido, colores y tipografía en Estilo, espaciado y diseño en Avanzado.
Cada sección tiene un Título de la sección (la etiqueta que se muestra en el encabezado de la sección) y a Nombre de la sección, un identificador único al que hará referencia en su código. Agregue tantas secciones y campos como necesite el widget.
Por ejemplo, suelte a Campo de color en la pestaña Estilo para permitir a los usuarios volver a colorear el widget y a Campo de dimensiones en la pestaña Avanzado para controlar el relleno en los cuatro lados. Cada tipo de campo tiene su propia documentación si desea la lista completa de opciones.
Códigos cortos dinámicos: conecte campos a su código #
Esta es la parte que une todo. Cada campo que agregas genera un token de código corto, y esas fichas aparecen en el Documentación barra lateral al lado del editor de código. Agregue un campo de color y obtendrá {{color}}. Agregue un campo Dimensiones y obtendrá {{dimensions}}.
Coloque estos tokens en su HTML, CSS o JS donde quiera que aterrice el valor del campo. Cuando un usuario cambia ese control en Elementor, Master Addons intercambia el token por el valor en vivo, para que su código permanezca dinámico. Una cosa a recordar: el token solo existe una vez que el campo coincidente está en el panel, así que primero cree el campo y luego haga referencia a su código corto.
Agregue su HTML, CSS y JS #
Con el panel y los códigos cortos listos, cambie a las pestañas de código a la derecha y pegue su marcado, estilos y scripts.
Tabul HTML: escriba la estructura del widget y coloque tokens de código corto a los que pertenecen los valores dinámicos.
Pestaña CSS: peina el marcado. Haga referencia a los mismos tokens de código corto para obtener los colores y dimensiones elegidos en el panel.
Pestaña JS: agregue JavaScript para cualquier comportamiento interactivo, como efectos de desplazamiento o un control deslizante. JS básico funciona, al igual que jQuery una vez que lo carga en Incluye.
Si solo necesita un campo de código dentro del panel en lugar del editor principal, el Campo de código coloca una entrada resaltada por sintaxis en sus controles.
Incluye: cargar bibliotecas CDN CSS y JS #
Abre el INCLUYE la pestaña para adjuntar bibliotecas externas de las que depende su widget. Hay dos listas: Bibliotecas CSS y Bibliotecas JS. Por cada uno agregas un Manejar (un nombre único) y a Url de origen o identificador registrado, atunci clic Agregar CSS o Agregar JS.
Así es como ingresas algo como Font Awesome desde una CDN o jQuery sin editar tu tema. Los complementos maestros solo ponen en cola la biblioteca cuando el widget está realmente en la página, para que las otras páginas permanezcan limpias.
¿necesita iconos dentro del widget? Master Addons también incluye ocho paquetes bibliotecas iconos puede utilizarlo sin una llamada CDN externa.
Configuración del widget: título, icono, categoría y exportación #
Haga clic en el icono de engranaje junto al nombre del widget en la barra superior para abrir Configuración del widget en el panel izquierdo. Desde aquí controlas cómo se presenta el widget dentro de Elementor:
- Título del widget: cambie el nombre del widget. Este título aparece en la lista de widgets de Elementor.
- Iconul widget: clic Cambiar icono para elegir un ícono del selector de íconos de complementos maestros. Puede utilizar cualquier icono incluido o una clase Font Awesome.
- Categoría de widget: elija la categoría Elementor en la que aparece el widget, para que se agrupe con widgets relacionados.
- Exportar widget: exporte toda la configuración del widget como un archivo JSON que puede guardar, realizar copias de seguridad o compartir con cualquier persona.
El selector de iconos agrupa miles de iconos en categorías como Todos los iconos, Iconos elementales, Iconos de línea simples, Iconos de fuentes icónicas, Iconos lineales e Iconos de materiales. Filtrar por nombre, seleccionar uno y hacer clic Insertar.
Importe un widget desde un archivo JSON #
Compartir funciona en ambos sentidos. De vuelta en el Widgets de complementos maestros pantalla, haga clic en Importar widget botón. El cuadro de diálogo le permite arrastrar y soltar un .json archivar o buscarlo. Solo .json se admiten archivos exportados desde Widget Builder.
Cualquiera que tenga el archivo JSON de un widget puede importarlo, panel, código, incluye y todo, y luego usarlo en su propio sitio en segundos. Eso hace que Widget Builder sea una forma ordenada de reutilizar widgets en todos los proyectos o entregarlos a un cliente.
Consejos para crear widgets personalizados confiables #
- Nombra las secciones claramente. El nombre de la sección termina en su código, así que manténgalo breve y significativo.
- Agregue un campo antes de hacer referencia a su código corto. Los tokens solo existen después de que el campo coincidente esté en el panel.
- Utilice la vista previa con frecuencia. Verifique la vista previa en vivo antes de guardarla para que vea un token faltante antes en lugar de en la página en vivo.
- Cargue bibliotecas a través de Incluye, no en línea. Mantiene su código limpio y carga scripts solo donde son necesarios.
- Exporta sobre la marcha. Una exportación JSON también funciona como copia de seguridad y archivo compartido.
- ¿no ves tu widget en Elementor? Consulta el guía de solución de problemas para correcciones de visibilidad.
Preguntas frecuentes #
¿qué es el creador de widgets de complementos maestros?
Widget Builder es una herramienta en Master Addons for Elementor que convierte su propio HTML, CSS y JavaScript en un widget Elementor editable. Diseñas un panel de opciones desde los campos de arrastrar y soltar y lo conectas a tu código con tokens de código corto, no se requiere PHP.
¿cómo funcionan los códigos cortos {{color}} y {{dimensions}}?
Cada campo que agrega al panel de opciones genera un token de código corto, como {{color}} o {{dimensions}}. Colocas el token en tu HTML, CSS o JS, y Master Addons lo reemplaza con el valor que el usuario establece en Elementor, lo que hace que el widget sea dinámico.
¿puedo agregar bibliotecas CSS y JS externas a un widget personalizado?
Sí. Abra la pestaña Incluye, agregue un identificador y una URL de origen CDN en Bibliotecas CSS o Bibliotecas JS, luego haga clic en Agregar. Master Addons carga la biblioteca solo en páginas que usan el widget, para que no ralentice el resto de su sitio.
¿cómo comparto un widget Elementor personalizado?
Abra Configuración del widget desde el icono de equipo y haga clic en Exportar widget para descargar un archivo JSON. Luego, cualquiera puede usar el botón Importar widget en la pantalla del Creador de widgets para arrastrar ese archivo JSON y usar el widget en su propio sitio.
¿se incluye el Widget Builder de forma gratuita?
El Widget Builder es parte de Master Addons for Elementor. Ver el página de precios para el desglose del plan actual y qué funciones están incluidas en cada nivel.
Envolviendo #
El Master Addons Widget Builder cierra la brecha entre un fragmento de código y un widget Elementor de producción. Cree el panel, escriba su HTML, CSS y JS, conéctelo con tokens de código corto, cargue cualquier biblioteca que necesite y luego exporte o importe el resultado como JSON. Echa un vistazo al resto del Biblioteca de widgets de complementos maestros para ver qué más puedes construir.
