Configurer un contenu pleine largeur ou en boîte avec le thème gratuit Astra

Thème Astra

Astra est un thème WordPress efficace et entièrement personnalisable. Il est également beau et rapide, ce qui le rend idéal pour les blogs, les entreprises, les portefeuilles personnels et la vitrine WooCommerce. Étant léger, il offre une grande vitesse pour le site Web. Astra est conçu dans un souci de référencement, ce qui permet au site Web d'être mieux classé dans les moteurs de recherche. Avec ses fonctionnalités et modèles spéciaux, il est idéal pour les constructeurs de pages comme Elementor, Divi, Beaver Builder, SiteOrigin, Visual Composer, etc.

Récipient

Une page d’un site Web peut être facilement appelée conteneur , car un conteneur est une zone dans laquelle nous affichons le contenu. En termes simples, le conteneur englobe la page entière. Qu'il s'agisse de la zone de contenu ou de la barre latérale, elle sera incluse dans le conteneur. Techniquement, nous appelons la zone de contenu le conteneur principal, tandis que la barre latérale est appelée conteneur secondaire.

Comment manipuler les mises en page des conteneurs sur un site Web ?

L’utilisation d’un thème Astra facilite l’application de mises en page de conteneurs sur l’ensemble du site Web. Vous pouvez configurer les grilles via l'option Customizer. Celui-ci se trouve dans l'onglet Apparence : Apparence > Personnalisateur > Global > Conteneur.

  • Vous pouvez également appliquer différents conteneurs pour différentes pages et publications individuellement, à partir des méta-paramètres.
  • Si vous avez appliqué différents paramètres pour l'ensemble du site Web et différents paramètres dans les méta-paramètres , les méta-paramètres spécifiques à la page auront une priorité plus élevée que les paramètres globaux du personnalisateur .

Largeur du conteneur

Tout le contenu du site Web, qu'il soit graphique ou textuel, sera affiché dans cette largeur. Vous pouvez créer une variété de vues en combinant la largeur avec la disposition du conteneur.

Disposition du conteneur

Astra Free Theme propose 4 types de disposition de conteneurs. Il s’agit de mises en page globales et seront appliquées à l’ensemble du site Web. Si vous souhaitez une mise en page variable pour différents types de publications, vous pouvez le faire avec une mise en page de conteneur dédiée.

Avec l'aide des « méta-paramètres » de la page, vous pouvez avoir plus de contrôle sur la disposition du conteneur de chaque page.

Il existe les types suivants de présentations de conteneurs.

  • En boîte
  • Contenu en boîte
  • Pleine largeur / Confiné
  • Pleine largeur / Étiré
  • Disposition du conteneur dédié

Mise en page dédiée ou spécifique

Les quatre types de présentations de conteneurs indiqués ci-dessus sont disponibles séparément pour des types de publication spécifiques. Cela signifie que si vous choisissez une mise en page par défaut, disons en boîte, et que pour les archives vous avez choisi pleine largeur, alors le site entier aura une mise en page en boîte, tandis que les pages d'archives auront une mise en page pleine largeur/contenue.

  • Mise en page – Pour les pages uniquement
  • Mise en page des archives – Toutes les archives
  • Mise en page des articles de blog – Pour les archives de blog et les pages d'articles de blog uniques

Le thème Astra offre une intégration avec de nombreux plugin populaires. Ces plugin offrent une intégration avec Astra :

WooCommerce

EDD ( Easy Digital Downloads )

ApprendreDash

LifterLMS (3)

Lorsque les plugin ci-dessus sont installés, vous pouvez également avoir accès à des options de présentation de conteneur dédiées pour ces pages plugin .

Les modules dédiés du plugin Astra Pro Addon offrent des options plus avancées. Les modules dédiés du plugin Astra Pro Addon contiennent ces options :

  • Les méta-paramètres de la page ont la préférence sur la disposition du conteneur. La priorité des méta-paramètres est supérieure à celle des paramètres du personnalisateur.
  • Les paramètres de mise en page du site déterminent la largeur du conteneur.

Disposition du conteneur/Disposition pleine largeur

Les paramètres du conteneur pleine largeur peuvent être manipulés via les paramètres du personnalisateur trouvés dans Docs .

Docs » Paramètres du personnalisateur » Global » Pleine largeur / Contenu – Disposition du conteneur

Comme expliqué précédemment, un site Web peut avoir deux conteneurs ; Conteneur primaire et conteneur secondaire.

Le conteneur principal est la page sur laquelle le contenu principal apparaît.

Le conteneur secondaire constitue la barre latérale et divers widgets dans la barre latérale.

À l'aide d'une disposition « Pleine largeur / Confiné », vous pouvez combiner les conteneurs principal et secondaire. Ces conteneurs peuvent ensuite être présentés dans un seul conteneur pour une apparence plus ordonnée. La disposition « Pleine largeur / Contenu » affiche le contenu et la barre latérale côte à côte dans un seul conteneur. Ce conteneur laissera de l'espace autour du conteneur car il s'affichera dans une largeur de conteneur.

Les paramètres du conteneur peuvent être modifiés ou modifiés en allant dans Apparence et en suivant ce chemin :

Apparence > Personnaliser > Global > Conteneur

La mise en page pleine largeur/contenue est idéale pour les sites Web qui ont besoin d’une conception soignée, sans boîtes ni limites de grille. Cette mise en page peut être définie par défaut grâce à des intégrations avec plugin comme WooCommerce, LifterLMS, etc.

De nombreux créateurs de pages, tels que Visual Composer, nécessitent que le thème contrôle la largeur des conteneurs. Pour la même raison, ils recommandent une disposition Pleine Largeur/Contenu.

Les modules dédiés du plugin Astra Pro Addon offrent plus d'options de style.

Contenu en boîte – Disposition du conteneur

Docs » Paramètres du personnalisateur » Global » Contenu encadré – Disposition du conteneur

Nous avons expliqué plus tôt que normalement un site Web peut avoir deux conteneurs :

Conteneur principal : où le contenu principal apparaît

Conteneur secondaire : se compose d'une barre latérale et de divers widgets différents

Si vous choisissez la « Disposition en boîte du contenu », alors seul le conteneur principal apparaîtra au format en boîte. Néanmoins, le conteneur secondaire restera sur fond uni.

Si vous souhaitez rendre la zone de contenu de votre site Web plus visible que la barre latérale, alors sélectionner cette mise en page est idéale. En termes simples, la mise en page de contenu en boîte est parfaite pour les sites Web et les blogs de contenu.

Les paramètres de mise en page en boîte peuvent être trouvés comme suit :

 Apparence > Personnaliser > Global > Conteneur

De plus, si vous souhaitez appliquer un conteneur différent pour des pages individuelles, vous pouvez le faire à partir des méta-paramètres.

  • Un conteneur de contenu en boîte peut être appliqué pour les pages ou les publications sélectionnées, à partir des méta-paramètres.
  • Les paramètres de mise en page du site déterminent la largeur du conteneur.
  • Avec l'aide du plugin Astra Pro Addon, vous pouvez modifier la couleur d'arrière-plan du site via le module Couleurs et arrière-plans. Cependant, si vous n'avez pas Astra Pro, vous pouvez également ajouter une image d'arrière-plan avec Custom CSS.

Caractéristiques du thème gratuit Astra

Astra est sans aucun doute le meilleur thème pour Elementor. Il fonctionne très bien avec Elementor, ce qui en fait le meilleur thème gratuit pour créer des sites Web. Ci-dessous, nous avons discuté des fonctionnalités qui font d'Astra le meilleur thème.

Mise en page pleine largeur/étirée

Astra fournit une mise en page pleine largeur/étirée, spécialement conçue pour Elementor. Avec cette mise en page, Elementor obtient le contrôle total de votre mise en page, vous évitant ainsi d'avoir à inclure une méthode JavaScript compliquée pour étendre vos lignes ou sections sur toute la largeur.

Avec Astra, vous pouvez désactiver assez facilement la barre latérale, le titre de la page, le fil d’Ariane et les images en vedette pour obtenir une liberté totale de conception avec Elementor. En désactivant ces fonctionnalités, vous pouvez disposer d'une toile vierge, qui vous permet de concevoir votre site Web à partir de zéro, exactement comme vous le souhaitez. Vous pouvez même créer une page de destination personnalisée, désactiver l'en-tête et le pied de page d'Astra, afin qu'Elementor bénéficie du contrôle total de la page.

La plupart des thèmes affichent ces fonctionnalités par défaut, réduisant ainsi le contrôle de l'utilisateur sur la conception du site.

Options globales du personnalisateur

Les options globales d'Astra vous permettent de définir la mise en page requise, la barre latérale et d'autres paramètres personnalisés adaptés à Elementor directement dans le personnalisateur. L'option globale est idéale, surtout si vous créez un site Web dont la plupart des pages sont conçues avec Elementor.

Encore une fois, si vous souhaitez des paramètres différents pour des pages individuelles, l'option globale sera remplacée par ces paramètres individuels.

Compatible avec Elementor Pro 2.0

Astra est l'un des rares thèmes entièrement compatibles avec le générateur de thèmes Elementor 2.0. En utilisant Astra et Elementor Pro 2.0 Theme Builder, vous pouvez micro-concevoir chaque aspect de votre site Web. Qu'il s'agisse de sélectionner un en-tête, un pied de page, des modèles de blog ou toute autre chose, vous pouvez faire ce que vous voulez avec ces deux outils puissants.

Intégration d'Elementor

Astra propose une intégration intelligente avec Elementor. Si vous créez une page avec Elementor, Astra définira automatiquement les options qui conviennent le mieux à Elementor. Cette intégration intelligente permet d'économiser beaucoup de temps et d'énergie que vous pouvez utiliser pour d'autres choses importantes.

Astra propose plus de 30 types d'en-têtes et plus de 10 types de pieds de page. Vous pouvez choisir si vous souhaitez un en-tête transparent ou solide. Vous pouvez même créer votre en-tête à partir de zéro sur elementor, selon vos besoins personnalisés, avec le module complémentaire Astra Pro.

Options d'en-tête mobile

Vous pouvez créer des sites mobiles réactifs avec Astra. Astra fournit une solution pratique pour le menu réactif mobile, qui dispose de paramètres très simples dans le personnalisateur. Cela vous permet de contrôler et de concevoir un magnifique menu mobile. Vous pouvez créer le menu entier sans aucun code personnalisé.

Léger et sans ballonnement

Astra fournit un support à Elementor. Cela signifie qu'Astra ne duplique pas les fonctionnalités offertes par elementor. Astra est un thème léger et modulaire. Il s'occupe des cosmétiques, tels que les couleurs globales, la typographie, le style et les intégrations plugin tiers. Néanmoins, Elementor gère la partie création de page.

Ahmad

Voir les commentaires

  • J'ai une question sur la personnalisation du conteneur. Il peut être ajusté en largeur. Mais je ne lis nulle part comment régler la hauteur de la boîte conteneur (bloc). Il y a trop de blanc sur mon site. J'aimerais que le corps du texte soit plus proche de l'en-tête en rendant le bloc dans lequel il se trouve moins haut.

    • Bonjour, il n'y a pas de configuration pour la hauteur, elle est définie par le contenu de toutes les sections de la page + les marges. Dans votre cas, je suppose que c'est un problème de marge/remplissage de votre en-tête ou de votre première section.

Messages récents

Comment utiliser les en-têtes et pieds de page avec Elementor

Les en-têtes et pieds de page d’un site Web sont des éléments essentiels. Dans la plupart des cas, l'en-tête fournit la navigation…

6 janvier 2022

Comparaison des thèmes WordPress : Astra vs OceanWP

Astra et OceanWP sont deux des thèmes WordPress les plus populaires sur le marché. Professionnel…

2 janvier 2022

Comparaison des thèmes d'actualités WordPress : journal vs. Astre

Créer un excellent site Web d'actualités ne nécessite pas que vous deveniez un concepteur de sites Web. Nous…

25 octobre 2021

Créez un site Web lié à l'actualité avec le thème du journal

Le thème Newspaper est l'un des thèmes WordPress les plus importants conçus par tagDiv, un…

18 octobre 2021

Comment créer un commerce électronique avec le générateur Avada WooCommerce

Lorsqu'il s'agit de créer une boutique en ligne, WooCommerce est le plugin incontournable. Il…

4 octobre 2021

Comment utiliser les effets d'en-tête collant et de défilement avec Elementor

Un en-tête est généralement la première chose qu’une personne voit lorsqu’elle visite votre site Web,…

21 septembre 2021