Êtes-vous prêt à faire passer la conception de votre site Web au niveau supérieur et à libérer votre créativité ? Le module Beaver Builder's Box est là pour vous aider à propulser la conception de votre site Web vers de nouveaux sommets !

Le module Box est un outil puissant du générateur de pages de Beaver Builder qui vous permet d'ajouter des conteneurs personnalisables à votre site Web. Avec la prise en charge de Flexbox, CSS Grid et Layers, vous pouvez adapter vos mises en page en fonction de vos besoins de conception, que vous cherchiez à mettre en évidence un contenu important, à présenter des produits ou des services, ou simplement à ajouter un intérêt visuel à vos pages.

Que vous soyez un concepteur Web chevronné ou tout juste débutant, le module Box offre des possibilités infinies pour créer des mises en page époustouflantes et dynamiques. Dites adieu aux sites Web à l'emporte-pièce et bonjour aux designs personnalisables qui vous aident à mettre en valeur vos compétences et à épater vos clients.

Dans cet article de blog, nous explorerons la polyvalence et le potentiel créatif du module Box, révélant comment il peut améliorer vos projets de conception Web.

Table des matières:

• Qu'est-ce que le module Box ?
• Flexbox vs grille CSS
• Quand utiliser Flexbox ?
• Quand utiliser la grille CSS ?
• Exemples d'utilisation du module de boîte
• Comment ajouter le module Box
• Démarrez rapidement avec les préréglages du module Box
• Paramètres du conteneur du module de boîte
• Conclusion

Qu'est-ce que le module Box ?

Le module Box fonctionne un peu comme une ligne ou une colonne, servant de conteneur. Il utilise soit flexbox, soit grille CSS, vous permettant de créer des mises en page complexes, fluides et flexibles. Vous pouvez imbriquer, empiler et organiser des boîtes dans des orientations horizontales et verticales, ainsi que dans une grille pour créer des structures complexes :

Flexbox et CSS Grid, deux modèles de mise en page CSS distincts, jouent un rôle central dans l'élaboration des fonctionnalités du module Box :

• Flexbox est idéal pour les mises en page unidimensionnelles, dans lesquelles les éléments doivent être disposés en ligne ou en colonne avec une flexibilité de dimensionnement et d'alignement.
• CSS Grid convient aux mises en page bidimensionnelles, offrant un contrôle précis sur les lignes et les colonnes, permettant des conceptions plus complexes.

Depuis Beaver Builder 2.8, Box vous permet d'ajouter facilement des conteneurs personnalisables à votre site Web. Que vous mettiez en valeur un contenu important, présentiez des produits ou des services, ou simplement ajoutiez un intérêt visuel à vos pages, le module Box offre des possibilités infinies de créativité.

Caractéristiques et avantages clés du module Box

• Conception personnalisable : avec le module Box, vous avez un contrôle total sur l'apparence et le style de vos conteneurs. De l’ajustement des couleurs et des bordures à l’ajout de liens vers l’ensemble de la boîte, les possibilités sont infinies.
• Polyvalence : Que vous soyez un designer chevronné ou un novice, le module Box offre polyvalence et simplicité d'utilisation. Avec son interface intuitive, vous pouvez créer des designs époustouflants sans aucune connaissance en codage.
• Conception réactive : vous vous inquiétez de l'apparence de vos conteneurs sur différents appareils ? Le module Box est conçu pour garantir que vos conceptions sont réactives et s'affichent parfaitement sur toutes les tailles d'écran.
• Intégration transparente : le module Box s'intègre de manière transparente aux autres modules Beaver Builder, vous permettant de créer des mises en page cohérentes et visuellement attrayantes pour votre site Web.

Tous les utilisateurs de notre générateur de pages, y compris la version Lite, auront accès aux options avancées Flex, Grid et Layers dans le module Box. Nous examinerons ensuite les principales différences entre Flexbox et Grid.

Flexbox vs grille CSS

Flexbox et CSS Grid sont tous deux des modèles de mise en page en CSS, mais ils répondent à des objectifs différents et ont des caractéristiques distinctes :

• Boîte flexible :
  • Objectif : conçu pour les mises en page unidimensionnelles, en ligne ou en colonne.
  • Cas d'utilisation : idéal pour disposer les éléments dans un conteneur horizontalement ou verticalement, créant ainsi des mises en page flexibles et dynamiques.
  • Principales caractéristiques :
    • Permet au contenu d'ajuster sa taille pour remplir l'espace disponible.
    • Les éléments peuvent être alignés horizontalement et verticalement.
    • Bien adapté aux barres de navigation, aux mises en page de cartes et aux éléments de centrage.
• Grille CSS :
  • Objectif : conçu pour les mises en page bidimensionnelles, permettant de contrôler à la fois les lignes et les colonnes.
  • Cas d'utilisation : convient aux mises en page complexes dans lesquelles les éléments doivent être positionnés à la fois en lignes et en colonnes, telles que des grilles, des tableaux et la structure globale des pages.
  • Principales caractéristiques :
    • Fournit un contrôle explicite sur les lignes et les colonnes.
    • Les éléments peuvent être placés n'importe où sur la grille.
    • Idéal pour créer des designs réactifs et aligner le contenu de manière plus complexe.

De plus, ces modèles d’aménagement fonctionnent souvent main dans la main pour produire des solutions d’aménagement complètes. Par exemple, flexbox peut être intégré de manière transparente dans des éléments de grille individuels pour gérer leur structure interne, tirant parti des avantages combinés des deux modèles pour des résultats de conception optimaux.

Quand utiliser Flexbox ?

Flexbox, abréviation de Flexible Box Layout, change la donne dans le monde de la conception Web. Il s'agit d'un puissant modèle de mise en page CSS qui facilite l'organisation des éléments sur une page Web. Imaginez que vous créez un site Web et que vous souhaitez aligner certaines cases horizontalement ou verticalement. Avec Flexbox, vous pouvez le faire facilement.

Flexbox vous permet de contrôler la disposition des éléments dans un conteneur dans une direction, soit verticalement, soit horizontalement. Ainsi, que vous créiez une barre de navigation, une galerie d'images ou une liste d'éléments, Flexbox vous offre les outils nécessaires pour les organiser exactement comme vous le souhaitez :

En règle générale, les propriétés Flexbox sont appliquées à l'élément parent, affectant ainsi le positionnement de ses enfants. Mais le meilleur, c’est que chaque enfant peut avoir ses propres règles de mise en page, ce qui vous offre une flexibilité et un contrôle incroyables sur votre conception.

Avec Flexbox, vous pouvez personnaliser l'espacement entre les éléments, contrôler la façon dont ils s'enroulent sur de nouvelles lignes et même ajuster leur alignement et leur justification dans le conteneur. C'est comme avoir une baguette magique pour la mise en page Web !

Pour bien comprendre Flexbox, il est important de saisir le concept de propriété « flex ». Cette propriété détermine l'espace occupé par chaque élément par rapport aux autres. Ainsi, que vous souhaitiez qu'un élément s'agrandisse et occupe plus d'espace, ou qu'il se réduise pour s'adapter à son contenu, Flexbox est là pour vous.

Quand utiliser la grille CSS ?

CSS Grid est un autre système de mise en page puissant en CSS qui révolutionne la façon dont les concepteurs Web structurent et organisent le contenu Web. Contrairement aux méthodes de mise en page traditionnelles telles que les flotteurs ou le positionnement, CSS Grid permet de créer des mises en page basées sur une grille bidimensionnelle avec précision et flexibilité.

Avec CSS Grid, les concepteurs peuvent définir des lignes et des colonnes, puis placer des éléments dans ces zones définies, offrant ainsi un contrôle granulaire sur la disposition, l'alignement et l'espacement du contenu :

L’un des principaux avantages de CSS Grid est sa capacité à gérer facilement des mises en page complexes. Qu'il s'agisse de concevoir des sites Web multicolonnes, des galeries basées sur une grille ou des applications Web réactives, CSS Grid offre une solution polyvalente pour structurer le contenu de manière visuellement attrayante.

De plus, CSS Grid simplifie le processus de création de conceptions réactives en permettant aux concepteurs de définir la manière dont les éléments de la grille réagissent aux différentes tailles de fenêtre, ce qui facilite la création de mises en page qui s'adaptent de manière transparente à divers appareils et résolutions d'écran.

CSS Grid est particulièrement utile lors de la création de sites Web modernes et réactifs qui nécessitent des mises en page complexes et un contrôle précis des éléments de conception. C'est un excellent choix pour les projets où la flexibilité, l'évolutivité et la maintenabilité sont primordiales.

Exemples d'utilisation du module de boîte

Le module Box ouvre un monde de possibilités créatives aux designers. Voici quelques exemples de la façon dont ce module peut être utilisé pour améliorer la mise en page de votre site Web :

• Centrage sans effort : obtenez un alignement parfait en centrant sans effort le contenu verticalement et horizontalement dans vos boîtes, créant ainsi des mises en page visuellement attrayantes et équilibrées.
• Dispositions de boîtes imbriquées : plongez dans le monde de la conception complexe en emboîtant des boîtes dans des boîtes, permettant la création de mises en page complexes et dynamiques.
• Grilles réactives : concevez des dispositions de grille réactives qui s'adaptent automatiquement à différentes tailles d'écran, garantissant une expérience utilisateur transparente et optimisée sur tous les appareils.
• Structures basées sur une grille : utilisez le module Box pour créer des mises en page sophistiquées basées sur une grille qui servent de base à l'ensemble de votre page Web, fournissant ainsi structure et clarté à votre contenu.
• Dispositions de cartes : faites preuve de créativité dans la présentation de votre contenu en tirant parti de l'option Lien dans le module Boîte pour créer des mises en page de cartes élégantes et modernes qui améliorent l'engagement et la lisibilité des utilisateurs.
• Empilage sans effort : empilez facilement les modules les uns sur les autres sans avoir besoin de CSS personnalisé, rationalisant ainsi votre processus de conception et garantissant une intégration transparente des éléments de contenu.

Comment ajouter le module Box

Prêt à commencer à utiliser le module Box dans vos projets de conception Web ? Voici un guide rapide pour vous aider à démarrer :

1. Accédez au module Boîte

Lancez Beaver Builder sur la page où vous souhaitez ajouter le module box. Cliquez sur l'icône « + » pour ouvrir le panneau de contenu, puis sélectionnez le module Box et faites-le glisser vers l'emplacement souhaité sur la page. Alternativement, vous pouvez choisir un alias de module pour démarrer rapidement.

Notez que le module Box doit être placé à l’intérieur d’une ligne. Si vous essayez de faire glisser le module Box sur la page sans le placer au préalable dans une ligne, une ligne sera automatiquement créée pour vous.

2. Personnalisez votre mise en page

Une fois que vous avez ajouté le module Box, vous pouvez commencer à le personnaliser en fonction de vos besoins. Expérimentez avec différents affichages, Flex , Grid ou Layers , jusqu'à obtenir la disposition souhaitée.

3. Ajouter du contenu

Ensuite, ajoutez du contenu à votre (vos) boîte(s). Cela peut inclure du texte, des images, des boutons ou même un autre module de boîte.

Pour imbriquer des boîtes dans des boîtes, faites simplement glisser un module Box dans un autre module Box. Cela facilite la création de mises en page complexes. De plus, vous pouvez combiner de manière transparente flexbox et grille CSS pour concevoir des mises en page sophistiquées.

4. Prévisualiser et publier

Enfin, prévisualisez votre conception pour vous assurer que tout ressemble exactement à ce que vous souhaitez. Une fois que vous êtes satisfait, cliquez sur le bouton de publication pour appliquer vos modifications en direct sur votre site Web.

Démarrez rapidement avec les préréglages du module Box

En plus du module Box lui-même, vous remarquerez que nous avons ajouté les alias de module suivants qui peuvent être utilisés pour vous aider à démarrer rapidement :

• Colonnes flexibles : ce préréglage crée une rangée horizontale de trois zones flexibles situées dans la zone parent.
• Grille 3 × 2 : une structure de mise en page utilisant des zones de grille composées de trois colonnes et de deux lignes à l'intérieur de la zone parent.
• Grille 4 × 2 : une structure de disposition de zones de grille composée de quatre colonnes et de deux lignes dans la zone parent.
• Split Header : Cette structure est une grille définissant 3 colonnes avec un module photo centralisé et des modules menu de chaque côté.
• Grille photo : Cette mise en page est composée d'une grille 4×3 et de modules photo.

Bien que notre objectif soit de rendre le module Box aussi convivial que possible, nous vous recommandons fortement d'avoir une solide maîtrise de Flexbox et de CSS Grid. Nous espérons que vous trouverez que les alias de module fournissent un raccourci pratique pour créer rapidement des mises en page à l'aide des modules Box sur la page.

Paramètres du conteneur du module de boîte

Lorsqu'il s'agit de créer des mises en page de sites Web captivantes, le module Box offre une multitude de paramètres de conteneurs polyvalents qui permettent aux concepteurs de contrôler l'affichage, l'alignement et l'espacement avec précision. Examinons les principales fonctionnalités et paramètres des options de conteneur du module Box :

Options d'affichage

Le module Box propose trois types d'affichage distincts : Flex, Grid et Layers, chacun offrant des avantages uniques pour la personnalisation de la mise en page. Alors que Flex excelle dans les mises en page unidimensionnelles, Grid offre un contrôle précis sur les lignes et les colonnes, et Layers permet des conceptions en couches pour un attrait visuel amélioré.

Notez que les options de paramètres de votre Box Module changeront en fonction du type d'affichage que vous avez sélectionné :

Écran flexible

Avec l'option Flex, les concepteurs peuvent organiser les éléments dans une boîte horizontalement ou verticalement, en tirant parti de CSS Flexbox pour un dimensionnement et un alignement flexibles. Les paramètres Direction, Aligner et Wrap améliorent encore le contrôle de la mise en page, garantissant une disposition transparente des éléments de contenu :

Affichage de la grille

Utilisant CSS Grid, l'option Grid facilite les mises en page complexes basées sur une grille avec des lignes et des colonnes personnalisables. Les concepteurs peuvent spécifier le nombre de pistes, ajuster la direction du flux et affiner l'alignement pour des conceptions au pixel près qui captivent et engagent les visiteurs :

Affichage des calques

Pour les mises en page en couches, l'option Calques permet d'organiser les éléments d'une boîte dans un format empilé, idéal pour ajouter des superpositions de texte ou des éléments visuels aux images. En ajustant les paramètres d'alignement, les concepteurs peuvent obtenir un placement optimal pour un look soigné et professionnel :

Paramètres universels

Les quatre sections suivantes de l'onglet Conteneur , Espacement, Dimensionnement et placement, Apparence et Liaison, sont des paramètres universels applicables à chaque type d'affichage de boîte :

Notez que tous les paramètres de l'onglet Avancé sont également les mêmes pour chaque type d'affichage.

Espacement, dimensionnement et placement

Le réglage précis de l'espacement et du dimensionnement est simplifié grâce aux paramètres complets du module Box. Du contrôle de l'écart entre les éléments avec les dispositions Flex et Grid à la spécification des proportions, du remplissage et de la largeur/hauteur, les concepteurs ont un contrôle total sur la présentation visuelle de leur contenu.

Apparence et liaison

Améliorer l'attrait visuel des boîtes se fait sans effort grâce aux paramètres personnalisables de couleur du texte, de couleur d'arrière-plan, de bordure et d'ombre de boîte. De plus, les concepteurs peuvent ajouter des liens vers des zones pour une navigation transparente, ce qui facilite la création de mises en page de cartes interactives qui améliorent l'expérience utilisateur.

Conclusion

Le module Box repousse les limites de la créativité, offrant une myriade de possibilités pour créer des mises en page captivantes et visuellement saisissantes. Que vous soyez un designer chevronné ou un novice, la maîtrise du module Box ouvre les portes à des possibilités de conception infinies qui élèvent votre site Web vers de nouveaux sommets.

Essayez le module Beaver Builder's Box et voyez la différence qu'il peut faire pour vos projets. Que vous créiez un blog personnel, un site de commerce électronique ou un site Web d'entreprise, le module Box offre la flexibilité et la polyvalence dont vous avez besoin pour donner vie à votre vision.

Questions connexes

Quand utiliser Flexbox ?  

Flexbox vous permet d'organiser et d'aligner des éléments dans un conteneur, quelle que soit leur taille ou leurs changements potentiels. La nature flexible d'un conteneur flexible garantit que les éléments flexibles se dilatent pour remplir l'espace disponible et se rétrécissent pour éviter un débordement si nécessaire.

Pouvez-vous mélanger CSS Grid et Flexbox ?

Vous pouvez mélanger CSS Grid et Flexbox dans la même mise en page pour exploiter leurs atouts respectifs pour différentes parties de la conception. Par exemple, vous pouvez utiliser CSS Grid pour créer la structure globale de votre mise en page, puis utiliser Flexbox dans des éléments de grille spécifiques pour contrôler l'alignement et la distribution du contenu dans ces zones. Cette combinaison permet une plus grande flexibilité et précision dans la conception de mises en page complexes.

Quand ne faut-il pas utiliser Flexbox ?

Flexbox est polyvalent pour la plupart des scénarios de mise en page, mais il n'est pas idéal pour les mises en page de grille complexes ou les mises en page bidirectionnelles. Pensez à utiliser CSS Grid pour un contrôle avancé de la grille ou lorsque vous traitez du contenu dynamique. De plus, tenez compte des considérations de compatibilité et de performances du navigateur lorsque vous décidez d'utiliser Flexbox pour vos besoins de mise en page.