Saltar al contenido

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

How to Create Custom WordPress Layouts with Elementor

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

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

¿Por qué y cuándo necesita 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 satisfaría sus requisitos.

Si sabe cómo codificar en PHP, HTML y CSS, puede crear sus propias plantillas de página o incluso crear un tema secundario para su sitio. Sin embargo, la mayoría de los usuarios de WordPress no son desarrolladores, por lo que esta opción no funciona para ellos.

¿No sería genial si pudieras crear diseños de página usando una interfaz de arrastrar y soltar?

Esto es exactamente lo que hace Elementor. Es un complemento de generador de páginas de arrastrar y soltar de WordPress que le permite crear fácilmente sus propios diseños de WordPress personalizados sin ninguna habilidad de codificación.

Tiene una interfaz de usuario intuitiva que le 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 diseñadas profesionalmente que puede cargar y usar instantáneamente como punto de partida. Funciona con todos los temas estándar de WordPress compatibles y es compatible con todos los complementos populares de WordPress.

Dicho esto, echemos un vistazo a cómo crear diseños personalizados de WordPress con Elementor.

Comenzando con Elementor

Primero deberá comprar el complemento Elementor Pro. Es la versión paga del complemento gratuito Elementor y le brinda acceso a funciones adicionales y 1 año de soporte.

A continuación, deberá instalar y activar el complemento Elementor. Para obtener más detalles, consulte nuestra guía paso a paso sobre cómo instalar un complemento de WordPress.

Tras la activación, debe visitar Elementor »Configuración página para configurar los ajustes del complemento.

Configuración de Elementor

Aquí puede habilitar Elementor para diferentes tipos de publicaciones. Por defecto, está habilitado para sus publicaciones y páginas de WordPress. Si tiene tipos de publicaciones personalizadas en su sitio, también aparecerán aquí, y también puede habilitarlos.

Puede excluir o incluir roles de usuario que pueden usar Elementor al escribir publicaciones o páginas. Por defecto, está habilitado solo para administradores.

No olvides hacer clic en el botón Guardar cambios para guardar tu configuración.

Crear un diseño personalizado de WordPress con Elementor

Primero debe crear una nueva página (o publicación) en su sitio de WordPress. En la pantalla de edición posterior, notará el nuevo botón «Editar con Elementor».

Editar con el botón Elementor

Al hacer clic en él, se abrirá la interfaz de usuario de Elementor donde puede editar su página utilizando el generador de páginas de arrastrar y soltar de Elementor.

Interfaz de generador Elementor

Ahora puede agregar secciones y crear su página desde cero, o puede agregar una plantilla.

Las plantillas son una forma más rápida de comenzar rápidamente. Elementor viene con varias plantillas diseñadas profesionalmente que puede personalizar tanto como desee.

Comencemos con una plantilla haciendo clic en el botón «Agregar plantilla».

Aparecerá una ventana emergente donde podrá ver las diferentes plantillas disponibles. Debe buscar una plantilla que sea similar a la que tiene en mente para el diseño de su página.

Seleccione e inserte una plantilla

Ahora haga clic para seleccionar la plantilla que le gusta y luego haga clic en el botón «Insertar» para agregarla a su página.

Elementor ahora cargará la plantilla por usted.

Ahora puede comenzar a editar la plantilla para que coincida con sus necesidades. Simplemente apunte y haga clic en cualquier elemento para seleccionarlo, y Elementor le mostrará su configuración en la columna izquierda.

Editar un elemento en Elementor

Ahora hablemos sobre cómo funcionan los diseños de Elementor.

Los diseños de Elementor se crean 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.

Edición de secciones y columnas en Elementor

Puede agregar cualquier cosa en sus columnas y secciones usando widgets de Elementor.

Estos widgets son diferentes tipos de bloques de contenido que puede colocar en sus secciones de Elementor.

Simplemente seleccione un widget y suéltelo en su sección o columna. Hay un amplio conjunto de widgets disponibles que cubren todos los elementos de diseño web populares que se te ocurran.

Widgets de Elementor

Puede agregar imágenes, texto, encabezados, galerías de imágenes, videos, mapas, íconos, testimonios, controles deslizantes, carruseles y mucho más.

También puede agregar widgets predeterminados de WordPress e incluso los widgets creados por otros complementos de WordPress en su sitio.

Una vez que haya terminado de editar, puede hacer clic en el botón Guardar para guardar sus cambios.

Guardar y salir de Elementor

Nota: Guardar un diseño no publicará la página en su sitio de WordPress. Simplemente guardará el diseño de su página.

Ahora puede obtener una vista previa de su página o ir al panel de WordPress.

Esto lo llevará de regreso al editor de publicaciones de WordPress. Ahora puede guardar su página de WordPress o publicarla en su sitio web.

Publicar página

Creando tus propias plantillas en Elementor

Elementor le permite guardar sus propios diseños personalizados como plantillas. De esta manera, puede reutilizar sus propias plantillas para crear nuevas páginas aún más rápido en el futuro.

Simplemente edite la página que desea guardar como plantilla con Elementor.

En la interfaz del generador de Elementor, haga clic en el icono de la carpeta junto al botón Guardar y luego seleccione «Guardar plantilla».

Guarda tu plantilla

Aparecerá una ventana emergente donde deberá proporcionar un nombre para su plantilla y hacer clic en el botón Guardar.

Nombre de la plantilla

La próxima vez que cree un diseño de página personalizado, podrá seleccionarlo en la pestaña «Mis plantillas».

Plantilla personalizada

También puede exportar esta plantilla y usarla en otros sitios de WordPress usando Elementor.

Necesitarás visitar Elementor »Biblioteca página para ver sus plantillas guardadas. Coloque el mouse sobre el nombre de su plantilla y luego haga clic en el enlace «Exportar plantilla».

Exportar plantilla

Después de descargar su archivo de plantilla, puede ir a la página de la biblioteca en otro sitio de WordPress usando Elementor y luego importar su plantilla.

Eso es todo por ahora.

Esperamos que este artículo te haya ayudado a aprender cómo crear diseños personalizados de WordPress con Elementor. Es posible que también desee ver nuestra guía paso a paso sobre cómo acelerar WordPress y aumentar el rendimiento.

Si le gustó este artículo, suscríbase a nuestro canal de YouTube para ver videos tutoriales de WordPress. También nos puede encontrar en Twitter y Facebook.

.