Tutto quello che vuoi sapere sui moduli nidificati in Divi 5

I moduli nidificati in Divi 5 consentono a ogni modulo di fungere da contenitore, consentendo di posizionare righe e altri moduli l’uno all’interno dell’altro con profondità infinita. Sarai in grado di posizionare pulsanti all’interno di un Blurb, un CTA all’interno di un modulo Blog o layout personalizzati all’interno di una fisarmonica in modo molto semplice.

In questo articolo, approfondiremo cosa sono i moduli annidati, i loro vantaggi e ne elogeremo alcuni esempi in movimento. Immergiamoci!

Cosa sono i moduli nidificati?

I moduli annidati consentono il posizionamento di qualsiasi modulo all’interno di qualche altro modulo con annidabilità infinita. Ciò significa che non sei più limitato a moduli predefiniti. Ora sarai in grado di assemblare layout a più livelli progettati su misura incorporando righe o moduli all’interno di un altro, con tutti i livelli di profondità che desideri.

Fondamentalmente, un modulo annidato trasforma ogni sezione Divi direttamente in un contenitore flessibile o a griglia. Che si tratti o meno di un Blurb, di una Fisarmonica, di una Scheda, di uno Slider o di ogni altro modulo Divi, ora sarai in grado di mantenerlo come una sezione di layout mamma o papà. Quelle porzioni figlie possono anche essere semplici moduli di testo, costruzioni di righe complesse o anche altri moduli nidificati, creando modelli di progettazione riutilizzabili.

Ogni modulo padre o madre ora supporta i controlli di layout, rendendo omaggio al percorso flessibile, giustifica l’argomento del materiale del contenuto, allinea gli elementi, la spaziatura vuota e altro ancora, fornendoti il ​​controllo su come sono disposte le parti del bambino. In applicazione, ciò significa che sarai in grado di:

• Posiziona subito un pulsante di invito all’azione (CTA) all’interno dello spazio dell’oggetto del materiale del contenuto di un trafiletto.
• Incorpora un’intera riga con alcune colonne all’interno di una singola scheda.
• Assemblare una tabella dei prezzi in cui ogni piano contiene la propria riga nidificata non pubblica da utilizzare come confronto.

Il risultato è un’ulteriore opzione logica e basata su componenti per la progettazione che rispecchia le pratiche di sviluppo web alla moda. I moduli nidificati non si limitano ad amplificare ciò che è immaginabile in Divi, ma ridefiniscono il modo in cui credi di costruire con esso.

Vantaggi dei moduli nidificati

I moduli nidificati non si limitano ad aggiungere un servizio completamente nuovo; si trasformano nel modo in cui progetti, assembli e mantieni i siti Web in Divi 5. Di seguito sono elencati i vantaggi fondamentali che rendono questa funzionalità così unica:

Flessibilità di progettazione infinita

Grazie alla possibilità di annidamento infinita, non sei più limitato a layout piatti e lineari. Crea progetti interattivi a più livelli, come una riga di 3 colonne con trame e pulsanti nidificati all’interno di un modulo Scheda. Ciò apre le porte a layout straordinariamente personalizzati e storie individuali, come vetrine di prodotti interattive, flussi di onboarding in più fasi o hub di contenuti dinamici che si adattano al comportamento individuale.

Layout migliorato Tieni d’occhio

Ogni modulo di mamma o papà ora aiuta l’intera impostazione di Flexbox e CSS Grid, permettendoti di controllare l’allineamento, la spaziatura e la reattività del bambino. Visualizza subito i modelli predefiniti nei moduli per layout veloci e professionali. Ciò è particolarmente utile per le tabelle dei prezzi, le griglie della forza lavoro o le gallerie, dove i layout coerenti dei prodotti secondari sono molto potenti.

Posizionamento e modifica semplificati

Gli argomenti dei contenuti nativi all’interno dei moduli possono ora essere riposizionati in un unico ambiente. Alterna il percorso flessibile di Blurb da una colonna all’altra e trasformalo immediatamente in un layout affiancato. Tutte le parti secondarie vengono visualizzate in un elenco intuitivo e ordinabile in tutte le impostazioni del modulo, tenendo presente l’intero riordino tramite trascinamento della selezione direttamente sull’area di disegno o all’interno del pannello.

Miglioramenti dell’interfaccia utente e del flusso di lavoro

Visual Builder ora ospita menu di scelta rapida che ti consentiranno di aggiungere, incollare o copiare parti sopra, sotto o all’interno di qualsiasi funzione con un solo clic. Gli indicatori visivi contrassegnano chiaramente i contenitori flessibili e a griglia all’interno della tela, riducendo le congetture. Combinati con anteprime reattive in tempo reale, questi miglioramenti rendono le build complesse più veloci e più pulite.

Come utilizzare i moduli nidificati

Iniziare con i moduli annidati è discreto. Inizia insieme a un nuovissimo riga Flex a due colonne ad una pagina web internet.

Aggiungi un Intestazione Moduli e abbelliscilo come preferisci. Sotto il Intestazione modulo, aggiungi a Contatore importo modulo e magnificerlo.

Ingrandisci il Porzioni menu a tendina all’interno del Oggetto del materiale contenuto scheda. Fare clic su in + Aggiungi elemento pulsante nel tentativo di caricare un modulo completamente nuovo.

Quando il Inserisci modulo o riga risulta modale, effettuare una selezione a Testo modulo.

Dai stile al Testo modulo come desiderato. Ripeti i passaggi nel tentativo di caricarne uno nuovo di zecca Elementoquindi anche questa volta aggiungi a Pulsante modulo.

Aggiungi l’argomento del materiale di contenuto alla seconda colonna, quindi utilizza Divi 5 Breakpoint reattivi personalizzabili per apportare modifiche al layout.

Per controllare le colonne sulle unità più piccole, fare clic su su Osservare il modello di costruzione pulsante in Riga palcoscenico.

Mentre navighi ad un certo punto del Punti di interruzionecontrolla le colonne scegliendo a Modello di costruzione dalle alternative disponibili.

Come potrai vedere, l’utilizzo dei moduli annidati sui tuoi layout è intuitivo e richiede solo pochi passaggi.

Esempi globali precisi

Ora che sai come sarai in grado di assemblare layout complessi con i moduli nidificati, cantiamo le loro lodi con alcuni esempi di essi in movimento. Di seguito sono riportati 3 buoni esempi che elogiano il modo in cui i moduli annidati elevano spesso i progetti in layout dinamici.

1. Moduli a schede dinamiche

Grafica dei moduli nidificati straordinariamente ordinata sul modulo Schede. Sarai in grado di utilizzarli per creare layout a più colonne con righe nidificate per fungere da servizi, prodotti e altre informazioni molto importanti per il tuo sito web online. Usando Divi 5 Flexbox controlli, sarai in grado di riorganizzare le colonne e seguirle Modelli di costruzione su unità più piccole per garantire che il tuo layout sembri glorioso su qualsiasi dimensione di unità di visualizzazione.

2. CTA integrato in una griglia di blog

Con i moduli nidificati, sarai in grado di combinare perfettamente le promozioni nei feed degli argomenti dei contenuti senza interrompere il layout. Imposta semplicemente la raccolta di post nel modulo Blog, aggiungi una sezione CTA e la bellezza come desideri. Divi 5 aggiungerà il modulo annidato dopo l’invio senza pari al blog mantenendo la costruzione della griglia del blog. Quando utilizzi il modulo di impaginazione per scorrere a un certo punto i post, il CTA rimarrà nello stesso posto, indipendentemente dalla raccolta di post.

3. Endeavour Servire come Slider

I moduli nidificati sono utili insieme agli accenti dei layout, come in questo esempio. Proprio qui, utilizziamo un modulo Workforce Carousel e consentiamo al Loop Builder di cantare le proprie lodi per il tipo di invio personalizzato di Doveri. Per fornire ulteriore profondità al design, abbiamo aggiunto un’immagine di sfondo alla sezione e quindi utilizzato un modulo nidificato sulla riga nidificata in tutto il carosello nel tentativo di caricare qualche altra immagine con la trasformazione in controlli. Questo semplice trucco di annidamento trasforma i caroselli piatti in vetrine ricche e eccitanti senza ulteriori plug-in o codice.

Scarica gli esempi di moduli nidificati

Compila il modulo sottostante per ottenere tutti i layout presenti in questo invio. I moduli nidificati di esempio 1, 2 e 3 possono essere importati anche facendo clic su blu + icona mentre si lavora in una pagina Web Internet Divi.

Quando il Inserisci sezione risulta modale, fare clic su su Aggiungi dalla libreria scheda e quindi seleziona l’esempio che desideri importare.

L’intera pagina di esempio può essere importata anche facendo clic su blu + icona nella parte superiore sinistra del Visual Builder.

Quando il Inserisci layout risulta modale, fare clic su Disposizione salvata.

Seleziona il Moduli nidificati in Divi 5 – Intero disposizione.

Fare clic su Usa questo layout per importare il layout nel Visual Builder.

Dai un’occhiata ai moduli nidificati in Divi 5 al momento

I moduli nidificati in Divi 5 liberano la creatività infinita attraverso una nidificazione illimitata, offrendo un controllo superiore del layout con Flexbox nativo e CSS Grid. Migliora il tuo flusso di lavoro con editing intuitivo drag-and-drop, menu di scelta rapida e anteprime reattive in tempo reale. Con una fondazione più rapida e oltre 20 nuove scelte finora, Divi 5 è l’ideale per creare progetti raffinati e basati su moduli che rendono di nuovo senza stress il lavoro con un generatore di pagine Web wordpress.

Puoi provare i moduli nidificati in Divi 5? Ottieni subito l’ultima Divi 5 Beta e inizia a sperimentare. La probabilità è infinita!

Il post Tutto quello che vuoi sapere sui moduli nidificati in Divi 5 è apparso per la prima volta sul blog Chic Topics.

Progettazione Web wordpress

[ continue ]

Piani di manutenzione wordpress | hosting wordpress

Per saperne di più