Docs    Facebook    Personnalisations

Modifier la mise en page des liens partagés pour qu'elle corresponde à celle des photos/vidéos.

Dernière mise à jour par John2 septembre 2026

Les publications contenant des liens partagés ont, par défaut, une mise en page différente. Voici comment les harmoniser avec vos publications de photos et de vidéos.

Par défaut, les liens partagés ont une mise en page différente de celle des photos et des vidéos, mais vous pouvez la modifier en suivant les instructions ci-dessous.

Tout d'abord, allez sur la page Post Layout du plugin et sélectionnez votre mise en page. Activez ensuite le paramètre suivant : Personnaliser > Divers > Médias > Utiliser des images de liens partagés de taille normale. Une fois l'option activée, suivez les instructions ci-dessous pour la mise en page que vous avez choisie.

Mise en page des vignettes

Pour modifier la mise en page afin que l'image du lien partagé corresponde à la mise en page de la vignette, vous devez procéder comme suit :

1) Allez sur la page Customize du plugin, cliquez sur l'onglet Misc, et descendez jusqu'à la section Custom CSS.
2) Copiez et collez les éléments suivants dans cette section :

#cff .cff-shared-link { width: 20%; margin: 0; background: none; border: none; }
#cff.cff-thumb-layout .cff-full-size .cff-link{ max-width: 100%; }
#cff.cff-thumb-layout .cff-link-item .cff-text-wrapper { width: 77%; }
#cff .cff-shared-link .cff-text-link{ display: none; }

3) Saisissez les éléments suivants dans la section JavaScript personnalisé située en dessous :

$('.cff-item').each(function(){
  var $self = $(this),
    $textWrapper = $self.find('.cff-text-wrapper'),
    $sharedLink = $self.find('.cff-shared-link');
  $textWrapper.before( $self.find('.cff-shared-link') );
  if( $textWrapper.length < 1 ) $sharedLink.remove();
});

Disposition en demi-largeur

Pour modifier la mise en page de manière à ce que l'image du lien se trouve à gauche du texte de l'article, vous devez procéder comme suit :

1) Allez sur la page Customize du plugin, cliquez sur l'onglet Misc, et descendez jusqu'à la section Custom CSS.
2) Copiez et collez les éléments suivants dans cette section :

#cff .cff-shared-link { width: 50%; margin: 0; background: none; border: none; }
#cff.cff-half-layout .cff-full-size .cff-link{ max-width: 100%; }
#cff.cff-half-layout .cff-link-item .cff-text-wrapper { width: 47%; }
#cff .cff-shared-link .cff-text-link{ display: none; }

3) Saisissez les éléments suivants dans la section JavaScript personnalisé située en dessous :

$('.cff-item').each(function(){
  var $self = $(this),
    $textWrapper = $self.find('.cff-text-wrapper'),
    $sharedLink = $self.find('.cff-shared-link');
  $textWrapper.before( $self.find('.cff-shared-link') );
  if( $textWrapper.length < 1 ) $sharedLink.remove();
});
soutien

Vous n'avez pas trouvé votre réponse dans la documentation ?

Contacter le support

Catégories