Como diseñadores web, pasamos mucho tiempo empujando píxeles por encima de la tapa en búsquedas nocturnas alimentadas con cafeína para ese momento de epifanía en el que logras el equilibrio perfecto entre usabilidad y diseño. Pero, ¿y si ese momento no llega? ¿Qué haces si te quedas atascado con tu diseño? Estuve allí y se me ocurrió un truco para que tu diseño fluya: comienza en la parte inferior. Mira el poderoso pie de página. A pesar de estar al final de su página, a veces miles de píxeles fuera de la vista, el pie de página no es el final de su experiencia de usuario. Es tu oportunidad de dejar una impresión. Los pies de página del pasado eran vertederos de enlaces diversos, pero un pie de página sólido es una puerta de entrada a un mayor compromiso. Puede contar la historia de una marca, crear confianza en la marca y, a menudo, puede marcar la diferencia en cuanto a si los usuarios interactúan con sus CTA o profundizan en su sitio web. Un buen pie de página contiene componentes bien diseñados y cuidadosamente considerados, y hacerlo bien puede proporcionar una base fuerte y jerarquía a partir de la cual diseñar el resto de su sitio web. Los usuarios buscan pies de página y ningún pie de página está demasiado lejos. Estos son mis consejos para diseñar un pie de página espectacular con Elementor.
Desplazarse hasta la parte inferior de un sitio para encontrar enlaces esenciales es un patrón de diseño que a todos nos han enseñado. Sin embargo, a menudo, nos desplazamos hasta el final de un hermoso sitio web para ver un pie de página que falta cosas que buscamos instintivamente. Asegúrese de incluir los siguientes widgets en su pie de página: ¡Sí, los necesitamos! Si no puedo encontrarlos en el encabezado, voy directamente al pie de página. Estás conmigo, ¿verdad? Usa el widget de íconos sociales, pero mézclalo y usa enlaces de texto o agrega un feed de Instagram directamente en el pie de página. En lugar de usar solo un widget social, ¿por qué no duplicarlo para cada ícono? posicionar en línea y animar cada uno. ¡Tassssty! No tiene que simplemente colocarlos en una columna: puede usar el posicionamiento absoluto para que floten en su pie de página o incluso crearlos como una ventana emergente que aparece a medida que se desplaza por el sitio web. Lleva a las personas a donde NECESITAN ir. Podría ser su última oportunidad. Haga que sus menús sean breves, claros y fáciles de entender. Proporcione enlaces útiles, por ejemplo: si tiene una tienda o un sitio de membresía, incluya enlaces a administración de cuentas, pedidos, ayuda, recursos, etc. Si tiene muchos menús para incluir, compárelos con anchos de columna alternativos y widgets adicionales como íconos de cuenta. ¡Es tu hora de gritar! ¡Y los visitantes esperan que lo hagas! Si eres una marca y no tienes una lista de correo, lo estás haciendo mal. Un pie de página es un excelente lugar para mostrar un formulario de suscripción rápido y estamos acostumbrados a encontrarlo allí. ¡No hay necesidad de molestarlos con ventanas emergentes! Si no tiene suficiente espacio para un formulario voluminoso, intente hacerlo en línea. ¿Sabía que puede controlar el ancho de campo y botón de los formularios de Elementor? Qué mundo. Hazlo atractivo. En lugar de su típico mensaje de “gracias por registrarse”, ¿por qué no intenta usar una ventana emergente con alguna copia creativa? ¡Puede configurar su formulario para registrarse en su lista de correo y activar una ventana emergente! Somos criaturas de hábitos, y cuando queremos respuestas, nos desplazamos directamente al final. Información de contacto, políticas de privacidad, términos, reglas de envío… solo algunas de las cosas que esperamos encontrar en un pie de página. Experimente con diseños de navegación para equilibrar toda esta información importante. Si sientes que hay mucho texto, introduce algunos elementos gráficos o un poco más de espacio. ¡Con sus derechos de autor, es mejor que use la función Año dinámico en su encabezado! De esta manera no tienes que actualizar el año… todos los años. Use las opciones Antes y Después para agregar palabras al año. Has escuchado esto antes, todas las marcas tienen una voz y si no tarareaste una letra o estallaste en una canción… Estoy un poco decepcionado contigo. ¡Ojalá tu pie de página tenga un poco más de personalidad! El pie de página podría ser tu última oportunidad para comunicar el mensaje de tu marca. No tiene que ser audaz; A veces menos es más. Pero no lo marques. Doiiii, ¿verdad? ¡Te sorprenderias! Tantos pies de página con los que me he encontrado al reconstruir sitios web no han dado en el blanco cuando se trata de mostrar el logotipo de una marca o elementos de marca. Experimente con el posicionamiento en línea para colocar su logotipo en ubicaciones no estándar en tu pie de página. El equilibrio lo es todo y, a veces, un logotipo a la izquierda simplemente no es suficiente. Aplique efectos de movimiento sutiles a los elementos de su marca, como deslizarse desde la parte superior o pasar el mouse sobre el fregadero para una experiencia más “de alta gama”. Vaya con calma aquí, los efectos de movimiento excesivos pueden convertir rápidamente su hermosa cascada en un deslizamiento de tierra. Si se siente creativo, ¿por qué no intenta agregar un logotipo animado de Lottie o algún texto? ¿O incluso el texto en el widget de ruta svg con el eslogan de su marca? No puedo explicar la alegría que siento cuando llego a un pie de página y me tropiezo con una copia ingeniosa o una llamada a la acción cautivadora. su usuario necesita hacer ese próximo clic. Recuérdeles por qué se han quedado hasta el final. Conectamos más con marcas humanas, por eso incluimos un mensaje humano y auténtico. Dado que estamos diseñando desde el pie de página hacia arriba, tome el color más fuerte de su marca y comience allí. Se trata de equilibrio. Por lo general, desea que su pie de página se distinga del resto de su sitio web. Prefiero un pie de página más oscuro, ya que son más fáciles de equilibrar, pero si desea mantenerlo ligero, considere usar un borde sutil o un CTA oscuro para separar el pie de página de su contenido. Si quieres que se mezcle, ¡vas a necesitar mucho espacio en blanco! A veces, su pie de página puede sentirse plano, así que experimente con alguna textura usando superposiciones de fondo o divida secciones usando bordes. También puede agregar un poco de destello usando un gif en bucle como su imagen de fondo; solo ten cuidado de no exagerar. Una vez que haya colocado todos sus elementos en una sección o dos, es hora de ponerse manos a la obra y darle un poco de amor a cada elemento, comenzando con su diseño. Estamos construyendo una base para el resto del diseño de su sitio web, por lo que hacerlo aquí hará que el resto sea más fácil. ¿Sigues creando pies de página como si estuvieras usando un tema con 3 o 4 columnas? ¡Para ahora mismo! Literalmente, puede crear diseños ilimitados con Elementor. Experimente con secciones internas o use complementos que permitan que flexbox cree diseños de columna únicos. Recuerda que puedes alinear elementos dentro de cada columna. El único límite es tu imaginación aquí. Ir a lo ancho; ¡quizás te guste! Si le preocupa el relleno, apéguese a 20-40 px, es un buen rango seguro. Si las cosas se sienten un poco aburridas, considere agregar sutiles efectos de desplazamiento a las columnas o botones. Puede hacer mucho con la opción de superposición de fondo. ¡Recuerde su espaciado! Los elementos necesitan espacio para respirar. Esta es la base de todo diseño. Por lo general, me gusta asegurarme de que haya al menos 40 px entre columnas. ¿Tienes un CTA importante? ¿Por qué no agregarlo como una sección adhesiva en la parte inferior de su sitio? Ya lo he mencionado varias veces y lo volveré a mencionar porque literalmente cambió mi vida. Presione esa pestaña avanzada y diríjase a las opciones de posicionamiento, no se arrepentirá. No se limite a apilar sus widgets. No estamos jugando Tetris. Al habilitar el posicionamiento personalizado, puede controlar el ancho de los widgets, permitiéndoles sentarse juntos dentro de sus columnas. Añadir algo de relleno para equilibrarlos. ¿Quiere marcar una línea entre algunos elementos que están en línea? ¡Un truco rápido es darle a uno de los íconos relleno y margen en un lado, y luego establecer un borde en el mismo lado! Oye, listo, tienes una línea entre dos objetos en línea. Es fácil caer en algunos patrones al diseñar, especialmente si está produciendo sitios web como un productor lechero noruego. Sal de ellos. ¡Empújate! Has llegado hasta aquí. Si te quedas atascado, busca inspiración en sitios como awwwards o dribble. Google es tu amigo. Hay montones de fragmentos de código o tutoriales en YouTube que pueden enseñarte cómo llevar las cosas al siguiente nivel. Como crear un efecto de pie de página revelador, una marquesina de texto desplazable, css para expandirse en estilos de fuente alternativos. Si lo has visto en alguna parte, ¡búscalo! Depende de ti seguir aprendiendo y utilizando los recursos que tenemos disponibles. No hay excusas familia! El 99 % de mis pies de página se ven bien en dispositivos móviles. ¿Puedes decir lo mismo? Hagamos de eso un sí. Asegúrate una vez que hayas clavado el diseño del pie de página de su escritorio, lo coloca en el modo de respuesta y verifica lo siguiente: ¿Hay un relleno igual y suficiente en la sección del pie de página? ¿Hay un buen espacio entre las columnas apiladas y los widgets? ¿Necesita crear un menú móvil alternativo? ¿Necesita ocultar columnas o widgets para mantener el diseño equilibrado en el móvil? ¿Sus formularios y ventanas emergentes también funcionan de manera receptiva? Ahora que tiene un pie de página increíble, bien equilibrado, de marca y atractivo, dígame que diseñar en la parte superior de la página no se ha vuelto más fácil. Pero antes de mostrarle a su cliente o cerrar los libros sobre este diseño, guárdelo como una plantilla y expórtelo usando la función de exportación del Kit de plantillas de Elementor. La próxima vez que esté atascado en un diseño, puede sumergirse en su colección de kits y importe una plantilla para volver a trabajar para hacer otra base sólida. Así que elementor fam, la próxima vez que estés atascado en un diseño o te resulte imposible lograr el equilibrio en tu próximo proyecto, ¿Por qué no intentar construir de abajo hacia arriba? Mueva el diseño de arriba del pliegue a un lado por un momento, saque el spa para pies y preste atención al pie de página de su sitio web. Si puede hacer que todos esos elementos importantes funcionen en un espacio estructurado, ¡el resto del diseño será fácil! Confía en mí, tu fetichista residente del pie de página. ¿Quieres hablar sobre todo lo relacionado con el diseño con Zoe? Haga clic aquí para obtener más información sobre los pies de página o los diversos servicios de diseño que ofrece. The Experts Corner es una plataforma que le permite escribir un artículo sobre su experiencia personal y sus conocimientos en una disciplina en particular (es decir, diseño web, creación de un negocio exitoso, etc.) , que se publicará en el blog de Elementor y en todos los canales de redes sociales de Elementor. Esta es una excelente oportunidad para construir su marca, consolidar su reputación como líder intelectual y descubrir posibles oportunidades comerciales.