Les en-têtes transparents sont de nos jours à la mode et utilisés par un nombre toujours croissant de sites Web. Ces types d'en-têtes donnent à votre page une apparence efficace et encouragent les utilisateurs à rester sur la page plus longtemps.
Au-dessus du pli, Beaver Builder Transparent Header fait référence à la zone de la page Web qui est vue par les utilisateurs au premier coup d'œil, c'est-à-dire ce que les utilisateurs voient sans faire défiler la page.
Curieux de connaître Beaver Builder, ne vous inquiétez pas, j'ai ce qu'il vous faut nos Examen détaillé de Beaver Builder.
Je répondrai à ces questions sur le blog, jetez un œil :
- Qu'est-ce qu'un en-tête de page ?
- Quelle est la signification d'un en-tête transparent ?
- Que fait l'ajout d'un en-tête transparent à votre site Web ?
- Quelles sont les fonctionnalités de Beaver Builder ?
- Comment définir un en-tête transparent avec Beaver Builder ?
- Quelles sont les étapes pour rendre votre en-tête de page Web transparent ?
- Quels termes importants du code devez-vous connaître ?
- Quel est le prix de Beaver Builder ?
Table des matières
Qu'est-ce qu'un en-tête de page ?
Un en-tête de page est appelé la section supérieure de toute page Web présente sur votre site Web. Les en-têtes sont souvent mal interprétés avec seulement la bande supérieure qui contient le logo de votre entreprise/site Web et une barre de menus.
Mais ce n'est pas le cas, l'en-tête de page est l'intégralité du contenu qu'un utilisateur voit lorsqu'il atterrit sur votre page, appelé contenu au-dessus de la ligne de flottaison, comme mentionné ci-dessus.
Il existe différentes fonctionnalités que votre en-tête peut avoir, que vous pouvez ajouter en fonction de vos besoins.
Ce sont:
- Logo de votre entreprise ou de votre site Web
- Tout type d'appel à l'action qui redirigerait les utilisateurs vers votre page de destination
- Titre ou slogan qui représente vous et votre marque
- Barre de menus pour plus de convivialité
- Une option de recherche pour naviguer facilement sur votre site Web.
Que signifie l'en-tête transparent ?
Les en-têtes normaux ont un rectangle en forme de bande en haut de votre page Web qui sépare le contenu de votre en-tête et le contenu de la page dans certains cas l'un de l'autre.
Si vous utilisez un en-tête transparent, cela permet de fusionner le contenu de votre page avec l'en-tête ainsi qu'avec la bande rectangulaire supérieure qui peut contenir le logo de votre site Web, un appel à l'action et un menu.
Caractéristiques de Beaver Builder
Plusieurs fonctionnalités sont fournies avec Constructeur de castor. Discutons de certaines des caractéristiques importantes.
1. Modèles de pages
Un modèle de page est un type de thème que vous pouvez définir pour vos pages Web. Avec un constructeur de castor, vous pouvez avoir un modèle de page différent pour chaque page Web différente ou vous pouvez en avoir un commun.
C'est comme tu veux. Ces modèles sont créatifs, uniques, conviviaux et surtout adaptés aux mobiles.
2. Placement de contenu
Vous pouvez redimensionner, déplacer et recadrer les images selon vos besoins en cliquant simplement. Mettez votre appel à l'action, vos symboles attrayants et vos en-têtes à partir du tableau de bord simplifié du thème Beaver Builder que vous sélectionnez.
Vous pouvez également séparer votre page en segments pour mettre plus de contenu sur votre page et paraître quelque peu réduite dans le but d'avoir un impact mémorable sur les clients.
3. Générateur de castors Powerpack
Il s'agit d'un module complémentaire que vous pouvez intégrer à un constructeur de castors et obtenir un grand nombre d'intégrations pour améliorer les performances de votre site Web et embellir les pages Web.
Besoin d'écrire votre contenu sur l'interface WordPress ? Ne vous inquiétez pas, avec Beaver Builder, vous pouvez composer votre contenu sur l'interface typique de WordPress et l'importer tous ensemble sur le thème Beaver Builder que vous décidez d'utiliser pour votre page.
Si vous choisissez de ne plus utiliser Beaver Builder, vous pouvez exporter les pages créées par le modèle Beaver Builder vers votre interface de page WordPress ordinaire sans perte de votre contenu également.
Vous pouvez également aimer ceci :
Comment définir un en-tête transparent avec Beaver Builder ?
Il n'y a qu'un seul outil requis pour définir un en-tête transparent sur l'une des pages Web de votre site Web, The Beaver Themer. Parlons de Beaver Themer en détail.
Castor Themer
Castor Themer vous aidera rendre attractif et optimisé les pages Web d'un simple clic via son tableau de bord facile à utiliser.
Il permet d'avoir la fonctionnalité dans laquelle vous pouvez créer des en-têtes et des pieds de page, le Page d'erreur 404, et avec lui les pages que vous avez archivées. Il vous permet également de créer l'en-tête et le pied de page de chaque page Web, ce qui aide l'utilisateur à naviguer facilement sur votre site Web.
Fonctionnalités:
- Divers thèmes à choisir
Vous pouvez décider du thème pour chaque page de votre site Web et ils peuvent tous être différents aussi.
En utilisant ces thèmes, vous pouvez créer des blogs et des pages de destination et modifier les pages d'erreur 404 afin que ces pages puissent aider vos utilisateurs à accéder au site Web sur la bonne page.
- Parties thématiques
Ces parties constituent une fonctionnalité tout à fait unique et sont rares à trouver dans tout autre outil de mise en page de thème.
Il vous aide à créer des mises en page partielles, par exemple, un en-tête ou un pied de page peut être créé à l'aide de ces parties sur n'importe laquelle de vos pages, indépendamment du fait que la page soit réalisée avec un thème Beaver ou non. N'est-ce pas incroyable !
- Connexions sur le terrain
Vous pouvez intégrer le thème Beaver à n’importe laquelle de vos pages existantes et sécuriser le contenu tout en effectuant ce processus.
Avec d'autres outils de mise en page de thème, il existe un risque de perdre du contenu lorsque vous branchez l'outil sur votre page normalement créée ou sur une page créée avec tout autre outil de mise en page de thème.
- Grilles de publication
Vous pouvez choisir un thème qui définit vos blogs dans des grilles et vous pouvez modifier chaque grille en fonction de vos besoins. Cela aidera à rendre votre page facile à naviguer et à lui donner un aspect magnifique.
- Contenu commun
Vous souhaitez qu'un petit extrait de contenu dynamique soit commun et affiché sur toutes les pages ? Si oui, le thème castor est votre solution, avec le thème castor, vous obtenez un tableau de bord complètement différent pour créer du contenu à afficher sur chaque page de votre site Web.
Vous pouvez choisir si vous voulez que le contenu soit dynamique, glissant ou simplement qu'il reste statique. Gardez simplement à l'esprit de ne pas mettre un contenu long aussi commun car cela peut entraîner une duplication de contenu sur toutes vos pages.
Vous pouvez créer les formes de contenu suivantes - texte, images, liens et champs personnalisés, une fois créés, liez-les à toutes les pages sur lesquelles vous souhaitez que ce contenu soit affiché.
Étapes pour rendre votre en-tête de page Web transparent
Voici quelques étapes clés à suivre :
Étape 1 : Téléchargez Beaver et commencez à créer une page pour votre site à l'aide de Beaver Builder
La première chose à faire est la production de la page à travers Beaver Builder.
Dans WordPress, après avoir introduit le module de fabricant de castor, plutôt que de créer une page via WordPress, ouvrez simplement la page, ajoutez un titre à la page à l'aide de WordPress, puis cliquez sur modifier avec le développeur castor et commencez votre travail.
Étape 2 : Ajout de contenu
Après avoir créé une mise en page de base, décidez du contenu que vous souhaitez ajouter en haut de la page, c'est-à-dire au-dessus du contenu de la ligne de flottaison, qui peut être un titre suivi d'une phrase, un titre, un sous-titre ou tout appel à l'action, ou juste un logo et une image.
Maintenant, créez une ligne à l'aide d'un constructeur de castors et ajoutez le contenu prévu à la ligne. Sous la ligne, ajoutez l’image d’arrière-plan souhaitée pour que l’en-tête transparent apparaisse au-dessus.
Étape 3 : Ajout de classe
Vous devez accéder au bouton clé de la rangée supérieure pour ajouter une classe. Ajoutez ensuite une classe CSS en allant dans l'option Avancé. N'oubliez pas de cliquer sur le bouton Enregistrer.
Étape 4 : Rendre l'en-tête transparent
Alors maintenant, nous prévoyons de déplacer la colonne Top Banner sous l'en-tête. Avant tout, nous devons rendre l'en-tête simple.
Nous le faisons maintenant dans le but de voir où se ferme l'en-tête de la colonne Top Banner lorsque nous utilisons CSS pour le situer sous l'en-tête du site.
Ajoutez votre fichier CSS dans style.css ou branchez-le directement dans le générateur Beaver.
Quelques termes importants du code que vous devez connaître :
- Corps. fl-page-header-primaire :
L'extrait de code CSS ci-dessus est celui utilisé par un constructeur de castors pour encoder l'en-tête en haut de la page de votre site Web.
Nous ajoutons le corps de la page devant pour augmenter la spécificité de la page. Une autre raison de cibler l'extrait de code ci-dessus est de créer une copie du code principal utilisé par le constructeur castor pour l'en-tête, puis d'effectuer la modification.
Cela évite à votre en-tête d'être définitivement détruit en cas de problème avec le code.
- Fond : transparent :
Cet extrait CSS est utilisé pour supprimer l'arrière-plan qui est défini par défaut lorsque vous commencez à utiliser un constructeur Beaver. Si votre page n'est pas réalisée via le constructeur Beaver, vous pouvez toujours rendre l'en-tête transparent en exportant le fichier CSS dans l'option avancée qui vous est proposée. à la rangée supérieure.
Mais la couleur d'arrière-plan doit être supprimée dans tous les cas via l'extrait CSS ci-dessus.
- Position : relative et z-index : 10 :
Pour garantir l'alignement de notre en-tête transparent, c'est-à-dire la bannière supérieure, avec l'en-tête fixe existant et avec l'en-tête d'arrière-plan, utilisez l'extrait CSS mentionné.
Étape 5 : Alignement de la rangée supérieure de la bannière
Un autre code CSS doit être ajouté au même endroit où vous avez ajouté les extraits CSS ci-dessus.
Termes CSS importants que vous rencontrerez dans le code :
Écran @media et (largeur minimale 660px): L'utilisation de ce code consiste simplement à aligner la bannière supérieure avec l'en-tête existant. La valeur px mentionnée, qui est de 660 dans ce cas, est très importante. La valeur peut être fournie avec le code par défaut ou vous devrez peut-être l'ajouter manuellement.
La valeur px par défaut ou moyenne que vous devrez définir peut être comprise entre 990 et 995 pixels en fonction de la configuration de votre système.
.top-banner .fl-row-content-wrap : Cet extrait de CSS vous aide à ajuster le rembourrage en fonction de vos besoins.
marge-haut :-100px : Cet extrait vous aide à ajuster la marge de l'en-tête sur les quatre côtés en fonction de vos besoins.
Étape 6:
Personnalisez et embellissez l'en-tête transparent pour définir votre logo et votre menu de manière à ce qu'ils soient beaux et se fondent dans la transparence de l'en-tête.
Rendre l'en-tête transparent globalement
Avec Beaver Builder, vous avez la possibilité de sauvegarder la bannière supérieure créée et de l'utiliser sur d'autres pages Web de votre site Web.
Problèmes fréquents rencontrés lors de la transparence de l'en-tête
- L'en-tête n'est visible que sur les ordinateurs de bureau, mais pas sur les mobiles et les tablettes.
Ce problème est facilement résoluble. Il vous suffit de visiter Apparence> Personnaliser> Général> Arrière-plan et vous devez définir la couleur de sorte qu'elle contraste avec votre en-tête afin qu'elle se démarque et soit lisible.
- La barre supérieure de l'en-tête n'est pas visible.
Les problèmes ici viennent du Extrait CSS du code que vous avez copié et collé ou que vous avez écrit vous-même, ce qui inclut le corps. fl-page-bar.
Tarification de Beaver Builder
Pour ajouter un en-tête transparent, vous avez besoin d'un thème castor fourni avec la version payante du pack de construction castor.
Vous devrez débourser 149 $ pour un an de Beaver Builder service qui comprendra des thèmes Beaver qui vous aideront à ajouter facilement des en-têtes transparents à votre site Web.
Avantages et inconvénients de En-tête transparent Beaver Builder
Avantages
- Si vous voulez une page visuellement attrayante, alors le thème Beaver est un thème incontournable
- Vous pouvez modifier la disposition pour chaque appareil séparément, c'est-à-dire les mobiles, les tablettes et les ordinateurs de bureau. Vous pouvez également créer le tout ensemble avec une page de destination différente ou une page normale pour les trois appareils.
Inconvénients
- Le seul point négatif du thème Beaver est que le prix des forfaits payants est un peu élevé. Mais au vu des fonctionnalités qu’il offre, cela en vaut vraiment la peine.
Avis des clients de Beaver Builder
Liens rapides:
- Codes promotionnels et de réduction Beaver Builder
- Castor Builder contre Divi
- Castor Builder vs Elementor
- Beaver Builder contre Visual Composer
FAQ | En-tête transparent Beaver Builder
Où puis-je obtenir le code CSS ?
Vous pouvez contacter le support client de Beaver Builder, et ils répondront rapidement à votre requête et vous donneront la solution, ou vous pouvez utiliser des plateformes comme git hub et copier le code de ces plateformes directement car leur utilisation est gratuite.
Qu’est-ce que l’en-tête transparent dans WP ?
Dans WordPress, l’opacité de la couleur d’arrière-plan d’un en-tête transparent est définie sur 0, ce qui le rend transparent. Cet effet peut offrir à votre site Web une apparence contemporaine et minimaliste tout en permettant au contenu d'être vu à travers l'en-tête.
Comment puis-je personnaliser le design de mon en-tête transparent ?
Vous pouvez modifier les choix de style dans votre générateur de page pour personnaliser l'apparence de votre en-tête translucide. Dans les paramètres du module d'en-tête de Beaver Builder, par exemple, vous pouvez modifier la police, la taille de la police, la couleur de la police et l'alignement du texte. Vous pouvez également ajouter des composants ou des modules d'en-tête supplémentaires, tels qu'un logo ou un menu de navigation, et modifier leurs paramètres stylistiques. Vous pouvez également utiliser du CSS personnalisé pour personnaliser davantage l'apparence de votre en-tête translucide.
Comment démarrer avec le Beaver Builder ?
La section de contenu de WordPress est distincte de l'en-tête, du pied de page et de la barre latérale. Le plugin Beaver Builder permet la création de mises en page en fonction de la zone de contenu. De plus, vous pouvez utiliser le plugin Beaver Themer pour créer des mises en page dans des endroits au-delà de la zone de contenu.
Comment activer un en-tête transparent ?
Accédez à Apparence > Personnaliser > En-tête pour activer l’option En-tête transparent. L'option « Afficher l'en-tête transparent sur la page d'accueil uniquement » deviendra disponible une fois cette opération effectuée. Si vous le désactivez, l'en-tête deviendra translucide sur chaque page.
Comment rendre un en-tête transparent dans Beaver Builder ?
Pour rendre un en-tête transparent dans Beaver Builder, vous pouvez suivre ces étapes : Ouvrez l'éditeur Beaver Builder et cliquez sur le module d'en-tête que vous souhaitez modifier. Dans les paramètres du module, accédez à l'onglet Style. Dans la section Arrière-plan, cliquez sur l'outil de sélection de couleurs à côté de l'option Couleur d'arrière-plan. Dans le sélecteur de couleurs, faites glisser la barre d'opacité vers la gauche jusqu'à ce que l'opacité soit définie sur 0. Cela rendra l'en-tête transparent. Enregistrez les modifications et publiez la page pour voir l'en-tête transparent.
Comment changer l’en-tête dans Beaver Builder ?
Pour modifier l'en-tête dans Beaver Builder, vous pouvez suivre ces étapes : Ouvrez l'éditeur Beaver Builder et accédez à la page où vous souhaitez modifier l'en-tête. Cliquez sur le module d'en-tête que vous souhaitez modifier. Dans les paramètres du module, vous pouvez apporter des modifications à la mise en page, au style et au contenu de l'en-tête. Pour ajouter de nouveaux éléments ou modules à l'en-tête, vous pouvez utiliser l'interface glisser-déposer dans Beaver Builder. Une fois que vous avez apporté les modifications souhaitées, enregistrez et publiez la page pour voir l'en-tête mis à jour.
Conclusion : créez un en-tête personnalisé avec Beaver Builder 2024
En-têtes transparents sont une fonctionnalité très importante à avoir sur un site Web si vous voulez qu’il soit attrayant, élégant et moderne.
Cela aide même votre appel à l'action sur la bannière supérieure ou le contenu au-dessus de la ligne de flottaison à se démarquer. Avec un constructeur de castors, il est facile de créer un en-tête transparent.
Les étapes ci-dessus peuvent prêter à confusion ou sembler difficiles, mais la seule chose que vous devez faire est de copier-coller le code dans un espace et de voir les modifications et de le rendre global si vous le souhaitez.
