Elementor es uno de los mejores maquetadores de páginas de la comunidad de WordPress hoy en día. ¡Elementor ha evolucionado tanto que puede diseñar sitios web totalmente funcionaes incluso con un tema gratuito y básico de WordPress sin escribir una sola línea de código!
Aunque Elementor nos ofrece múltiples opciones para personalizar nuestras páginas web, normalmente nos perdemos los detalles y las partes más pequeñas de este complemento que pueden tener un gran impacto en el proceso de diseño de un sitio web.
Diseñar páginas web con Elementor es bastante rápido y fácil, pero si deseas acelerar el proceso de diseño, entonces estás en el lugar correcto. En este artículo, vas a aprender cómo puedes acelerar el proceso de diseño con Elementor haciendo uso completo del editor con herramientas de terceros.
Tabla de Contenidos
Comienza con plantillas prediseñadas
Las plantillas prediseñadas pueden acelerar el proceso de desarrollo de tus proyectos. Diseñar nuevas páginas desde cero lleva bastante tiempo y, la mayoría de veces, estarás perdiendo tiempo mientras ajustas constantemente el diseño y los estilos de página. Aquí es exactamente donde las plantillas pueden sernos de utilidad. La biblioteca de plantillas de Elementor es un gran recurso para acelerar el proceso de diseño. Incluso aunque no utilices una plantilla prediseñada, siempre puedes usar la biblioteca de plantillas como inspiración. Las plantillas se pueden importar de manera sencilla directamente a tu página con un solo clic.
Las plantillas de Elementor se pueden dividir en dos tipos. Primero, cuando quieres importar una página prediseñada de arriba a abajo, por ejemplo, puedes importar una página completa (como una página Acerca de o Contacto) con todo su contenido. La segunda opción, es importar únicamente las secciones o bloques del diseño. Puedes hacerlo si, por ejemplo, te gusta una de las secciones de servicios, newsletter o footer.
Estas increibles colecciones están disponibles en la web tanto para la versión de gratuita de Elementor como para Elementor Pro.
Template Kits de Envato Elements
El mercado de plantillas de Envato es probablemente el marketplace más popular no solo para las plantillas de Elementor sino también para los temas y plugins de WordPress.
TemplateMonster
TemplateMonster es otro proveedor de plantillas de buena calidad. También cuentan con algunas plantillas gratuitas.
Biblioteca de plantillas de Elementor
La biblioteca de plantillas de Elementor: es el repositorio nativo de Elementor el cual actualizan constantemente con plantillas gratuitas y premium.
Utiliza los accesos rápidos del teclado
Si solo utilizas el mouse cuando trabajas con Elementor, dedícale 10 minutos a aprender los comandos, lo que te ahorrará un montón de tiempo y acelerará el proceso de diseño de tu página web. Además de los simples comandos como copiar y pegar, también puedes utilizar accesos directos personalizados más avanzados. Pueden ser extremadamente útiles, especialmente para navegar entre el panel y el modo de vista previa o para cambiar a la versión móvil.
Comportamiento
| Deshacer | Ctrl / Cmd + Z | Deshacer cualquier cambio realizado en la página |
| Rehacer | Ctrl / Cmd + Shift + Z | Rehacer cualquier cambio realizado en la página |
| Copiar | Ctrl / Cmd + C | Copiar una sección, columna o widget |
| Pegar | Ctrl / Cmd + V | Pegue una sección, columna o widget |
| Pegar estilo | Ctrl / Cmd + Shift + V | Pegue el estilo de una sección, columna o widget |
| Eliminar | Eliminar | Eliminar una sección / columna / widget que se edita |
| Duplicar | Ctrl / Cmd + D | Duplicar una sección / columna / widget que se edita |
| Salvar | Ctrl / Cmd + S | Guarda tu página en el historial de revisiones |
Navegación
| Panel / Vista previa | Ctrl / Cmd + P | Cambiar entre el panel y la vista previa |
| Edición móvil | Ctrl / Cmd + Mayús + M | Cambiar entre vistas de escritorio, tableta y dispositivos móviles |
| Historia | Ctrl / Cmd + Shift + H | Ir al panel de historial |
| Navegador | Ctrl / Cmd + I | Abre el navegador |
| Biblioteca de plantillas | Ctrl / Cmd + Shift + L | Abre nuestra biblioteca de plantillas modal |
| Atajos de teclado | Ctrl / Cmd +? | Abre la ventana de Ayuda de atajos de teclado |
| Dejar | ESC | Abre Configuración y salta a Salir al Tablero |
CSS personalizado para páginas
¿Sabías que puedes tener CSS personalizado para cada página? Sí, pero debes de tener en cuenta que esta función se incluye solo en la versión Pro de elementor. Como solución a esto, te mostraré como añadir CSS personalizado para cada página. Este truco te hará ahorrar algo de dinero si solo necesitas la versión Pro para agregar pequeñas personalizaciones a nivel de página.
Para hacer esto, solo necesitas utilizar el widget HTML y añadir este código:
<style>
/ * Tu código CSS personalizado aquí * /
.elementor p {
color: red;
font-size: 25px;
text-decoration: underline;
line-height: 40px;
}
</style>Échale un vistazo a éste ejemplo:
Barra de búsqueda de Elementor Finder
A menudo, cuando trabajas en el diseño de la página, quieres ir a otras páginas, configuraciones, una página de venta o cualquier otro lugar, y puede llevar tiempo entre que guardamos la página, volvemos al dashboard, abrimos el menú de páginas y buscamos la página que queremos abrir. Esto puede hacerte perder mucho tiempo si has tenido que hacerlo una y otra vez.
Use el Navigator
Navigator es una herramienta de navegación que proporciona un acceso fácil a cada elemento en la maquetación de la página. Esta pequeña ventana te permite navegar a través de los elementos y arrastras y soltar los widgets fácilmente.
Navigator es particularmente útil para páginas largas o con un diseño complejo de múltiples capas. Te permite acceder a capas que pueden haberse colocado detrás de otros elementos.
Puedes acceder a Navigator de 3 formas:
- Haz clic derecho en cualquier elemento y luego haz clic en Navigator. Esto te redireccionará automáticamente al elemento específico en el árbol de navegación.
- Haz clic en el botón del elemento situado en el pié de página del panel de Elementor.
- Utiliza el método abreviado de teclado Cmd / Ctrl + I.
Echa un vistazo a este vídeo para verlo en acción:
Navigator también tiene algunas otras funciones, como los widgets de nomenclatura, los widgets de contracción y expansión, la flotación o el acoplamiento del panel y la visualización u ocultación de widgets. Puedes ver la información completa de esta herramienta en su documentación.
Define tu paleta de colores
Por lo general, cuando diseñamos un sitio web, seguimos un patrón de diseño creado por el diseñador, o un manual de uso corporativo. Este patrón generalmente contiene una paleta de colores que se mantienen en todo el sitio. Estos son los colores de marca que deberían de permanecer sin cambios. Esto significa que cada vez que agregamos un nuevo widget en la página tenemos que copiar y pegar el código de color o recordar cuál es el código para aplicarlo en la configuración del widget. Hacer esto puede llevarnos mucho tiempo pero afortunadamente Elementor tiene una solución para esto.
Puedes definir los colores de tu marca en la configuración del Selector de color y reutilizarlos cada vez que accedas a las opciones de color para el diseño de widgets. Simplemente elige una paleta preestablecida o define los colores personalizados para ahorrar tiempo al diseñar. Si no tienes definida aún una paleta, puedes explorar opciones en Adobe Color.
Mira este vídeo:
Estilos y plantillas de widgets prediseñados y reutilizables
Elementor es uno de los mejores maquetadores de páginas, pero ¿has pensado en los botones predeterminados poco trabajados? ¿Menús? ¿O cualquier otro widget?
Actualmente, no puedes guardar y reutilizar estilos de widgets para futuros proyectos con Elementor. Afortunadamente, el plugin gratuito WunderWP ofrece algunas formas de resolver este problema.
En primer lugar, WunderWP incluye una serie de estilos de widgets prediseñados que están a tu disposición. Los estilos listos para usar en encabezados, galerías, botoenes, divisores, carruseles, formularios, tablas de precios y más están disponibles con un clic. Simplemente arrastra un widget de Elementor a tu página, selecciona un estilo y comienza a agregar contenido.
Con WunderWP, también puedes guardar y reutilizar fácilmente tus propios estilos de widget en Elementor. Es sencillo, estiliza un widget, guardalo en WunderWP Cloud y utilízalo más tarde para widgets similares. Esto funciona tanto para widgets simples como otros más complejos. Por ejemplo, puedes usar esto para guardar un widget de encabezado que contenga valores tipográficos diferentes o para un widget de imagen con sombras personalizadas.
Lo mismo ocurre con las plantillas: puedes guardar plantillas completas o parciales que crees en WunderWP Cloud. La plantilla estará allí, así que cuando estés listo, puedes insertarla fácilmente en una página o sitio web. De esta manera, solo tendrás que diseñarlo una vez, lo que te hará ahorrar mucho tiempo.
O bien, puedes aprovechar las plantillas de contenido preparadas de WunderWP. En este momento, hay más de 50 plantillas de secciones preparadas, como contacto, CTA, encabezado, footer, servicios, acerca de, equipo, cuenta regresiva y mucho más, para una variedad de propósitos.
Conclusión
Hasta este momento, sin ninguna duda, Elementor es uno de los mejores maquetadores de WordPress. A menudo, se agregan nuevas herramientas y características para acelerar el proceso de diseño y ahorrar en tiempo de entrega del proyecto.
¿Qué consejo crees que es más útil y cuál no conocías antes? ¿Quizás también sabes algo que no he mencionado? Por favor, compártelo en los comentarios.
Entradas relacionadas
