Consejos para acelerar el proceso de diseño con 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 en la comunidad de WordPress hoy en día. Y ya no es solo un creador de páginas. Elementor ha evolucionado tanto que puede diseñar sitios web totalmente funcionales incluso con un tema gratuito y básico de WordPress sin escribir una sola línea de código!


Si bien Elementor ofrece muchas opciones y capacidades de personalización, a menudo nos perdemos los detalles y partes más pequeños 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, entonces está en el lugar correcto. En este artículo, aprenderá cómo puede acelerar el proceso de diseño con Elementor haciendo uso completo del editor con herramientas de terceros.

Comience con plantillas prefabricadas

Las plantillas prefabricadas pueden acelerar el desarrollo de su proyecto. Diseñar nuevas páginas desde cero lleva tiempo y, la mayoría de las veces, está perdiendo ese tiempo mientras ajusta constantemente el diseño y los estilos de la página. Aquí es exactamente donde las plantillas son útiles. La biblioteca de plantillas de Elementor es un gran recurso para acelerar el proceso de diseño. Incluso si no usa una plantilla prefabricada, siempre puede usar la biblioteca de plantillas como inspiración. Las plantillas se pueden importar fácilmente directamente a la página con un solo clic.

Las plantillas de Elementor se pueden dividir en dos partes. Primero, cuando desea importar una página prefabricada 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 hacerlo si, por ejemplo, le gusta una de las secciones de servicios, héroe, contáctenos o suscríbase.

Maravillosas colecciones gratuitas y premium de plantillas están disponibles en la web.

Mercado Envato

Mercado Envato

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

Monstruo de plantilla

Monstruo de plantilla

TemplateMonster es otro proveedor de los activos de plantilla 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 el almacén de plantillas nativo para Elementor, con frecuencia aparecen nuevas plantillas gratuitas y premium.

Usa accesos rapidos del teclado

Si está trabajando con Elementor solo con el mouse, ¡deténgase! Dedique 10 minutos a aprender códigos cortos, lo que le ahorrará un montón de tiempo y acelerará el proceso de diseño de su sitio web. Además de los simples como copiar y pegar, también puede usar accesos directos 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

DeshacerCtrl / Cmd + ZDeshacer cualquier cambio realizado en la página
RehacerCtrl / Cmd + Shift + ZRehacer cualquier cambio realizado en la página
CopiarCtrl / Cmd + CCopiar una sección, columna o widget
PegarCtrl / Cmd + VPegue una sección, columna o widget
Pegar estiloCtrl / Cmd + Mayús + VPegue el estilo de una sección, columna o widget
EliminarEliminarEliminar una sección / columna / widget que se edita
DuplicarCtrl / Cmd + DDuplicar una sección / columna / widget que se edita
SalvarCtrl / Cmd + SGuarda tu página en el historial de revisiones

Ir

Panel / Vista previaCtrl / Cmd + PCambiar entre el panel y la vista previa
Edición móvilCtrl / Cmd + Mayús + MCambiar entre vistas de escritorio, tableta y dispositivos móviles
HistoriaCtrl / Cmd + Shift + HIr al panel de historia
NavegadorCtrl / Cmd + IAbre el navegador
Biblioteca de plantillasCtrl / Cmd + Shift + LAbre nuestra biblioteca de plantillas modal
Atajos de tecladoCtrl / Cmd + ?Abre la ventana de Ayuda de atajos de teclado
DejarESCAbre Configuración y salta a Salir al Tablero

CSS personalizado para páginas

¿Sabía que puede tener CSS personalizado para cada página? Sí, pero tenga en cuenta que esta función se incluye solo en la versión Pro de Elementor. Como solución a esto, le mostraré cómo incluir CSS personalizado para cada página. Este truco te ahorrará dinero si querías la versión Pro solo por agregar pequeñas personalizaciones a nivel de página.

Para hacer esto, solo necesita utilizar el widget HTML y este código dentro:

Echale un vistazo a éste ejemplo:

Código personalizado

Barra de búsqueda de Elementor Finder

Muy a menudo, cuando trabaja en el diseño de la página, desea saltar a otras páginas, configuraciones, una página de ventas o en cualquier otro lugar, y puede llevar mucho tiempo si: guarda la página> vuelve a su tablero> abre páginas > busque la página que desea abrir. Esto puede desperdiciar mucho tiempo y energía si ha tenido que hacerlo una y otra vez.

Afortunadamente, Elementor tiene una solución integrada para optimizar y acelerar el proceso de diseño. En lugar de pasar por todos esos problemas, simplemente puede usar el Elementor Finder. Puede saltar directamente a cualquier configuración, plantilla, página o parte del 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. Mira este video para ver todo lo que puedes hacer con Finder.

Use Navigator

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

Navigator es particularmente útil para páginas largas o páginas con un diseño complejo de múltiples capas, y para elementos que combinan el Índice Z, menos un margen, posición absoluta, etc. Le permite acceder a manijas de elementos que pueden colocarse detrás de otros elementos..

Puede acceder a Navigator de una de las 3 formas simples:

  1. Haga clic 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 método abreviado de teclado Cmd / Ctrl + I.

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

Navigator también tiene algunas otras funciones, como los widgets de nomenclatura, los widgets de colapso y expansión, la flotación o el acoplamiento del panel y mostrar u ocultar widgets Puedes ver una reseña completa en su documentación.

Defina su paleta de colores

Normalmente, cuando diseñamos un sitio web, seguimos un patrón de diseño creado por el diseñador. Este patrón generalmente contiene una combinación de los colores que se repiten en todo el sitio. Estos son los colores de la 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 debemos recordar cuál es el código de color para aplicarlo en la configuración del widget. Hacer esto puede llevar mucho tiempo. Afortunadamente, Elementor tiene una solución para nosotros..

Puede definir los colores de su marca en la configuración del Selector de colores y reutilizarlos cada vez que acceda a las opciones de color para el diseño de widgets. Simplemente elija una paleta preestablecida o defina sus propios colores personalizados para ahorrar tiempo al diseñar.

Mira este video:

Estilos y plantillas de widgets prefabricados y reutilizables

Elementor es uno de los mejores creadores de páginas, pero ¿ha pensado en los botones predeterminados y feos? ¿Pestañas? Menus? O cualquier otro widget? Estos widgets predeterminados parecen haber sido diseñados hace varios años, o, tal vez, deseó reutilizar el widget que diseñó en el proyecto A en el Proyecto B?

Actualmente, no puede guardar ni reutilizar estilos de widgets para futuros proyectos con Elementor. Por suerte, el libre WunderWP El complemento ofrece algunas formas de resolver este problema.

En primer lugar, WunderWP incluye una serie de estilos de widgets preestablecidos a su disposición. Los estilos listos para usar para encabezados, galerías, botones, divisores, carruseles, formularios, tablas de precios y más están disponibles con un clic. Simplemente arrastre un widget Elementor a su página, seleccione un estilo de widget WunderWP listo y comience a agregar contenido.

Presets de WunderWP

Con WunderWP, también puede guardar y reutilizar fácilmente sus propios estilos de widget en Elementor. Es simple: estiliza un widget, guárdalo en WunderWP Cloud (¡que es gratis!) Y úsalo más tarde para widgets similares. Esto funciona tanto para widgets simples como complicados. Por ejemplo, puede usar esto para guardar un widget de encabezado que contenga valores tipográficos diferentes o para un widget de imagen con sombras personalizadas.

Estilos personalizados de WunderWP

Lo mismo ocurre con las plantillas: puede guardar plantillas completas o parciales que cree en WunderWP Cloud. La plantilla estará allí, así que cuando esté listo, puede insertarla fácilmente en una página o sitio web. De esta manera, solo tendrá que construirlo una vez, lo que le ahorrará mucho tiempo.

Plantilla personalizada WunderWP

O puede aprovechar las plantillas de contenido prefabricadas de WunderWP. En este momento, hay más de 50 plantillas de secciones prefabricadas, como contacto, llamada a la acción, encabezado, pie de página, servicios, acerca de, equipo, servicios, cuenta regresiva y mucho más, para una variedad de propósitos.

Plantilla prefabricada de WunderWP

Terminando

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

¿Qué consejo crees que es más útil y cuál no sabías antes? ¿Quizás también sabes algo no mencionado aquí? Por favor, compártelo con otros.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map