Tips to Speed Up the Design Process with Elementor

Consejos para acelerar el proceso de diseño con Elementor

No es ningún secreto que Elementor es uno de los mejores creadores de páginas de la comunidad de WordPress en la actualidad. Y ya no es solo un creador de páginas. ¡Elementor ha evolucionado tanto que puede diseñar sitios web completamente funcionales incluso con un tema básico gratuito de WordPress sin escribir una sola línea de código!

Si bien Elementor ofrece muchas opciones y capacidades de personalización, a menudo perdemos los pequeños detalles y partes del complemento que pueden tener un gran impacto en el proceso de diseño de un sitio web.

Diseñar páginas web con Elementor ya es rápido y fácil, pero si desea acelerar el proceso de diseño, ha venido al lugar correcto. En este artículo, aprenderá cómo acelerar el proceso de diseño con Elementor haciendo un uso completo del editor con herramientas de terceros.

Comience con plantillas predefinidas

Las plantillas predefinidas pueden acelerar el desarrollo de su proyecto. Diseñar páginas nuevas desde cero lleva tiempo y, en la mayoría de los casos, pierde ese tiempo ajustando constantemente el diseño y los estilos de la página. Aquí es exactamente donde los modelos son útiles. La biblioteca de modelos de Elementor es un gran recurso para acelerar el proceso de diseño. Incluso si no usa una plantilla predefinida, aún puede usar la biblioteca de plantillas para inspirarse. Las plantillas se pueden importar fácilmente directamente a la página con un solo clic.

Los modelos de Elementor se pueden dividir en dos partes. En primer lugar, cuando desee importar una página predefinida de arriba a abajo, por ejemplo, puede importar una página completa (como una página Acerca de o Contacto) con todo su contenido. La segunda opción es si solo desea importar una sección o bloque del diseño. Puede hacer esto si, por ejemplo, le gusta alguna de las secciones de servicio, héroes, contáctenos o suscríbase.

Hay maravillosas colecciones de plantillas gratuitas y premium disponibles en la web.

Envato Market

Envato Market

Envato Marketplace es probablemente el mercado más popular no solo para las plantillas de Elementor, sino también para los temas y complementos de WordPress.

Modelo de monstruo

Modelo de monstruo

TemplateMonster es otro proveedor de activos de plantillas de buena calidad, también tienen algunas plantillas gratuitas.

Biblioteca de plantillas de Elementor

Biblioteca de plantillas de Elementor

Biblioteca de plantillas de Elementor: es un repositorio de plantillas nativo para Elementor, las nuevas plantillas gratuitas y premium aparecen con mucha frecuencia.

Usar teclas de método abreviado

Si está trabajando con Elementor solo con el mouse, ¡deténgase! Dedique 10 minutos a aprender códigos cortos que le ahorrarán mucho tiempo y acelerarán el proceso de diseño de su sitio web. Además de los simples como copiar y pegar, también puede usar atajos personalizados más avanzados. Pueden ser extremadamente útiles, especialmente si desea navegar entre el panel y el modo de vista previa, o cambiar a la edición móvil.

Aquí hay una lista de atajos que pueden aumentar seriamente la velocidad de diseño de su sitio web:

Comportamiento

anular Ctrl / Cmd + Z Deshacer los cambios realizados en la página.
Rehacer Ctrl / Cmd + Mayús + Z Rehacer cualquier modificación realizada en la página.
Dupdo Ctrl / Cmd + C Copiar una sección, columna o widget
Masa Ctrl / Cmd + V Pegar una sección, columna o widget
Pegar estilo Ctrl / Cmd + Mayús + V Pega el estilo de una sección, columna o widget
Borrar Borrar Eliminar una sección / columna / widget que se modifica
Duplicar Ctrl / Cmd + D Duplicar una sección / columna / widget que se está editando
Salvar Ctrl / Cmd + S Guarde su página en el historial de revisión

Ir a

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 las vistas de escritorio, tableta y dispositivo móvil
Historia Ctrl / Cmd + Mayús + H Accede al panel de historial
Navegador Ctrl / Cmd + I Abre el navegador
Biblioteca de plantillas Ctrl / Cmd + Mayús + L Abra nuestra biblioteca de modelos modales
Atajos de teclado Ctrl / Cmd +? Abra la ventana de ayuda para los atajos de teclado
salir ESC Abra la configuración y salte para salir del tablero

CSS personalizado para páginas

¿Sabías que puedes tener CSS personalizado para cada página? Sí, pero tenga en cuenta que esta función solo está incluida en la versión Pro de Elementor. Para solucionar este problema, le mostraré cómo incluir CSS personalizado para cada página. Este truco le ahorrará dinero si quisiera la versión Pro solo para agregar pequeñas personalizaciones a nivel de página.

Para hacer eso, solo necesita usar el widget HTML y este fragmento de código dentro:

<style>
/*Your custom CSS code here*/
.elementor p {
color: red; 
font-size: 25px; 
text-decoration: underline;
line-height: 40px;
}
</style>

Echale un vistazo a éste ejemplo:

Código personalizado

Barra de búsqueda de Elementor Finder

Muchas veces, cuando está trabajando en el diseño de una página, desea ir a otras páginas, configuraciones, página de ventas o en algún otro lugar, y puede llevar mucho tiempo si: guarda la página> vuelve a su panel de control> páginas abiertas> encuentra el página que desea abrir. Puede desperdiciar mucho tiempo y energía si ha tenido que hacerlo una y otra vez.

Afortunadamente, Elementor tiene una solución incorporada para optimizar y acelerar el proceso de diseño. En lugar de pasar por todos estos problemas, puede usar Finder Elementor. Puede ir directamente a cualquier configuración, plantilla, página o parte de un tema buscando en la barra de búsqueda. Se puede acceder al Finder haciendo clic en las teclas Cmd / Ctrl + E en cualquier parte del panel de WordPress. Mire este video para ver todo lo que puede hacer con Finder.

Usando el navegador

Navigator es una ventana de árbol de navegación que proporciona un fácil acceso a todos los elementos del generador de páginas. Esta pequeña ventana le permite navegar por los elementos y arrastrar y soltar widgets fácilmente.

Navigator es especialmente útil para páginas largas o páginas con un diseño complejo de varias capas y para elementos que combinan Z-Index, menos margen, posición absoluta, etc. Le permite acceder a las manijas de los elementos que se pueden colocar detrás de otros elementos.

Puede acceder a Navigator de tres formas sencillas:

  1. Haga clic con el botón derecho en cualquier elemento y luego haga clic en Navegador. Esto lo redireccionará automáticamente al elemento específico en el árbol de navegación.
  2. Haga clic en el botón de elementos en el pie de página del panel.
  3. Use el atajo de teclado Cmd / Ctrl + I.

Eche un vistazo a este video para verlo en acción:

Navigator también tiene otras funciones, como nombrar widgets, minimizar y expandir widgets, hacer flotar o acoplar el panel y mostrar u ocultar widgets. Puede ver una revisión completa en su Documentación.

Define tu paleta de colores

Normalmente, cuando diseñamos un sitio web, seguimos una plantilla de diseño creada por el diseñador. Este patrón generalmente contiene una combinación de colores repetidos en todo el sitio. Estos son colores de marca que deben 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 tenemos que recordar cuál es el código de color para aplicarlo en la configuración del widget. Puede llevar tiempo hacer esto. Afortunadamente, Elementor tiene una solución para nosotros.

Puede establecer los colores de su marca en la configuración del selector de color y reutilizarlos cada vez que acceda a las opciones de color para el estilo del widget. Simplemente elija una paleta predefinida o defina sus propios colores personalizados para ahorrar tiempo de diseño.

Mira este video:

Estilos y plantillas de widgets prefabricados y reutilizables

Elementor es uno de los mejores creadores de páginas que existen, pero ¿has pensado en los botones predeterminados y feos? ¿Pestañas? Menús ¿O cualquier otro widget? Parece que estos widgets predeterminados se diseñaron hace varios años, ¿o tal vez desea reutilizar el widget que diseñó en el Proyecto A en el Proyecto B?

Actualmente, no puede guardar y reutilizar estilos de widget para proyectos futuros con Elementor. Afortunadamente, la libre WunderWP El complemento ofrece algunas formas de resolver este problema.

En primer lugar, WunderWP viene con una serie de estilos de widgets predefinidos disponibles para usted. Estilos prediseñados para encabezados, galerías, botones, divisores, carruseles, formularios, tablas de precios y más. están disponibles con un clic. Simplemente arrastre un widget de Elementor a su página, seleccione un estilo de widget WunderWP listo para usar y comience a agregar contenido.

Ajustes preestablecidos de WunderWP

Con WunderWP, también puede guardar y reutilizar fácilmente sus propios estilos de widgets en Elementor. Es simple: diseñe un widget, guárdelo en la nube WunderWP (¡que es gratis!) Y úselo más tarde para widgets similares. Funciona tanto para widgets simples como complicados. Por ejemplo, puede usarlo para guardar un widget de encabezado que contiene diferentes valores tipográficos o para un widget de imagen con sombras personalizadas.

Estilos personalizados de WunderWP

Lo mismo ocurre con los modelos: puede guardar los modelos completos o parciales que cree en la nube de WunderWP. La plantilla estará allí, por lo que cuando esté listo, puede insertarla fácilmente en cualquier página o sitio web. De esta manera, solo necesitará construirlo una vez, lo que le ahorrará mucho tiempo.

Modelo personalizado de WunderWP

O puede aprovechar las plantillas de contenido listas para usar de WunderWP. Hoy en día hay más de 50 plantillas de sección listas para usar, como contacto, llamada a la acción, encabezado, pie de página, servicios, acerca de, equipo, servicios, temporizador de cuenta regresiva y más, para una variedad de propósitos.

Modelo WunderWP prefabricado

Envoltura

Hasta este momento, sin duda, Elementor es uno de los mejores creadores de páginas de WordPress. Casi todos los días, se agregan nuevas herramientas y funciones para agilizar y acelerar el proceso de diseño y acelerar el tiempo de entrega del proyecto.

¿Qué consejo crees que es el más útil y cuál no conocías antes? ¿Quizás también conoces algo que no se menciona aquí? Compártelo con otros.

Deja un comentario

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

Ir arriba