Est-il possible de créer une ligne pleine largeur dans la fenêtre de l’éditeur de WordPress ?

Publié par Jean-Michel le

Est-il possible de créer une section pleine largeur en utilisant uniquement l’éditeur de WordPress, y compris l’éditeur CSS ? (sans compter l’utilisation d’un plugin tiers) ?

Edit : les informations ci-dessous visaient à démontrer que j’ai fait mes recherches. Je sais que l’on peut éditer des fichiers PHP ou CSS pour obtenir le résultat souhaité, je suis intéressé à travailler dans les paramètres natifs de WordPress.

À l’aide de l’inspecteur Web de Chrome, je peux voir que tout contenu que je place dans la fenêtre de l’éditeur appartient à div class="entry-content", mais je souhaite placer une bannière d’une ligne (texte) sur la page d’accueil qui s’étend sur tout l’écran – plus large que la entry-contentzone , ce qui signifie remplacer les div class="entry-content"paramètres.

Voici quelques-unes des choses que j’ai essayées :

  • Ajoutez une classe unique div(« bannière ») dans l’éditeur principal (« Texte »), puis ajoutez .banner: 100%le personnalisateur CSS de WordPress ; je
  • Dans le Customizer, ajouté :
    .banner {
    position: absolute;
    width: 100%;
    left: 0;
    }
  • J’ai essayé de modifier header.phpavec.banner: full-width;

Est-il possible de créer du contenu non contraint par les spécifications CSS pour le corps de texte qu’un utilisateur peut saisir à l’aide de l’éditeur de WordPress (dans mon cas, la classe est entry-content) ?

Actuellement, j’expérimente le thème WordPress TwentySixteen.

Solution n°1 trouvée

Une façon de faire est de faire un peu de piratage CSS intelligent 😉

Voici la solution par Sven Wolfermann (codepen)

.full-width {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}

Catégories : Wordpress

Jean-Michel

Jean-Michel est en charge de la partie blog du site. Il met en place la stratégie de contenu et répond aux questions fréquentes sur Wordpress.

0 commentaire

Laisser un commentaire

Avatar placeholder

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