• G
    User Newbie •

    Creazione home con box immagini

    Ciao a tutti, vi scrivo per presentarvi un problema in cui mi sono imbattuta, ovvero se io volessi fare una pagina statica in questo modo (vedi immagine da link), è possibile farlo con wp? E' necessario utilizzare dei plugin? (a proposito di questi ultimi ho trovato wp box ma non mi soddisfa tanto). C'è un modo che non sia la manipolazione del codice php (che non conosco moltissimo). Forse si può con l'html?Grazie mille!:)

    elmonet.eu/prova.jpg

    0
  • A
    User •

    Ciao,

    potresti usare widgetkit di YooTheme, tra le altre cose cre slideshow, poi crei una pagina in WP, scrivi un pò di html annidando i vari box /slider all'interno di div, dovresti ottenere l'effetto desiderato.

    Esempio

    HTML

    <div class="box">
    [widgetkit shortcode=1]
    </div>
    <div class="box">
    [widgetkit shortcode=2]
    </div>

    CSS

    div.box{float:left;width:33%;}

    0
  • G
    User Newbie •

    @Alessio Angeloro said:

    ...

    Prima di tutto grazie mille per la risposta. Sto "pasticciando" un po' con il plugin, ma il css a cui fai riferimento intendi creato ex novo o modificare o meglio aggiungere il div.box a quello esistente del tema
    in uso? Seconda cosa metto immagini e slider in div nidificati, agendo poi sul css per il posizionamento giusto non sul div..(scusa essendo novizia meglio chiedere prima di fare errori XD)

    In buona sostanza potrei fare una cosa del genere:

    <div id="box">

    <div id="left">
    <div id="left1">
    <div id="lefta">
    <div id="subleft">
    <div id="subleft1"></div>
    <div id="subleft2"></div>
    <div id="subleft3"></div>
    </div>
    <div id="subright"></div>
    </div>
    <div id="leftb"></div>
    <div id="leftc"></div>
    </div>
    <div id="left2"></div>
    <div id="left3"></div>
    </div>

    <div id="right"></div>

    </div>

    css:

    #box {
    margin: 0 auto;
    width: 600px;
    height: 600px;
    background: #0c0;
    color: #fff;
    }
    #left {
    margin: 0;
    width: 300px;
    height: 600px;
    background: #ffc;
    color: #000;
    float: left;
    }
    #right {
    margin: 0;
    width: 300px;
    height: 600px;
    float: right;
    }
    #left1 {
    margin: 0;
    width: 100px;
    height: 300px;
    background: green;
    float: left;
    }
    #left2 {
    margin: 0;
    width: 100px;
    height: 300px;
    background: yellow;
    float: left;
    }
    #left3 {
    margin: 0;
    width: 100px;
    height: 300px;
    background: lime;
    float: left;
    }
    #lefta, #leftb, #leftc {
    width: 100px;
    height: 100px;
    margin: 0;
    }
    {background: #00f;}
    {background: #693;}
    {background: teal;}

    #subleft {
    float: left;
    margin: 0;
    width: 50px;
    height: 100px;
    background: maroon;
    }
    #subleft1 {
    float: left;
    width: 25px;
    height: 25px;
    background: pink;
    }
    #subleft2 {
    float: right;
    width: 25px;
    height: 25px;
    background: fuchsia;
    }

    #subleft3 {
    clear: both;
    margin: 0;
    height: 50px;
    background: orange;
    }

    #subright {
    float: right;
    margin: 0;
    width: 50px;
    height: 100px;
    background: purple;
    }

    l'unico problema (giusto per provare) è che quando metto i parametri nel file css sulla pagina statica di wp non appare nulla XD e mi cancella anche il codice >.< perchè?

    0
  • A
    User •

    .box è il contenitore principale, gli altri che hai segnalato servono a fare floattare all'interno del contenitore principale gli altri oggetti, puoi usare anche la stessa classe per tutti per le impostazioni comuni e poi aggiungerne un'altra per le impostazioni singole.

    esempio
    HTML

    <div class="box">
    <div class="object slide1">
    [widgetkit shortcode=1]
    </div>
    <div class="object slide2">
    [widgetkit shortcode=2]
    </div>
    <div class="object slide3">
    [widgetkit shortcode=3]
    </div>
    </div>

    CSS

    div.box{width:100%;height:auto;bacground:#000000;}
    div.object{float:left;margin:10px;padding:5px;}
    div.slide1{height:300px;width:50%;}
    div.slide2{height:250px;width:50%;}
    div.slide3{height:350px;width:100%;}

    L'html va inserito in una pagina di wp non nel template, il css invece lo puoi inserire in un file css che viene richiamato dal template

    Puoi usare sli slide come le gallery, ho detto slide perchè nell'immagine che hai postato c'è scritto slider, era solo un esempio per capirsi.

    0
Effettua l'accesso per rispondere