FAQ > Plugin MSW

Retour à la FAQ
Retour
Table des matières

Projets/Réalisations

Données :

Traduction des catégories de projets

Important Cette étape doit être réalisée avant d’ajouter des traductions de projets, car les projets traduits doivent être associés aux catégories anglaises.
Dans ProjetS > Catégories
  1. Choisir la catégorie à traduire
  2. Repérer la section Langue
  3. Cliquer sur le lien « Ajouter » vis-à-vis de l’anglais
  4. Créer la catégorie anglaise correspondante

Ou via l’interface de WPML : 

Dans WPML > Traduction de taxonomie
  1. Sélectionner Catégories de projets
  2. Cliquer sur le + pour ajouter une traduction pour chaque catégorie existante
Données :

Traduction des fiches projets

Dans ProjetS
  1. Dans la liste de projets, cliquer sur le + Ajouter une traduction à côté du projet à traduire
  2. Cliquer sur « Écraser avec le contenu de Français ». Cette action copie automatiquement le contenu, images, catégories, etc.
  3. Puis cliquer sur « Traduire indépendamment ». Cela permet de modifier le contenu en français de manière indépendante
DESIGN :

Création de la fiche d'un projet

Dans MODÈLES
  1. Créer un modèle de type Article unique
  2. Nommer le modèle Fiche de projet
  3. Dans les conditions d’affichage d’Elementor, choisir d’inclure tous les projets

Pour afficher le titre du projet : 

  • Widget Titre de la publication
  • Widget Titre avec la balise dynamique Titre de la publication

Pour afficher les photos du projet : 

  • Widgets Galerie ou Galerie basique, avec la balise dynamique Photos du projets

Pour afficher une bannière : 

  • Widget Image avec la balise dynamique Image mise en avant. Si le projet ne possède pas d’image mise en avant, on affiche alors la première image de la galerie photos. 

Pour afficher les catégories reliées à un projet : 

  • Widget Catégories de projet
Pour afficher le contenu du champ description : 
  • Widget Description de projet

Pour afficher les autres champs (budget, lieu, année) : 

  • N’importe quel widget qui accepte les balises dynamiques (titre, liste d’icônes, boite d’icône, etc.). On utilise alors les balises dynamiques reliées au projet :  Budget du projet, Lieu du projet et Année du projet.
DESIGN :

Cacher les widgets vides

Cacher le widget si le lieu du projet est vide : 

				
					selector:has(.msw-projects-dynamic-tag--place:empty) {
    display: none;
}

Problématique

Les balises dynamiques peuvent être utilisés dans n’importe quel widget (titre, liste d’icônes, boîte d’icône, etc.) et comme les clients ne fournissent pas toujours ces informations de manière constante pour chaque projet, il faut prévoir pouvoir cacher certains widgets s’il n’y a pas de donnée à afficher.

Solution CSS

Ajouter le CSS suivant dans l’onglet Avancé > CSS personnalisé du widget qu’on veut cacher.

Le CSS peut être appliqué sur le widget directement qu’on veut cacher, ou sur n’importe lequel de ses parents. On peut par exemple afficher la description dans une colonne à gauche, et cacher la colonne complètement si la description est vide. 

Cacher le widget si l’année du projet est vide : 

				
					selector:has(.msw-projects-dynamic-tag--year:empty) {
    display: none;
}

Cacher le widget si le budget du projet est vide : 

				
					selector:has(.msw-projects-dynamic-tag--budget:empty) {
    display: none;
}

Cacher le widget si le lieu, l’année ET le budget sont vides :

				
					selector:has(.msw-projects-dynamic-tag--place:empty):has(.msw-projects-dynamic-tag--year:empty):has(.msw-projects-dynamic-tag--budget:empty) {
   display:none;
}

Cacher le widget Catégories de projet si aucune catégorie n’est choisie : 

				
					selector:not(:has(.msw-projects-cats)) {
    display: none;
}

Cacher le widget Description de projet si la description est vide  : 

				
					selector:has(.msw-projects-description:empty) {
    display: none;
}

Centralisation des coordonnées

Design :

Widget Heures d'ouverture

Case à cocher "Plage horaire à mettre en évidence"

Dans l’onglet Coordonnées → Heures d’ouverture, il y a une case à cocher pour mettre une plage horaire en évidence

  • Utilité : Met en évidence visuellement une plage horaire spécifique.
  • Classe CSS générée : msw-contact-opening-hours__row–highlight
  • Recommandations : Modifier uniquement la typographie (taille, italique, graisse, majuscules) et les couleurs.
  • Important Toujours définir couleur du texte ET arrière-plan pour éviter les problèmes de lisibilité.

Exemples de code CSS à ajouter dans le champ CSS personnalisé du widget pour changer le style de la plage horaire en évidence :

				
					/** Modifier toute la ligne (affichage en tableau) */
selector .msw-contact-opening-hours--table .msw-contact-opening-hours__row--highlight .msw-contact-opening-hours__days,
selector .msw-contact-opening-hours--table .msw-contact-opening-hours__row--highlight .msw-contact-opening-hours__time {
    font-weight: bold;
    font-style: italic;
    color: #333;
    background-color: #f8f9fa;
}
				
			
				
					/** Modifier uniquement l'horaire (affichage en tableau) */
selector .msw-contact-opening-hours--table .msw-contact-opening-hours__row--highlight .msw-contact-opening-hours__time {
    font-weight: bold;
    text-transform: uppercase;
    color: #d63384;
    background-color: #fff;
}
				
			
				
					/** Modifier toute la ligne (affichage liste) */
selector .msw-contact-opening-hours--list .msw-contact-opening-hours__row--highlight,
selector .msw-contact-opening-hours--list .msw-contact-opening-hours__row--highlight .msw-contact-opening-hours__days,
selector .msw-contact-opening-hours--list .msw-contact-opening-hours__row--highlight .msw-contact-opening-hours__time {
    font-weight: bold;
    color: #333;
    background-color: #f8f9fa;
}

Note : selector fait référence au widget en cours, il n’est donc pas nécessaire d’ajouter un id ou classe css au widget

Design :

Dynamic tag Heures d'ouverture

Le dynamic tag Heures d’ouverture peut être utilisé pour afficher les heures d’ouverture dans un widget Éditeur de texte.

On peut rajouter un code CSS personnalisé dans le widget pour modifier les styles du titre affiché en haut des heures d’ouverture.

				
					selector .msw-contact-tag-opening-hours__title {
	font-size: 1.5rem;
	font-weight: bold;
	color: #333;
	margin-bottom: 1rem;
}

Note : selector fait référence au widget en cours, il n’est donc pas nécessaire d’ajouter un id ou classe css au widget

Contact Form 7

DESIGN :

Affichage du formulaire sur une colonne

Le widget MSW Contact Form 7 offre un contrôle responsive permettant d’afficher les champs de formulaire sur une colonne

Si le contrôle Affichage sur une colonne est activé, on génère le CSS suivant :

				
					.elementor-154 .elementor-element.elementor-element-d0f1697 .form-row {
    display: block;
}

Si le contrôle Affichage sur une colonne est désactivé, on génère le CSS suivant :

				
					.elementor-154 .elementor-element.elementor-element-d0f1697 .form-row {
    display: grid;
}

Pour forcer l’affichage sur une colonne à une résolution précise qui ne serait pas définie dans les breakpoints d’Elementor, ajoutez ce code dans le champ CSS personnalisé du widget

				
					/* Affichage sur une colonne de 768px à 1024px */
@media (min-width: 768px) and (max-width: 1024px) {
	selector .form-row {
		display: block;
	}
}

Note : selector fait référence au widget en cours, il n’est donc pas nécessaire d’ajouter un id ou classe css au widget

Ajout d'un champ caché au formulaire

Le champ MSW champ caché permet d’ajouter des données automatiques dans les formulaires Contact Form 7, comme le nom ou l’url de la page courante. 

Configuration du champ caché

  1. Dans l’éditeur CF7, cliquez sur le bouton MSW champ caché
  2. Configurez le champ :
    • Nom du champ, par exemple titre-page
    • Valeur : Choisir parmi les sources disponibles

Sources disponibles

  • Titre page courante : Titre de la page/article actuel
  • URL page courante : URL complète de la page actuelle
  • Titre de propriété Centris : Titre complet du style « Maison à étages à vendre à Boisbriand (#16340980) – WordPress »

Exemples de tags générés : 

				
					[msw_hidden titre-page "post_title"]
[msw_hidden url-page "current_url"]
[msw_hidden titre-propriete "centris_property_title"]

Envoi des données du champ caché

Ajoutez le tag dans le corps de l’email :

				
					Titre page : [titre-page]
URL page : [url-page]
Titre propriété : [titre-propriete]

Image de partage Facebook

En plus de l’image par défaut fb-share, le plugin ajoute quelques options pour définir l’image qui sera affichée sur Facebook lorsqu’on partage une page.

Ordre de priorité pour déterminer l'image de partage Facebook

  1. Image définie dans le champ Image de partage Facebook de la page
  2. Image mise en avant de la page
  3. Image définie dans la page d’options MSW → Partage Facebook
  4. Image qui porte le titre fb-share ou fb-share-en si on est sur une page en anglais