Tutoriel du thème Flatsome : Comment créer un en-tête flottant avec le thème Flatsome

Dans ce tutoriel, vous apprendrez à utiliser la fonction Thèmes Flatsome Créez un En-tête de cadre flottantCe design est très populaire de nos jours. Ce design est devenu très populaire ces derniers temps et convient particulièrement aux petits sites web qui n'ont pas beaucoup d'éléments de navigation. Les en-têtes flottants donnent un aspect moderne et épuré et sont parfaits pour les sites commerciaux qui souhaitent afficher une navigation claire sur leurs pages.

Pourquoi utiliser un en-tête à cadre flottant ?

Les en-têtes flottants offrent un design propre et moderne aux sites web, et conviennent particulièrement aux sites web commerciaux qui nécessitent une navigation claire. Contrairement auxtête flottanteContrairement à ce que l'on trouve couramment dans les applications mobiles, cette disposition de cadre est de plus en plus populaire dans la conception de sites web modernes. Elle permet aux utilisateurs de naviguer de manière plus intuitive tout en conservant un aspect visuel minimaliste.

Étapes de la création d'un en-tête à cadre flottant

Dans ce tutoriel, cela se fera en utilisant la fonction Thème Flatsome avec options intégrées et quelques CSS personnalisés pour mettre en œuvre un en-tête à cadre flottant. Voici les étapes détaillées :

Étape 1 : Définition de la couleur d'arrière-plan

Tout d'abord, pour que l'en-tête flottant s'affiche, nous devons définir une couleur d'arrière-plan pour l'ensemble du site. Pour ce faire, rendez-vous à l'adresse Options du thème FlatsomeSélection ouverture (jargon des échecs)puis définir le Couleur d'arrière-plan du contenu. Cela permettra à l'en-tête flottant d'être visible sur la page.

Étape 2 : Supprimer l'arrière-plan de l'en-tête principal

Par défaut, les thèmes Flatsome donnent Page d'accueil Définir une couleur d'arrière-plan. Pour l'effet de flottement, nous devons définir un arrière-plan transparent. Allez à Paramètres de l'en-têteTrouvez ensuite le Page d'accueilen ajustant la transparence de sa couleur d'arrière-plan à 0en veillant à ce que son arrière-plan devienne transparent.

Étape 3 : Désactiver les séparateurs d'en-tête

Flatsome ajoute par défaut un séparateur sous l'en-tête de la page d'accueil, ce qui peut affecter l'effet de flottement. Nous devons désactiver ce séparateur. Aller à Paramètres de l'en-têteDécocher la case délimiteur Options.

Étape 4 : Ajout d'une feuille de style CSS personnalisée

Ensuite, nous devons affiner l'apparence de l'en-tête flottant à l'aide d'une feuille de style CSS personnalisée. Cela peut se faire à l'aide de l'élément Paramètres avancés de Flatsome a fait mouche CSS personnalisé pour insérer le code.

Le CSS personnalisé suivant est conçu pour les en-têtes flottants :

/* Style de l'en-tête flottant */
.floating-header {
    margin-top : 60px ; /* Ajouter de l'espace au-dessus de l'en-tête */
    max-width : 100% ; /* S'assurer que l'en-tête ne s'étire pas trop */
    border-radius : 10px ; /* Arrondir les angles */
    padding : 10px 20px ; /* Ajouter du padding pour un aspect plus propre */
    background-color : rgba(255, 255, 255, 0.8) ; /* Fond semi-transparent */
    backdrop-filter : blur(10px) ; /* Appliquer un effet de flou subtil */
}

/* Ajustements de l'en-tête pour les mobiles */
@media (max-width : 768px) {
    .floating-header {
        padding : 10px ; /* Ajustement du padding pour les petits écrans */ @media (max-width : 768px) { .floating-header {
    }
}

ce paragraphe CSS Veillera à ce que l'en-tête flottant ait des coins arrondis propres, des marges intérieures appropriées et un effet de flou subtil lors du défilement pour un aspect plus moderne.

Étape 5 : Ajuster l'espacement et les ombres sur la page

Pour éviter que l'en-tête flottant ne se superpose à d'autres contenus lors du défilement, ajoutez une balise marge-topFlatsome ajoute un effet d'ombre à l'en-tête qui interfère avec l'effet de flottement. Collez le code suivant dans Paramètres avancés de Flatsome a fait mouche CSS personnalisé Partie.

/* Supprimer l'ombre de l'en-tête */
en-tête {
    box-shadow : none ;
}

Étape 6 : Tests et ajustements

Après avoir effectué les réglages ci-dessus, vous pouvez prévisualiser l'effet de l'en-tête à cadre flottant sur votre site web.

résumés

faire passer (un projet de loi, une inspection, etc.) Thèmes Flatsome avec des options intégrées et des feuilles de style CSS personnalisées, il est facile de créer un site web moderne. En-tête de cadre flottantCe style de conception est idéal pour les petits sites, en particulier ceux qui ont peu d'éléments de navigation. Ce style de design est idéal pour les petits sites, en particulier les sites commerciaux qui n'ont pas beaucoup d'éléments de navigation. Pour plus de tutoriels et d'informations sur WordPress, restez à l'écoute !Réseau de fluctuation des photonsavec les tutoriels WordPress les plus complets et les plus actifs.Communauté d'échange WordPress.

Contactez nous
Vous n'arrivez pas à lire le tutoriel ? Contactez-nous pour une réponse gratuite ! Aide gratuite pour les sites personnels et les sites de petites entreprises !	Service clientèle WeChat
① Tel : 020-2206-9892
② QQ咨询：1025174874
(iii) Courriel : info@361sale.com
④ Horaires de travail : du lundi au vendredi, de 9h30 à 18h30, jours fériés.