Lezione 8 - Costruiamo l'Hompage

Continuiamo a costruire l'homepage del nostro sito andando a creare una sezione al di sotto dell'immagine principale.

Apriamo il file index.php e al di sotto del div "front-image" inseriamo il seguente codice:

<section id="chi-siamo" class="section-home">
<div class="container">
        <h2 class="text-center">Chi Siamo
        <div class="col-sm-5">
           <img src="<?php echo site_url(); ?>/wp-content/uploads/2016/02/chi-siamo.jpg">
       </div>
       <div class="col-sm-7">
            <p class="text-justify">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.
            Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
            Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.
            Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.
            Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus.
            Vivamus elementum semper nisi. Aenean vulputate eleifend tellus.

       </div>
    </div>
</section>

Abbiamo inserito la sezione "Chi siamo" al di sotto dell'immagine principale della nostra homepage la sezione contiene un titolo, un immagine che si disporrà sulla sinistra e una breve descrizione sulla destra.

Ora aggiungiamo qualche riga di css per ottenere un risultato simile a questo:

Apriamo il file style.css e aggiungiamo:

.section-home {padding:30px 0px;}

#chi-siamo {background: #ECECEC;}

#chi-siamo img {width:100%;}

#chi-siamo h2 {margin-bottom: 25px;}

La prima sezione dell'Homepage è ora creata nel prossimo articolo creeremo una nuova sezione contente le ultime News e andremo a scoprire come funziona l'utilissimo loop di wordpress.