Share
Cosa starai creandoIn questo set di due tutorial, stiamo creando un dispositivo di scorrimento per visualizzare post da un tipo di post personalizzato in modo tale da creare un effetto di conversazione tra due altoparlanti in un'immagine.
Nella parte precedente, abbiamo registrato il tipo di post, abbiamo impostato i cursori e li abbiamo aggiunti all'intestazione del nostro sito. Ora dobbiamo posizionare il testo e aggiungere uno stile.
Per seguire, avrai bisogno di:
L'esempio su cui sto lavorando è un sito reale che sto sviluppando per un cliente, che sta eseguendo un tema figlio del tema Responsive. Ho creato un tema figlio del tema Responsive e ho aggiunto uno stile personalizzato a questo e funzioni nel tema functions.php file. Potresti aggiungere questo al tuo tema o creare un tema figlio di Responsive come me.
Ecco come appare il sito in questo momento:
I cursori ci sono, ma sono nel posto sbagliato e hanno bisogno di stile.
Quindi, in questo tutorial, faremo quanto segue:
Nota che per ogni citazione ho appena aggiunto un titolo del post come testo da mostrare. Se aggiungi anche i contenuti dei post, anche quelli verranno visualizzati, quindi assicurati che le tue citazioni abbiano solo un titolo e nessun contenuto.
Aggiungiamo il posizionamento ai cursori per sovrapporli sull'immagine.
Apri i temi del tuo bambino style.css file e aggiungi questo:
.tutsplus-sliders position: relativo; larghezza massima: 1000 px; margine: 0px auto; .smooth_slider position: absolute;
Questo dà il div abbiamo creato per contenere il posizionamento relativo dei cursori e il posizionamento assoluto degli slider all'interno di esso div. Imposta anche la larghezza corretta per il nostro div quindi è centrato con l'immagine.
Ora i cursori sono sopra l'immagine:
Il problema è che sono sovrapposti l'uno sull'altro e devono essere accanto alla persona interessata. Risolviamolo.
Il plugin Smooth Slider assegna a ciascun cursore un ID univoco nel markup. Quindi il cursore 'Heide' ha un ID di # smooth_slider_3 e il cursore "Iain" ha un ID di # smooth_slider_4. Possiamo mirare a quelli per posizionare correttamente ogni cursore.
Aggiungi questo al tuo foglio di stile:
# smooth_slider_3 top: 70px; a destra: 90 px; allineamento del testo: giusto; larghezza: 250 px; # smooth_slider_4 top: 10px; a sinistra: 90 px; larghezza: 250 px;
Dovrai controllare l'ID che il plugin ha dato a ciascuno dei tuoi cursori controllando il markup dell'output: potrebbero essere diversi dai miei.
Ora i miei cursori sono nel posto giusto:
Sembra migliore. Ora per aggiungere un po 'di stile.
Voglio cambiare il carattere e aggiungere virgolette attorno al testo.
Innanzitutto, registriamo un carattere utilizzando Google Fonts. Torna ai temi del tuo tema functions.php file e aggiungi questo:
Accentsconagua
function tutsplus_add_google_fonts () wp_register_style ('googleFonts', 'http://fonts.googleapis.com/css?family=Droid+Serif'); wp_enqueue_style ('googleFonts'); add_action ('wp_enqueue_scripts', 'tutsplus_add_google_fonts');Nota: nel codice sorgente ci sono due caratteri in coda perché ho usato un altro font di Google altrove nel sito, ma non per i cursori.
Salva il tuo file di funzioni e torna al tuo foglio di stile. Aggiungi questo:
.smooth_slider h2 font-size: 19px! important; font-family: 'Droid Serif', serif! important; colore: # 666633! importante; line-height: 26px! important;
Ho dovuto aggiungere !importante a ogni riga altrimenti non sovrascrive lo stile aggiunto dal plugin. Se lo si desidera, è possibile modificare i caratteri utilizzando la schermata delle impostazioni: non l'ho fatto perché non mi consente di utilizzare il mio carattere Google.
Il nostro font ora sembra molto meglio:
Infine, voglio aggiungere delle virgolette attorno a ogni parte del testo, per sottolineare il fatto che le persone nell'immagine dovrebbero parlare. Per fare questo, io uso il prima e dopo elementi pseudo.
Nel tuo foglio di stile, aggiungi questo:
.smooth_slider h2 :: before content: open-quote; .smooth_slider h2 :: after content: close-quote;
Questo includerà il nostro h2 elementi tra virgolette.
Nota: alcuni browser meno recenti non supporteranno questo dato che non supportano gli pseudo-elementi. Tuttavia non mi preoccupo di questo dato che i cursori non sono essenziali per il contenuto e il numero di persone che utilizzano quei browser è molto piccolo ora.
Ora salva il tuo foglio di stile e controlla il sito:
Fantastico! Ora ho il mio testo nel posto giusto con le virgolette intorno. Ora il mio cliente può aggiungere tutte le citazioni che desidera, assegnarle agli slider appropriati e la conversazione continuerà.
Poiché ho utilizzato il posizionamento assoluto, la posizione del mio testo si interromperà su schermi più piccoli; anche le dimensioni dei caratteri dovrebbero essere così piccole da rendere illeggibile il testo. Quindi ho intenzione di aggiungere una query multimediale per nascondere i cursori su schermi più piccoli.
Innanzitutto controllerò il punto in cui si interrompe il layout: è largo circa 900 px. Quindi ho bisogno di aggiungere una query multimediale per indirizzare schermi più piccoli di 900 pixel di larghezza.
Nella parte inferiore del foglio di stile, aggiungi la query multimediale:
@media screen e (max-width: 900px) .tutsplus-sliders display: none;
Ora i cursori scompaiono sugli schermi più piccoli:
Se lo si desidera, è possibile aggiungere uno stile alternativo alla query multimediale per schermi di medie dimensioni, rendendo le dimensioni dei caratteri un po 'più piccole e posizionando il testo in modo che si adatti.
Usare gli slider per il testo può aiutarti ad aggiungere effetti interessanti al tuo sito: qui ho aggiunto un effetto conversazione che si sovrappone a un'immagine di due persone.
In questo set di due tutorial, hai imparato come creare questo effetto:
Puoi usare questa tecnica per creare testo pop-up in qualsiasi punto delle tue pagine: diventa creativo!
