Optimisation des paramètres et du style des blocs d'affichage de la marque WoodMart

Si vous souhaitez afficher le logo de la marque partenaire ou de la marque de vente sur votre site web, vous n'avez pas besoin d'utiliser un plugin compliqué, il vous suffit d'utiliser la balise WoodMart Apportez vos propres outils de mise en page, ainsi qu'un peu de CSSCet article vous guide pas à pas dans le processus de construction d'un module d'affichage de marque, de la préparation des matériaux à l'embellissement des feuilles de style CSS. Cet article vous guide pas à pas dans la construction d'un module d'affichage de marque, de la préparation du matériel à l'embellissement du CSS, en passant par la construction de la mise en page.

Étape 1 : Préparer le matériel du logo de la marque

Trier les marques qui doivent être affichées avant de commencer la conception. logo. Il est recommandé d'opérer de cette manière :

1. Ouvrez votre outil de manipulation d'images (par exemple Photoshop, Figma, Canva).
2. Ajustez tous les logos de la marque à une échelle uniforme, par exemple 200 px de largeur et 100 px de hauteur.
3. Enregistrez au format PNG ou SVG avec un arrière-plan transparent pour une meilleure cohérence visuelle.
4. Les conventions de dénomination (par exemple marque-nike.png(math.) genremarque-adidas.png) pour faciliter la gestion des téléchargements.

Étape 2 : Construire une structure d'affichage de la marque dans Elementor

WoodMart supporte Elementor Construction de la page d'accueilet des modèles personnalisés, voici comment procéder :

• Connectez-vous à WordPress et allez dans Pages > Edit Home.

• Cliquez sur Edit with Elementor.
• Dans l'éditeur, cliquez sur "+" pour créer un nouveau SectionSélection Disposition en 6 colonnes.

• Cliquez sur chaque colonne du + pour ajouter le widget "Image".

• Cliquez sur le bouton Upload et sélectionnez le logo de la marque correspondante.
• Si vous avez besoin d'une fonctionnalité de saut, cliquez sur l'image pour ajouter un lien personnalisé (par exemple, un lien vers la page d'un produit de marque).

• S'il y a plus de 6 logos, copiez ce bloc et passez à la ligne suivante.

Conseil : pour une plus grande souplesse typographique, vous pouvez utiliser des "blocs internes" pour imbriquer les images et les unifier avec un nom de classe (par ex. .logos de marque) pour une gestion simple et uniforme des styles.

Étape 3 : Ajouter le nom de la classe au bloc de marque

Sélectionnez l'ensemble de la zone d'affichage de la marque dans Elementor et procédez comme suit :

• Vérifiez la section la plus extérieure du bloc d'affichage de la marque.
• Dans la colonne de gauche des paramètres, cliquez sur niveau élevé > Classe CSS.

• Nom de la classe d'entrée logos de marque(Pas de points).
• Cliquez sur Mettre à jour pour sauvegarder.

Cela permet de définir un balisage CSS uniforme pour l'ensemble du module d'affichage afin de faciliter le contrôle du style.

Étape 4 : Ajout d'un CSS personnalisé dans WordPress

Ensuite, appliquez le style à l'élément .logos de marque Bloc :

1. Retournez dans le backend de WordPress.
2. entrer dans Apparence > Personnalisation > CSS supplémentaires.
3. Collez le code suivant :

.brand-logos {
  display : flex ; flex-wrap : wrap ;
  flex-wrap : wrap ; justify-content : centre ;
  justify-content : centre ;
  gap : 20px ; padding : 30px 0 ;
  padding : 30px 0 ;
}

.brand-logos img {
  max-width : 160px ; max-height : 80px ; }
  max-width : 160px ; max-height : 80px ; }
  object-fit : contain ; filter : grayscale(100%) ; }
  filter : grayscale(100%) ;
  filter : grayscale(100% ; transition : filter 0.3s ease ; }
}

.brand-logos img:hover {
  filter : grayscale(0%) ; }
}

4. Cliquez sur "Publier" pour enregistrer les paramètres de style.
5. Actualisez la page d'accueil pour voir si l'effet est pris en compte.

Étape 5 : Adapter l'effet d'affichage aux mobiles (facultatif)

Pour que le logo de la marque s'affiche plus proprement sur les téléphones mobiles, il est recommandé d'ajouter une requête média :

@media (max-width : 767px) {
  .brand-logos img {
    max-width : 45%.
  }
}

Ajoutez-le comme ci-dessus, à la dernière ligne du CSS annexé.

Étape 6 (avancée) : Amélioration des caractéristiques de la présentation (facultatif)

Si vous souhaitez dynamiser cette zone de marquage, essayez les extensions suivantes :

• Ajouter un titreAjouter un titre au-dessus de la zone de marque, par exemple "Co-branding".
• Utilisation de la fonction de rotationMise en œuvre avec le "Product Branding Slider" propre à WoodMart ou le Carousel d'ElementorRolling Showcase.
• Chargement retardé de l'image du logoInstallation et activation : Installer et activer WP Rocket peut-être Plugin Lazy Loadréduisant ainsi la charge de la page d'accueil.
• Catégorie SautPour chaque logo, il y a un lien vers la page de la catégorie de la marque.

résumés

dépense ou frais WoodMart répondre en chantant CSSVous pouvez créer un bloc d'affichage de marque de style léger et unifié, adapté à une variété de pages d'accueil de commerce électronique, de pages de promotion de marque ou de pages thématiques. Si le matériel est bien préparé, le processus de construction peut être achevé en 20 minutes.

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 : [email protected]
④ Horaires de travail : du lundi au vendredi, de 9h30 à 18h30, jours fériés.