Elementor : Personnaliser le widget Publications avec Ele Custom Skin

Lorsque vous utilisez des boucles de publications dans les widgets Elementor, il n’est pas rare de trouver limitant les informations et les gabarits à disposition.

Heureusement il est tout à fait possible de personnaliser les blocs qui vont se répéter dans les boucles à l’aide de l’extension Ele Custom Skin.

Éléments de contexte

Sur un site de festival humoristique, j’ai un custom post type pour gérer les artistes. Avec ACF, j’ai ajouté des champs pour pouvoir enrichir les fiches tels que :

  • un nom de scène ;
  • les liens vers les réseaux sociaux ;
  • la biographie ;
  • une citation ;
  • une galerie photo ;
  • etc.

Je voudrais afficher sur la page d’accueil une strate avec un bloc de trois humoristes affichés au hasard, en indiquant pour chacun son nom de scène, l’image à la Une et bien sûr, permettre l’accès à sa fiche.

Création de la boucle personnalisée

Une fois que vous avez installé Ele Custom Skin, vous verrez apparaitre un nouveau type de modèle Elementor. Allons-y, ajoutez un modèle de type Boucle.

La suite ne devrait pas vous dépayser, c’est via l’interface d’édition Elementor que vous aller créer les éléments qui seront affichés dans le Widget Publications.

Créez une section à deux colonnes.

Dans la colonne de gauche, placez un Widget Image et indiquez comme source, l’image en avant (Featured Image).

Dans la colonne de droite placez un Widget Titre et indiquez comme source, le champs ACF Nom de scène.

Pensez à associer à l’image et au titre un lien dynamique et choisissez Post URL. Sauvegardez le modèle sans affecter de condition.

Utilisation de la boucle personnalisée

Sur la page d’accueil, ou dans n’importe quelle page gérée via Elementor, placez un Widget Publications.

Mise en page (Layout)

Pour l’habillage, sélectionnez Personnalisé et le modèle créé précédemment.

Requête (Query)

À présent, dans la rubrique Query, sélectionnez le type de contenu à afficher et précisez le type de tri.

Et c’est terminé, je vous laisse le soin de mettre en page tout ça !

Une réponse

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *