
Crear un widget personalizado para Elementor paso a paso
Si trabajas con Elementor en WordPress, seguramente ya sabes lo útil que es para diseñar páginas de forma visual. Pero si eres desarrollador o estás aprendiendo, también puedes crear tus propios widgets personalizados para ampliar sus funcionalidades.
En este artículo te explico cómo crear un widget básico para Elementor desde cero. Ideal para añadirlo en un plugin o en tu tema.
Estructura del plugin
Primero, vamos a crear una carpeta para nuestro plugin con la siguiente estructura:
/mi-widget-elementor/ │ ├── mi-widget-elementor.php └── widgets/ └── saludo-widget.php
El archivo principal (mi-widget-elementor.php
) se encargará de inicializar el plugin y registrar el widget personalizado.
<?php /** * Plugin Name: Mi Widget Elementor * Description: Un widget personalizado para Elementor que muestra un saludo. * Version: 1.0 * Author: Tu Nombre */ if ( ! defined( 'ABSPATH' ) ) { exit; } function cargarWidgetPersonalizadoElementor( $widgetsManager ) { require_once plugin_dir_path( __FILE__ ) . 'widgets/saludo-widget.php'; $widgetsManager->register( new \SaludoWidget() ); } add_action( 'elementor/widgets/register', 'cargarWidgetPersonalizadoElementor' );
Crear el widget: saludo-widget.php
Ahora vamos a crear un widget simple que muestre un saludo. Este widget te permitirá escribir un mensaje desde Elementor y mostrarlo donde quieras en tu página.
<?php use Elementor\Widget_Base; use Elementor\Controls_Manager; if ( ! defined( 'ABSPATH' ) ) { exit; } class SaludoWidget extends Widget_Base { public function getName() { return 'saludoWidget'; } public function getTitle() { return 'Saludo Personalizado'; } public function getIcon() { return 'eicon-person'; } public function getCategories() { return [ 'general' ]; } protected function registerControls() { $this->startControlsSection( 'contenidoSeccion', [ 'label' => 'Contenido', 'tab' => Controls_Manager::TAB_CONTENT, ] ); $this->addControl( 'textoSaludo', [ 'label' => 'Mensaje', 'type' => Controls_Manager::TEXT, 'default' => '¡Hola, mundo!', 'placeholder' => 'Escribe un mensaje...', ] ); $this->endControlsSection(); } protected function render() { $config = $this->getSettingsForDisplay(); echo '<div class="mi-saludo-widget">' . esc_html( $config['textoSaludo'] ) . '</div>'; } }
Activar y probar el widget
- Sube la carpeta
mi-widget-elementor
al directoriowp-content/plugins/
. - Activa el plugin desde el panel de administración de WordPress.
- Abre cualquier página con Elementor y busca el widget llamado “Saludo Personalizado”.
- Agrégalo a tu diseño y escribe el mensaje que desees mostrar.
Resultado
Este widget mostrará el texto que hayas escrito desde Elementor, justo donde lo insertes. Es una buena base para crear widgets más avanzados con más campos y opciones.
Crear widgets personalizados para Elementor te permite tener un control total sobre lo que muestras en tu sitio. Este ejemplo es básico, pero puedes expandirlo fácilmente con más controles, estilos o funcionalidades.