Aunque pueda sonar exagerado, desde que he descubierto Elementor Page Builder mi vida es más sencilla. Déjame explicarte por qué. Los que se dedican a crear páginas web para clientes, como es el caso de Juán Sánchez Mesa, de potenciandotuweb.com, se encuentran muy a menudo con un gran problema: el código. Un cliente ve una línea de código y piensa que seguro que algo va a ir mal. Parece algo prohibido. Por fortuna para aquellos que no quieren ver código ni en pintura, existe la alternativa de los editores visuales o builders en inglés.

elementor page builder wordpress review tutorial video

Los builders te permiten realizar cualquier dise√Īo que tendr√≠as que hacer¬†escribiendo¬†c√≥digo (mucho c√≥digo) de forma sencilla a golpe de rat√≥n. Muy sencillo.¬†Pero los builders tienen un gran¬†inconveniente: el rendimiento.¬†La mayor√≠a insertan mucho c√≥digo para cualquier elemento que configures por peque√Īo que sea. Y cuanto m√°s c√≥digo que procesar, peor rendimiento va a tener tu web.

Por lo tanto, se tenía que escoger. O la facilidad de uso que nos permiten los builders o el rendimiento que se obtiene con código puro y duro. Pero recientemente he descubierto un builder con el que ese problema se ha reducido bastante. De hecho lo he utilizado en mi propia web y me ha sorprendido muchísimo su rendimiento y las posibilidades que ofrece. Se trata de Elementor Page Builder. Por suerte para ti, Ignacio me ha permitido usar su web para hacerte llegar este Mega Tutorial para que aprendas a usarlo y sacar todo el provecho de él.

√ćndice

Te tengo que comentar antes de empezar que Elementor es un plugin gratuito, pero que adem√°s cuenta con un a√Īadido llamado Pro que amplia mucho sus posibilidades. En este tutorial vas a aprender a usar tanto la versi√≥n gratuita como las caracter√≠sticas de pago.¬†Como ya te he dicho, Elementor es un plugin. ¬ŅEsto qu√© significa para ti? Pues que lo puedes usar independientemente del tema que est√©s usando. Y sin tener que cambiar nada en tu actual web.

No tienes que cambiar de tema, ni de dise√Īo, nada. Puedes empezar a usarlo directamente justo despu√©s de leer este tutorial.¬†Tanto en mi web como en la de clientes que he desarrollado no he tenido ning√ļn problema a pesar de usar diferentes temas (Genesis, GeneratePress, etc).

Mi recomendación personal a la hora de utilizar Elementor

Vuelvo a insistir que Elementor es un plugin, no un tema. Por lo tanto, lo puedes usar donde quieras dentro de tu web con WordPress. Pero que lo puedas usar donde quieras no quiere decir que lo tengas que hacer. Por eso te voy a dar una recomendaci√≥n, de hecho lo que te voy a contar es mi forma de trabajar. Mi recomendaci√≥n es que lo uses para realizar p√°ginas, pero no para escribir tus art√≠culos. Para los art√≠culos es recomendable que uses el editor propio de WordPress y que sea tu tema quien establezca el dise√Īo.¬†Como ejemplo de p√°ginas me refiero a la p√°gina de inicio, sobre m√≠, de contacto, p√°ginas de venta, etc.¬†Porque si en un futuro decides cambiar de tema o dejas de usar Elementor por otro builder que aparezca, trabajando como te digo vas a tener separado el contenido del dise√Īo, y no vas a tener que hacer nada.

Cómo instalar Elementor

Antes de empezar a usar Elementor l√≥gicamente hay que instalarlo.¬†Para instalar la versi√≥n base de Elementor hay que hacer lo mismo que con cualquier plugin, ir al repositorio de WordPress en tu web.¬†Tienes que ir en tu Escritorio al men√ļ Plugins y dentro de √©l elegir A√Īadir nuevo. Cuando se abra la nueva pantalla, ver√°s que aparecen los plugins m√°s destacados y arriba a la derecha tienes disponible un buscador.¬†Solo tienes que poner ‚Äúelementor‚ÄĚ en el buscador (sin las comillas) y te aparecer√° en primer lugar un plugin llamado Elementor Page Builder. Pues ese es el que tienes que instalar.

tutorial elementor page builder buscador plugins

Si tienes actualizado tu instalación de WordPress (si no, te recomiendo que lo hagas) lo podrás instalar y después activar directamente desde esta página, sin necesidad de salirte. Una vez que lo hayas activado, ya tienes Elementor disponible en tu web.

Comprar versión Pro

Con la versi√≥n que acabas de instalar puedes empezar a trabajar sin ning√ļn problema, pero tienes que saber que¬†Elementor Page Builder¬†cuenta con una versi√≥n de pago que a√Īade nuevos elementos y funcionalidades a la versi√≥n b√°sica.¬†Por ejemplo, vas a tener plantillas predefinidas con las que puedes realizar una p√°gina completa con unos pocos clicks. Cargas la plantilla, cambias el contenido que incluye por el tuyo y ya tienes tu p√°gina con un dise√Īo espectacular.

Tambi√©n vas a tener widgets muy √ļtiles como cuentas atr√°s, slider, formularios sin necesidad de plugins adicionales, login de usuarios, etc. (despu√©s los vamos a ver todos en detalles).¬†La versi√≥n Pro te cuesta 49$ para una web, 99$ para tres y 199$ para webs ilimitadas. Si no te dedicas a construir webs para otros con la versi√≥n de una web o tres es suficiente. Y poder contar con todos los a√Īadidos por 49$ me parece un muy buen precio.

tutorial elementor page builder precios pro

Para instalar la versión Pro tienes que tener instalado primero la versión básica que hemos visto en el punto anterior. Si no lo haces, no te preocupes. Si instalas primero la versión Pro, te va a aparecer un mensaje con un botón diciéndote que para que funcione la versión Pro necesitas la básica, y si haces click en el botón se instala la versión básica. Todo muy fácil.

Cuando hagas la compra, te podr√°s descargar un archivo comprimido zip y obtendr√°s una clave de licencia. Para instalar el archivo tienes que ir al men√ļ Apariencia y a√Īadir nuevo. Pero en esta ocasi√≥n vas a hacer click en el bot√≥n que te aparece arriba Subir plugin.¬†Se te abrir√° una pantalla donde tienes un bot√≥n para seleccionar un archivo. Pues el archivo que tienes que seleccionar es el que te has descargado de Elementor. Tendr√° la estructura elementor-pro-version.zip, donde versi√≥n es un n√ļmero que ser√° diferente dependiendo de en qu√© momento te lo descargues.

Para usar la versi√≥n Pro, aparte de instalar el archivo que acabas de hacer, tienes que introducir tu clave de licencia.¬†Para hacerlo tienes que ir al nuevo men√ļ Elementor y dentro a License. Ah√≠ ver√°s que aparece un cuadro de texto donde tienes que pegar tu clave y un bot√≥n que pone Activar para finalizar la activaci√≥n de tu versi√≥n Pro.

tutorial elementor page builder licencia

Nota: Si todo ha ido bien verás que debajo aparece un mensaje que dice Status: Active.

Men√ļ de configuraci√≥n de Elementor

Cuando ya tengas instalado Elementor vas a ver que en los men√ļs de tu Escritorio de WordPress ha aparecido una nueva opci√≥n llamada precisamente Elementor.¬†Aunque te pueda parecer un poco pesado este bloque, es necesario que antes de empezar a usar Elementor, lo tengas bien configurado. Unos pocos minutos al principio te puede ahorrar mucho trabajo despu√©s. Merece la pena.¬†Volvemos al men√ļ. Este nuevo men√ļ cuenta con 5 submen√ļs: Ajustes, Mi biblioteca, Herramientas, Informaci√≥n del sistema y Licencia.

tutorial elementor page builder menu elementor

A nosotros nos interesan los tres primeros que son en los que podemos configurar el funcionamiento de nuestra web. Los dos restantes nos aportan informaci√≥n de tu web y de la licencia con la que est√©s usando Elementor. √Čchales un vistazo si quieres pero no son importantes para usar Elementor.

Ajustes

tutorial elementor page builder ajustes generales

A continuación te voy a explicar qué ajustes puedes configurar en esta pantalla.

  • Tipos de entradas: Aqu√≠ puedes elegir en qu√© tipo de contenido vas a poder usar Elementor. Mi recomendaci√≥n es que solo elijas P√°ginas y las Entradas aparezcan seg√ļn tu tema. Como m√≠nimo vas a tener Entradas y P√°ginas, pero las opciones a elegir van a variar dependiendo del tema y plugins que tengas porque puede que te hayan agregado nuevos tipos de contenido.¬†Si no sabes la diferencia entre Entradas y P√°ginas o tienes otras dudas sobre WordPress¬†haz click aqu√≠.

  • Perfiles exclu√≠dos: Aqu√≠ vas a elegir qu√© tipos de usuario no van a poder usar Elementor.
  • Desactivar colores globales y Desactivar tipograf√≠as globales: Si marcas estas casillas, Elementor va usar los colores y fuentes que use tu tema sin posibilidad de cambiarlo. Yo te recomiendo que las dejes desmarcadas porque siempre puede venir bien hacer alg√ļn peque√Īo ajuste.
  • Mejorar Elementor: Si marcas esta casilla, vas a enviar datos an√≥nimos de como usas Elementor, posibles fallos, etc. Esto se hace para mejorar el producto. Es tu elecci√≥n, no va a influir en nada al funcionamiento de Elementor.¬†
  • Fuentes gen√©ricas predeterminadas: Existen dos familias de fuentes: serif y sans-serif. Aqu√≠ vas a elegir qu√© familia es la que se va a usar por defecto si no se cambia nada.
  • Ancho del contenido: Aqu√≠ vas a elegir el ancho m√°ximo que va a tener el contenido que vas a crear con Elementor. Deja el que viene ya escrito si no necesitas nada especial o no sabes qu√© medida necesitas.
  • Espacio entre widgets: Aqu√≠ vas a poder configurar un espacio por defecto para los widgets. El que viene por defecto est√° bien.
  • Extender hasta ajustar secci√≥n: Aqu√≠ vas a poder elegir el elemento (etiqueta HTML, clase CSS) donde se va a incluir tu creaci√≥n de Elementor. D√©jalo como est√° si tienes dudas, se incluir√° en tu p√°gina en¬†vez¬†de dentro de alguna secci√≥n.
  • Selector de t√≠tulo de p√°gina: Aqu√≠ tienes que escribir el selector que tiene el t√≠tulo de la p√°gina que vas a editar con Elementor por si quieres eliminarlo de tus dise√Īos. Si tu tema est√° escrito seg√ļn los par√°metros que establece WordPress no vas a tener que configurar nada.
  • Recaptcha: Aqu√≠ puedes configurar tu cuenta de Recaptcha para incluirla en los formularios que puedas crear con Elementor, por ejemplo. Recaptcha es ese cuadro con letras que cuesta reconocer que tienes que escribir en algunos formularios, para asegurarse que lo est√° rellenando una persona.
  • M√©todo de impresi√≥n de CSS: Aqu√≠ elige Fichero externo para tener un mejor rendimiento. Va a escribir los estilos CSS en un archivo independiente.
  • Cambio de m√©todo de carga del editor: Dependiendo del tema y de los plugins que tengas instalados pueden haber conflictos con el editor de Elementor. Si tienes alg√ļn problema cambia la opci√≥n de Desactivar a Activar. Yo no lo he necesitado hacer nunca, pero est√° bien saber que existe esta opci√≥n.

Mi biblioteca

Aqu√≠ vas a poder ver qu√© dise√Īos has guardado y tambi√©n importar otros. Esto es muy √ļtil y te voy a poner un ejemplo para que lo veas.¬†Imagina que creas una landing para un servicio y creas una cabecera con el nombre del servicio. Es muy probable que quieras usar esa cabecera en otras p√°ginas de otros servicios. Pues puedes guardar esa cabecera y usarla en otras p√°ginas con un solo click sin tener que repetir todo el proceso de dise√Īo desde el principio.¬†Pues si guardas esa cabecera, aparecer√° aqu√≠.¬†M√°s adelante aprender√°s como se guarda. Incluso puedes guardar p√°ginas enteras.

Herramientas

tutorial elementor page builder herramientas elementor

Elementor adem√°s de un constructor de p√°ginas incluye una serie de herramientas que te pueden venir muy bien y ahorrarte instalar alg√ļn plugin.

  • Regenerar CSS y Sincronizar la biblioteca: Con estos botones vas a volver a descargar los archivos de Elementor, estilos y los widgets. Si de repente te encuentras con fallos al usar Elementor, usa estos botones para recuperar los archivos originales.
  • Reemplazar URL: Esta opci√≥n te viene muy bien si decides hacer un cambio de URL. Solo tienes que escribir la direcci√≥n antigua y la nueva de tu web y hacer click en el bot√≥n. Haz caso del consejo de hacer una copia de la base de datos antes de hacer nada por si surge alg√ļn problema en el proceso.
  • Revertir a la versi√≥n anterior: Si despu√©s de actualizar est√°s experimentando alg√ļn problema puedes volver a una versi√≥n anterior con estos botones. Si te ocurre, vuelve a la versi√≥n anterior, espera unos d√≠as a que aparezca una versi√≥n y actualiza de nuevo.
  • Convi√©rtete en probador de betas: Aqu√≠ puedes hacer que te aparezcan en las actualizaciones las versiones beta. Si usas Elementor en una web que ya est√° online te recomiendo que no lo hagas porque las versiones beta pueden tener errores porque no son versiones finales.
  • Modo de mantenimiento: Con esta opci√≥n puedes poner tu web en modo mantenimiento para hacer cualquier ajuste que tengas que hacer en tu web. Tienes dos opciones que cambian en el c√≥digo que se devuelve: pr√≥ximamente o mantenimiento. La primera devuelve un c√≥digo 200 que es un c√≥digo de √©xito, se puede hacer para muy poco tiempo. En la opci√≥n mantenimiento se devuelve un error 503 que es un error en el servidor para tiempo m√°s largo. No te lo tomes a la ligera porque si coincide que el robot de Google pasa por tu web y tienes el modo de mantenimiento con c√≥digo 200 va a asumir que lo que aparece es tu web, es decir, tu web va a ser el mensaje de mantenimiento. Recuerda: c√≥digo 200 para muy poco tiempo y c√≥digo 503 para mantenimiento m√°s largo.

Una vez que ya hemos visto los ajustes que tenemos en el men√ļ de Elementor ya podemos pasar directamente a empezar a usar Elementor.

Antes de empezar a usar Elementor

Un √ļltimo apunte antes de empezar a usar Elementor tienes que tener en cuenta que el dise√Īo que crees se va a adaptar a tu tema.¬†¬ŅQu√© quiero decir con esto?¬†Pues que si t√ļ quieres crear una landing sin cabecera ni men√ļs, esto lo tienes que configurar antes de arrancar con Elementor.¬†Un ejemplo para que lo entiendas mejor. Si tu web cuenta con una p√°gina de inicio con una zona de contenido m√°s un sidebar, el dise√Īo que crees con Elementor se va a a√Īadir en la zona de contenido. Pero el sidebar no se va a perder.

Por eso es importante que antes de comenzar a usar Elementor sepas qu√© dise√Īos quieres. Y as√≠ elegir la plantilla de p√°gina que m√°s se adapte.¬†Si quieres hacer una landing page Elementor incluye una plantilla de p√°gina llamada Elementor Canvas. Esta plantilla elimina la cabecera, sidebar o footer que tenga tu web. Vas a tener una p√°gina en blanco.

tutorial elementor page builder plantilla pagina

Como comenzar a usar Elementor

Comenzar a usar Elementor es muy sencillo. En primer lugar tienes que crear o abrir la p√°gina que quieras editar con Elementor.¬†Si lo que quieres es editar alguna p√°gina que ya tengas creada tienes que saber que los elementos que a√Īadas con Elementor se van a a√Īadir al contenido que ya exista. Pero la buena noticia es que ese contenido que ya tengas creado tambi√©n lo puedes editar con Elementor, as√≠ que no tienes que escribirlo otra vez ni empezar a copiar y pegar para darle un nuevo estilo.¬†Una vez que tienes abierta tu p√°gina te vas a encontrar el siguiente bot√≥n:

tutorial elementor page builder boton iniciar

Pues solo tienes que hacer click para iniciar el editor de Elementor. Más fácil imposible. Se abrirá el editor a pantalla completa. Aunque parezca que te has salido de tu web, no lo has hecho. Observa como el dominio es el tuyo. Se trata simplemente de que el editor se muestra a pantalla completa para aprovechar el espacio al máximo. No te asustes.

Partes principales de Elementor

Una vez que has abierto Elementor tienes que distinguir entre dos partes principales en forma de columna.¬†La primera, situada a la izquierda, se trata de la barra de herramientas. Aqu√≠ es donde vas a poder configurar todos los elementos que a√Īadas, a√Īadir nuevos, dise√Īos, etc. Lo vamos a ver en m√°s detalle.¬†La segunda columna corresponde con la vista previa. Aqu√≠ vas a ir viendo c√≥mo va a ir quedando tu p√°gina, a√Īadir secciones, moverlas, etc. Tambi√©n lo vamos a ver en m√°s profundidad.

tutorial elementor page builder editor elementor

Panel de barra de herramientas

Lo primero que destaca al ver el panel de herramientas son los distintos widgets que vas a poder usar en tus dise√Īos. Al ser tantos y la aut√©ntica base de Elementor los vamos a ver uno por uno m√°s adelante.¬†Lo que s√≠ te voy a explicar son las opciones que tienes disponibles en el panel y que van a estar siempre disponibles durante tu trabajo con Elementor.

tutorial elementor page builder menu editor

En primer lugar vamos a ver el men√ļ. Si haces click en √©l vas a ver las siguientes opciones:

  • Colores globales: Aqu√≠ vas a poder elegir los colores que se van a usar por defecto a lo largo de tu proceso. Durante el dise√Īo puedes elegir los colores que quieras pero si a√Īades los colores que uses aqu√≠ vas a trabajar de un modo m√°s r√°pido. Adem√°s de poder elegir tu paleta personal, vienen incluidas algunas por si las quieres usar.
  • Fuentes globales: Este ajuste es muy similar al visto para los colores. Puedes elegir las fuentes por defecto para encabezados y textos. Despu√©s puedes cambiarlos pero si ya eliges aqu√≠ los que usas no vas a tener que hacer nada despu√©s.
  • Selector de color: Como ya te he dicho antes en cualquier momento del trabajo con Elementor vas a poder elegir los colores que quieras usar. En la herramienta de selecci√≥n de color te aparecen unos colores ya seleccionados para usar con solo un click. Pues aqu√≠ es donde puedes seleccionar esos colores. Elige los comunes que vayas a usar a lo largo de tu dise√Īo.
  • Diferencia entre Colores globales y Selector de color: Te quiero explicar de modo m√°s detallado la diferencia entre Colores globales y Selector de color porque puede parecer lo mismo. En Colores globales, los colores que elijas se van a aplicar sin t√ļ hacer nada. Por ejemplo el color que elijas para texto se va a aplicar a todos los textos si t√ļ no seleccionas un color a mano. Mientras que en Selector de color seleccionas los colores que quieres que aparezcan en la herramienta de seleccionar un color, una especie de acceso directo a ese color.
  • Historial de revisiones: Aqu√≠ vas a ver todos los cambios que has ido haciendo a lo largo de tu trabajo con Elementor. Es muy √ļtil si por ejemplo, realizas alg√ļn cambio y no termina de quedar como a ti te gustar√≠a. Pues vas a esta opci√≥n, haces click en una revisi√≥n anterior y deshaces lo que has hecho. Como posible mejora, podr√≠a poner las revisiones por acciones en vez de por tiempo. Quedar√≠a m√°s claro a la hora de deshacer lo que no te gusta.
  • Ajustes de p√°gina: Aqu√≠ vas a poder configurar las opciones de tu p√°gina. Son las mismas opciones que puedes configurar en WordPress. El t√≠tulo, la plantilla de p√°gina que quieres usar. Las dos opciones de plantilla que te recomiendo que uses son Predeterminado (si quieres usar cabeceras) y Elementor Canvas (si quieres usar una p√°gina en blanco, sin cabecera, footer, etc). Pero adem√°s puedes configurar el estilo global de la p√°gina como poner un color de fondo, cosa que no puedes hacer en WordPress.
  • Eliminar todo el contenido: Esta opci√≥n se explica por s√≠ sola. Eliminar√°s todo el contenido que hayas creado. Y todo es todo. Te quedar√°s con un dise√Īo vac√≠o, as√≠ que √ļsala con cuidado.
  • Ajustes de Elementor: Con esta opci√≥n se va a abrir el men√ļ que ya te he explicado antes. Si necesitas repasar algo vuelve a √©l.
  • Sobre Elementor: Esta opci√≥n te va a abrir la p√°gina web de Elementor. Una forma f√°cil de acceder a ella.

El siguiente bot√≥n te abrir√° todas las opciones de widgets que tienes disponibles seg√ļn tu versi√≥n (b√°sica o Pro). Como ya te he dicho lo vamos a ver con m√°s detalle uno por uno.¬†En la parte inferior tienes 5 opciones m√°s. Vamos a verlas:

tutorial elementor page builder menu inferior

  • Salir: Aqu√≠ tienes dos opciones. Ver p√°gina te va a abrir la p√°gina que est√°s editando y as√≠ ver c√≥mo est√° quedando. Ir al escritorio te va a permitir volver al Escritorio de WordPress y salir de Elementor.
  • En la siguiente opci√≥n vas a poder elegir la vista en la que quieres que se muestre la p√°gina en el panel de la derecha. Puedes elegir la vista de Escritorio, Tablet y M√≥vil. As√≠ te vas a asegurar de que tu dise√Īo se vea bien en cualquier dispositivo.
  • En la opci√≥n de ayuda vas a poder ver un v√≠deo donde te introduce de forma muy r√°pida como funciona Elementor. Adem√°s se incluye un enlace a la p√°gina web con la documentaci√≥n de Elementor, donde vas a encontrar distintos art√≠culos en ingl√©s acerca de Elementor.
  • A continuaci√≥n tienes las opciones de plantillas. Recuerda los dise√Īos que guardas para poder usarlos en otras p√°ginas. Tienes una opci√≥n de Biblioteca de plantillas donde tienes dise√Īos de p√°ginas completas para usarlos con solo un click. Y adem√°s tienes la opci√≥n de Guardar plantilla, donde vas a guardar todo el dise√Īo que hayas hecho en tu p√°gina.
  • Por √ļltimo tienes el bot√≥n de Guardar para que no se pierda tu trabajo.

Panel de vista previ.

En este panel vas a poder ver c√≥mo va quedando tu dise√Īo con los widgets que vas agregando. Pero tambi√©n puedes interaccionar con ellos.¬†Siempre va a aparecer una secci√≥n con los botones de Agregar nueva secci√≥n, A√Īadir plantilla y el mensaje de Arrastrar un widget. Esta secci√≥n no va a aparecer en tu dise√Īo final, solo en el panel de edici√≥n.

tutorial elementor page builder agregar seccion

Si haces click en Agregar nueva secci√≥n te va a aparecer una nueva pantalla donde poder elegir el dise√Īo de la secci√≥n. De ancho completo, dos columnas iguales, columnas asim√©tricas‚Ķ Con las im√°genes que aparecen queda todo muy claro.

tutorial elementor page builder seleccionar columna

Eliges el dise√Īo de secci√≥n que quieres y ya tienes una nueva secci√≥n en tu dise√Īo, lista para que a√Īadas el contenido.¬†Pero antes, d√©jame explicarte un aspecto importante y es la diferencia entre Columna y Secci√≥n.¬†Secci√≥n es la zona completa, solo existe una secci√≥n por fila, el conjunto completo. Mientras que columna puede haber una o varias y del mismo o diferente ancho. Es importante que sepas la diferencia porque puedes por ejemplo, configurar un color de fondo. Y el resultado va a cambiar dependiendo si se lo aplicas a la secci√≥n o a una columna.¬†Vamos a ver las distintas opciones que puedes configurar tanto de una columna como de una secci√≥n.

Columna

Cuando haces click en el selector de columna te van a aparecer tres botones y el panel de herramientas va a cambiar con las opciones disponibles a configurar.¬†En los botones del selector puedes duplicar la columna, a√Īadir una nueva o eliminar la actual.

tutorial elementor page builder opciones columna

Duplicar una columna te puede venir bien si por ejemplo configuras un dise√Īo y lo quieres repetir pero solo quieres cambiar el texto. As√≠ no tienes que repetir todos los pasos que ya hayas hecho para conseguir el dise√Īo.¬†Si ahora nos vamos al panel de herramientas podemos ver las siguientes opciones de estilo:

tutorial elementor page builder estilo columna

  • En fondo y borde creo que ya sabes qu√© vas a poder configurar. En fondo vas a poder elegir si no quieres nada, modo cl√°sico o un gradiente. En modo cl√°sico vas a poder elegir un color o una imagen. Si configuras un color y una imagen vas a ver la imagen. Si quieres un color, presta atenci√≥n de no tener configurada una imagen. En borde vas a poder elegir el tipo y en radio puedes configurar si quieres las esquinas redondeadas.
  • En capa de fondo vas a poder seleccionar las mismas opciones que en el fondo de antes pero se superpone al fondo que hayas configurado. Para eso tienes una nueva opci√≥n donde configurar la transparencia que quieres que tenga esta capa.
  • Disposici√≥n: Aqu√≠ vas a poder seleccionar donde quieres que se posicionen los widgets que pongas en esta columna. Puedes seleccionar Arriba, Medio y Abajo. Lo m√°s com√ļn, para una mejor apariencia es que selecciones Medio.

Ahora vamos a ver las opciones que puedes configurar en la pesta√Īa de Avanzado:

tutorial elementor page builder avanzado columna

  • En margen vamos a poder configurar el espacio externo con otros elementos. Puedes elegir entre ponerlo en p√≠xeles o en porcentaje.
  • En relleno en cambio, el espacio que vas a configurar es el interior, desde el borde de la columna hasta el contenido.
  • Tambi√©n puedes configurar que el elemento aparezca con una animaci√≥n. No abuses de animaciones porque va a perjudicar el rendimiento de tu web.
  • CSS ID, Clases CSS: vas a poder establecer un ID y una clase para usar en tus hojas de estilos CSS. Si lo que te acabo de decir te suena a chino, no le vas a sacar provecho. Se trata de personalizar a√ļn m√°s la columna, pero ya en c√≥digo.
  • En responsive, puedes configurar el ancho de la columna cuando se vea en m√≥viles. Por ejemplo, una columna que en la vista de escritorio se vea al 50% de ancho se va a ver muy peque√Īa en m√≥vil. Por eso puedes poner que en m√≥vil se vea al 100% o 95% y se acaba el problema. Usa la opci√≥n Ancho para m√≥vil y no Mobile Portrait. Hacen lo mismo pero la segunda est√° desapareciendo.
  • En Custom CSS puedes escribir t√ļ los estilos en CSS que quieras. Si no sabes c√≥digo lo mejor es que no toques nada aqu√≠, tampoco creo que te haga falta si no quieres alg√ļn dise√Īo superespec√≠fico.

Sección

Vamos ahora a ver las opciones que nos permite una sección. Recuerda que las secciones son bloques que pueden contener una o varias columnas. Una vez dicho vamos a ver qué opciones nos permiten:

tutorial elementor page builder ajustes seccion

  • Extender la secci√≥n: Se trata de un interruptor que puedes activar o desactivar. Si lo activas la secci√≥n ocupar√° todo el ancho de la ventana de tu navegador.
  • Ancho del contenido: Aqu√≠ puedes seleccionar el ancho de la secci√≥n a elegir entre Caja y Ancho completo. Si eliges Caja adem√°s podr√°s seleccionar el ancho en p√≠xeles.
  • Diferencia entre Extender la secci√≥n y Ancho completo: Aunque pueda parecer que son lo mismo existe una diferencia. Extender la secci√≥n consigue el ancho completo a trav√©s de JavaScript por lo que el ancho completo siempre va a ser del ancho de la ventana. Mientras el Ancho completo lo hace a trav√©s de CSS por lo que el ancho completo puede variar. Si eliges Ancho completo y ves que el ancho completo no es real, activa la casilla Extender la secci√≥n.
  • Espacio entre columnas: aqu√≠ vas a poder seleccionar entre varias opciones para determinar el espacio entres las columnas que forman parte de la secci√≥n. Para un mejor dise√Īo, es mejor que los distintos elementos no aparezcan agolpados, recu√©rdalo.
  • Alto: existen tres opciones. Predeterminado: aqu√≠ el alto de la secci√≥n va a ser la necesaria para poder acoger los elementos que contiene. Acomodar a la pantalla: el alto va a ser el mismo que la ventana de tu navegador, viene bien por ejemplo para una landing page. Y altura m√≠nima: aqu√≠ vas a poder escribir a mano la altura de la secci√≥n. Pero solo para aumentar la altura, como m√≠nimo la altura es la misma que en la opci√≥n Predeterminado.
  • Posici√≥n del contenido: Esta opci√≥n es la misma que ya vimos en las columnas. Puedes elegir entre Arriba, Medio y Abajo.
  • En estructura vas a poder ver la configuraci√≥n de columnas que existe en la secci√≥n. Por ejemplo, ancho completo, 2 columnas, etc. Si la configuraci√≥n es de varias columnas podr√°s elegir su distribuci√≥n. Si quieres que todas las columnas sean iguales, que la primera sea mayor que las dem√°s, etc.

En las opciones de estilo vas a poder configurar el dise√Īo puro y duro de tu secci√≥n:

tutorial elementor page builder estilo seccion

  • En fondo, tienes las mismas opciones que ya vimos para las columnas pero con una opci√≥n m√°s. En la secci√≥n puedes a√Īadir un v√≠deo como fondo. Para poner un v√≠deo como fondo de una secci√≥n tienes que prestar atenci√≥n a dos opciones. La primera es la fuente del v√≠deo. Puedes elegir entre un v√≠deo de YouTube o un v√≠deo que tengas subido a tu web. Yo te recomiendo la segunda opci√≥n. La carga va a ser mucho m√°s r√°pida y si has usado YouTube (me imagino que s√≠) habr√°s observado que por defecto se selecciona la calidad del v√≠deo de forma autom√°tica y puede pasar que en tu web se cargue el v√≠deo con baja resoluci√≥n y tu dise√Īo pierda mucho. Adem√°s, en un v√≠deo de YouTube va a aparecer la animaci√≥n de carga al principio. Por √ļltimo, si el v√≠deo que selecciones no carga, puedes elegir una imagen de fondo como alternativa.
  • La capa de fondo funciona igual que en las columnas. Es muy √ļtil para usar en conjunto con un v√≠deo. Puedes aplicar una capa de negro con una opacidad 0,5 y no tendr√°s problemas si usas texto en blanco y el fondo del v√≠deo se vuelve claro.
  • La opci√≥n de borde se puede usar igual que ya la hemos usado en los casos de las columnas. Exactamente igual.
  • Shape Divider. Esta opci√≥n es muy interesante. Te permite a√Īadir gr√°ficos a tu secci√≥n. Puedes elegir que aparezca arriba o abajo, el tipo de de gr√°fico, el color, el ancho y el alto. Adem√°s puedes rotar el gr√°fico de modo horizontal y que aparezca por delante del resto de contenido. Es una opci√≥n que te puede dar mucho juego. Explora las siguientes opciones que tiene porque puedes dar un toque incre√≠ble a tu web.
  • En tipograf√≠a puedes elegir los colores que va a tener los textos de la secci√≥n y su alineaci√≥n. Estos ajustes son generales para la secci√≥n, si en un elemento eliges el color este va a tener prioridad.

En la pesta√Īa de Avanzado tienes las mismas opciones que ya vimos en la Columna. La √ļnica diferencia es que puedes observar que los m√°rgenes izquierdo y derecho aparece auto. Esto significa que la secci√≥n va a aparecer centrada. Si lo quieres centrado aseg√ļrate que est√© as√≠, no lo cambies.¬†Adem√°s en Responsive puedes elegir entre esconder la secci√≥n en escritorio, tablet, m√≥vil o la combinaci√≥n que t√ļ escojas.

Widgets b√°sicos

Una vez que ya hemos visto las Columnas y Secciones, vamos a pasar a ver los elementos que te van a permitir construir tu web con Elementor.¬†Para a√Īadir un widget a una columna tienes que arrastrarlo. Cuando lo hagas ver√°s que aparece una l√≠nea azul que es el lugar donde se va a colocar el widget. Suelta el click de tu rat√≥n y tu widget se habr√° a√Īadido a tu p√°gina.

Quiero aclararte una cosa antes de comenzar a explicar en detalle los widgets. Van a existir muchas opciones que se van a repetir. Por ejemplo, las opciones de fondo y borde que ya hemos visto van a aparecer prácticamente en todos los elementos. Si los explicase una y otra vez, te cansarías de leer este manual, por lo que no tiene sentido. Seguro que estás de acuerdo con esto. Dicho esto vamos a comenzar a ver los widgets.

tutorial elementor page builder widgets basicos

Columnas

Has visto que a la hora de a√Īadir una secci√≥n puedes elegir la distribuci√≥n de columnas que quieras. Con este widget vas a poder a√Īadir columnas en cualquier momento.¬†Imagina que creas una secci√≥n con dos columnas. Y quieres que la primera columna a su vez est√© formada por dos columnas. Pero que la segunda columna sea normal.¬†Pues puedes elegir una secci√≥n de dos columnas y a la primera a√Īadir este widget. Te permite ampliar las posibilidades.

A diferencia de las columnas en una secci√≥n, con este widget no puedes elegir el n√ļmero de columnas, siempre son 2.¬†Tienes que tener en cuenta que este widget es un contenedor, no se va a ver nada. Tienes que a√Īadir otros widgets dentro para ver alg√ļn resultado.¬†Todas las opciones son las que ya hemos visto cuando te expliqu√© las secciones y columnas. Si tienes alguna duda vuelve a leer esa parte.

Encabezado

Con este widget vas a poder a√Īadir un encabezado de texto en tu dise√Īo. Vamos a ver las opciones que vas a poder configurar.

  • T√≠tulo: aqu√≠ es donde vas a poder escribir el contenido de tu encabezado.
  • Enlace: si quieres que tu encabezado se convierta en alg√ļn enlace solo tienes que escribir aqu√≠ la direcci√≥n a la que quieras dirigir el enlace. Si el enlace es externo (fuera de tu web) marca el bot√≥n para que se abra en una nueva ventana, sin cerrar tu web.
  • Tama√Īo: Aqu√≠ puedes elegir Predeterminado para que se aplique el tama√Īo por defecto. O tambi√©n puedes elegir entre Peque√Īo, Medio, Largo, XL o XXL para personalizar el tama√Īo a mano.
  • Etiqueta HTML: Aqu√≠ puedes elegir la etiqueta HTML que se va a usar para el encabezado. Es importante elegir bien la etiqueta para el SEO de tu web.
  • Alineaci√≥n: Por √ļltimo puedes elegir la alineaci√≥n del texto a elegir entre las alineaciones cl√°sicas: Izquierda, Derecha, Centro y Justificado.

En la pesta√Īa de estilo puedes elegir el color y si activas la opci√≥n de Tipograf√≠a podr√°s personalizar al m√°ximo el estilo del texto: tama√Īo, fuente, usar o no negrita, que el texto aparezca en may√ļsculas. Si no activas esta pesta√Īa se usar√° la configuraci√≥n de tu tema.¬†En la pesta√Īa de avanzado vas a ver de nuevo las opciones que ya has visto: m√°rgenes, relleno, fondo, borde, opciones Responsive‚Ķ

Imagen

Con este widget vas a poder a√Īadir una imagen al dise√Īo de tu p√°gina. Ten claro que este widget solo a√Īade una imagen, no puedes a√Īadirle texto encima. Si quieres hacer esto crea un widget de Encabezado o el siguiente que vamos a ver Editor de texto y configura una imagen de fondo.¬†Volviendo al widget de Imagen vamos a ver sus opciones.

  • En primer lugar podr√°s elegir la imagen. La podr√°s elegir entre las que tengas subidas en tu instalaci√≥n de WordPress.
  • En tama√Īo de imagen vas a poder elegir entre las que est√©n disponibles. Va a variar dependiendo de tu tema y plugins. A parte de las disponibles en tu WordPress tienes las opciones de Completo que va a ocupar todo el ancho disponible y Personalizado donde vas a poder escribir a mano las dimensiones.
  • En alineaci√≥n vas a poder elegir si quieres que tu imagen aparezca a la izquierda, a la derecha o centrada.
  • En leyenda vas a poder escribir un texto que aparecer√° debajo de la imagen.
  • En enlace vas a tener tres opciones. Ninguno: la imagen no enlazar√° a nada, se mostrar√° la imagen sin m√°s. Archivo de medios: con esta opci√≥n, si un usuario hace click en la imagen se abrir√° a tama√Īo completo en una nueva ventana. Y en URL personalizada podr√°s incluir un enlace a una p√°gina web como ya vimos en el encabezado.

El widget de imagen a√Īade opciones distintas en la pesta√Īa de estilo. Aqu√≠ te las explico:

  • En tama√Īo vas a poder aplicar una escala a tu imagen, por eso el valor es un porcentaje. En 100% es el tama√Īo completo, 50% mitad, 25% una cuarta parte, etc.
  • Opacidad: Aqu√≠ puedes establecer una transparencia a tu imagen. Dependiendo de los elementos que existan detr√°s te puede interesar aplicar una transparencia.
  • En animaci√≥n puedes configurar que al pasar el rat√≥n por encima de la imagen ocurra una animaci√≥n. Ya te he dicho que no soy muy partidario de las animaciones porque penalizan el rendimiento de tu web, √ļsalas con cuidado. Si te decides por usar una animaci√≥n ve probando hasta que encuentres la que m√°s te gusta.
  • Como las opciones borde ya las hemos visto, pasamos a las opciones de Leyenda. Aqu√≠ puedes configurar su alineaci√≥n, el color y las opciones de fuente.

En las opciones avanzadas volvemos a ver lo que ya hemos visto.

Editor de texto

En cuadro de texto vas a poder a√Īadir un texto usando el mismo editor de WordPress que usas para escribir tus art√≠culos. Est√° pensado para textos m√°s extensos que el widget de Encabezado, aunque con este widget tambi√©n puedes crear encabezados de texto.¬†En las opciones de estilo y avanzado vas a volver a ver las opciones que ya has visto en otros widgets.

Vídeo

En el widget de v√≠deo vas a poder a√Īadir un v√≠deo de YouTube o de Vimeo. Las opciones se explican solas, vamos a echarles un vistazo r√°pido.¬†En enlace puedes copiar y pegar la direcci√≥n del v√≠deo que quieras usar. Y adem√°s elegir la proporci√≥n con la que quieres que se muestre.¬†Despu√©s puedes activar distintas opciones como que el v√≠deo inicia de modo autom√°tico, que se muestren los controles, el t√≠tulo.

Tambi√©n puedes elegir una imagen para que se muestre en lugar de la imagen determinada que muestre YouTube o Vimeo.¬†Por √ļltimo, dentro de las opciones de Imagen de la cubierta puedes activar Lightbox. Esta opci√≥n va a poner el v√≠deo en el centro de tu pantalla y poner un fondo del color que elijas. As√≠ tus usuarios van a ver el v√≠deo sin distracciones.

Botón

Con este widgets vas a poder incluir un botón que dirija a una web al hace click en él. La mejor forma de comprender su funcionamiento es viendo sus opciones:

  • Tipo: En tipo vas a poder usar uno de los dise√Īos establecidos. Informaci√≥n: fondo de color azul. √Čxito: fondo de color verde. Advertencia: fondo de color naranja y Peligro: fondo de color rojo. Aunque tienes estos dise√Īos ya preparados, t√ļ puedes elegir el color que quieras como vas a ver.
  • Texto: Aqu√≠ vas a escribir el texto que va a aparecer en el bot√≥n.
  • Enlace: La p√°gina que se va a abrir al hacer click en el bot√≥n y la opci√≥n para que se abra en otra web. Recuerda, si en enlace es una p√°gina fuera de tu web, m√°rcalo.
  • Alineaci√≥n: La alineaci√≥n que va a tener tu bot√≥n en el lugar donde lo hayas inclu√≠do.
  • En tama√Īo vas a poder elegir el tama√Īo entre varios tama√Īos disponibles.
  • En icono vas a poder incluir un icono dentro de tu bot√≥n. Si eliges un icono vas a poder configurar si va a aparecer antes o despu√©s del texto y el espacio en medio.

En las opciones de Estilo vas a poder configura el dise√Īo del bot√≥n de forma personalizada como te dec√≠a en las opciones de Tipo.¬†Tienes que distinguir entre las opciones que se aplican en modo Normal y en modo Hover. El modo Hover se aplica cuando se pasa el rat√≥n por encima del rat√≥n.¬†Las dem√°s opciones ya se han visto: m√°rgenes, rellenos, opciones de tipograf√≠a, etc.

Separador

El widget Separador va a a√Īadir una barra horizontal. Viene muy bien para separar elementos de una forma elegante.¬†Las opciones del separador son muy sencillas. Vamos a verlas:

  • Estilo: Aqu√≠ vas a poder elegir el estilo que va a tener la l√≠nea horizontal. S√≥lido, una sola l√≠nea. Doble, punteado o l√≠nea discontinua.
  • Peso: Aqu√≠ vas a poder configurar el grosor que va a tener la l√≠nea.
  • Las opciones de color, ancho y alineaci√≥n se explican por s√≠ solas.
  • En brecha vas a poder elegir el espacio que se va a a√Īadir por encima y debajo de la l√≠nea.

Una configuración que funciona muy bien en cualquier web es la siguiente:

  • Estilo: S√≥lido
  • Peso: 2
  • Color: #ccc
  • Ancho: 60
  • Alineaci√≥n: Centro

Espaciador

El widget de Espaciador tambi√©n sirve como el de Separador para separar elementos. Pero a diferencia de Separador, este widget a√Īade un espacio en blanco.¬†Por lo tanto, la √ļnica opci√≥n que existe en este widget es el espacio que quieres que tenga.

Google Maps

Con este plugin vas a poder a√Īadir un mapa de Google de forma muy sencilla. Es muy √ļtil si tienes un negocio f√≠sico.¬†Como todos los widgets de Elementor se configura de una forma muy f√°cil:

  • Direcci√≥n: Aqu√≠ vas a escribir la direcci√≥n que quieres que aparezca. Tienes que buscar la direcci√≥n concreta que quieres que aparezca. Porque si escribes Madrid te va a mostrar la ciudad completa.
  • Nivel de Zoom: Selecciona el zoom con el que se va a mostrar la direcci√≥n en el mapa. Dependiendo de la ciudad que busques, elige un zoom 17 o 18.
  • Alto: Aqu√≠ vas a configurar el alto del elemento donde se muestra el mapa. No te confundas con la altitud del mapa. Se trata del cuadro donde se muestra.
  • Impedir scroll: Si lo activas, el mapa no se va a poder manipular. No vas a poder hacer zoom ni navegar por el mapa. Si lo dejas desactivado, s√≠ lo podr√°s hacer.

En las opciones avanzadas, est√°n presentes las opciones que ya hemos visto.

Icono

Aqu√≠ vas a poder incluir un icono. Es muy √ļtil combin√°ndolo con otros elementos. Por ejemplo puedes escribir el testimonio de un cliente y usar el icono llamado quote-right para hacer el dise√Īo m√°s atractivo.¬†Vamos a ver sus opciones:

  • Ver: Aqu√≠ vas a poder elegir el estilo que va a tener el icono. En Predeterminado, va a aparecer el icono solo. En Apilados va a aparecer el icono dentro de una forma con relleno. Y en Encuadrado va a aparecer el icono dentro de una forma con borde pero sin relleno. La forma se va a poder elegir m√°s adelante.
  • Icono: Aqu√≠ vas a poder elegir el icono que quieres usar. Puedes usar el buscador porque hay muchos, pero est√° en ingl√©s. Si buscas en espa√Īol no vas a encontrar nada.
  • Forma: Aqu√≠ vas a elegir la forma que va a contener el icono si eliges el estilo Apilados o Encuadrado. Puedes elegir un c√≠rculo o un cuadrado. Si eliges el estilo Predeterminado no aparece esta opci√≥n.
  • Enlace: Si escribes una direcci√≥n web tu icono se va a convertir en un enlace. Adem√°s tienes la opci√≥n de que el enlace se abra en una ventana nueva.
  • Por √ļltimo puedes elegir la alineaci√≥n del icono.

Vamos a ver ahora las opciones de estilo que a√Īade nuevas opciones propias del icono:

  • Color primario: La aplicaci√≥n del color primario va a depender del estilo que hayas elegido para tu icono. Si eliges Predeterminado es el color del icono. Si eliges Apilados, va a ser el color del relleno de la forma. Si eliges Encuadrado, el color se va a aplicar al icono y al borde.
  • Color secundario: Aqu√≠ ocurre lo mismo que en color primario, va a depender del estilo de tu icono. Si eliges Predeterminado no te va a aparecer esta opci√≥n. Si eliges Apilados, va a ser el color del icono. Si eliges Encuadrado, el color va a ser el relleno de la forma.
  • En Tama√Īo y Relleno del icono vas a poder elegir el tama√Īo del icono y del relleno respectivamente. Si eliges el estilo Predeterminado, la opci√≥n Relleno del icono no va a aparecer.
  • En Rotate puedes escribir los grados que quieres que se gire el icono.
  • A continuaci√≥n puedes configurar el borde, tanto el ancho como el borde como el radio. Radio te va a servir si quieres un borde que no sea ni un c√≠rculo completo ni un cuadrado.
  • Por √ļltimo, tienes las opciones hover. Recuerda, cuando pasas el rat√≥n por encima. Las opciones son la que ya has visto de colores adem√°s de una animaci√≥n que ya hemos visto.

Widgets de versión Pro

Una vez que ya hemos visto los widgets básicos vamos a ver los widgets de la versión Pro. Recuerda que estos widgets solo están disponibles si optas por la versión de pago. Si no te aparecen estos widgets es porque estás usando la versión básica. Si has pagado por la versión Pro y aun así no te aparecen los widgets de esta sección prueba a sincronizar de nuevo los archivos en la herramienta de Elementor que vimos antes.

tutorial elementor page builder widgets pro

Posts

Con este widget vas a poder incluir art√≠culos que hayas creado. Es una forma muy sencilla de incluir una secci√≥n en tu p√°gina Home donde aparezcan los √ļltimos art√≠culos, art√≠culos destacados, etc.¬†Como todos los widgets se a√Īade arrastrando con el rat√≥n el widget a la zona que queramos y despu√©s configurando las opciones.¬†Vamos a ver a hora las opciones. Se encuentran divididas en opciones de contenido y de estilo. En las opciones de contenido tenemos la agrupaci√≥n de Layout.

  • Skin: Puedes elegir Classic para que se muestre las entradas de forma sencilla y Cards para que lo hagan con un borde simulando una tarjeta.
  • Columns: Aqu√≠ puedes elegir las columnas en las que se va a mostrar tu contenido.
  • Posts Per Page: Aqu√≠ vas a seleccionar cuantas entradas quieres mostrar.
  • Image Position: Si eliges el skin Classic te va a aparecer esta opci√≥n. Para que no tengas problemas te recomiendo que elijas Top o None que no mostrar√° la imagen.
  • Show Image: Si eliges el skin Cards te va a aparecer esta otra opci√≥n. Puedes elegir entre mostrar o no la imagen.
  • Masonry: Con esta opci√≥n vas a elegir que la altura de las columnas. Si est√° desactivado, las columnas tendr√°n la misma altura. Si no, la altura se adaptar√° al contenido, dando el aspecto de revista.
  • Tama√Īo de la imagen va a depender del tema y plugins que tengas instalados.
  • Image Width: Aqu√≠ vas a poder escalar la imagen para hacerla m√°s peque√Īa, si eliges 100% se mostrar√° a tama√Īo completo.
  • Title: Si est√° activo se mostrar√° el t√≠tulo del art√≠culo.
  • Title HTML Tag: Selecciona la etiqueta HTML que se usar√° con el t√≠tulo del art√≠culo. Si muestras tus art√≠culos en tu p√°gina Home, la etiqueta apropiada es H3. Usas un H1 para tu logotipo o t√≠tulo de la web, un H2 para un encabezado que ponga ‚ÄúArt√≠culos destacados‚ÄĚ por ejemplo y el H3 para los art√≠culos que es lo que configuras aqu√≠.
  • Excerpt: Aqu√≠ vas a seleccionar si quieres mostrar un extracto del contenido de tu art√≠culo. Si decides que s√≠, puedes elegir cuantos caracteres quieres mostrar.
  • Meta Data: Vas a poder elegir qu√© informaci√≥n de tu art√≠culo vas a mostrar como fecha, n√ļmero de comentarios‚Ķ Cuando hagas click en el cuadro te mostrar√° las opciones disponibles. Tambi√©n puedes configurar el separador entre la informaci√≥n.
  • Read More: Decide si mostrar o no un enlace de Leer m√°s para ver el art√≠culo completo. Si decides que aparezca puedes escribir el texto que va a aparecer.

Ya hemos visto como configurar como se va a mostrar la información que se obtenga de nuestro contenido. Ahora en el siguiente bloque Query vas a poder elegir qué contenido quieres obtener.

  • Source: Aqu√≠ vas a elegir qu√© tipo de contenido quieres que se recupere, entradas, p√°ginas o cualquier contenido personalizado que tengas disponible en tu web.
  • Despu√©s tienes una serie de opciones para filtrar el contenido que se obtiene. Puede elegir que se muestren entradas solo de un autor, de una categor√≠a concreta‚Ķ Lo mismo aplicado a las p√°ginas.
  • Tambi√©n puedes configurar como se va a ordenar el contenido. Por ejemplo, lo puedes ordenar por fecha ascendente o descendente, por orden alfab√©tico o por orden aleatorio.
  • Por √ļltimo, tienes una opci√≥n para poder elegir contenido que no quieres que aparezca en este widget.

Por √ļltimo, puedes configurar una paginaci√≥n para navegar entre art√≠culos. Esta opci√≥n tiene sentido si quieres que se pueda acceder a todos los art√≠culos. Pero si solo quieres mostrar los √ļltimos art√≠culos o 3 art√≠culos destacados por ejemplo, no tiene sentido a√Īadir paginaci√≥n.¬†La paginaci√≥n puede ser por n√ļmeros, incluyendo enlaces de Anterior y Siguiente o combinando las dos opciones.

Una vez que ya hemos visto las opciones para a√Īadir contenido, vamos a ver las opciones para aplicar un estilo a esta informaci√≥n. Las opciones de estilo vienen separadas por el tipo de contenido. En primer lugar viene el estilo del Layout, de la distribuci√≥n de elementos:

  • Columns Gap: Aqu√≠ vas a configurar la separaci√≥n entre columnas. Si eliges que el contenido aparezca como una columna esta opci√≥n no se va a reflejar.
  • Rows Gap: Esta opci√≥n es igual que la anterior pero se aplica a filas. L√≥gicamente, para que se aprecie este ajuste tiene que existir como m√≠nimo 2 filas.
  • En alineaci√≥n vas a escoger la alineaci√≥n de los textos del widget.

En Image vas a configurar la imagen destacada de tu contenido.

  • En Border Radius vas a poder redondear las esquinas de la imagen.
  • En Spacing vas a poder configurar el espacio entre la imagen y el texto de tu contenido, el margen inferior de la imagen.

En Content vas a configurar toda la parte de tu contenido que sea texto. Esto es el título, los meta datos, el extracto y el enlace de Leer más. Los ajustes son los mismos para todas las partes. Y son opciones muy sencillas. El color, la tipografía y Spacing que es el mismo caso que ya hemos visto en la imagen.

Por √ļltimo est√°n los ajustes para los enlaces de la paginaci√≥n. Lo √ļnico a destacar que no hayamos visto antes es el color. Tienes tres colores diferentes a configurar. Normal es el que color general, Hover ya hemos visto que se aplica cuando se pasa el rat√≥n por encima y Active es el enlace que apunta a la p√°gina en la cual se est√°. Si por ejemplo est√°s en la p√°gina 2, el enlace que apunte a la p√°gina 2 ser√° el enlace Active.

Portfolio

Que el nombre de este widget no te confunda. Con él vas a poder recuperar las imágenes del tipo de contenido que selecciones. El tipo de contenido que puedas seleccionar va a depender del tema y plugins que tengas en tu WordPress. Vamos a ver en primer lugar las opciones de  distribución (Layout) de las imágenes:

  • Columns: El n√ļmero de columnas que quieres mostrar.
  • Posts Per Page: El n√ļmero de im√°genes que vas a mostrar en total.
  • Tama√Īo de la imagen: Selecciona el tama√Īo que quieras entre los que tengas disponibles en tu WordPress o escribe uno a mano. No elijas un tama√Īo grande para no perjudicar el rendimiento de tu web.
  • Masonry: Si est√° desactivada esta opci√≥n todas las columnas van a tener la misma altura, si la activas cada columna tendr√° la altura que necesite consiguiendo as√≠ el efecto que se llama Magazine.

En las opciones de Layout has configurado como quieres que se vea el contenido, en las opciones de Query vas a configurar qué contenido quieres mostrar:

  • Source: Selecciona aqu√≠ qu√© tipo de contenido quieres recuperar. Dependiendo del tipo de contenido podr√°s filtrar el resultado. Por ejemplo, si es una entrada podr√°s filtrar el resultado por autor, categor√≠a o etiquetas.
  • Order: Aqu√≠ vas a poder configurar como quieres ordenar el contenido. Lo puedes hacer por fecha, en orden alfab√©tico o aleatorio.
  • Offset: Aqu√≠ puedes configurar a partir de qu√© n√ļmero quieres que se empiece a recuperar el contenido. Por ejemplo, si escribes un 1, se va a empezar desde el segundo art√≠culo (se salta 1).

Por √ļltimo, tienes la posibilidad de incluir una barra de filtrado de contenido para que la use el usuario. Se diferencia de los filtros que has visto antes en que este filtrado va a ser p√ļblico y lo van a poder usar los usuarios que visiten tu web.¬†En las opciones de Estilo existen opciones que ya has visto antes como color de espacio o espacio entre elementos.

Slides

Con este widget vas a poder crear un slider pero de diapositivas. Con diapositivas me refiero a que no te tienes que limitar a solo imágenes sino que también puedes escribir texto en varios formatos o enlaces. En cada elemento del slider puedes configurar las mismas opciones. Vienen divididas en tres secciones:

  • En el fondo puedes elegir el color o si lo prefieres puedes usar una imagen.
  • En el contenido tienes cuatro partes: el encabezado, el texto general, el bot√≥n y la direcci√≥n si quieres formar un enlace. Por √ļltimo puedes elegir si quieres que el enlace afecte a toda la diapositiva o solo al bot√≥n.

Luego tienes opciones que son comunes a todas las diapositivas. Vamos a verlas:

  • Altura (height): La altura que van a tener las diapositivas.
  • Navigation: Puedes configurar que se pueda navegar con flechas, puntos, las dos opciones juntas o que no aparezca navegaci√≥n.
  • Pause on Hover: Si activas estos interruptores el pase de diapositivas se parar√° al pasar el rat√≥n por encima.
  • Autoplay y Autoplay Speed: si activas esta opci√≥n se iniciar√° el pase de diapositivas de forma autom√°tica y adem√°s podr√°s configurar la velocidad a la que lo hace.
  • Infinite Loop: Al activar esta opci√≥n cuando se alcance la √ļltima diapositiva se volver√° a la primera.
  • Transition y Transition Speed: Elige si quieres que el pase de diapositivas se haga con desplazamiento o con un fundido entre las dos diapositivas. Adem√°s puedes configurar la velocidad con la que se haga.
  • Content Animation: Puedes elegir la animaci√≥n con la que quieres que aparezca el texto de la diapositiva.

En las opciones de Estilo vas a poder configurar colores, tipografías de los distintos elementos que forman parte del slider: encabezado, texto, botón y navegación.

Form

Con este widget vas a poder incluir de forma muy sencilla un formulario de contacto. Cuando un usuario use este formulario te va a llegar un email a la dirección que configures con el contenido del mensaje. En este widget vas a tener que configurar más aspectos aparte de los habituales. Pero no te preocupes que vamos a verlo todo. Vamos a empezar por los campos del formulario (Form Fields):

  • Vas a tener de inicio los tres campos b√°sicos de un formulario de contacto, pero t√ļ puedes agregar los que quieras haciendo click en el bot√≥n Agregar Elemento.
  • Type: Elige el tipo de dato que va a contener el campo. Es importante y √ļtil para que se verifique que el dato que se introduce es el que esperas. Por ejemplo, si eliges que el tipo sea email y no introduces un email v√°lido no se va a poder enviar el formulario.
  • Label: Aqu√≠ vas a configurar el texto que aparece encima de cada campo. Y adem√°s es un aspecto muy importante en cuanto accesibilidad porque explica de qu√© es el campo para personas ciegas por ejemplo.
  • Placeholder: El placeholder es el texto que aparece dentro del campo y que desaparece una vez que se empieza a escribir.
  • Required: Si marcas esta opci√≥n el formulario no se env√≠a si no se rellena el campo.
  • Input Size: Aqu√≠ vas a elegir el tama√Īo que van a tener los campos.
  • Por √ļltimo puedes elegir si quieres mostrar las etiquetas de los campos (Label) y que a los campos obligatorios (Required) se les a√Īada una peque√Īa marca para que el usuario lo sepa.

Para el bot√≥n tienes las opciones que ya hemos visto en otros widgets como son el texto que va a tener, tama√Īo, alineaci√≥n, etc.¬†El bloque siguiente es muy importante porque vas a configurar qu√© va a ocurrir cuando un usuario env√≠e el formulario. Cuando selecciones una opci√≥n aparecer√° otro panel donde configurar los datos necesarios. Te explico las opciones que tienes:

  • Email: Aqu√≠ vas a enviar los datos que introduzca el usuario a la direcci√≥n de email que t√ļ pongas. Los campos que puedes configurar son el email al que se van a enviar la informaci√≥n, es decir, el tuyo. El asunto, escribe algo con lo que identifiques de forma r√°pida que el correo es que alguien ha completado el formulario. En email content deja [all-fields] para recibir toda la informaci√≥n que escriba un usuario. Y en Reply-To puedes elegir el correo que introduzca el usuario para poder contestarle directamente desde el email.
  • Email 2: Con Email 2 tienes la posibilidad de enviar la misma informaci√≥n a otra direcci√≥n de email. Tambi√©n lo puedes hacer poniendo esta direcci√≥n en copia en las opciones de Email.
  • Mailchimp: Introduciendo el API Key que te proporciona Mailchimp en su web puedes configurar de forma r√°pida que este formulario se integre con tu lista de suscriptores. Es el √ļnico campo a configurar.
  • Redirect: Aqu√≠ puedes escribir una direcci√≥n web a la que ser√° redirigido el usuario cuando env√≠e el formulario. Por ejemplo a tu p√°gina Home.
  • Webhook: Aqu√≠ puedes escribir una p√°gina web que va a procesar los datos que le pases en el formulario. Si no sabes programaci√≥n, no le hagas mucho caso porque con las opciones anteriores son suficientes.

Estas opciones las puedes combinar, no tienes que elegir una sola. Por ejemplo, puedes elegir que se env√≠en los datos por email a tu correo y se redirija al usuario a la p√°gina Home.¬†Por √ļltimo puedes agregar mensajes para mejorar la experiencia del usuario. Los mensajes que puedes personalizar son si el formulario se env√≠a de forma correcta, si ocurre un error, si no se rellena alg√ļn campo obligatorio o si se introduce informaci√≥n no v√°lida.¬†En las opciones de Estilo tienes las opciones de colores, tipograf√≠a o espaciado que ya has visto en este manual.

Login

Con este widget vas a poder configurar un login alternativo al que ofrece WordPress. Eso significa que lo vas a poder configurar a tu gusto y as√≠ adaptarlo al dise√Īo del resto de tu web.¬†Las opciones son muy sencillas. En primer lugar puedes elegir si mostrar o no las etiquetas de los campos y tambi√©n el tama√Īo de los campos de texto.¬†En el bot√≥n puedes configurar el texto que va a tener, su tama√Īo y la alineaci√≥n que quieres que tenga.¬†Lo m√°s interesante llega en las opciones adicionales. Vamos a verlas en m√°s detalle:

  • Redirect After Login: Si activas este interruptor vas a poder configurar que una vez que el usuario se haya identificado de forma correcta, se le redirija a una p√°gina que t√ļ elijas. Por ejemplo, puedes llevarlo a la p√°gina de inicio.
  • Lost Your Password, Remember me, Logged in Message: Estos interruptores van a a√Īadir las opciones de que aparezca un enlace para poder recuperar la contrase√Īa, que no se cierre la sesi√≥n del usuario y que aparezca un mensaje cuando se identifique.
  • Custom Label: Este interruptor es obligatorio activarlo porque te va a permitir personalizar las etiquetas que aparece. De esa manera vas a poder escribir los textos en espa√Īol en lugar de ingl√©s.

En los ajustes de Estilo vas a poder configurar colores, espacio entre elementos, tipografía… como ya hemos visto.

Price List

Con este widget vas a poder escribir una serie de precios en forma de lista. Es muy sencillo de configurar. Tienes que escribir el título y la descripción del producto, el precio y tienes la posibilidad de incluir una imagen y un enlace.

En las opciones de Estilo vas a poder configurar los estilos de los distintos elementos de la manera que ya hemos visto. Colores, tipografía, espacio entre elementos…

Price Table

Este widget es similar al anterior en su función pero muestra el precio de una forma más visual y atractiva. Está compuesto por varias partes. En primer lugar tienes la cabecera donde puedes escribir un título y un subtítulo. A continuación tienes el bloque del precio. Aquí puedes configurar la divisa en la que está el precio, la cantidad, puedes escribir el precio original si el precio está rebajado y puedes escribir un texto indicando si el pago es periódico.

Siguiendo al precio puedes escribir una lista de caracter√≠sticas que tiene tu servicio o producto.¬†Para terminar este bloque tienes el bot√≥n donde va a hacer click un posible cliente. Si tienes un bot√≥n tienes que configurar el enlace al que va a dirigir y un peque√Īo texto debajo por si quieres incluir algo m√°s de informaci√≥n.

Un peque√Īo detalle m√°s que puedes a√Īadir una marca en la parte superior. Es muy √ļtil si tienes varios precios y quieres que un cliente se decante m√°s por uno que por otro puedes incluir esta marca que ponga algo como M√°s vendido.¬†En las opciones de Estilo vas a poder configurar todos los elementos que hemos visto. El fondo de la cabecera, del resto del bloque, el color del precio, del bot√≥n, de cualquier texto‚Ķ Son opciones que ya has visto y no deber√≠as tener problemas con ellas.

Flip Box

Este widget es muy curioso y puede dar resultados espectaculares. Se trata de dos bloques de texto pero en el que el segundo solo se muestra al pasar el ratón por encima, como una moneda. Las dos cajas que tienes disponibles se llaman Front y Back y las dos se configuran de la misma forma. Puedes elegir un elemento gráfico que aparezca encima del texto. Tienes disponible imágenes, iconos o no poner nada. Las opciones que vas a tener si eliges una imagen o un icono son las que ya has visto.

Adem√°s del elemento gr√°fico tienes un encabezado y un texto. A parte tienes otra pesta√Īa para poder configurar el fondo.¬†Por √ļltimo tienes ajustes comunes a las dos cajas de texto que configuran las animaciones que van a ocurrir cuando pongas el rat√≥n encima.¬†En las opciones de Estilo vas a poder configurar colores de iconos, encabezados, textos‚Ķ Todas opciones que ya has visto.

Countdown

En este widget vas a poder establecer una cuenta atr√°s. Es muy √ļtil si quieres poner una fecha l√≠mite a la contrataci√≥n de un servicio o la compra de un producto.¬†Las opciones que permiten configurar este widget son muy f√°ciles de entender.¬†En primer lugar tienes que elegir la fecha y hora l√≠mites que quieres configurar.¬†A continuaci√≥n, tienes una serie de interruptores para mostrar u ocultar la informaci√≥n como d√≠as, horas, minutos y segundos.

Despu√©s puedes configurar si quieres que se muestren las etiquetas y puedes personalizar el texto como ponerlo en ingl√©s por ejemplo.¬†En las opciones de Estilo puedes configurar las cajas del contador: el color de fondo, borde‚Ķ Y el color y tipograf√≠a de los n√ļmeros y etiquetas. La forma de configurarlo es como ya hemos visto.

Share Buttons

En este widgets vas a incluir los botones para compartir la p√°gina en las distintas redes sociales que configures.¬†En el bot√≥n Agregar Elemento vas a poder a√Īadir las distintas redes disponibles. Y a continuaci√≥n puedes configurar la etiqueta.

  • View: Aqu√≠ vas a poder elegir si quieres que en el bot√≥n se muestre el icono, el nombre o una combinaci√≥n de las dos opciones.
  • Skin: Aqu√≠ vas a elegir el dise√Īo que van a tener los botones. A m√≠ me gusta el dise√Īo Flat por su sencillez, pero es una cuesti√≥n de gustos.
  • Shape: Elige si quieres un bot√≥n cuadrado, con las esquinas redondeadas o con forma de c√≠rculo.
  • Columns: Si quieres configurar cuantos botones se van a incluir antes de que se a√Īada una nueva l√≠nea lo puedes hacer aqu√≠.

En las opciones de Estilo vas a poder seleccionar el hueco entre botones, el tama√Īo de los botones, de los iconos‚Ķ opciones que ya hemos visto.

Tambi√©n puedes elegir que los botones tengan el color oficial de cada red social o elegir un color personalizado que se integre con el dise√Īo de tu web.

Template

Este widget es muy r√°pido de explicar pero muy √ļtil. Con √©l vas a poder a√Īadir widgets o dise√Īos que tengas guardados como plantilla. As√≠ puedes a√Īadir cualquier dise√Īo en cualquier lugar de forma r√°pida y as√≠ reutilizar trabajo que ya hayas hecho.

Widgets generales

Estos widgets se podrían entender como una versión intermedia de los dos grupos anteriores. Son más avanzados que los básicos pero menos que los de la versión Pro. Con estos widgets vas a conseguir elementos muy visuales de una forma muy sencilla.

tutorial elementor page builder widgets generales

Cuadro de imagen

Este widget vas a poder configurar un bloque que consiste en una imagen, un encabezado y un texto. La configuraci√≥n es muy sencilla.¬†Tienes un espacio para seleccionar una imagen, escribir un encabezado y un texto.¬†Lo √ļnico diferente a destacar es que puedes configurar un enlace. Ese enlace se va a aplicar al icono y al encabezado pero no sobre la descripci√≥n.¬†En opciones de Estilo puedes configurar varios aspectos que ya hemos visto como alineaci√≥n del texto, color, tipograf√≠a‚Ķ

Caja de icono

Seguro que has visto este widget en muchas webs. Se usa sobre todo para describir caracter√≠sticas de una forma m√°s visual y no usar solo texto que haga el dise√Īo muy mon√≥tono. Yo mismo uso este dise√Īo en mi web.¬†En este widget tienes que distinguir entre tres partes: el icono, el encabezado y el texto, llamado descripci√≥n en el widget.¬†Lo bueno es que las opciones que tiene las hemos visto. Son opciones como el dise√Īo del icono, colores, tama√Īos, etc.¬†El enlace al igual que en el caso anterior del Cuadro de imagen se aplica al icono y al encabezado pero no a la descripci√≥n.

Galería de imágenes

Con este widget vas a poder crear una galer√≠a de im√°genes que tengas subidas a tu WordPress. Para agregar las im√°genes que quieras tienes que hacer click en A√Īadir Im√°genes. Se te abrir√°n todas las im√°genes que tengas en tu web. Selecci√≥nalas y haz click en el bot√≥n Crear nueva galer√≠a y a continuaci√≥n Insertar Galer√≠a.

Despu√©s puedes configurar las im√°genes como su tama√Īo entre los que tengas disponibles, las columnas en las que quieres que aparezcan las im√°genes, el orden o si quieres que al hacer click en una imagen se abra en una ventana aparte.¬†En las opciones de Estilo puedes elegir el espacio entre las im√°genes o si quieres ponerles un borde. Adem√°s puedes configurar si quieres mostrar la leyenda de las im√°genes en caso de que la tengas escrita.

Carrousel de im√°genes

Aquí vas a poder configurar un slider con imágenes. Este widget es muy similar al anterior solo que aquí las imágenes van rotando en lugar de estar fijas. La forma de agregar las imágenes es igual al widget anterior de Galería. El resto de opciones son las propias de un slider:

  • Diapositivas a mostrar: lo m√°s habitual en un slider es mostrar una √ļnica imagen pero tambi√©n puedes mostrar dos o m√°s creando un efecto muy atractivo.
  • Diapositivas a desplazar: aqu√≠ puedes configurar cuantas im√°genes van a saltarse en cada iteraci√≥n del slider.
  • Estirar imagen: Esta opci√≥n solo va a ser visible si eliges una diapositiva. Lo que va a hacer es aumentar la imagen para completar todo el ancho disponible. Ten cuidado porque al aumentar la imagen se puede perder calidad.
  • Navegaci√≥n: Puedes elegir que aparezca la navegaci√≥n por flechas a los lados, por puntos en la parte inferior, los dos a la vez o no mostrar navegaci√≥n.
  • Enlace a: Aqu√≠ puedes elegir si las im√°genes son enlaces en los que puedas hacer click. Y adem√°s si quieres que al hacer click se abra la imagen en una pantalla a parte o una direcci√≥n web.
  • Leyenda: Elige si quieres mostrar o no la leyenda, el t√≠tulo o la descripci√≥n de la imagen en caso de que exista.
  • Pausar al pasar el rat√≥n: Si lo activas, el slider se parar√° al poner el rat√≥n encima de las im√°genes.
  • Auto reproducir: Act√≠valo para que el slider comience solo al cargar la p√°gina.
  • Velocidad de auto iniciado: Cada cuanto tiempo quieres que aparezca una nueva imagen. Est√° en milisegundos. 1000 milisegundos son un segundo.
  • Bucle infinito: Si lo activas, cuando se llegue a la √ļltima imagen se volver√° a mostrar la primera.
  • Efecto: Puedes elegir la animaci√≥n al mostrar una nueva imagen. Puedes elegir en desvanecer o diapositiva que simula que una imagen sale y otra entra.
  • Velocidad de la animaci√≥n: Aqu√≠ vas a configurar la velocidad con la que va a ocurrir la transici√≥n desde que una imagen desaparece hasta que aparece otra.
  • Direcci√≥n: Elige en qu√© direcci√≥n va a ir la animaci√≥n si eliges Diapositiva.
Nota: En las opciones de Estilo vas a poder configurar la posición y color de las flechas y de los puntos con las herramientas que ya te mostrado.

Listado de iconos

Con este widget vas a poder crear una lista donde elegir los iconos que se usan delante de cada elemento. Es muy sencillo de configurar.¬†En cada elemento puedes configurar tres cosas: el texto del elemento de la lista, el icono que va a aparecer delante y tienes la posibilidad de convertirlo en un enlace.¬†En las opciones de Estilo vas a poder configurar la separaci√≥n de los elementos de la lista, la alineaci√≥n y la opci√≥n de incluir un separador entre los elementos.¬†Por √ļltimo puedes configurar el color de los iconos y del texto.

Contador

Con este widget vas a poder escribir un n√ļmero que aparece con una animaci√≥n que consiste en que van pasando los n√ļmeros anteriores. Vamos a ver las opciones que podemos configurar:

  • N√ļmero de inicio y N√ļmero de fin: Estos son los n√ļmeros entre los que va a ocurrir la animaci√≥n. El N√ļmero de fin es el que se va a quedar fijo una vez que termine la animaci√≥n. El n√ļmero de inicio no tiene que ser menor al n√ļmero de fin, si es mayor la cuenta ser√° hacia atr√°s.
  • Prefijo y Sufijo de n√ļmero: Esta opci√≥n la puedes usar para por ejemplo poner un precio y que aparezca delante del n√ļmero el s√≠mbolo del euro o d√≥lar. Recuerda: prefijo delante y sufijo detr√°s.
  • Duraci√≥n de la animaci√≥n: Aqu√≠ puedes configurar lo r√°pido que va a ser la animaci√≥n. Se escribe en milisegundos, 1000 milisegundos son 1 segundo.
  • Thousand Separator: Si escribes un n√ļmero que tenga millares, si activas esta casilla aparecer√° una coma separando de las centenas.
  • T√≠tulo: escribe si quieres un texto que aparecer√° debajo del n√ļmero.
Nota:¬†En las opciones de Estilo vas a poder definir el color y la tipograf√≠a tanto del n√ļmero como del texto.

Barra de progreso

El widget de barra de progreso es muy √ļtil para mostrar informaci√≥n en forma de porcentaje de una manera muy atractiva a la vista. Se muestra con una animaci√≥n simulando la barra de progreso que puedes ver al instalar un programa por ejemplo.¬†En el t√≠tulo vas a escribir un texto explicativo del porcentaje que se muestra.

En el tipo vas a poder elegir dise√Īos ya incluidos que ya hemos visto como el de informaci√≥n (azul), √©xito (verde), advertencia (naranja) o peligro (rojo).¬†En porcentaje vas a escribir el n√ļmero hasta el que se va a rellenar la barra y tambi√©n puedes elegir si quieres mostrar o no el n√ļmero.¬†Por √ļltimo puedes escribir un texto que aparecer√° en el interior de la barra.¬†En las opciones de Estilo vas a poder configurar el color de la barra y el texto y la tipograf√≠a usada.

Recomendación

Con este widget vas a poder incluir de forma muy sencilla y visual los testimonios y recomendaciones de tus clientes. Se usa un texto que se corresponde con el testimonio y a continuación la información de la persona que lo ha escrito. Esa información es una foto, el nombre y el trabajo que tiene.

Las opciones que est√°n disponibles se explican por s√≠ solas. Lo √ļnico que puede no quedar claro es los nombres dados a la posici√≥n de la imagen. Arriba s√≠ est√° claro y Minipublicaci√≥n se pone al lado del nombre y trabajo.¬†Las opciones de estilo ya se han visto a lo largo del tutorial como puede ser colores o tipograf√≠as.

Pesta√Īas

Con este widget vas a poder agrupar varios textos en un √ļnico bloque. Para navegar por los distintos bloques vas a disponer de pesta√Īas en la parte superior o izquierda seg√ļn configures.¬†En las opciones de estilo vas a poder configurar colores de los bordes, fondos, encabezados y texto del bloque. Todas las opciones ya las hemos visto.

Acordeón

Con este widget vas a poder escribir bloques de texto donde solo va a ser visible el encabezado y donde para ver el contenido vas a tener que hacer click. Tienes que saber que al hacer click en un encabezado se cerrarán los demás que estén abiertos. Agregar un elemento es tan fácil como hacer click en Agregar elemento y escribir el encabezado y el texto que quieras. En las opciones de Estilo vas a poder configurar los colores y fondo de los encabezados y los textos. Son opciones que ya hemos visto.

Alternar

Este widget es igual al anterior pero existe una diferencia. Aquí cada vez que abras un bloque de texto los que ya estén abiertos no se van a cerrar.

Iconos Sociales

Con este widget vas a poder configurar los enlaces a tus redes sociales y servicios online. Incluye todas las principales, incluso alguno poco com√ļn como Spotify.

  • En el panel principal de configuraci√≥n vas a poder agregar las distintas redes sociales. Es muy sencillo. Haces click en Agregar elemento. Seleccionas la red social que quieras configurar y pegas el enlace a tu perfil. Elegir la red social influye en el icono que va a aparecer.
  • Despu√©s puedes elegir la forma que van a tener los iconos entre Redondeado, Cuadrado y C√≠rculo.

En las opciones de Estilo puedes seleccionar que los iconos se muestren por su color o puedes elegir t√ļ el color que van a tener si quieres que est√© acorde al dise√Īo de tu web.¬†El resto de opciones que no te he nombrado, ya las has visto antes.

Alerta

Este widget es una especie de Caja de Texto pero con funciones a√Īadidas.¬†Las funciones a√Īadidas son estilos ya preparados, un borde destacado y un bot√≥n para que desaparezca el mensaje.¬†Los estilos, que aqu√≠ se llaman Tipo, ya los hemos visto. Informaci√≥n pone un color azul, √Čxito para el color verde, Advertencia color amarillo y Peligro para el color rojo.¬†En la pesta√Īa de Estilo puedes configurar los colores a tu gusto.

SoundCloud

Con este widget vas a poder a√Īadir un audio alojado en SoundCloud de forma muy sencilla.¬†Solo tienes que copiar y pegar la direcci√≥n del audio. Y puedes configurar el tipo de reproductor que quieres usar, uno sencillo de audio o uno m√°s grande parecido a uno de v√≠deo.¬†Despu√©s tienes una serie de interruptores donde configurar qu√© tipo de informaci√≥n quieres mostrar. Se explican por s√≠ solos. Por ejemplo, puedes hacer que se reproduzca el audio de forma autom√°tica, que aparezca el n√ļmero de reproducciones o el nombre de usuario del audio.

Shortcode

En este widget vas a poder a√Īadir los shortcode que proporcionan otros plugins para aumentar la funcionalidad de la p√°gina.¬†Un shortcode es un c√≥digo del estilo [nombre_plugin id=‚ÄĚ123‚ÄĚ]. Si por ejemplo, tienes un plugin de formulario y creas uno, el plugin te va a mostrar un shortcode que puedes copiar en este widget y as√≠ incluirlo en la p√°gina que est√°s dise√Īando.

HTML

Con este widget vas a poder a√Īadir directamente c√≥digo HTML en el dise√Īo de la p√°gina. Es muy √ļtil para a√Īadir todav√≠a m√°s funcionalidad a Elementor. La verdad es que con¬†la cantidad¬†de widgets disponibles va a ser dif√≠cil que tengas que a√Īadir c√≥digo a mano.

Ancla de men√ļ

Aqu√≠ vas a poder configurar lo que en HTML se llama ancla. Se usa para poder ir a un punto en concreto dentro de una p√°gina. Te va a quedar m√°s claro con un ejemplo.¬†Imagina que tienes una p√°gina donde presentas¬†tus¬†productos,¬†y tenemos un¬†producto¬†que se llama¬†Producto 3. Usa este widget para poner una marca en este lugar, lo llamamos¬†producto3.¬†Pues si ahora configuras un enlace en un men√ļ as√≠: tupagina.com#proucto3¬†al pulsar en ese enlace vas a ir directamente a ese¬†producto, sin tener que recorrer todos los productos que aparecen antes en la p√°gina.

Barra lateral

En este widget de Elementor vas a poder usar cualquier zona de widgets de WordPress que ya tengas configurada en tu web. Observa que estoy distinguiendo entre widgets de Elementor y widgets de WordPress para que no te confundas. No tienes por qué configurar una barra lateral aunque por el nombre te puedas confundir. Tienes que tener en cuenta que se pueden perder los estilos que tengas configurados en tu tema para los widgets en la barra lateral porque estás poniendo un widget de WordPress en otro lugar al que está pensado en un principio.

Widgets de WordPress

Aquí vas a encontrar los mismos widgets que tienes disponibles en la sección de widgets en el Escritorio de WordPress. Estos widgets van a variar de una web a otra dependiendo del tema y de los plugins que tengas instalados. La parte buena es que la configuración es la misma que tienes en WordPress, por lo que no tiene ninguna configuración adicional por usarlos en Elementor.

Ejemplo práctico de creación de una página

A continuación vas a poder ver en el vídeo un ejemplo práctico en tiempo real de como crear una página con Elementor. Vas a poder ver con qué facilidad puedes crear una página partiendo desde cero.

Bonus: Mejores addons para Elementor Page Builder

Elementor es un page builder de WordPress que ofrece una versi√≥n gratuita (que no est√° mal para empezar, pero que se queda peque√Īa enseguida) y otra versi√≥n PRO que te ofrece una funcionalidad extra muy interesante (sobre todo por el theme builder). De todas maneras, hay usuarios deseosos de m√°s opciones de dise√Īo y widgets y, por ello, son muchos los desarrolladores que han hecho plugins para a√Īadir todav√≠a m√°s funcionalidad a Elementor. Estas son las mejores extensiones para el page builder de WordPress Elementor:

All-in-One Addons

mejores addons elementor packs elementos libreria widgets page builder all in one addons
Gratis

All In One Addons¬†es paquete de elementos para el page builder Elementor gratuito y muy sencillo de usar, desarrollado por el propio WordPress, con el que tendr√°s una colecci√≥n que se actualizar√° constantemente de elementos gratuitos para Elementor. Si puedes pensar en alguna funci√≥n concreta para a√Īadir a tu web gracias a este addon lo podr√°s hacer. Es un pack que contiene m√°s de 35 elementos con los que podr√°s hacer pr√°cticamente todo lo que se te pase por la cabeza en cuanto al dise√Īo. Muy √ļtil si apenas tienes experiencia.

Ir a All-in-One Addons

Crocoblock

mejores addons elementor packs elementos libreria widgets page builder crocoblock
Design $49/a√Īo por 1 web / E-Commerce $69/a√Īo por 1 web / Todo Incluido $229/a√Īo webs ilimitadas / Lifetime $499

Crocoblock es la librer√≠a de elementos¬†definitiva para el page builder Elementor, permite que optimices Elementor gracias a una serie de modernas herramientas con las que podr√°s ahorrar tiempo y dise√Īar p√°ginas webs de una forma m√°s efectiva, r√°pida y f√°cil. Son 14 packs que hacen un total de 150 widgets que puedes adquirir juntos o separados. Contiene JetBlocks que facilita la creaci√≥n del encabezado y del pie de pagina y JetTricks que a√Īadir√° efectos visuales. Es realmente √ļtil para dise√Īadores web con experiencia.

Ir a Crocoblock

Element Pack

mejores addons elementor packs elementos libreria widgets page builder element pack pro
Personal Package $24/a√Īo / Business Package $59/a√Īo / Developer Package $129/a√Īo

Gracias a Element Pack¬†no tendr√°s limites a la hora de construir tu p√°gina web con el page builder Elementor. Se trata de uno de los mejores addons y m√°s avanzados del mercado. Adem√°s, es muy sencillo de utilizar, cada elemento o widget que viene en este addon tiene una gran cantidad de opciones avanzadas por lo que se puede decir que no hay limite de creaci√≥n. Y si encima no quedas satisfecho, te devuelven el dinero. Puedes pagarlo anualmente o para toda la vida. Esto hace que sea √ļtil para principiantes, usuarios m√°s avanzados e incluso dise√Īadores profesionales.

Ir a Elementor Pack

Elementor Extras

mejores addons elementor packs elementos libreria widgets page builder elementor extras
Single 26 ‚ā¨ / Unlimited 64 ‚ā¨ / Lifetime 128 ‚ā¨

Con Elementor Extras podr√°s completar tu paquete de elementos con widgets y extensiones cuidadosamente hechas para el page builder Elementor. Cada uno de estos ofrece algo que no han pensado los dem√°s desarrolladores. Por lo tanto se puede decir que pr√°cticamente lo que ofrece es √ļnico y dif√≠cil de conseguir. Tiene una gran variedad de elementos, muy configurables, de gran creatividad. Son en total 31 widgets en lo que puedes hacer todo lo que imaginas. Muy √ļtil para usuarios un poco m√°s avanzados.

Ir a Elementor Extras

Elementor Pro

mejores addons elementor packs elementos libreria widgets page builder elementor pro
Personal $ 49/a√Īo por 1 web / Plus $ 99/a√Īo por 3 webs / Expert $ 199/a√Īo webs ilimitadas

Elementor Pro¬†te permitir√° llevar tu dise√Īo al siguiente nivel. Las razones para que lleves tu page builder Elementor a un nivel superior son de peso, entre otras cosas, podr√°s customizar el encabezado y el pie de p√°gina. Dise√Īar personalmente cada parte de tu blog, construir p√°ginas webs visualmente din√°micas y muy avanzadas. Podr√°s tener el control total de tu plantilla. Adem√°s, obtendr√°s m√°s de 50 widgets premium en el que podr√°s desarrollar aspectos como el portfolio, el marketing, temas de e-commerce, efectos y mucho m√°s. Es recomendable para dise√Īadores web.

Ir a Elementor Pro

Envato Elements

mejores addons elementor packs elementos libreria widgets page builder envato elements
Personas 14,50 ‚ā¨ mes / Equipos 9,45 ‚ā¨ mes / Empresa Tarifa Personalizada

Envato Elements¬†es una gran librer√≠a de packs, elementos, addons y widgets para el page builder Elementor entre otras cosas, aqu√≠ podr√°s encontrar todos los recursos online que necesitas. Si te suscribes podr√°s encontrar m√°s de 2.000.000 de recursos de la mayor calidad posible. Esto es realmente interesante para que seas capaz de encontrar exactamente lo que est√°s buscando. Es como un gran bazar pero de recursos para que puedas dise√Īar de forma √≥ptima tu p√°gina web. Es una herramienta que siempre deber√≠as de tener a mano.

Ir a Envato Elements

Essential Addons

mejores addons elementor packs elementos libreria widgets page builder essential addons
1 Web $ 29  / Unlimited $ 59  / Super Bundle $ 199

Essential Addons¬†es la librer√≠a de elementos de dise√Īo m√°s popular que existe para el page builder Elementor, esto es debido a la belleza con la que cuentan los elementos que puedes a√Īadir a tu p√°gina web. Dale poder a tu page builder usando elementos creativos y f√°ciles de usar para hacer crecer tu p√°gina de WordPress. Cuenta con m√°s de 60 elementos creativos y avanzados. Adem√°s siempre se encuentran en constante progreso y avance con lo que recibir√°s actualizaciones inmediatas muy potentes. Est√° m√°s enfocado a profesionales aunque su sencillez de uso permite que cualquiera pueda aprender.

Ir a Essential Addons

HT Mega

mejores addons elementor packs elementos libreria widgets page builder ht mega
1 Web $ 59  / Unlimited $ 299 

HT Mega¬†es una gran libreria de paquetes de elementos para el page builder Elementor. Un pack de m√°s de 80 incre√≠bles elementos de alt√≠sima calidad que te traer√° posibilidades sin l√≠mite. Dale belleza a tu p√°gina web gracias a los elementos que puedes descargar. HT Mega es uno de los b√°sicos para que tu web quede bonita y n√≠tida, desarrolla tu web seg√ļn tu imaginaci√≥n de una forma creativa y sencilla. Adem√°s con un √ļnico pago podr√°s obtener licencia para siempre. Es tan amplio y tan sencillo de usar que es uno de los m√°s recomendables para principiantes.

Ir a HT Mega

JetElements Addon

mejores addons elementor packs elementos libreria widgets page builder jet elements
Single Site $ 19 / Unlimited Sites $ 31  / All 14 Jet Plugins $ 49 

JetElements¬†es por decirlo de alguna manera el paquete est√°ndar con 14 plugins que ofrece crocoblock que ya hemos mencionado previamente. Incluye la mayor√≠a de elementos que puedes encontrar en el mercado salvando alguna excepci√≥n. Por lo tanto esta es una muy buena opci√≥n si est√°s inici√°ndote en Elementor y necesitas un paquete que cubra pr√°cticamente todas las posibilidades que puedas imaginar. Este paquete es muy recomendable si eres un gran dise√Īador web y quieres dar un paso hacia delante.

Ir a JetElements Addon

Livemesh Elementor Addons

 mejores addons elementor packs elementos libreria widgets page builder livemesh elementor addons
Personal¬†$ 37 al a√Īo /Business $ 69 al a√Īo¬† / Developer $ 99 al a√Īo¬†

Con Livemesh Elemento Addons podr√°s ver la diferencia de calidad que existe entre los addons gratuitos y aquellos que son profesionales para el page builder de Elementor. Los gratuitos son un paquete est√°ndar como cualquier otro mientras que aquellos que est√°n dise√Īados para un rendimiento profesional son en su mayor√≠a excepcionales. Son en total casi 30 widgets entre los gratuitos y los profesionales. Adem√°s si eres un dise√Īador web podr√°s comprar las licencias para toda la vida. Se puede decir que estos addons son muy √ļtiles para usuarios intermedios e incluso m√°s avanzados en el dise√Īo web.

Ir a Livemesh Elementor Addons

OceanWP Elementor Widgets

mejores addons elementor packs elementos libreria widgets page builder oceanwp elementor widgets
Personal $ 39/a√Īo 1 Web / Business $ 79/a√Īo 3 Webs/ Agencia $ 129/a√Īo 25 webs

OceanWP Elementor Widgets¬†es un paquete de elementos para el page builder de Elementor muy completo en el que encontrar√°s m√°s de 50 widgets que te dar√°n unas amplias posibilidades a la hora de realizar tu dise√Īo web. Algunos destacan por encima de los dem√°s desarrolladores aunque tambi√©n tiene otros que son muy similares a lo que puedes encontrar en otros lados. Pero claramente este paquete tiene un precio muy competitivo y muy dif√≠cil de superar por la calidad que ofrece. Si eres un dise√Īador podr√°s pagar las licencias para toda la vida.

Ir a OceanWP Elementor Widgets

PowerPack

mejores addons elementor packs elementos libreria widgets page builder powerpack
Yearly Unlimited Sites $ 59 / Lifetime Unlimited Sites $ 199

PowerPack para el page builder de Elementor contiene elementos realmente completo. Te ofrece bastantes widgets realmente interesantes, aunque tambi√©n cabe decir que la mayor√≠a se asemejan a los originales ofrecidos por Elementor aunque esto se da en la mayor√≠a de los paquetes. Suman aproximadamente un total de 43 widgets. Lo interesante es que con un √ļnico pago puedes tener una licencia de por vida y para un n√ļmero de webs ilimitados. Es realmente √ļtil para dise√Īadores web ya que podr√°s hacer grandes trabajos con este addon de elementos.

Ir a PowerPack

Premium Addons

mejores addons elementor packs elementos libreria widgets page builder premium addons
Gratis / Singletime $ 39 / Unlimited $ 79 / Lifetime $ 199

Premium Addons es probablemente uno de los más interesantes paquetes que puedes encontrar para Elementor, es tan interesante por que incluye widgets muy novedosos y creativos que se salen de lo típico. Si deseas probarlo hay una versión gratuita que ya se encuentra a otro nivel comparado con otros desarrolladores.  Consta de mas de 49 elementos de gran utilidad con lo que llevar al siguiente nivel tu página de WordPress. La versión pro es muy interesante pero dependerá de tus necesidades. La versión gratuita será de utilidad para cualquier principiante pero la profesional es recomendable para aquellos que se dediquen a esto.

Ir a Premium Addons

The Pack

mejores addons elementor packs elementos libreria widgets page builder the pack
Gratis / Regular Licence $ 19 /a√Īo / Extended Licence Lifetime $ 105

The Pack¬†es un excelente pack de elementos para el page builder Elementor con m√°s de 180 widgets realmente populares para que puedas crear tu p√°gina web sin tener ni idea de programaci√≥n. Este pack ofrece las opciones m√°s vers√°tiles en la que podr√°s tener todo lo que necesitas para poder dise√Īar perfectamente tu p√°gina web. Aunque si bien es cierto que le falta algo de calidad es ideal si eres un principiante que quiere empezar por alguna parte por la enorme cantidad de elementos y widgets que vienen en el pack, adem√°s de resultar muy econ√≥mico.

Ir a The Pack

The Plus Addons

mejores addons elementor packs elementos libreria widgets page builder the plus addons
1 Web $ 89 Lifetime / 3 Webs $ 249 Lifetime / Ilimitado $ 399 Lifetime

The Plus Addons¬†es una opci√≥n creativa e innovadora en cuanto a la hora de elegir el paquete de widgets adecuado. Se trata de una colecci√≥n de m√°s de 80 widgets muy potentes, m√°s de 18 plantillas para tu web y m√°s de 300 elementos para que puedas construir la p√°gina web que est√°s deseando. Por decirlo de alguna manera todo lo que hay incluido en un paquete, es ideal tanto para crear tu web como si eres dise√Īador. Permite el pago anual o de licencia para toda la vida. Tiene un abanico tan amplio que para poder darle el uso que necesita deber√≠as de tener cierta experiencia previa.

Ir a The Plus Addons

Ultimate Addons

mejores addons elementor packs elementos libreria widgets page builder ultimate addons
Ultimate $69/a√Īo / Mini Agency Bundle $169/a√Īo / Agency Bundle $249/a√Īo

Ultimate Addons¬†es una librer√≠a √ļnica de widgets para el page builder Elementor, es una de las m√°s conocidas y de las m√°s utilizadas pese a tener √ļnicamente una versi√≥n de pago. El pack que ofrece es bastante vers√°til y aunque como en todos tiene bastante widgets que son los t√≠picos de Elementor si que tiene bastantes elementos que Elementor no ofrece. Cuenta con 24 widgets que te har√°n exprimir al m√°ximo el dise√Īo de tu p√°gina web. Adem√°s, Si eres un dise√Īador webs podr√°s pagar las licencias para toda la vida. Ya seas un principiante o un experto esta colecci√≥n de widgets ser√° muy √ļtil para ti.

Ir a Ultimate Addons

Unlimited Elements

mejores addons elementor packs elementos libreria widgets page builder unlimited elements
Starter $ 39 (1 web al a√Īo) / Professional $ 99 (5 webs al a√Īo) / Business $ 149 (webs ilimitadas al a√Īo)

Unlimited Elements¬†es una librer√≠a de elementos para Elementor que como su propio nombre indica es pr√°cticamente ilimitada. Contiene widgets que a√Īadir√°n m√°s funcionalidades y flexibilidad a tu page builder favorito. M√°s de 200 widgets muy sencillos de usar que har√°n que tu proyecto luzca mucho mejor, adem√°s como cada uno de ellos ha sido creado a mano por nuestros expertos, podr√°s customizarlos a tu gusto a√Īadiendo cosas simplemente pulsando un bot√≥n. Adem√°s, si eres dise√Īador podr√°s pagar licencia para toda la vida. Es algo m√°s dif√≠cil de utilizar por lo que para darle un uso correcto se recomienda ser desarrollador o dise√Īador web.

Ir a Unlimited Elements

Widgetkit

mejores addons elementor packs elementos libreria widgets page builder widgetkit
Personal $ 39 (1 web al a√Īo) / Agencia $ 69 (webs ilimitadas al a√Īo) / Ultimate $ 199 (webs ilimitadas para toda la vida)

WidgetKit es un kit de addons para Elementor que no est√° para nada mal, algunos de los widgets que lo compone son realmente interesantes ya que cuentan con opciones realmente buenas pero no es de los paquetes m√°s tops que puedas encontrar en el mercado, aunque como punto positivo se puede decir que el precio es realmente interesante por lo que si est√° empezando con el dise√Īo web este pack es bastante apropiado para que empieces a familiarizarte con el dise√Īo web. Es √ļtil para cualquier tipo de usuario y te permitir√° crear webs de una forma m√°s eficiente.

Ir a Widgetkit
Addons para Elementor Page Builder de WordPress

Crea una p√°gina web profesional con Elementor Page Builder

Despu√©s de leer este megatutorial no vas a tener ninguna excusa para poder conseguir dise√Īos incre√≠bles en tu web.¬†Como te he dicho al comienzo no tienes que esperar nada para poder empezar a usar Elementor.¬†Si no te atreves a instalarlo en tu web, sigue este art√≠culo e instala WordPress en tu ordenador. As√≠ tendr√°s una web de pruebas que solo t√ļ podr√°s usar y sin miedo a meter la pata.

[easy-tweet tweet=¬ĽūüďĆ #Elementor Page Builder: #Tutorial + #Review + #Video para crear tu #Web desde cero¬Ľ user=¬Ľignaciosantiago¬Ľ]

Como te he dicho a lo largo del tutorial, no hay excusa para no empezar a usar Elementor hoy mismo. Se adapta al tema que tengas en uso, cuenta con una versi√≥n gratuita con la que puedes empezar a aprender a sacar todo su potencial y adem√°s cuenta con el mejor rendimiento que he visto en un builder.¬†√Ānimo, empieza ahora mismo instalando Elementor.

¡Quiero saber qué opinas! Deja tu comentario
También te puede interesar esta guía
tutorial wordpress

WordPress es, sin duda, una de las mejores plataformas para crear una página web, un blog o una tienda online para tu negocio, ya que es fácil de usar, flexible y ofrece muchas opciones para personalizarla de acuerdo a tus necesidades. Empieza con buen pie con WordPress, revisa esta completa guía y aprende a potenciar tu pagina web, blog o tienda online WordPress desde el principio.

Ir a la guía