Elementor è il page builder più utilizzato e altamente personalizzabile per WordPress. Tuttavia, ci sono alcune cose che gli utenti non trovano un'opzione diretta per modificarle.
Ad esempio, il contenuto del widget fisarmonica è aperto per impostazione predefinita. Molte persone vorrebbero che fosse chiuso, ma non trovano l'opzione per chiuderlo.
Quindi, come si fa a mantenere la fisarmonica chiusa per impostazione predefinita in Elementor?
Per mantenere gli elementi della fisarmonica chiusi per impostazione predefinita in Elementor, andare alla voce Scheda Contenuto >> Interazione. Utilizzare il pulsante “Stato predefinito” >> “Tutti crollati”, allora Pubblicare.
Ecco quindi 3 semplici metodi per mantenere la fisarmonica chiusa per impostazione predefinita in Elementor.
Quindi, iniziamo!
Modi affidabili per mantenere l'oggetto a fisarmonica chiuso o chiuso
Quando si utilizza Elementor widget fisarmonica, il “primo elemento”, o “prima diapositiva”, dell'immagine. La fisarmonica è aperta per impostazione predefinita. E il contesto è leggibile. Ma questa potrebbe non essere la vostra preferenza.
Come abbiamo appreso, l'Elementor non fornisce alcuna impostazione per chiudere o collassare la diapositiva della fisarmonica per impostazione predefinita.
Ma non preoccupatevi, perché quelli erano i vecchi tempi. Ora è possibile chiudere o aprire la fisarmonica a piacimento. Elementor offre ora un'impostazione integrata.
Inoltre, dopo aver provato e riprovato, ho trovato altri due metodi semplici.
È possibile chiudere o aprire la fisarmonica utilizzando i 3 metodi seguenti.
- Metodo 1: Utilizzare le impostazioni di Elementor (metodo gratuito)
- Metodo 2: Utilizzo di un semplice codice CSS (richiede Elementor PRO)
- Metodo 3: Utilizzo del codice JavaScript (per utenti esperti, ma gratuito)
Metodo 1: utilizzare le impostazioni dell'Elementor
Questa è la soluzione più semplice per mantenere il Elemento della fisarmonica chiuso o collassato. È disponibile nelle impostazioni integrate dell'Elementor. È anche un metodo per principianti privo di codifica. Questo è per gli utenti gratuiti di Elementor.
Per iniziare, seguite la procedura descritta qui di seguito:
- Aprire la pagina nell'editor Elementor, dove si trova la sezione della fisarmonica.
- Selezionare un elemento nel widget della fisarmonica.
- Nella barra laterale sinistra, andare alla voce Scheda Contenuto >> Interazione.
- Impostare lo stato predefinito su Tutti crollati.
- Pubblicare ora.
E questo è quanto!
Suggerimento: Impostare il valore Massimo di elementi espansi a 1 (opzionale). È altamente consigliato per un'esperienza utente più pulita. È possibile modificare la velocità dell'animazione e gli stili delle icone per adattarli al proprio design.
Ora, la grande domanda! Funziona con la versione gratuita di Elementor?
Sì, è così! A condizione che si utilizzi la versione più recente. Questa funzione è disponibile in Elementor Free.
Metodo 2: Utilizzo di un semplice codice CSS (richiede Elementor PRO)
Se si lavora su siti o template vecchi in cui il toggle integrato non è disponibile (prima dell'aggiornamento), il CSS offre una soluzione rapida senza dover riprogettare. Quindi, si può seguire questo metodo per mantenere l'opzione Articolo a fisarmonica chiuso o collassato. Tuttavia, questo è solo per gli utenti di Elementor Pro.
- Aprire la pagina nell'editor Elementor, dove si trova la sezione della fisarmonica.
- Selezionare il widget fisarmonica.
- Nella barra laterale sinistra, andare alla voce Scheda Contenuto >> Layout.
- Duplicare il primo elemento della fisarmonica (attenzione: duplicare il primo elemento, non l'intero widget).
- Copiare uno qualsiasi dei codici CSS forniti qui sotto
.elementor-accordion .elementor-accordion-item:first-of-type {
display: none;}
.elementor-accordion {
bordo superiore: 1px solido #D4DFF2C7;
}- Andare alla scheda Avanzate del widget fisarmonica.
- Quindi, scorrere verso il basso e incollare il codice CSS nel campo CSS personalizzato.
- Ora, pubblicare la pagina.
Dopo aver aggiornato la pagina incollando il CSS, il primo file elemento della fisarmonica duplicato saranno nascosti, mentre i restanti elementi saranno chiusi per impostazione predefinita, proprio come si desiderava.
Metodo 3: Utilizzo del codice JavaScript
Se il primo metodo non è stato utilizzato a causa di problemi di versione e il secondo a causa della mancanza di Elementor Pro, seguite questo metodo gratuito.
Tutto ciò che dovete fare in questo metodo è aggiungere un widget HTML e un piccolo codice che vi aiuterà a chiudere la fisarmonica. Ecco come fare.
- Aprire la pagina nell'editor Elementor, dove si trova la sezione della fisarmonica.
- Appena sopra il widget fisarmonica, inserire un “Widget HTML” dal pannello degli elementi.
- Copiare il codice JavaScript fornito di seguito.
- Incollare il codice JavaScript sopra fornito all'interno del codice HTML.
- Una volta terminato, pubblicare la pagina e vederla dal vivo.
- A questo punto, la prima fisarmonica inizia a essere chiusa.
Un consiglio da professionista: Utilizzate più widget accordion sul vostro sito e volete applicare la stessa funzionalità ovunque? Basta aggiungere lo snippet JavaScript a Elementor > Codici personalizzati. In questo modo funzionerà in modo coerente su tutte le pagine e i post.
Bonus: 4 modelli di fisarmonica premium - pronti all'uso
Perché utilizzare La fisarmonica di base di Elementor quando è possibile ottenere facilmente prodotti ricchi di funzionalità e dal design accattivante. modelli a fisarmonica?
Certo, il widget predefinito di Elementor svolge il suo compito. Ma se volete ottenere un'esperienza più dinamica e visivamente accattivante, avrete bisogno di qualcosa di più avanzato.
E il Confezione Elementor I modelli a fisarmonica offrono molto di più. Come lo stile avanzato, l'integrazione delle icone, il controllo delle animazioni e la flessibilità del layout. Miglioreranno immediatamente la presentazione dei vostri contenuti.
Sia che si tratti di creare FAQ, servizi di assistenza o sezioni di contenuti interattivi, questi modelli premium consentono di risparmiare tempo e di ottenere un aspetto elegante senza il fastidio della personalizzazione manuale.
Ecco 5 modelli di fisarmonica pronti per l'uso di Element Pack:
Fisarmonica 01: Serve per organizzare i contenuti con una fisarmonica moderna e reattiva, con le FAQ o con uno Spoiler.
Fisarmonica 02: Si tratta di un layout a fisarmonica pulito e reattivo per una migliore leggibilità.
Fisarmonica 03: Visualizzate in modo ordinato le FAQ o i contenuti di spoiler con una fisarmonica reattiva.
Fisarmonica 04: Gestione dei contenuti senza sforzo grazie ai moderni widget a fisarmonica.
Fisarmonica 05: Fornite all'utente una navigazione senza soluzione di continuità abilitando URL basati su hash che aprono istantaneamente Accordion o Tab specifici al caricamento della pagina.
FAQ
Q1. Gli elementi della fisarmonica devono essere aperti o chiusi per impostazione predefinita?
Dipende dalle vostre preferenze di progettazione. Molti creatori scelgono di tenere il primo elemento della fisarmonica chiuso per incoraggiare l'interazione dell'utente. Altri invece lo preferiscono aperto per evidenziare i contenuti chiave. Non c'è una regola precisa. Progettatela in base al vostro pubblico e ai vostri obiettivi di layout.
Q2. Qual è la differenza tra i widget Toggle e Accordion in Elementor?
Entrambi i widget offrono funzionalità simili. Si comportano in modo diverso al caricamento della pagina.
– Elementor Widget alternativo: Per impostazione predefinita, tutti gli elementi rimangono chiusi.
– Elementor Widget fisarmonica: Il primo elemento viene espanso, mentre gli altri rimangono chiusi.
Inoltre, i widget a fisarmonica consentono di aprire un solo elemento alla volta. Mentre i widget a levetta consentono agli utenti di aprire più elementi contemporaneamente.
Q3. È possibile comprimere gli elementi della fisarmonica Elementor senza utilizzare il codice?
Sì! Con gli ultimi aggiornamenti di Elementor, è sufficiente attivare l'opzione “Tutti i crolli” in Layout >> Interazioni, Non è richiesta alcuna codifica.
4. Che cos'è una fisarmonica di immagini in Elementor?
Una fisarmonica di immagini visualizza più immagini in un formato pieghevole. È arricchito da effetti hover e animazioni fluide. È un widget visivamente accattivante che aggiunge interattività e fascino al vostro design.
Ultima parola
Se si lavora con l'ultima versione di Elementor. L'impostazione Stato predefinito di Elementor è il modo più semplice ed efficace per mantenere tutti gli elementi dell'Accordion chiusi per impostazione predefinita.
Questo metodo, con pochi clic, garantisce un'esperienza pulita. Non è necessario alcun codice personalizzato. Questa funzione integrata è ideale per i creatori che desiderano risultati rapidi senza modifiche tecniche.
Tuttavia, se si utilizza una versione precedente di Elementor. Si ha bisogno di un controllo più preciso sul comportamento degli Accordion. Ad esempio, per puntare a widget specifici, personalizzare le animazioni o ignorare i conflitti con i temi. In questo caso, l'utilizzo di un approccio basato su JavaScript o CSS potrebbe essere una soluzione migliore.
E se si vuole evitare del tutto lo styling manuale, c'è un'altra opzione intelligente. È possibile utilizzare i modelli di fisarmonica già pronti disponibili in Element Pack Pro.
Questi modelli sono progettati in modo professionale, completamente reattivi e costruiti tenendo conto dell'usabilità nel mondo reale. Sia che si tratti di creare FAQ, ripartizioni dei servizi o sezioni di contenuti interattivi. Questi layout precostituiti consentono di risparmiare tempo e di ottenere risultati ottimali.
