In Elementor , gli elementi sovrapposti possono conferire loro un aspetto distintivo, esperto e alla moda. Inoltre, ti consente di stipare più informazioni in uno spazio compatto senza che appaia sterile o poco interessante.

La buona notizia è che l'utilizzo di Elementor semplifica la sovrapposizione di immagini, testo e altri elementi. Ti mostreremo come creare una sezione sovrapposta in Elementor nel tutorial di oggi.

Crea sezioni Elementor sovrapposte

Vai alle pagine sulla tua dashboard e avvia qualsiasi pagina utilizzando Elementor. Quindi seleziona Modifica con Elementor.

Imposta Layout di pagina su Elementor Canvas in Impostazioni pagina una volta caricata la pagina. quindi premere il segno più (+) per aggiungere una nuova sezione con una singola colonna.

Nella tua nuova sezione, aggiungi un widget; fai clic sull'icona widget’s e nella ricerca, digita divider per ottenere il widget divisore, trascinalo nella tua sezione.

Impostare Altezza su Altezza minima di 400 pixel nella finestra Modifica sezione a destra dopo aver selezionato la sezione. Dagli un colore di sfondo accanto a Stile (la mia scelta è rossa). Assegna al divisore uno sfondo bianco in Stile dopo aver scelto il divisore.

Ora seleziona la sezione e duplicala.

Ora modella la sezione del clone separatamente rispetto a quella precedente e assegnagli un colore di sfondo diverso.

Il prossimo passo è sovrapporre le tue due parti una volta che le hai.

Inizierò dimostrando come impilare le sezioni blu e rosse.

Avrai bisogno di Elementor Navigator per questo. Il simbolo di navigazione si trova a sinistra, vicino alla parte inferiore della sezione Modifica.

Il tuo navigatore appare quando fai clic sull'icona di navigazione. Puoi accedere rapidamente alle tue sezioni con il navigatore, che aiuta anche a navigare attraverso di esse. Inoltre, una parte viene nascosta quando si fa clic sull'"occhio" accanto ad essa.

Seleziona la sezione blu, scegli Avanzate dal menu Modifica sezione a sinistra, quindi sotto Margini, assegnagli un margine superiore di -100 pixel. Questo porterà la sezione blu nella (sopra) la prima sezione.

Scegli la parte rossa, scegli Avanzate, seleziona Z-index e regolalo su 10 per far apparire invece la sezione rossa sopra la sezione blu. Di conseguenza, la sezione rossa viene automaticamente posizionata sopra la sezione blu.

Inizialmente, la parte blu è più grande del rosso perché ha la priorità. Se la parte blu ha Z-index pari a 1, è in cima se la sezione rossa ha Z-index pari a 0. In sostanza, la parte con Z-index più alto scorre automaticamente sopra quella inferiore.

Immaginiamo di avere più sezioni di due sole.

Devi creare un'altra sezione per vedere come funziona.

Scegli la sezione blu e duplicala. Quindi scegli la sezione clonata e imposta l'indice Z e i margini su 0 pixel in Avanzate. Puoi cambiarne il colore in Stile.

Ad esempio, dovresti dare alla parte blu un indice Z più alto sia della parte rossa che di quella verde se vuoi che sia in cima a entrambe le sezioni.

Ad esempio, l'area verde e la sezione rossa hanno entrambe un indice Z di 1. (impostazione predefinita). Decidi di dare alla sezione blu un indice Z di 3 e poi sceglilo.

Seleziona la parte verde e assegnale un margine di -20 in Avanzate in modo che possa spostarsi nella sezione superiore per vedere chiaramente questa modifica. La sezione blu è quindi visibile come sopra entrambe le aree.

Anche in impostazioni reattive, questo effetto di sovrapposizione funziona. Ad esempio, puoi selezionare il dispositivo mobile dal menu Responsive Mode e decidere di aumentare l'indice Z di qualunque parte tu voglia vedere per prima.

Avvolgendo

In Elementor , puoi farlo per sovrapporre le aree e la sovrapposizione funzionerà anche su dispositivi diversi.

Utilizzare la sezione sottostante per eventuali commenti o domande. Inoltre, spargi la voce ai tuoi conoscenti e continua a seguire CodeWatchers.