Analisi e creazione di una home page semplice (esercizio)

Wireframe home

Come prima cosa, creare 4 fasce di contenuti:

Cliccare sul segno ”+” del placeholder contenuti per creare 4 contenitori con i nomi:

1. TOPSTORY
2. CONTENUTO EDITORIALE
3. PRIMO PIANO
4. INFO SEZIONE

Dentro ognuno di questi contenitori inserire un altro contenitore con la classe di bootstrap “container”

Fascia TOPSTORY:

1. dare al contenitore TOPSTORY la classe “topstory”
2. Inserire dentro il container un altro contenitore con la classe”row payoff-container”
3. Inserire dentro il box ”row payoff-container” l’oggetto di kalì “informative in homepage”, dargli il nome “Info peso payoff” e la classe “col-12  p-5 text-white my-auto payoff”
4. selezionare nel menu a tendina “peso di pubblicazione la voce “payoff”
5. nel template del box selezionare dal menu “elementi” gli oggetti  “titolo“ e “sommario“

6. per far si che il background del box TOPSTORY sia l’immagine dell’informativa, sempre nel template del box, aggiungere questo codice:
   <style>
   .topstory{
   background:url( <k:url_image4 maxwidth=’0’ maxheight=’0’/> )no-repeat ;
   background-size: cover;
   }
   </style>

Fascia CONTENUTO EDITORIALE

1. Inserire dentro il container un oggetto di kalì “box editoriale” con la classe “mt-5 my-box-editoriale”
2. popolare il box editoriale esempio con h2 e un paragrafo (x esempio)

Fascia PRIMO PIANO:

1. Dare al contenitore PRIMO PIANO la classe “bg-light”
2. Dare al “container”  la classe “py-4”
3. Inserire dentro il ”container” l’oggetto di kalì “informative in homepage”, dargli il nome “info peso primo piano” e la classe “content-flex”
4. Aggiungere a questo box  un header “in primo piano”
5. Selezionare nel menu a tendina “peso di pubblicazione la voce “primo piano”

6. Nel template del box selezionare dal menu “elementi” l’oggetto “item”, dentro il quale vanno inseriti: titolo, sommario, immagine2 e link, dopodichè aggiungere agli oggetti le classi come nel codice qua sotto:
   <k:item class=’col-sm-6 col-md-4 mb-3’>
   <k:title/>
   <k:summary length=’100’/>
   <k:image2 maxwidth=’0’ maxheight=’0’ class=’image2 img-fluid mt-3’ />
   <k:link class=’my-button rosso mt-3’ text=’Leggi tutto’/>
   </k:item>

Fascia INFO SEZIONE:

1. Dare al “container”  la classe “py-4”
2. Inserire dentro il ”container” l’oggetto di kalì “informative della sezione”, dargli il nome “Info sezione anni” e la classe ”content-flex other-none anni”
3. aggiungere a questo box  un header “{sec}”, in questo modo prenderà in automatico il nome della sezione.
4. Nella fascia verde del box, cliccare l’iconcina della pagina con la freccia per andare a scegliere la sezione da cui attingere le informative.
   In questo caso scegliamo “[Ambiente di test] ->The group->History->Anni”
5. con il sistema visto precedentemente popolare il template di box in modo che risulti così:
   <k:item class=’col-sm-6 col-md-4 col-lg-3 mb-3’>
   <k:title class=”my-button”/>
   <div class=”myimage-dd”>
   <k:image3 maxwidth=’600’ maxheight=’0’ class=’image2 img-fluid mt-3’ />
   </div>
   </k:item>