Como diseñadores web, pasamos mucho tiempo moviendo píxeles con Elementor en la mitad superior de la página en búsquedas nocturnas impulsadas por la cafeína para ese momento de epifanía en el que se logra el equilibrio perfecto entre usabilidad y diseño.
Pero ¿y si ese momento no llega? ¿Qué haces si estás atascado con tu diseño? Estuve allí y se me ocurrió un truco para que su diseño fluya: comience desde abajo. He aquí el poderoso pie de página. A pesar de estar al final de su página, a veces con 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 un vertedero de enlaces diversos, pero un pie de página sólido es una puerta de entrada a una mayor participación. Puede contar la historia de una marca, generar 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 un fuerte base y jerarquía desde 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 excelente 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 y vemos que en un pie de página faltan cosas que buscamos instintivamente. Asegúrese de incluir los siguientes widgets en su pie de página:
¡Sí, los necesitamos! Si no los encuentro en el encabezado, voy directo 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, configura su posición para en línea y animar cada uno. ¡Tassssty! No tienes que simplemente colocarlos en una columna; puedes usar el posicionamiento absoluto para que floten en tu pie de página o incluso crearlos como una ventana emergente que aparece a medida que te desplazas por el sitio web.
Lleve a las personas a donde NECESITAN ir. Podría ser tu última oportunidad. Haz que tus menús sean breves, claros y fáciles de entender. Proporciona enlaces útiles, por ejemplo: si tienes 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, equilibrelos con anchos de columna alternativos y widgets adicionales como íconos de cuenta.
Lleve 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, equilibrelos con anchos de columna alternativos y widgets adicionales como íconos de cuenta.
¡Es tu momento de hollllllaaaaa! ¡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 ingresar un formulario de suscripción rápido y estamos acostumbrados a encontrarlo allí. ¡No hay necesidad de molestarlos con ventanas emergentes! Si no tienes suficiente espacio para un formulario grueso, intenta hacerlo en línea. ¿Sabías que puedes controlar el ancho del campo y del botón de los formularios de Elementor? Qué mundo.Hazlo atractivo. En lugar del típico mensaje de "gracias por registrarse", ¿por qué no intentas usar un mensaje emergente con una 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 hasta el 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 el texto parece pesado, introduzca algunos elementos gráficos o algo más de espacio.
¡Con sus derechos de autor, será mejor que utilice la función Año dinámico en su título! De esta manera no tendrás que actualizar el año... todos los años. Utilice 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 de ti. ¡Ojalá tu pie de página tenga un poco más de personalidad! El pie de página podría ser su última oportunidad para comunicar el mensaje de su marca. No tiene que ser audaz; A veces menos es más. Pero no lo marques.
Doiiiiii, ¿verdad? ¡Te sorprenderias! Tantos pies de página con los que me he topado al reconstruir Los sitios web no han dado en el blanco cuando se trata de mostrar el logotipo o los elementos de marca de una marca. Experimente con el posicionamiento en línea para colocar su logotipo en ubicaciones no estándar en su 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 desplazarse para obtener 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 o algo de 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 topo con un texto ingenioso o una llamada a la acción cautivadora. A veces, un resumen breve, divertido, atractivo y directo de lo que eres es justo lo que necesitas. su usuario necesita hacer el siguiente clic. Recuérdeles por qué se quedaron hasta el final. No puedo explicar la alegría que siento cuando llego a un pie de página y me topo con un texto ingenioso o una llamada a la acción cautivadora. A veces, un resumen breve, divertido, atractivo y directo de lo que eres es justo lo que necesitas. su usuario necesita hacer el siguiente clic. Recuérdeles por qué se quedaron hasta el final. Conectamos más con marcas humanas, así que incluye 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. Generalmente, desea que su pie de página se distinga del resto de su sitio web. Prefiero un pie de página más oscuro porque es más fácil de equilibrar, pero si quieres mantenerlo claro, considera usar un borde sutil o un CTA oscuro para separar el pie de página del contenido. Si quieres que se mezcle, ¡necesitarás mucho espacio en blanco!
A veces, el pie de página puede parecer plano, así que experimenta con algo de textura usando superposiciones de fondo o divide secciones usando bordes. También puedes agregar algo de brillo usando un gif en bucle. como imagen de fondo; sólo tenga cuidado de no exagerar.
Una vez que hayas colocado todos tus elementos en una sección o dos, es hora de esforzarte y darle un poco de amor a cada elemento, comenzando con tu diseño. Estamos construyendo una base para el resto del diseño de su sitio web, por lo que hacerlo aquí facilitará el resto.
¿Sigues creando pies de página como si estuvieras usando un tema con 3 o 4 columnas? ¡Detente ahora mismo! Literalmente, puede crear diseños ilimitados con Elementor. Experimente con secciones internas o use complementos que permitan a Flexbox crear diseños de columnas únicos. Recuerda que puedes alinear elementos dentro de cada columna. El único límite aquí es tu imaginación. Ve a todo lo ancho; ¡quizás te guste! Si le preocupa el relleno, limítese a 20-40 px, es un rango agradable y seguro. Si las cosas se sienten un poco aburridas, considere agregar efectos de desplazamiento sutiles a las columnas o botones. Puedes hacer mucho con la opción de superposición de fondo. ¡Recuerda tu espaciado! Los elementos necesitan espacio para respirar. Esta es la base de todo diseño. Generalmente me gusta asegurarme de que haya al menos 40 píxeles entre columnas. ¿Tienes una llamada a la acción importante? ¿Por qué no agregarlo como una sección fija al final de su sitio?
Ya lo he mencionado varias veces y lo mencionaré nuevamente porque esto literalmente cambió mi vida. Presiona esa pestaña avanzada y dirígete a la opciones de posicionamiento, no te arrepentirás. No te limites a apilar tus widgets. No estamos jugando al Tetris. Al habilitar el posicionamiento personalizado, puede controlar el ancho de los widgets, permitiéndoles ubicarse juntos dentro de sus columnas. Añade algo de relleno para equilibrarlos. ¿Quieres crear 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. Hola, listo, tienes una línea entre dos objetos en línea.
Es fácil caer en algunos patrones al diseñar, especialmente si estás creando sitios web como un productor lechero noruego. Sal de ellos. ¡Esfuérzate! Has llegado hasta aquí. Si te quedas atascado, busca inspiración en sitios como awwwards o dribble. Google es tu amigo. Hay muchos 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 revelación de pie de página, un marco de texto con desplazamiento, CSS para abarcar 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 que sea un sí. Asegúrese de que una vez que haya definido el diseño del pie de página de su escritorio, lo coloque en modo responsivo y verifique 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? sus encabezados son legibles y claros. ¿Sus menús siguen siendo agradables o 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 responsiva?
Ahora que tiene un pie de página sorprendente, bien equilibrado, atractivo y de marca, ¡dígame que diseñar en la mitad superior de la página no se ha vuelto más fácil! Pero antes de presumir ante su cliente o cerrar los libros sobre este diseño, guárdelo como plantilla y expórtelo usando la función de exportación del kit de plantillas de Elementor. La próxima vez que se quede atascado en un diseño, puede sumergirse en su colección de kits y importe una plantilla para reelaborar y crear otra base sólida.
Entonces, 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 intentas construir desde abajo hacia arriba? Mueva el diseño del pliegue de arriba hacia un lado por un momento, saque el spa para pies y preste atención al pie de página de su sitio web. Si puedes hacer que todos esos elementos importantes funcionen en un espacio estructurado, ¡el resto del diseño será fácil! Créeme, 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 distintos servicios de diseño. que ella ofrece
El Rincón de Expertos es una plataforma que le permite escribir un artículo sobre su experiencia personal y conocimientos en una disciplina particular (es decir, diseño web, construcción de un negocio exitoso, etc.), que se publicará en el blog de Elementor y en todas las redes sociales de Elementor. canales de medios. Esta es una excelente oportunidad para construir su marca, consolidar su reputación como líder intelectual y descubrir posibles oportunidades comerciales.