Diseñar tus propios diseños de página personalizados en WordPress puede parecer un gran desafío. Mucha gente se preocupa de que crear diseños únicos requiera habilidades de codificación. Esto puede ser frustrante si quieres personalizar la apariencia de tu sitio.
Afortunadamente, con Elementor, no necesitas saber ningún código. Elementor es un constructor de páginas de WordPress de arrastrar y soltar que hace que el diseño de maquetas sea fácil e intuitivo. Incluso los principiantes pueden crear páginas impresionantes con solo unos pocos clics.
Hemos estado ayudando a nuestros lectores a personalizar sus sitios web con Elementor durante años. Por lo tanto, conocemos las formas más fáciles y efectivas de hacer que funcione para ti.
En este artículo, te guiaremos a través de los pasos para crear diseños personalizados de WordPress de forma rápida y sencilla 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 cumplirá tus requisitos.
Si sabes codificar en PHP, HTML y CSS, entonces puedes crear tus propias plantillas de página o incluso construir 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 funciona para ellos.
Entonces, ¿no sería genial si pudieras diseñar diseños de página usando una interfaz de arrastrar y soltar?
Esto es exactamente lo que hace Elementor. Es un plugin de 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 conocimientos de codificación.
WordPress + Elementor es una combinación potente que ofrece 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.
Elementor tiene varias plantillas diseñadas profesionalmente que puedes cargar y usar instantáneamente como punto de partida. Funciona con todos los temas de WordPress que cumplen con los estándares y es compatible con todos los plugins populares de WordPress.
Para más detalles, puedes consultar nuestra reseña completa de Elementor.
Teniendo esto en cuenta, te mostraremos cómo crear diseños personalizados de WordPress con Elementor. Aquí tienes un resumen rápido de todos los pasos que te guiaremos:
- Primeros pasos con Elementor
- Creación de diseños personalizados de WordPress con Elementor
- Creación de tus propias plantillas en Elementor
- Consejo extra: Alternativas a Elementor para crear diseños personalizados
¡Empecemos!
Primeros pasos con Elementor
Primero, necesitarás comprar el plugin Elementor Pro. Es la versión de pago del plugin gratuito Elementor y te da acceso a funciones adicionales y 1 año de soporte.
A continuación, deberás instalar y activar el plugin Elementor. Para más detalles, consulta nuestra guía paso a paso sobre cómo instalar un plugin de WordPress.
Tras la activación, debes visitar la página Elementor » Ajustes para configurar las opciones del plugin.
Aquí, puedes habilitar Elementor para diferentes tipos de contenido. Por defecto, está habilitado para tus entradas y páginas de WordPress.
Si tienes tipos de contenido personalizados en tu sitio, estos también aparecerán aquí y podrás habilitarlos.
Puedes excluir o incluir roles de usuario que pueden usar Elementor al escribir publicaciones o páginas. Por defecto, el constructor de páginas solo está habilitado para administradores.
Luego, no olvides hacer clic en el botón ‘Guardar cambios’ para almacenar tu configuración.
Creación de diseños personalizados de WordPress con Elementor
Primero, necesitas crear una nueva página o publicación en tu sitio de WordPress. En la pantalla de edición de la publicación, notarás el nuevo botón ‘Editar con Elementor’.
Al hacer clic en él, se iniciará la interfaz de usuario de Elementor, donde puedes editar tu página usando el constructor de páginas de arrastrar y soltar de Elementor.
Puedes agregar secciones y construir tu página desde cero o elegir una plantilla.
Las plantillas te brindan una forma rápida y fácil de empezar. Elementor viene con varias plantillas diseñadas profesionalmente que puedes personalizar tanto como desees.
Empecemos con una plantilla haciendo clic en el botón ‘Agregar plantilla’.
Esto abrirá una ventana emergente donde puedes ver las diferentes plantillas disponibles. Deberías buscar una plantilla que sea similar a lo que deseas para el diseño de tu página.
En nuestro ejemplo, estamos viendo plantillas de página 404.
Ahora, necesitas hacer clic para seleccionar la plantilla que te guste y luego hacer clic en el botón ‘Insertar’ para agregarla a tu página.
Elementor cargará ahora la plantilla para ti.
Ahora puedes empezar a editar la plantilla para que se ajuste a tus necesidades. Simplemente apunta y haz clic en cualquier elemento para seleccionarlo, y Elementor te mostrará su configuración en la columna izquierda.
Cómo funcionan los diseños de Elementor
Ahora, hablemos 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 múltiples columnas, y cada sección y columna puede tener sus propios estilos, colores, contenido, etc.
Puedes agregar cualquier cosa en tus columnas y secciones usando los widgets de Elementor. Estos widgets son diferentes tipos de bloques de contenido que puedes colocar en tus secciones de Elementor.
Hay un extenso conjunto de widgets disponibles que cubren todos los elementos populares de diseño web que puedas imaginar. Simplemente selecciona un widget y arrástralo a tu sección o columna.
Puedes agregar imágenes, texto, encabezados, galerías de imágenes, videos, mapas, íconos, testimonios, sliders, carruseles y mucho más.
También puedes agregar widgets predeterminados de WordPress e incluso los widgets creados por otros plugins de WordPress en tu sitio. Por ejemplo, si estás usando WPForms para crear diferentes formularios para tu sitio, entonces puedes usar su widget en Elementor.
Una vez que hayas terminado de editar, puedes hacer clic en la flecha junto al botón 'Publicar' para ver diferentes opciones de guardado.
Nota: Guardar el diseño de una página no publicará la página en tu sitio de WordPress, pero sí la guardará.
Ahora puedes previsualizar tu página o ir al panel de WordPress.
Esto te llevará de regreso al editor de contenido. Ahora puedes guardar tu página de WordPress o publicarla en tu sitio web.
Creación de tus propias plantillas en Elementor
Elementor te permite guardar tus propios diseños personalizados como plantillas. De esta manera, puedes reutilizar tus propias plantillas para crear nuevas páginas aún más rápido en el futuro.
Simplemente edita la página que te gustaría guardar como plantilla con Elementor. En la interfaz del constructor de Elementor, haz clic en la flecha junto al botón 'Publicar'.
Ahora verás más opciones para guardar tu publicación. Simplemente haz clic en la opción 'Guardar como plantilla'.
Esto abrirá una ventana emergente donde deberás proporcionar un nombre para tu plantilla.
Después de ingresar el nombre, simplemente haz clic en el botón 'Guardar'.
La próxima vez que crees un diseño de página personalizado, podrás seleccionarlo desde la pestaña 'Mis plantillas'.
Todo lo que tienes que hacer es hacer clic en el botón ‘Insertar’ para tu diseño de página personalizado.
También puedes exportar esta plantilla y usarla en otros sitios de WordPress usando Elementor.
Simplemente haz clic en el ícono de los 3 puntos y luego en la opción ‘Exportar’.
Desde aquí, puedes descargar la plantilla a tu computadora.
Consejo extra: Alternativas a Elementor para crear diseños personalizados
Además de Elementor, existen otros constructores de páginas de destino y sitios web que te permiten crear diseños personalizados para tu sitio.
Aquí tienes algunas de las mejores alternativas a Elementor que puedes usar:
- SeedProd es el mejor constructor de sitios web de WordPress de arrastrar y soltar que te permite crear diseños personalizados para tus páginas de destino. Hay más de 300 plantillas de temas o páginas de destino para elegir. SeedProd también ofrece toneladas de opciones de personalización y bloques para crear páginas impresionantes. Para más detalles, puedes ver nuestra reseña completa de SeedProd.
- Divi es un tema visual y constructor de páginas. Ha estado en la industria por más de 14 años y ofrece diferentes funciones para crear diseños de WordPress, incluyendo una biblioteca de diseños. Hay muchas opciones de personalización en el constructor visual, y no tienes que editar ningún código.
- Thrive Architect es un constructor de páginas potente y fácil de usar que puedes utilizar para crear diseños hermosos. Viene con más de 352 plantillas y muchas opciones de personalización. Puedes usar su constructor visual de front-end para editar cualquier elemento de la página. Para más detalles, consulta nuestra reseña de Thrive Architect.
- Beaver Builder es otro popular constructor de páginas de arrastrar y soltar para WordPress. Es fácil de usar y puedes configurar fácilmente diseños para páginas y publicaciones usando Beaver Builder. También ofrece plantillas predefinidas para páginas de destino, pero no hay tantas como con SeedProd o Divi.
Esperamos que este artículo te haya ayudado a aprender cómo crear diseños personalizados de WordPress con Elementor. También te puede interesar ver nuestra comparación experta de Elementor vs. Divi vs. SeedProd y nuestras selecciones para el mejor software de diseño web.
Si te gustó este artículo, suscríbete a nuestro canal de YouTube para obtener tutoriales en video de WordPress. También puedes encontrarnos en Twitter y Facebook.
Moinuddin Waheed
He visto crecer Elementor desde las lentes más cercanas desde que se creó siete años antes.
Ofrece una interfaz muy fácil de usar para que cualquiera cree sitios web visualmente estéticos y atractivos.
También ayuda a que un diseño complejo sea pan comido.
Pero, sinceramente, he tenido una mala experiencia en términos de su carga y rendimiento.
Desde que dejé de usarlo, nunca más lo elegí.
Actualmente estoy utilizando SeedProd y algunos constructores basados en bloques que utilizan la función de editor de sitio completo.
Pero, sin embargo, Elementor es muy bueno para cualquiera que esté empezando con un sitio web de WordPress.
Jiří Vaněk
La velocidad del sitio web es un cierto compromiso por usar Elementor, ya que te facilita mucho la creación web. Cuando WordPress introdujo Gutenberg por primera vez, dejé de usarlo por un tiempo. El editor de bloques era una pesadilla para mí. No lo entendía y me parecía complicado. Luego descubrí Elementor, y gracias a él, volví a WordPress y me alegré de que construir sitios web a través de WordPress fuera tan simple como antes. Sí, en algunos casos, Elementor puede ralentizar el sitio web, pero se trata más de la configuración general del sitio web que de un problema directo con Elementor. Sin embargo, creo que si no fuera por Elementor, muchas personas no usarían WordPress en absoluto debido a la complejidad del Editor de Gutenberg.
Allin
¿Es malo cambiar entre el personalizador y Elementor al construir un sitio web? ¿Esto debilita de alguna manera el sitio? Estoy usando el tema Astra.
Soporte de WPBeginner
Querrás quedarte con un solo editor, ya que cambiar de uno a otro podría modificar el marcado que has agregado a tu contenido.
Administrador
Jiří Vaněk
No es una buena práctica. Al igual que al escribir un artículo. Si alguien salta de Elementor a Gutenberg, generalmente resulta en que los estilos se desordenen y el resultado es malo. Es bueno apegarse a un solo método a la vez.
Lindy Warrell
He tenido demasiado miedo de instalar Elementor en caso de que interfiera con mi tema. ¿Lo hace? Si no, puede que lo pruebe, ya que encuentro que los bloques de Gutenberg son muy limitantes para organizar o diseñar mis propias páginas.
Soporte de WPBeginner
By default it shouldn’t, if you reach out to Elementor they can let you know how it will react with your theme
Administrador
J M Das
El Post es muy útil. Tengo un sitio web de listados de propiedades. Uso el plugin Impress Listing para esto. ¿Cómo usar los diseños o plantillas personalizados creados de esta manera, en lugar de la página de listado predeterminada? La información en la página dice que los diseños o plantillas personalizados deben agregarse al directorio del tema. ¿Cómo hacerlo? Estoy usando un tema hijo.
Elaine Wright
¿Dónde almacena Elementor su CSS en el árbol de directorios de archivos? ¿Dónde puedo encontrar los archivos que edita?
¿Almacena algo en la base de datos?
He estado buscando una respuesta a esto durante bastante tiempo y no encuentro nada.
¡Gracias!
Yula
¡Eso fue extremadamente útil! ¡Gracias! Me ahorró mucho trabajo
Erwin
¿Estás diciendo que no necesitas crear un tema hijo cuando usas Elementor?
¿Qué pasará si actualizas el tema?
Personal editorial
Elementor es un constructor de páginas y su configuración se almacena en el plugin. Funcionará con cualquier tema.
Administrador
andre
¿Es posible editar el tema hijo usando Elementor? Especialmente en el diseño de categorías.
Porque, aunque tengo un buen diseño en mi página de "inicio", pero cuando paso a la categoría, el diseño no encaja con el estilo de la página de inicio.
Monique
Estoy tratando de crear mi página ejecutiva con fotos y biografía. ¿Cómo empiezo con eso con Elementor?
David Liou
¿Eso significa que necesitas actualizar tu cuenta a tipo negocio? Porque la versión personal no soporta la carga de plantillas.
Soporte de WPBeginner
Hola David,
Este artículo trata sobre sitios web autoalojados de WordPress.org. Por favor, consulta nuestra guía sobre la diferencia entre WordPress.org autoalojado vs blog gratuito de WordPress.com.
Administrador
Alex
¿El sitio resultante es responsivo? Otras aplicaciones similares presumen que ayudan a crear sitios totalmente responsivos y he descubierto que son una decepción total.
Tenika
Usé la versión gratuita para diseñar mi página de inicio y es totalmente responsiva. ¡Este es un plugin realmente genial y hace todo lo que podrías necesitar en la versión gratuita! Es tan bueno que planeo comprar la versión pro solo para apoyar y agradecer al desarrollador por un plugin tan útil.
Rodney Lacambra
Gran tutorial usando el constructor de páginas de arrastrar y soltar de Elementor. No he probado este, pero vale la pena.
Esta podría ser una gran alternativa para el constructor de páginas de SiteOrigin
Gracias por compartir. En general, es bueno tenerlo para crear diseños personalizados con WordPress.
~Rod
Deepak
Estoy usando Elementor en mi blog y me muestra el error "Servidor de Internet no encontrado" cuando voy a editar mi página con este plugin.
Tenika
Deberías revisar su página de soporte en su sitio web. Tiene muchos consejos útiles para la solución de problemas.
Victorvijau
Gracias por la publicación. He estado buscando un plugin para este propósito para construir una página para mi sitio
Muchas gracias