Astra Pro Footer Widgets Module and Footer Fixation Tutorial Setup

Dans la conception d'un site web, le pied de page n'est pas seulement une zone d'affichage d'informations clés, mais aussi un élément important qui reflète l'esthétique générale de la conception.Astra Pro Fournit un module de widget de pied de page très utile, qui peut vous aider à créer rapidement diverses zones de pied de page et à contrôler librement le contenu de la page.ouverture (jargon des échecs)Il s'agit d'un outil qui permet d'adapter le contenu de la page, les couleurs, les polices de caractères et d'autres éléments. Cet article décrit le processus de configuration spécifique et ajoute comment faire en sorte que le pied de page soit fixé en bas de la page pour éviter les espaces vides dus à un contenu trop faible.

Introduction au module des widgets de pied de page

Astra Pro Le module de widget de pied de page prend en charge jusqu'à 7 Différentes mises en page. Vous pouvez choisir une disposition qui convient à la structure de votre site web ou au style de votre marque, par exemple :

• mise en page à une seule colonne
• Combinaisons côte à côte telles que deux ou trois colonnes
• Répartition asymétrique des structures de gauche et de droite

Lorsque le module est activé, il est possible de placer dans chaque zone le WordPress Des widgets natifs qui prennent également en charge les modules de contenu fournis par des plugins tiers, tels que les formulaires, la navigation, les icônes sociales, etc.

Étapes de l'installation

• Installez et activez le thème Astra avec Astra Pro Plug-ins.
• entrer dans WordPress Dans les coulisses, cliquez sur "Apparence" > "Personnaliser" > "Footer Builder".
• Sélectionnez la structure de mise en page appropriée dans le constructeur de pied de page.
• Pour définir le contenu souhaité pour chaque colonne : allez à"Personnaliser" > "Widgets" > "Zone de widgets du pied de page"ajoutez le type de gadget que vous souhaitez afficher.

Contrôles du style et de la typographie

Astra Pro offre des options détaillées de réglage du style :

• marge intérieureVous pouvez définir séparément les marges supérieure, inférieure, gauche et droite de la zone de pied de page ;

• Réglage de la largeur: :
  • Pleine largeur d'écran pour remplir l'espace du navigateur ;
  • Largeur du contenu, cohérente avec le conteneur de la page principale ;

• style calligraphiqueLes fonctionnalités suivantes ont été ajoutées : support pour la définition de paramètres tels que la police, la taille de la police, la taille de la ligne, etc. pour le titre et le corps de chaque widget ;

• Arrière-plans et couleursLes couleurs d'arrière-plan personnalisables et le téléchargement d'images d'arrière-plan sont également pris en charge.

Ces options permettent d'obtenir un style visuel cohérent et de donner plus de texture au pied de page.

Comment corriger le pied de page en bas de la page ?

Lorsque le contenu d'une page est trop faible, le pied de page peut se retrouver au milieu et nuire à l'aspect général de la page.typographique.

Les éléments suivants peuvent être ajoutés CSS Code pour que le pied de page soit toujours placé en bas et reste affiché en bas quelle que soit la longueur de la page.

Le code utilisé est le suivant :

#page {
    display : flex ;
    flex-direction : column ; 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 ; }
}
#page {
    display : flex ;
    flex-direction : column ; 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 ; }
}
#page {
    display : flex ;
    flex-direction : column ; 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 ; }
}

Ajouter un chemin :

• spectacle (un billet) WordPress En coulisses ;
• Cliquez "état extérieur" > "personnalisation" ;

• Faites défiler la page jusqu'en bas pour trouver "Extras". CSS" ;

• Collez le code dans la boîte d'édition ;

• Cliquez sur le bouton "Publier" dans le coin supérieur droit pour enregistrer.

Après avoir effectué les opérations ci-dessus, le pied de page ne s'affichera plus, que la page contienne beaucoup de contenu ou non.

résumés

Astra Pro Le module footer vous permet de créer rapidement une zone inférieure de la page clairement structurée et visuellement unifiée. Avec un simple CSS et la position d'affichage du pied de page est devenue plus standardisée. Cette combinaison est parfaite pour la création de pages de blogs, de sites de commerce électronique ou de sites professionnels officiels.

Articles connexes