Elementor PRO es un complemento popular de WordPress que permite a los usuarios crear páginas y publicaciones personalizadas con arrastrar y soltar. Si bien Elementor es fácil de usar, hay algunas cosas a tener en cuenta para aprovechar al máximo el complemento. En este artículo, te compartiré algunas buenas prácticas con Elementor PRO.
¿Qué es Elementor PRO?
Elementor PRO es un creador de páginas avanzado para WordPress. Te permite crear páginas y publicaciones personalizadas con la facilidad de arrastrar y soltar. Elementor PRO también agrega muchas funciones potentes al complemento gratuito Elementor Page Builder.
Con Elementor PRO, puedes crear páginas y publicaciones con la facilidad de arrastrar y soltar. Además, obtienes acceso a potentes funciones como widgets globales, CSS personalizado y más.
Si estás buscando un potente creador de páginas para WordPress, entonces Elementor PRO es la elección perfecta. Con su interfaz de arrastrar y soltar y funciones avanzadas.
Elementor es el compositor que uso para los desarrollos de mis clientes de diseño web con WordPress
A continuación el listado de algunas buenas practicas con Elementor PRO compartidas en el Live del grupo oficial de Elementor de Facebook en Español
- Comenta el código CSS que estas usando en tu proyecto.
- Elimina el espacio por defecto que tiene el widget de parrafos.
- Especifica el Header como header e igualmente el footer.
- Usa el Hello Elementor para tus proyectos con Elementor
- Para modificaciones en la plantilla usa el Child Theme
- Usa los estilos globales para los colores y las fuentes
- Tip* predefinir siempre el blanco – Negro y transparente en los estilos globales de color
- Usa las etiquetas dinámicas para los títulos y los enlaces
- Usa la ventana del navegador para organizar tus secciones (ayuda mucho con el responsive)
- Usa los padding para la altura de las secciones, con eso evitas que la altura sea predefinida para todos los dispositivos.
- Aprovecha los bordes redondeados para darle forma a las imágenes si puedes ahorrarte una imagen en formato png
- Aprovecha las plantillas creadas en Elementor para compartir contenido en las entradas de Gutenberg.
- En ajustes: desactiva la opción de Elementor para las entradas y
- Diseña cómo se va a ver una entrada con el compositor de Elementor.
- Procura usar la opción de código que te ofrece Elementor para implementar en tu sitio web.
- Configura la página de error 404
- Ahorra tiempo con la opción de copiar y pegar que tiene Elementor.
- Copia o elimina toda una página con un par de clics.
- Entrega a tus clientes el sitio web optimizado para que pueda actualizar su sitio web.
- Usa la opción de ancho del objeto y evita usar columnas para organizar los objetos en línea.
- Mientras estes trabajando en tu proyecto, diseña una plantilla para el modo mantenimiento y activado desde los ajustes de Elementor.
- Oculta el re-captcha en el front con CSS.
Estas son algunas buenas practicas que incluí sobre WordPress que también puedes ver en el video:
- AL comenzar un proyecto con WordPress, activa en ajustes de lectura la opción: «Pedir a los motores de búsqueda que no indexen este sitio»
- Crea un perfil de colaboración para el encargado del Marketing.
- Procura mantener máximo dos temas instalados. Uno es el principal y el otro es por seguridad o pruebas.
- Desactivar los comentarios de toda la página – diablee comments
- Cambia el prefijo de instalación de la base de datos cuando instales WordPress.
- Guarda un documento con tus códigos personalizados.
- Quita o cambia la descripción corta de los ajustes generales «Otro sitio realizado con WordPress»
- Revisa que tengas la opción de «Nombre de la entrada» en los ajustes de «Enlaces permanentes»
A continuación entro un poco más en detalle sobre algunas de las buenas practicas con Elementor PRO
Usa Hello Theme el tema oficial de Elementor
Elementor ha diseñado Hello Theme, un tema gratuito desarrollado específicamente para ser la plantilla perfecta y óptima para trabajar con el plugin Elementor. Este tema no ofrece opciones de personalización ni de diseño. Es prácticamente solo un lienzo en blanco, lo que significa que es una excelente opción para el rendimiento de la página y nos permite hacer uso del plugin para el desarrollo y personalización de toda la página. Definitivamente una de las buenas practicas con Elementor PRO, al ser la plantilla oficial del compositor.
Child Theme Hello Elementor
Un Child Theme es un tema de WordPress que hereda su funcionalidad de otro tema de WordPress, llamado tema principal. Los temas secundarios a menudo se usan cuando desea realizar cambios en un tema de WordPress existente sin perder la capacidad de actualizar el tema principal.
Usar un tema secundario con Elementor es una excelente manera de comenzar con la personalización sin tener qué preocuparse por perder los cambios cuando se actualice el tema principal. Por esta razón recomiendo instalarlo desde el comienzo.
Por ejemplo, en este video, te enseño como poder crear un child theme del tema Astra.
Usa los estilos globales para el color y las fuentes
Como diseñador web, es importante tener una buena comprensión de los estilos globales y cómo se pueden utilizar para su beneficio. Aquí hay algunos consejos sobre cómo usar estilos globales en Elementor PRO.
Cuando se trata de estilos globales, una de las cosas más importantes a tener en cuenta es que menos es más. No debes exagerar con diferentes colores y fuentes, ya que esto puede hacer que tu sitio web se vea desordenado y poco profesional. En cambio, concéntrate en usar los colores y fuentes del estilo de la marca en todo su sitio web. Esto ayudará a crear una apariencia cohesiva que sea fácil de navegar para sus visitantes.
Otro consejo para usar estilos globales de manera efectiva es asegurarse de usarlos de manera consistente en todo su sitio web. Para ello te recomiendo usar la herramienta que viene por defecto en Elementor PRO.
Ventana de navegador
La opción de la «ventana del navegador» o navigator en la interfaz de Elementor PRO es una excelente manera de mejorar el flujo de trabajo cuando estas desarrollando tu web. Te permite navegar entre las diferentes capas o secciones que tengas creadas dentro de tu sitio web, moverlas de posición y por supuesto ingresar a la opción de editar el contenido con el clic derecho.
Aprende a copiar y pegar los estilos de tus widgets
Elementor PRO te permite copiar y pegar estilos de un elemento a otro. Este es un gran ahorro de tiempo cuando está trabajando en un sitio web con varias páginas y deseas mantener una apariencia uniforme en todo momento.
Para usar la función de copiar y pegar, simplemente seleccione el elemento del que desea copiar el estilo, al hacer clic derecho, elige la opción «Copiar» en el panel de Elementor, luego seleccione el elemento en el que desea pegar el estilo y haga clic en » Pegar». botón. Debes tener en cuenta que para usar esta opción, debes copiar y pegar los estilos de un elemento igual, por ejemplo de un botón a un botón o de una columna a otra columna.
Esta característica es extremadamente útil si estás trabajando con muchos elementos de texto o botones en su sitio web. Esta opción te permite crear rápidamente una apariencia consistente sin tener que diseñar manualmente cada elemento.
Guarda plantillas reutilizables
Como diseñador web, una de las cosas más importantes que puedes hacer como una de las buenas practicas con Elementor PRO es ahorrar tiempo usando plantillas. Esto es una excelente manera de crear plantillas personalizadas para tus proyectos web. Con Elementor Pro, puede guardar tus diseños como plantillas y reutilizarlos una y otra vez. Sin duda, es una de las buenas practicas con Elementor PRO
Para poder usar esta opción, primero, abre la plantilla que deseas guardar en Elementor Pro. Luego, haz clic en el botón «Guardar» en la parte superior del editor de plantillas. En la ventana emergente, asigna un nombre a tu plantilla y haz clic en el botón «Guardar plantilla». Tu plantilla ahora se guardará en su biblioteca de Elementor Pro.
Para reutilizar su plantilla guardada, simplemente haga clic en el botón «Cargar plantilla» en el editor de plantillas y seleccione su plantilla de la biblioteca. ¡Eso es todo al respecto!
Usa los shortcodes de plantillas en las entradas con Gutenberg
Los códigos cortos o también llamados «shortcodes» son pequeños fragmentos de código qué se pueden usar para agregar funcionalidad a sus páginas y publicaciones. Por ejemplo, puede usar un shortcode para agregar una galería de imágenes, un video o un formulario.
Para usar un código corto en Elementor pro, simplemente haz clic en el ícono «Agregar elemento» y seleccione el elemento «código corto» de la lista. Luego pega tu código abreviado en el campo «Contenido».
Otra alternativa muy útil es usar los códigos cortos que generan las plantillas que haz guardado en tu instalación. Un ejemplo muy claro, es diseñar una plantilla para que los usuarios se suscriban a tu sitio web y posteriormente pegar ese código corto en las entradas de tu blog creadas con Gutenberg.
Oculta elementos en responsive
Cuando creas una página con Elementor PRO, tienes la opción de elegir entre tres modos: escritorio, tableta y móvil. De forma predeterminada, se selecciona el modo de escritorio, no obstante tienes la opción de cambiarla al dispositivo que estes desarrollando.
La opción de adaptabilidad te permite cambiar la apariencia de tu página en diferentes dispositivos. Por ejemplo, es posible que desees mostrar una barra lateral en modo escritorio pero no en los dispositivos móviles. O bien, es posible que desees ocultar completamente un elemento en alguno de los dispositivos.
Usa CSS personalizado en cualquier elemento, página o ajustes globales
Agregar estilos CSS en Elementor Pro es muy sencillo. Con solo unos pocos clics, puedes agregar estilos personalizados a cualquier elemento de tu página.
Para comenzar, abre el editor de Elementor Pro y haz clic en el elemento que deseas diseñar. Luego, haga clic en el botón Editar CSS que se encuentra en la pestaña avanzado de la esquina superior derecha de la columna izquierda en el editor.
En la ventana del Editor de CSS que aparece, puedes agregar s¡tus estilos de CSS personalizados. Para hacerlo, simplemente escribe el código CSS deseado y presiona Guardar.
¡Y eso es! Tus estilos personalizados se aplicarán al elemento seleccionado inmediatamente.
Secciones fijas para llamar la atención de tus usuarios
Para crear una sección fija en Elementor Pro, simplemente edita la sección que deseas hacer fija y marca la opción «fijar» que se encuentra en la pestaña Avanzado (Efectos de movimiento). A continuación, puedes elegir si desea que la sección se pegue a la parte superior o inferior de la página, y cuánto debe desplazarse desde esos bordes.
Una vez que hayas guardado los cambios, los visitantes de tu sitio web ahora verán esa sección adherida a la parte superior o inferior de su pantalla a medida que se desplazan hacia abajo. Esta puede ser una excelente manera de captar su atención y asegurarse de que no se pierdan información importante.
Copia y borra todo el contenido de una página
Si deseas eliminar o copiar todo el contenido de una página, hay una manera fácil de hacerlo. Simplemente ve al final de la página que desees copiar y eliminar y sobre la caja punteada donde dice «arrastra aquí el widget» puedes hacer clic derecho y elegir cualquiera de las dos opciones.
En caso de que hayas elegido copiar, podrás ir a otra página sobre el mismo dominio, y darle clic derecho sobre la misma caja y elegir pegar.
¡Eso es todo al respecto! Puede copiar y eliminar rápidamente todo su contenido sin tener que hacerlo manualmente con cada elemento.
