Come creare design unici utilizzando gli pseudo elementi prima e dopo in Divi
Pubblicato: 2019-04-14Come web designer siamo sempre alla ricerca di nuovi modi per aggiungere individualità ai siti web che creiamo. Divi offre infinite opportunità per produrre layout unici, ma ci sono sempre piccole aggiunte che possiamo includere per unire un design. È qui che gli pseudo-elementi CSS sono davvero utili.
Cosa sono gli pseudo-elementi CSS?
In parole povere, uno pseudo-elemento CSS può essere utilizzato per dare uno stile a parti specifiche di un elemento. Ci sono cinque tipi di pseudo-elemento che fanno cose diverse. Ai fini di questo post esamineremo ::prima e ::dopo.
Questi due pseudo-elementi vengono utilizzati per inserire qualcosa prima o dopo il contenuto di un elemento. Ciò è particolarmente utile poiché possiamo usarli per aggiungere elementi visivi extra a immagini esistenti, testo e qualsiasi altra cosa!
Allora perché dovremmo usare questi pseudo elementi? Il prima e il dopo sono perfetti per sbloccare possibilità di design senza dover aggiungere più elementi o moduli. Allo stesso modo, sono utili per aggiungere elementi aggiuntivi senza dover toccare modelli html o file di temi principali.
Come usi gli elementi prima e dopo con Divi?
Se tutto questo sembra un po' confuso finora, non preoccuparti! Se dovessimo usare ::before e ::after quando scriviamo il codice CSS da zero, assomiglierebbe a questo:
Immagina di avere una riga di testo con la classe "text-example" - il CSS per lo stile e la personalizzazione di questa riga sarebbe:
.text-example {*This is where you add the styles*}Ora, se volessi aggiungere e modellare un elemento ::before o ::after, il CSS sarebbe simile a questo:
.text-example::before {*This is where you add before content and styles*}.text-example::after {*This is where you add after content and styles*}Fortunatamente Divi fornisce un facile accesso a ::before e ::after pseudo-elementi con molto meno problemi. Infatti, se hai mai aperto la scheda "Avanzate" per qualsiasi modulo per aggiungere codice CSS personalizzato, avrai visto le aree a cui ci riferiamo.
Queste caselle forniscono una scorciatoia rapida per aggiungere e personalizzare il contenuto prima e dopo qualsiasi modulo Divi esistente e possiamo utilizzarle per creare alcuni progetti davvero flessibili e interessanti.
Sbirciata
Questo è ciò che creeremo in questo tutorial:
Esempio 1
Esempio 2
Esempio 3
Iniziare
Per questo tutorial abbiamo solo bisogno di una copia del tema Divi e di una lavagna vuota. Per cominciare creeremo una nuova pagina e, dopo aver aggiunto un titolo alla pagina, faremo clic sul visual builder.
Ora siamo pronti per iniziare!
Esempio 1: moduli blurb numerati che utilizzano Pseudo Elements
Il blurb è probabilmente uno dei moduli Divi più flessibili a tua disposizione. In questo caso useremo pseudo elementi per aggiungere numeri prima di ogni blurb per creare una sezione "come funziona" passo dopo passo. Aggiungeremo anche una forma di freccia a destra per indicare il processo.
Cosa creeremo:
Anche se questo design funzionerà con qualsiasi design blurb, abbiamo preso in prestito la sezione blurb dal layout dell'agenzia web. Se desideri utilizzarli come punto di partenza, puoi accedere alla pagina di destinazione dell'agenzia Web creando una nuova pagina e accedendo al generatore di front-end.
Quando la tua pagina viene caricata, avrai la possibilità di utilizzare un layout predefinito, uno dei tuoi layout salvati o creare da zero. Seleziona il layout predefinito e utilizza la barra di ricerca per trovare i layout "Agenzia Web". La sezione blurb in questo tutorial può essere trovata sulla pagina di destinazione.
Una volta caricato, l'unica differenza tra il layout predefinito e il nostro esempio è che abbiamo cambiato lo sfondo di ogni blurb, il titolo e il colore del carattere del testo e aggiunto un po' di riempimento.
Dopo aver modificato queste impostazioni su un blurb, puoi fare clic con il pulsante destro del mouse sul modulo e utilizzare "Estendi stili" per applicarli agli altri tre.
Ora che abbiamo personalizzato i nostri quattro moduli blurb in modo che abbiano l'aspetto che desideriamo, è il momento di aggiungere del codice per creare l'elemento numerato. Tuttavia, affinché questo design funzioni, dobbiamo prima aggiungere una riga di css alla casella CSS personalizzata dell'elemento principale.
overflow: visible;
Ciò consentirà semplicemente a tutti gli elementi che creiamo nei passaggi successivi di essere visibili ovunque si sovrappongano ai bordi del nostro modulo blurb.
Una volta fatto ciò, apri le opzioni del modulo e vai alla "Scheda Avanzate". All'interno della casella "prima", aggiungi questo frammento CSS:
content: '1.'; /* Adds the number 1. as before content */ font-weight: bold; font-size: 80px; opacity: 0.7; /* Makes the number slightly transparent */ color: blue; /* Changes the color of the number text */ position: absolute; z-index: 9999; left: 0; /* Positions the content 0px away from the left border */ Top:-20px; /* Positions the content 20px above the top border */
Dopo aver aggiunto questo frammento di codice, vedrai il numero apparire in alto a sinistra del modulo blurb. Puoi modificare la posizione del numero alterando le righe "left:" e "top:" o cambiare il colore e la dimensione del carattere del numero all'interno di questo frammento CSS.
Una volta completato questo per il primo modulo, vai nei tre nuovi moduli blurb e cambia la riga "content:" in:
contenuto: '2.';
contenuto: '3.';
…e così via.
Ora che abbiamo ordinato i nostri numeri, dobbiamo aggiungere un po' di css per creare la forma della freccia.
Apri ciascun modulo e inseriscilo nella casella Dopo all'interno dell'area CSS personalizzato:
content: ''; display:block; height:60px; /* Size of the shape */ width:60px; /* Size of the shape */ position:absolute; top:40%; right:-30px; z-index: -1; background-color: #e8e8e8; /* Colour of the shape */ transform: rotate(45deg); -ms-transform: rotate(45deg); -webkit-transform: rotate(45deg);
Ora i tuoi quattro blurb dovrebbero assomigliare a questo:
Esempio 2. Aggiunta di forme uniche ai moduli esistenti
Questo design si basa su piccoli frammenti di codice semplici ma efficaci che vengono aggiunti alle caselle CSS personalizzate ::before e ::after all'interno di ciascun modulo di testo.
La bellezza dell'utilizzo di pseudo-elementi qui è che possiamo integrare forme e oggetti unici ai nostri moduli esistenti senza la necessità di aggiungere elementi o moduli aggiuntivi alla nostra pagina. Poiché questi pseudo-elementi sono contenuti all'interno dei nostri moduli esistenti, non aggiungono spazio extra ai nostri progetti e mantengono un bell'aspetto su tutti i dispositivi.
Cosa creeremo:
Per creare il layout iniziale dobbiamo aggiungere una sezione regolare con una riga di tre colonne, impostata sulla larghezza predefinita. Fatto ciò, aggiungi un modulo di testo a una delle nuove colonne.
Di nuovo, puoi modellare questo modulo di testo come desideri, tuttavia se stai seguendo, questi sono i passaggi per ottenere questo design:
Apri le opzioni del modulo di testo e aggiungi il contenuto del testo e un'immagine di sfondo o il colore di sfondo come richiesto. Abbiamo usato un'immagine di sfondo normale con un gradiente trasparente in alto:
Quindi, configura le seguenti opzioni di progettazione:
1. Imbottitura superiore: 120 px e Imbottitura inferiore: 120 px
2. Allineamento del testo: centro e colore del testo: #ffffff
3. Allineamento intestazione: centro e colore intestazione: #f5ee5d
Ora che abbiamo tutti gli aspetti visivi in atto per il tuo primo modulo di testo, è il momento di aggiungere il CSS per far accadere la magia. Nella scheda Avanzate del modulo di testo, aggiungi il seguente codice alla casella "prima":
content:''; height: 30px; /* change the size to suit your design */ width: 30px; /* change the size to suit your design */ display: block; position: absolute; border-top: solid 3px #f5ee5d; /* change the colour to suit your design */ border-left: solid 3px #f5ee5d; /* change the colour to suit your design */ left: 20px; /* change the position to suit your design */ top: 20px; /* change the position to suit your design */
E quindi aggiungi il seguente codice alla casella "dopo":
content:''; height: 30px; /* change the size to suit your design */ width: 30px; /* change the size to suit your design */ display: block; position: absolute; border-bottom: solid 3px #f5ee5d; /* change the colour to suit your design */ border-right: solid 3px #f5ee5d; /* change the colour to suit your design */ right: 20px; /* change the position to suit your design */ bottom: 20px; /* change the position to suit your design */
Dopo aver aggiunto questi frammenti di codice al modulo, vedrai le nostre nuove forme fantasiose aggiunte.
Se ti stai chiedendo cosa fa questo CSS, in realtà è abbastanza semplice. Tutto ciò che stiamo facendo è creare un quadrato trasparente posizionato a 20 px di distanza dalla parte superiore e sinistra (e inferiore e destra) del modulo di testo. Quindi aggiungiamo due bordi a questi quadrati per creare l'effetto freccia.
Quando sei soddisfatto dell'aspetto di questo primo modulo di testo, è sufficiente copiarlo e incollarlo per riempire le altre colonne e modificare il contenuto del testo, lo sfondo e gli stili in base alle proprie esigenze.
Il vantaggio di questo metodo è che funzionerà praticamente con qualsiasi modulo Divi con una piccola personalizzazione. Se vuoi essere più fantasioso, prova ad aggiungere alcuni CSS aggiuntivi per ruotare, inclinare e personalizzare ulteriormente gli elementi ::before e ::after. Divertiti!
Esempio 3. Aggiunta di icone e descrizioni ai titoli delle schede
All'interno di questo design sfrutteremo la possibilità di aggiungere un'icona dell'immagine prima di alcuni contenuti esistenti e una piccola descrizione di testo di seguito. Questo è perfetto per personalizzare il modulo delle schede Divi un po' più in là di quanto normalmente sia possibile.
Nota – Sebbene l'aggiunta di contenuti tramite CSS sia ottima per la progettazione, non è prontamente indicizzata dai motori di ricerca (sebbene Google indicizzi effettivamente i contenuti CSS e Javascript, richiede molto più tempo ed è inaffidabile al momento. I motori di ricerca come Bing e DuckDuckGo lo fanno non indicizzare affatto questo contenuto). Per questo motivo il tuo contenuto dovrebbe essere minimo e non dovresti fare affidamento su di esso per influenzare il tuo potenziale di posizionamento.
Cosa creeremo:
Prima di tutto dobbiamo aggiungere la nostra sezione standard e una riga di 1 colonna, seguita dal modulo Divi tabs stesso. All'interno del modulo schede, dobbiamo solo aggiungere i nostri titoli e contenuti a ciascuna scheda poiché gestiremo gli stili nei passaggi successivi.
Una volta che il nostro contenuto è a posto, dobbiamo iniziare ad aggiungere contenuto all'elemento ::before del modulo. Poiché non possiamo aggiungere CSS personalizzati a schede specifiche utilizzando il metodo che abbiamo seguito sopra, dovremo farlo in modo leggermente diverso.
Apri le opzioni del modulo schede e all'interno della scheda Avanzate assegna al modulo la classe "schede fantasia".
Una volta aggiunta questa classe CSS, dobbiamo fare un po' di preparazione. Per aggiungere alcune icone o immagini ai titoli delle tue schede, dobbiamo ovviamente aggiungerle a WordPress. Vai alla scheda Media nella dashboard di WordPress e carica le icone scelte come faresti normalmente.
Con le tue immagini caricate, dobbiamo fare clic su ognuna e copiare l'URL che WordPress ha generato per noi. Esamina ciascuna delle tue immagini e copia e incolla questi URL in un documento o nell'applicazione di note scelta.
Con gli URL delle immagini scelte a portata di mano, vai alle Opzioni del tema Divi nel menu Divi nella dashboard di WordPress.
In fondo a questa pagina vedrai una casella in cui puoi aggiungere il tuo CSS personalizzato. È all'interno di questa casella che incolleremo del codice CSS.
Il seguente frammento aggiungerà le immagini sopra il titolo di ogni scheda. Copia e incolla semplicemente questo frammento nella casella CSS personalizzata e sostituisci il contenuto tra (e inclusi) gli asterischi (ad esempio *Sostituiscilo con l'URL della tua prima immagine*) con gli URL che hai annotato in precedenza.
.fancy-tabs .et_pb_tab_0 a::before {
content: url(*Replace this with the URL for your first image*);
padding-top: 20px;
display: block;
}
.fancy-tabs .et_pb_tab_1 a::before {
content: url(*Replace this with the URL for your second image*);
padding-top: 20px;
display: block;
}
.fancy-tabs .et_pb_tab_content a::before {
content: '' !important; }
Se torni alla pagina con il modulo delle schede attivato, ora dovresti vedere che le immagini sono state aggiunte sopra ogni titolo: successo!
Che ne dici di aggiungere descrizioni? Fortunatamente anche questo è abbastanza semplice. Proprio sotto il codice che hai appena copiato nella tua casella CSS personalizzata, incolla quanto segue:
.fancy-tabs .et_pb_tab_0 a::after {
content: 'this is a description';
font-size: 10px;
padding-top: 5px;
display: block;
}
.fancy-tabs .et_pb_tab_1 a::after {
content: 'this is a description';
font-size: 10px;
padding-top: 5px;
display: block;
}
.fancy-tabs .et_pb_tab_content a::after {
content: '' !important; }
Come prima con le tue immagini, dovrai sostituire "questa è una descrizione" con i tuoi contenuti. Tornando alla pagina con il modulo delle schede attivato, vedrai che ora abbiamo anche delle descrizioni fantasiose!
Infine, non ci resta che applicare un po' più di CSS per ottenere il design completo mostrato sopra. Ancora una volta, copia il seguente frammento nella stessa casella CSS personalizzata:
.fancy-tabs .et_pb_tab_content a:after {
content: '' !important; }
.fancy-tabs .et_pb_tabs_controls li {
width: 50% !important;
}
.fancy-tabs .et_pb_tabs_controls li a {
width: 100% !important;
text-align: center;
}
@media (max-width: 768px) {
.fancy-tabs .et_pb_tabs_controls li {
width: 100% !important;
}
.fancy-tabs .et_pb_tabs_controls {
padding: 0 !important;
}
}
Questo codice centra il testo e le immagini della scheda e aumenta la larghezza delle schede per coprire l'intero modulo.
Abbiamo anche aggiunto alcuni CSS per garantire che le schede abbiano un bell'aspetto su tutti i dispositivi: se preferisci non avere le schede a tutta larghezza e impilate sui dispositivi mobili, dovremo tornare indietro e racchiudere il codice CSS originale in una query multimediale. Ciò significa che su dispositivi delle dimensioni di un tablet e più larghi aggiungiamo le descrizioni e le icone, tuttavia sui dispositivi più piccoli torneremo allo stile predefinito Divi.
Per fare ciò, copia il codice CSS modificato di seguito e incollalo nell'area CSS personalizzata nel pannello delle opzioni del tema Divi:
@media (min-width: 769px) {
.fancy-tabs .et_pb_tab_0 a::before {
content: url(*Replace this with the URL for your first image*);
padding-top: 20px;
display: block;
}
.fancy-tabs .et_pb_tab_1 a::before {
content: url(*Replace this with the URL for your second image*);
padding-top: 20px;
display: block;
}
.fancy-tabs .et_pb_tab_content a::before {
content: '' !important; }
.fancy-tabs .et_pb_tab_0 a::after {
content: 'this is a description';
font-size: 10px;
padding-top: 5px;
display: block;
}
.fancy-tabs .et_pb_tab_1 a::after {
content: 'this is a description';
font-size: 10px;
padding-top: 5px;
display: block;
}
.fancy-tabs .et_pb_tab_content a::after {
content: '' !important; }
.fancy-tabs .et_pb_tab_content a:after {
content: '' !important; }
.fancy-tabs .et_pb_tabs_controls li {
width: 50% !important;
}
.fancy-tabs .et_pb_tabs_controls li a {
width: 100% !important;
text-align: center;
}
}
Aggiunta di più schede
In questo caso abbiamo creato un modulo di schede che include 2 schede diverse, tuttavia in pratica a volte ne richiediamo di più. Se sei in una posizione per cui stai cercando di creare più di 2 schede, dovremo modificare il codice che hai appena aggiunto.
Come puoi vedere dallo snippet, Divi assegna automaticamente una classe a ciascun titolo della scheda, la prima che inizia con 0 (.et_pb_tab_0), aumentando ogni volta di 1 (.et_pb_tab_1, .et_pb_tab_2 e così via). Ci siamo già occupati delle prime due schede, quindi quando ne aggiungiamo altre possiamo semplicemente copiare e incollare una sezione del codice per ogni nuova scheda:
.fancy-tabs .et_pb_tab_0 a:before {
content: url(*Replace this with the URL for your first image*);
padding-top: 20px;
}
e cambia il numero nella classe (.et_pb_tab_0) in 2, 3, 4 ecc. Dovrai fare lo stesso anche per le tue descrizioni.
L'ultimo emendamento che dobbiamo fare è regolare un'altra riga di CSS. Prendi il numero delle tue schede e dividilo per 100. Annota questo numero e vai alla sezione seguente nel tuo CSS personalizzato:
.fancy-tabs .et_pb_tabs_controls li {
width: 50% !important;
}
e scambia il 50% con la tua risposta. Ciò assicurerà che le tue schede siano equamente distanziate lungo la larghezza del modulo.
Ad esempio, se stai creando una terza scheda, il codice CSS aggiuntivo di cui hai bisogno sarà il seguente:
.fancy-tabs .et_pb_tabs_controls li {
width: 33% !important;
}
In chiusura
Ed eccoci qui, tre ottimi modi per utilizzare gli elementi CSS ::before e ::after per creare nuove possibilità di design. Speriamo che questa guida ti ispiri a esplorare come puoi utilizzare gli pseudo-elementi nelle tue future creazioni: le opportunità sono davvero infinite!