Especial diseño con Elementor (octubre 2020)

Ya estamos aquí un mes más para hablarte de los diseños para Elementor que más nos han llamado la atención en el último mes. Y de paso te comentamos algunas novedades, hablamos de Envato Elements y lo cerca que tenemos Halloween.
Especial Diseño Elementor octubre 2020
Indice

Ya estamos aquí un mes más para hablarte de los diseños para Elementor que más nos han llamado la atención en el último mes.

A partir de este mes de octubre queremos darle una vuelta de tuerca a los sitios que comentamos, poniendo acento especial en sitios de creadores web en español.

Así que, si formas parte de nuestra comunidad y tienes un sitio del que sientas especial orgullo… ¡Envíanoslo usando el formulario de contacto!

Quien sabe, igual lo publicamos como sitio destacado el próximo mes 😉

¡Arrancamos!

Un recurso de miedo: fondos vectoriales para Halloween

Aprovechando que estamos en octubre y tenemos Halloween a la vuelta de la esquina, te dejamos este recurso que hemos localizado en Envato Elements con unos fondos vectoriales con temática Halloween muy chulos (me encanta el del cerebro!).

Fondos Halloween para Elementor

Te pueden venir de miedo (ojito con el juego de palabras) para darle un toque tenebroso y divertido a tus diseños web.

Por cierto: si aún no conoces qué es Envato Elements y todo lo que ofrece, no sufras. El menda Ángel Zinsel está preparando un contenido para contártelo y traerá buenas sorpresas!

Template kit del mes: escuela de baile

Un mes más, desde Elementor publican su template kit del mes. En esta ocasión se trata de una plantilla muy completa para una academia de baile.

Me resulta muy original el diseño minimalista y de líneas rectas que han utilizado, que me recuerda como a un periódico antiguo (tal vez por el color de fondo).

Aunque, sin duda, lo que más me ha gustado es cómo mezclan recursos gráficos de imágenes con vídeos cortos, dándole mucho dinamismo a la web.

Aquí puedes ver la demo.

Nuestros sitios preferidos con Elementor

Y ahora sí, vamos con el sitio que cada menda ha elegido para comentar este mes.

Como te decía al principio, la lista de sitios del mes de Elementor parece que se nos ha quedado corta… así que vamos a empezar a buscar referencias en fuentes alternativas 😀

Mountainbiker.es, por Santi Becerra

Mountainbiker.es, web con Elementor comentada por Santi Becerra
Mountainbiker.es

MountainBIKER es una revista online de Barcelona (también publican en papel) que, como su nombre indica, habla sobre la bicicleta de montaña.

El diseñador Jose Verdu Mula de Stylerslab ha hecho un buen trabajo, la disposición de los elementos es agradable y los colores básicos elegidos, naranja, negro y gris son coherentes con la temática de la revista. En cada artículo las fotos están elegidas para que haya armonía, cada uno tiene su color predominante.

Podría mejorar la usabilidad si el menú no tuviera tantísimos elementos, nada menos que 17; sería mejor agruparlos en submenús. Eso sí, se despliega en el lateral izquierdo y no queda tan abigarrado como si estuviera en la barra superior.

Otro elemento que se echa en falta es el uso de tablas de contenido, que solo aparecen en la sección de «Pruebas».

Me ha gustado cómo usan las barras laterales, un elemento que parecía condenado a desaparecer con la moda del mobile first.

Aunque me vaya por los cerros de Úbeda: he visto webs diseñadas para móvil que en escritorio se ven grotescas. Dejémonos de historias, hay que diseñar para móvil y para escritorio, no vale un simple diseño adaptable de escritorio a móvil ni el inverso.

Santiago Becerra

El banner de cookies es correcto, permite aceptar o rechazar expresamente y es poco intrusivo.

En la parte técnica hace uso intensivo de varios plugins de Crocoblock. Por lo menos se nota que están JetEngine, JetBlog, JetBlocks y JetElements.

NOTA: Si aún te pierdes con el universo de Jet, échale un ojo a la masterclass de Crocoblock que se marcó Ángel hace unas semanas.

Pan danés porteño, Por Ángel Zinsel

La web argentina Pandanes.com.ar es un gran ejemplo de boutique con comercio electrónico, en este caso, orientada al pan de masa madre con entrega a domicilio.

Página de inicio de la web Pan Danés

Gran uso del diseño minimalista con tipografía sans tanto en cabeceras como cuerpo, este último en versión thin, eso sí, será la edad, se me antoja un tamaño al menos 2 puntos más pequeña de lo deseable para su lectura. 

En lo referido a paleta de colores, usa blanco, negro y un gris claro, que gracias a una selección de fotos exquisitas, no parece monocroma, sino extremadamente ligera en cuanto a carga visual, asistido por una elección generosa de espacios blancos.

La página de inicio dispone de 4 secciones, todas con un copy también minimalista, en la que el hero presenta un fondo alimentado de un sutil slider de panes con un CTA claro, ver productos. Una segunda sección con su propuesta de valor, pan a domicilio, 

La tercera sección, hablando del producto, con un copy muy enfocado y una galería de fotos con un balance de fotos muy equilibrada donde meten una foto vertical, una horizontal y dos cuadradas perfectamente armónica. La cuarta sección la dedica a clientes mayoristas, es decir, locales y restaurantes. Repito, todo con un minimalismo muy bien explotado.

Muy buena parte del menú dedicada a nosotros, con tres páginas sobre su historia, la elaboración y los productos, todas ellas con el mismo estilo minimalista de la página de inicio. Pero, ¿dónde están sus redes sociales? Pues al final, en el footer, casi invisibles y anecdóticas, como debe ser. 

Respecto a la experiencia de compra, además de un carrito en el menú que despliega un elegante popup que se desliza desde la derecha mostrando las compras realizadas, parece muy bien resuelta y resulta muy sencilla y agradable, tanto en móvil como escritorio, además de ofrecer un modelo de suscripción semanal (ya sabéis, ingresos recurrentes), ¡muy bien pensada!

Hablando de plugins, además de Elementor Pro, usan Hello, Woolentor (me empieza a caer bien este plugin), Cartflows (se nota su eficiencia en el proceso de checkout), por supuesto WooCommerce, EleCustomSkin para los skins y confían el SEO a RankMath (cada día más en auge).

En cuanto a optimización de carga usan Autoptimize y la tecnología LiteSpeed, provista por Hostinger, que a pesar de ser probablemente una cuenta de servidor compartida, da un resultado más que aceptable en GTMetrix y PageSpeed. 

Con un número decente de requests al servidor (54), 2,21 Mb de tamaño de página, donde las imágenes parecen estar optimizadas, pero usar el formato WebP les ayudaría a mejorar los tiempos de carga y donde el mayor problema aparece en los tiempos de carga del servidor y en la gestión de carga de los iconos, que parecen penalizar el resultado más de lo debido.

En fin, un gran proyecto, con una idea clara de negocio, muy acorde con la demanda actual de comercio electrónico, buena experiencia de compra, donde seguramente aumentar el tamaño del cuerpo del texto ayudaría a tener una experiencia totalmente fluida, más teniendo en cuenta que es fácil imaginar que su público objetivo debe rondar los 40-60 años.

Inversiones Jenca, por Santiago Alonso

Inversionesjenca.com, web con Elementor comentada por Santiago Alonso
inversionesjenca.com

En mi caso, para este mes he elegido una web publicada en el grupo de Facebook Elementor en español.

Ángel Julián Mena, uno de los líderes de la Comunidad de Elementor en Facebook, lanzó hace unas semanas el reto de los #ViernesCreativos, donde animaba a los miembros a publicar sus últimas creaciones con Elementor.

Esta última semana vi esta web, inversionesjenca.com, del desarrollador peruano Smith Benites.

Se trata de una web para una empresa especializada en mezclas asfálticas en caliente. Algo que, a priori, suena a web aburridísima y con cero interés.

La realidad es bien distinta. Me ha sorprendido ver una web con mucho movimiento y una excelente estructura y jerarquía de contenidos.

Ayudan muchísimo tanto la elección de colores (en negros y amarillos) y los detalles de diseño, como las fotografías que acompañan a cada sección.

Muy bien resuelto el tema de responsive también, con una cabecera muy clara y accesible.

No es fácil trabajar con ciertos sectores y creo que esta ocasión Smith lo ha hecho de maravilla.

En el apartado técnico he detectado que, además de Elementor PRO también utiliza Elementor Addon Elements, JetEngine y Ooohboi Steroids for Elementor. Buena mezcla.

****

Como siempre, la próxima semana en el podcast hablaremos de estas web y divagaremos con alguna locura más sobre diseño para Elementor.

Si no estás ya, suscríbete a nuestro canal para no perder detalle, ¡menda!

Facebook
Twitter
LinkedIn
Pinterest

Entradas relacionadas

📩 Vendiendo, que es gerundio

Tranquilidad, menda. No tenemos intención de vender (aún) Elemendas y hacer un exit de esos modernos. Aunque viendo el historial de Automattic estos meses… igual viene Matt con la chequera pronto a vernos. En fin, que nos ha quedado una newsletter muy “vendible” y no se nos ocurría mejor asunto.

Seguir leyendo »

Deja un comentario

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

For security, use of Google's reCAPTCHA service is required which is subject to the Google Privacy Policy and Terms of Use.

👋¡Hola, menda!

¿Quieres hablar con nosotros sobre algún tema?, ¿o sugerirnos algún plugin? Escríbenos desde este formulario y te atenderemos lo antes posible.

  • Responsable: Santiago Becerra Carrillo, titular del website elemendas.com.
  • Finalidad: Responder a tu consulta.
  • Legitimación: Consentimiento del interesado (es decir, tú), al enviar el formulario.
  • Destinatarios: Los datos no se cederán a terceros salvo en los casos en que exista una obligación legal. En todo caso, los datos que nos facilitas están ubicados en servidores cuya sede se encuentra dentro del territorio de la UE o gestionados por Encargados de Tratamiento acogidos al acuerdo “Privacy Shield”, aprobado por el Comité Europeo de Protección de Datos. Nuestro proveedor de envío de mail es MailerLite.
  • Derechos: Acceder, rectificar y suprimir los datos, así como otros derechos, como se explica en la información adicional.
  • Este sitio está protegido por reCAPTCHA y se aplican la política de privacidad y términos del servicio de Google.