Come sovrapporre un'immagine in WordPress

Se sei entusiasta di rendere eccezionale il tuo sito web, farai sempre il culo per abbellirlo. Ci sono milioni di modi per rendere il tuo sito una musa ispiratrice, e uno di questi sarà menzionato nel nostro post di oggi: sovrapporre un'immagine .

Ti stai ancora chiedendo cosa sia? Vacci piano e lascia che ti portiamo fuori!

Che cos'è una sovrapposizione?

Come puoi vedere, ho usato un'immagine con testo e sovrapposizione come intestazione; che ha fatto una grande differenza rispetto alla scrittura di una semplice intestazione di testo. Sembra molto più elegante e attraente rispetto al normale, giusto?

Ancora più importante, la sovrapposizione sull'immagine aiuta a evidenziare il testo mantenendo visibile l'immagine di sfondo. Puoi aggiungere facilmente un'immagine con testo e sovrapposizione su post/pagine del genere e utilizzarla per scopi diversi. In questo post, ti mostreremo come farlo in semplici passaggi.

Ti sei già emozionato? Iniziamo!

Come sovrapporre un'immagine in WordPress

Ci sono due metodi con cui puoi provare a sovrapporre un'immagine in WordPress: usando il blocco di copertina di Gutenberg e usando i CSS. Mentre l'utilizzo di Gutenberg ti aiuta a creare un articolo/pagina che include un'immagine con sovrapposizione anche da un foglio vuoto, l'utilizzo di CSS ti aiuterà a personalizzare rapidamente le immagini su un articolo/pagina pre-costruito.

Entrambi questi due metodi sono facili da usare in qualche modo e ti mostreremo come usarli uno per uno.

Metodo 1: utilizzo del blocco di copertura di Gutenberg

Vai all'editor della pagina di Gutenberg.

Passaggio 1: inserire un'immagine utilizzando il blocco copertina.

Fare clic su Aggiungi blocco e scegliere il tipo di blocco come Copertura .

Quindi, scegli un'immagine di sfondo da visualizzare su quel blocco di copertina. Puoi caricare un'immagine o scegliere un'immagine dalla tua libreria.

Se necessario, puoi anche modificare un'immagine che hai aggiunto in precedenza in un'immagine di copertina. Fai clic sull'immagine, scegli Cambia stile o tipo di blocco e scegli Copertina :

Nel mio caso, sceglierò questo berretto come sfondo e scriverò anche del testo a caso su di esso.

Inoltre, posso impostare la larghezza della mia immagine nelle impostazioni di seguito. Lo allineerò semplicemente al centro.

Ora il mio blocco di copertina è pronto con un'immagine di sfondo e un testo. Di default, il blocco Cover ha già una sovrapposizione di colore nero, quindi vedremo come possiamo modificarlo nella parte successiva:

Passaggio 2: personalizza l'overlay del blocco di copertina

Successivamente, procederai con le impostazioni del blocco per creare una sovrapposizione.

Fare clic sul blocco > fare clic sul pulsante Opzioni (visualizzato come pulsante con tre puntini) > scegliere Mostra più impostazioni .

Il menu delle impostazioni del blocco ora dovrebbe essere pronto sulla destra dello schermo. Vai alla sezione Sovrapposizione .

Ti offre due opzioni di colore che sono Solido e Gradiente per sovrapporre l'immagine di copertina:

Proveremo entrambe queste opzioni. Per prima cosa, proviamo l'overlay in tinta unita.

Sovrapposizione tinta unita

Ora puoi:

• Scegli un colore dal menu suggerito;
• Scegli un colore personalizzato. Puoi scegliere un colore nella tavolozza o inserire un codice colore. Il colore personalizzato viene visualizzato come di seguito.

Ho appena scelto un dolce colore rosa per la mia sovrapposizione. Inoltre, posso anche modificare l'opacità (il livello di trasparenza) dell'overlay:

Il tasso di opacità dal 30 al 60% è un valore appropriato. Se imposti l'opacità al di sotto o al di sopra della velocità suggerita, l'overlay potrebbe essere quasi invisibile o troppo audace per vedere lo sfondo. Manterrò il tasso di opacità al 50% come impostazione predefinita.

È tutto pronto qui! È così che puoi semplicemente aggiungere una sovrapposizione a tinta unita alla tua immagine di copertina.

Ora passiamo all'opzione del colore sfumato.

Sovrapposizione di colori sfumati

Un colore sfumato, come menzionato sopra, è uno schema di almeno due colori scelti. O semplicemente detto, il colore della sovrapposizione cambierà rispettivamente e gradualmente dal primo al secondo colore scelto (e così via).

Vediamo come faccio una sovrapposizione sfumatura per capirla meglio.

Innanzitutto, ho cambiato la modalità colore da Solido a Gradiente. Inoltre, ho scelto un set di colori sfumati dal menu dei suggerimenti. Ecco come appare:

Come puoi vedere, la sovrapposizione è composta da 3 punti di controllo. Ognuno ha un colore a tinta unita e puoi spostare questi punti di controllo per regolare la combinazione di colori della sovrapposizione.

La disposizione dei colori predefinita al momento della selezione del colore sfumato è bilanciata. Proverò a regolarlo un po', ed ecco come cambia:

Un'altra regolazione che puoi fare è il tipo di combinazione di colori. Puoi scegliere tra il tipo Lineare e Radiale . Con il tipo lineare , puoi anche scegliere la direzione della sovrapposizione.

Per padroneggiare quell'opzione di colore sfumato, avrai bisogno di un migliore senso artistico e imparerai anche come mescolare e abbinare i colori per creare la migliore combinazione per la sovrapposizione.

Metodo 2: utilizzo dei CSS

Se desideri aggiungere una sovrapposizione a un'immagine utilizzando l'editor classico, è necessario utilizzare i CSS. Devi aggiungere un po' di CSS. Vai su Aspetto > Personalizza > CSS aggiuntivo .

Per sovrapposizione sfumatura

Aggiungi questo codice per la sovrapposizione del gradiente:

 .sfondo-gradiente {
    posizione: relativa;
}
.sfondo-gradiente::prima {
    contenuto: '';
    sfondo: gradiente lineare(135deg,#0693e3,#9b51e0);
    posizione: assoluta;
    in alto: 0;
    sinistra: 0;
    in basso: 0;
    destra: 0;
    indice z: 1;
    opacità: 0,5;
}

Per la sovrapposizione solida:

Aggiungi questo codice per la sovrapposizione solida:

 .background-opacità {
    posizione: relativa;
}
.background-opacity:before {
    contenuto: '';
    posizione: assoluta;
    in alto: 0;
    sinistra: 0;
    in basso: 0;
    destra: 0;
    indice z: 1;
    opacità: 0,5;
    colore di sfondo: #000;
}

Nota: questo codice ti aiuterà ad aggiungere solo la sovrapposizione, non il testo sull'immagine.

Puoi aggiungere entrambi se vuoi aggiungere molte immagini con diversi tipi di sovrapposizione. Per definire la sovrapposizione come colore solido o sfumato , vai all'editor di testo e aggiungi una classe all'immagine che desideri sovrapporre:

• Solido: <div class="background-opacity"> … </div>
• Gradiente: <div class="background-gradient is-style-default"> … </div>

Per esempio:

Ecco come lo faccio!

Verdetto

L'aggiunta di overlay alle immagini ti aiuta davvero a decorare i tuoi post/pagine e a fare una migliore impressione sui visitatori. Vale la pena approfondire come creare una sovrapposizione perfetta, quindi consiglio vivamente di metterci subito al lavoro. Puoi anche rendere il tuo sito Web più attraente con dispositivi di scorrimento, banner popup, sfondo video, ... Spero che le mie istruzioni siano abbastanza chiare per te e non esitare a lasciare domande e commenti qui sotto, se presenti. Ciao!