Tutorial de configuración del módulo de widgets de pie de página y fijación de pie de página de Astra Pro

En el diseño de sitios web, el pie de página no es sólo un área de visualización de información clave, sino también un elemento importante que refleja la estética general del diseño.Astra Pro Proporciona un módulo de widget de pie de página muy útil, que puede ayudarle a construir rápidamente diversas áreas de pie de página y controlar libremente laapertura (jerga ajedrecística), colores, fuentes y otros elementos. Este artículo describe el proceso de configuración específico y añade cómo hacer que el pie de página se fije en la parte inferior de la página para evitar el espacio en blanco por falta de contenido.

Introducción al módulo de widgets de pie de página

Astra Pro El módulo de widgets de pie de página admite hasta 7 Tipos de disposiciones diferentes. Puedes elegir una disposición que se adapte a la estructura de tu sitio web o al estilo de tu marca, por ejemplo:

• diseño de columna única
• Combinaciones lado a lado, como dos o tres columnas
• Distribución asimétrica de las estructuras izquierda y derecha

Cuando el módulo está activado, es posible colocar en cada zona el WordPress Widgets nativos que también admiten módulos de contenido proporcionados por plugins de terceros, como formularios, navegación, iconos sociales, etc.

Pasos de configuración

• Instale y active el tema Astra con Astra Pro Complementos.
• entrar en WordPress Entre bastidores, haga clic en "Apariencia" > "Personalizar" > "Constructor de pie de página".
• Seleccione la estructura de diseño adecuada en el constructor de pie de página.
• Para establecer el contenido deseado para cada columna: vaya a"Personalizar" > "Widgets" > "Área de widgets de pie de página"añada el tipo de gadget que desea mostrar.

Controles de estilo y tipografía

Astra Pro ofrece opciones detalladas de ajuste de estilo:

• margen interiorMárgenes: Puede establecer por separado los márgenes superior, inferior, izquierdo y derecho de la zona de pie de página;

• Ajuste de la anchura::
  • Ancho de pantalla completo para llenar el espacio horizontal del navegador;
  • Anchura del contenido, coherente con el contenedor de la página principal;

• estilo caligráficoSoporte para establecer parámetros como fuente, tamaño de fuente, tamaño de línea, etc. para el título y el cuerpo de cada widget;

• Fondos y coloresTambién es posible personalizar los colores de fondo y cargar imágenes de fondo.

Estas opciones ayudan a conseguir un estilo visual coherente y dan más textura al pie de página.

Cómo arreglar el pie de página en la parte inferior de la página

Cuando hay muy poco contenido en una página, el pie de página puede colgar en el centro y restar valor al conjunto.tipográfico.

Puede añadirse lo siguiente CSS Código para hacer que el pie de página siempre quepa en la parte inferior y permanezca en la parte inferior independientemente de la longitud de la página.

El código utilizado es el siguiente:

1TP5Página {
    display: flex;
    flex-dirección: columna; min-height: 100vh;
    min-height: 100vh;
}
.admin-bar #page {
    min-height: calc(100vh - 32px); }
}
#page .site-content {
    flex-grow: 1; } #page .site-content { flex-grow: 1; }
}

Añade camino:

• mostrar (una entrada) WordPress Entre bastidores;
• Pulse "estado exterior" > "personalización";

• Desplácese hasta la parte inferior para encontrar "Extras". CSS";

• Pegue el código en el cuadro de edición;

• Pulse el botón "Publicar" en la esquina superior derecha para guardar.

Después de completar lo anterior, el pie de página ya no flotará hacia arriba, independientemente de si la página tiene mucho contenido o no.

resúmenes

Astra Pro El módulo de pie de página le permite crear rápidamente una zona inferior de la página claramente estructurada y visualmente unificada. Junto con un sencillo CSS y la posición de visualización del pie de página se ha estandarizado. Esta combinación es perfecta para la creación de páginas para blogs, sitios de comercio electrónico o sitios web oficiales de empresas.

Artículos relacionados

Contacte con nosotros
¿No puede leer el tutorial? Póngase en contacto con nosotros para obtener una respuesta gratuita. Ayuda gratuita para sitios personales y de pequeñas empresas	Servicio de atención al cliente WeChat
① Tel: 020-2206-9892
② QQ咨询：1025174874
(iii) Correo electrónico: info@361sale.com
④ Horario de trabajo: de lunes a viernes, de 9:30 a 18:30, días festivos libres