Créer la mise en page pour un nouveau type de contenu

Prérequis :  "gérer ses types de contenu"

Lorsque je crée un nouveau type de contenu, comme j'utilise systématiquement les fonctionnalités du module "layout builder", je dois proposer une mise en page par défaut.
Pour cela, comme l'illustre l'image ci-dessous, j'ouvre la page "gérer l'affichage (/admin/structure/types/manage/xxxxx/display)" correspondant au type de contenu xxxxx sur lequel je travaille et je clique sur le bouton "Gestion de la mise en page".

information complémentaire disponible en cliquant ici
Vérifier bien que les 2 "options de mise en page" soient bien cochées, avant de cliquer sur le bouton "gestion de la mise en page"

Ma mise en page par défaut

Dans ma mise en page par défaut, je crée :

  • une section "intro" d'une seule colonne ;
  • une section "2 colonnes" ;
  • une section "conclusion" d'une seule colonne ;

Dans cette dernière section, je place le bloc "A noter" (ie : le nom que je donne au champ body lorsque je crée le type de contenu). Pour cela comme l'indique l'image ci-contre, dans la section "conclusion" :

  • je clique sur le lien "ajouter un bloc" (point 1 de l'image 1) ;
  • dans la section, "choisir un bloc" (point 2) ;
  • je clique sur "A noter"  de la section "champs de contenu" (point 3) ;
  • je n'affiche ni le titre, ni l étiquette (cf : image 2 ci-contre)

Image 1 : cliquer pour aggrandir

Image 2 : cliquer pour aggrandir

L'enregistrement produit l'affichage ci-contre.
La zone "placeholder" sera remplacée par les données saisies dans la zone de texte "A noter (ex : body") du formulaire de création du contenu.

Mon champ "body"

Il faut tout d'abord remarquer que j'ai renommé le champ "body" en "anoter" (cf point 1 de l'image ci -contre) car dans le contenu étudié ce champ servira à lister les éléments de la page à mémoriser.
Je place dans ce champ le code html  (à copier coller à partir de l'onglet ci-dessous) qui servira de "placeholder" dont la structure est mise en évidence dans l'image - car ici l'éditeur est en mode bloc (cf : point 2).
Noter l'aide offerte au rédacteur de la future page (point 3)

Cliquez sur le bouton pour copier le code
dans le presse papier
    
<div class="anoter">
    <div>
        <img alt="" src="/sites/default/files/installation/notes.png" width="100" />
    </div>
    <div>
    Ici le placehoder pour le texte à ajouter
    </div>
</div>
         
Cliquez sur le bouton pour copier le code
dans le presse papier
 
.anoter {
    border-top-style: solid;
    border-top-color: #a406c0;
    border-right-style: solid;
    border-right-color: #a406c0;
    border-left-width: thin;
    border-left-style: solid;
    border-left-color: #a406c0;
    border-bottom-width: thin;
    border-bottom-style: solid;
    border-bottom-color: #a406c0;
    color:#666;
    border-radius: 5px 5px;
          -moz-border-radius: 5px;
           -webkit-border-radius: 5px;
        box-shadow: 5px 5px 5px #e5e5e5;
          -webkit-box-shadow: 5px 5px #e5e5e5;
           -moz-box-shadow: 5px 5px #e5e5e5;
    background-color:#d0fdec5e;    
}
.anoter > div {
    margin:-30px 0px 0px -25px;
}
.anoter > div + div {
    margin: -50px 0em 0em 90px;
}
     
Ceci est l'illustration directe de l'utilisation du bloc "body" du contenu de type "billet".
La phrase précédente remplace l'expression : le placehoder pour le texte à ajouter