Cómo crear diseños personalizados en WordPress con Elementor

¿Quieres crear tus propios diseños de página personalizados en WordPress? Elementor es un constructor de páginas de WordPress de arrastrar y soltar que te permite crear fácilmente diseños de WordPress personalizados sin tener ningún conocimiento de codificación. En este artículo, te mostraremos cómo crear fácilmente diseños personalizados para WordPress con Elementor con sólo unos pocos clics.

Cómo crear diseños personalizados para WordPress con Elementor

¿Por qué y cuándo necesitas diseños personalizados de WordPress?

Muchos temas gratuitos y premium de WordPress vienen con múltiples opciones de diseño para diferentes tipos de páginas. Sin embargo, a veces ninguno de estos diseños puede satisfacer tus necesidades

Si sabes codificar en PHP, HTML y CSS, puedes crear tus propias plantillas de páginas o incluso crear un tema hijo para tu sitio. Sin embargo, la mayoría de los usuarios de WordPress no son desarrolladores, por lo que esta opción no les sirve

¿No sería estupendo que pudieras crear diseños de página utilizando una interfaz de arrastrar y soltar?

Esto es exactamente lo que hace Elementor. Es un plugin constructor de páginas de WordPress de arrastrar y soltar que te permite crear fácilmente tus propios diseños personalizados de WordPress sin necesidad de tener conocimientos de codificación

Tiene una interfaz de usuario intuitiva que te permite crear diseños personalizados con una vista previa en vivo. Viene con muchos módulos listos para usar para todo tipo de elementos de diseño web.

Hay varias plantillas de diseño profesional que puedes cargar al instante y utilizar como punto de partida. Funciona con todos los temas estándar de WordPress y es compatible con todos los plugins populares de WordPress

Dicho esto, veamos cómo crear diseños personalizados para WordPress con Elementor

Primeros pasos con Elementor

Primero tendrás que comprar el plugin Elementor Pro. Es la versión de pago del plugin gratuito de Elementor y te da acceso a funciones adicionales y a 1 año de soporte

A continuación, tendrás que instalar y activar el plugin de Elementor. Para más detalles, consulta nuestra guía paso a paso sobre cómo instalar un plugin de WordPress.

Tras la activación, tienes que visitar Elementor " Configuración página para configurar los ajustes del plugin

Ajustes de Elementor

Aquí puedes activar Elementor para diferentes tipos de entradas. Por defecto, está habilitado para tus entradas y páginas de WordPress. Si tienes tipos de entrada personalizados en tu sitio, estos también aparecerán aquí, y también puedes activarlos

Puedes excluir o incluir los roles de usuario que pueden utilizar Elementor al escribir entradas o páginas. Por defecto, está habilitado sólo para los administradores

No olvides hacer clic en el botón de guardar los cambios para almacenar tu configuración

Crear un diseño personalizado de WordPress con Elementor

Primero tienes que crear una nueva página (o entrada) en tu sitio de WordPress. En la pantalla de edición de la entrada, verás el nuevo botón "Editar con Elementor"

Editar con el botón de Elementor

Al hacer clic en él, se iniciará la interfaz de usuario de Elementor, donde podrás editar tu página utilizando el constructor de páginas de arrastrar y soltar de Elementor

Interfaz del constructor de Elementor

Ahora puedes añadir secciones y construir tu página desde cero, o puedes añadir una plantilla

Las plantillas son una forma más rápida de empezar. Elementor viene con varias plantillas de diseño profesional que puedes personalizar tanto como quieras

Empecemos con una plantilla haciendo clic en el botón "Añadir plantilla"

Esto hará que aparezca una ventana emergente en la que podrás ver diferentes plantillas disponibles. Debes buscar una plantilla que sea similar a lo que tienes en mente para el diseño de tu página

Selecciona e inserta una plantilla

Ahora haz clic para seleccionar la plantilla que te guste y luego haz clic en el botón "Insertar" para añadirla a tu página

Elementor cargará ahora la plantilla por ti

Ahora puedes empezar a editar la plantilla para adaptarla a tus necesidades. Simplemente apunta y haz clic en cualquier elemento para seleccionarlo, y Elementor te mostrará su configuración en la columna de la izquierda

Editar un elemento en Elementor

Ahora vamos a hablar de cómo funcionan los diseños de Elementor

Los diseños de Elementor se construyen utilizando secciones, columnas y widgets. Las secciones son como filas o bloques que colocas en tu página

Cada sección puede tener varias columnas y cada sección y columna puede tener sus propios estilos, colores, contenido, etc

Edición de secciones y columnas en Elementor

Puedes añadir cualquier cosa en tus columnas y secciones utilizando los widgets de Elementor.

Estos widgets son diferentes tipos de bloques de contenido que puedes colocar en tus secciones de Elementor

Simplemente selecciona un widget y suéltalo en tu sección o columna. Hay un amplio conjunto de widgets disponibles que cubren todos los elementos de diseño web populares en los que puedas pensar

Widgets de Elementor

Puedes añadir imágenes, texto, encabezados, galerías de imágenes, vídeos, mapas, iconos, testimonios, slider, carruseles y mucho más

También puedes añadir widgets predeterminados de WordPress e incluso los widgets creados por otros plugins de WordPress en tu sitio

Una vez que hayas terminado de editar, puedes hacer clic en el botón Guardar para guardar los cambios

Guardar y salir de Elementor

Nota: Guardar un diseño no publicará la página en tu sitio de WordPress. Sólo guardará el diseño de tu página

Ahora puedes previsualizar tu página o ir al panel de control de WordPress

Esto te devolverá al editor de entradas de WordPress. Ahora puedes guardar tu página de WordPress o publicarla en tu sitio web

Publicar página

Crear tus propias plantillas en Elementor

Elementor te permite guardar tus propios diseños personalizados como plantillas. De este modo, puedes reutilizar tus propias plantillas para crear nuevas páginas más rápidamente en el futuro

Simplemente edita la página que quieras guardar como plantilla con Elementor

En la interfaz del constructor de Elementor, haz clic en el icono de la carpeta junto al botón de guardar y luego selecciona "Guardar plantilla"

Guarda tu plantilla

Esto hará que aparezca una ventana emergente en la que tienes que proporcionar un nombre para tu plantilla y hacer clic en el botón de guardar

Nombre de la plantilla

La próxima vez que crees un diseño de página personalizado, podrás seleccionarlo en la pestaña "Mis plantillas"

Plantilla personalizada

También puedes exportar esta plantilla y utilizarla en otros sitios de WordPress con Elementor

Tendrás que visitar Elementor " Biblioteca para ver tus plantillas guardadas. Pasa el ratón por encima del nombre de tu plantilla y haz clic en el enlace "Exportar plantilla"

Exportar plantilla

Después de descargar el archivo de tu plantilla, puedes ir a la página de la biblioteca de otro sitio de WordPress usando Elementor y luego importar tu plantilla

Eso es todo por ahora

Esperamos que este artículo te haya ayudado a aprender a crear diseños personalizados para WordPress con Elementor. Quizás también quieras ver nuestra guía paso a paso sobre cómo acelerar WordPress y aumentar su rendimiento

Si te ha gustado este artículo, suscríbete a nuestro Canal de YouTube para los videotutoriales de WordPress. También puedes encontrarnos en Twitter y Facebook.

Si quieres conocer otros artículos parecidos a Cómo crear diseños personalizados en WordPress con Elementor puedes visitar la categoría Plugins.

¡Más Contenido!

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Go up