Elementor Pro + Campi personalizzati avanzati = Rivoluzionario (2021)

Elementer Pro + Campi personalizzati avanzati

At CollectiveRay, siamo un po' un mashup, siamo ex sviluppatori, diventati web designer, product manager e vogliamo solo che il nostro sito web faccia ciò di cui abbiamo bisogno senza dover mettere a posto le cose. Ecco perché ci piace sperimentare combinazioni di caratteristiche e funzioni per creare cose solo lavoro. L'ultima combinazione che abbiamo trovato rivoluzionaria per il modo in cui lavoriamo è Elementor combinato con Advanced Custom Fields: davvero, questi due plugin che lavorano in tandem hanno portato il nostro lavoro a un livello superiore.

Resta con noi per dare uno sguardo completo alle capacità di questi due plugin e come possono essere combinati per creare una combinazione vincente. Abbiamo appena rivisitato l'articolo in Settembre 2021 e aggiornato con tutti i nuovi dettagli pertinenti, se necessario.

sommario

   Elementor  Avanzate Campi personalizzati
Piccolo Gratuito o Pro a partire da $ 49 Gratuito o Pro a partire da $ 25
Prova gratuita Elementor Designer Lite Avanzate Campi personalizzati
Prestazioni  Leggero e veloce, soprattutto se paragonato ad altri costruttori di pagine Non applicabile
Cosa ci è piaciuto  Interfaccia utente / UX ordinata e organizzata  Flessibilità, versatilità
   Leggero, costruito per la velocità  Funzionalità intuitive per gli sviluppatori
   Buona selezione di elementi  Set di regole di visualizzazione avanzate
   Moduli personalizzati incorporati  Personalizzazione del backend di WordPress senza codifica
Totale
Sito web Visita Elementor Visita ACF

Recensione di Elementor

Elementor è il Page Builder di WordPress più popolare. Grazie alla sua versione gratuita e al prezzo economico Pro ($ 49) ha visto una crescita stellare. L'enorme numero di elementi che ha significa che avrai bisogno di pochissimi plugin aggiuntivi di terze parti. Ha anche capacità di creazione di temi e una vasta libreria di modelli.

Cominciamo con un'immersione profonda in Elementor. Con i Page builder che vanno di moda in questi giorni, ci vuole un po 'per impressionarci davvero, ma Elementor aveva fatto proprio questo: impressionarci.

Prime impressioni 

Questo plug-in super lucido per la creazione di pagine e post drag and drop è sicuramente un forte concorrente per persone come noi da utilizzare come prodotto goto per la progettazione dei propri siti.

Non c'è da meravigliarsi che questo plugin sia noto come il Pagebuilder di WordPress numero 1 e lo troverai classificato come uno dei migliori prodotti in qualsiasi confronto di prodotti nella sua categoria.

Una delle prime cose che noterai quando lavori con Elementor è il design assolutamente pulito. Nessun disordine, organizzato in modo ordinato, sarà un piacere lavorare con questo plugin per coloro che sono organizzati in modo ossessivo e, naturalmente, per tutti coloro a cui piace che le cose siano ben organizzate.

Puoi vedere che l'interfaccia utente degli elementi (a sinistra) è molto facile da capire e con cui lavorare. L'attuale canvas (a destra) è anche mantenuto molto pulito, mantenendo le opzioni fuori mano fino a quando non si fa effettivamente clic su un elemento specifico. Solo allora vengono mostrate le opzioni. Questi mantengono tutto come se fosse sul front-end effettivo, una volta che la pagina o il post sono stati pubblicati.

Elementor primo utilizzo

Prestazioni

Un'altra cosa che è immediatamente evidente quando usi Elementor è quanto sia leggero quando lo usi. Avendo usato alcuni dei pagebuilder più popolari, possiamo facilmente sentire una differenza davvero percettibile. Sebbene plug-in come Visual Composer e Divi possano richiedere alcuni secondi per caricarsi e sembrare goffo da usare, il che sminuisce il loro utilizzo effettivo. Anche se alla fine devi abituarti, non è qualcosa che ti piacerà mai, è solo qualcosa con cui devi convivere perché semplicemente non hai un'opzione.

Per saperne di più: 

Divi contro Beaver Builder: https://www.collectiveray.com/beaver-builder-vs-divi

Elementor contro Divi: https://www.collectiveray.com/elementor-vs-divi

Revisione del tema Divi: https://www.collectiveray.com/divi-theme-review

Questo. Questa invece è una boccata d'aria fresca. Cliccando su Modifica con Elementor, la pagina o il post che devi modificare si carica quasi immediatamente, oseremmo dire, non molto diverso che se dovessi caricare il post o la pagina SENZA il plugin abilitato, cioè con l'editor nativo di WordPress. 

Anche lavorando con l'attuale generatore di trascinamento della selezione, puoi sentire come l'aggiunta o la rimozione di elementi sia istantanea. Non devi aspettare che il builder armeggi e abbia quei pochi secondi di "tempo di attesa" fino a quando un elemento viene caricato. Scegli, trascini, rilascia, continui a lavorare: lo strumento lavora con te, al tuo ritmo.

Come si usa 

Esistono due modi per utilizzare Elementor. Il modo in cui scegli di lavorarci dipende se stai pianificando di creare una pagina da zero o se desideri iniziare da uno dei modelli esistenti disponibili per gli scenari di siti Web più comuni.

Se vuoi iniziare da zero, devi semplicemente creare una nuova pagina o post, quindi fare clic sul pulsante Modifica con Elementor e il plug-in è caricato, pronto per iniziare la modifica.

Modifica con Elementor

Questo quindi fa apparire una pagina pulita, pronta per iniziare ad aggiungere le sezioni (righe) necessarie o caricare da un modello esistente (ne parleremo presto).

Pagina vuota o post pronto per l'aggiunta di modelli di widget di sezioni

 

Quando fai clic per aggiungere una sezione (una riga), ti viene chiesto di scegliere il numero di colonne che questa sezione avrà effettivamente. All'interno di ogni colonna è quindi possibile aggiungere i diversi elementi disponibili. 

Imposta la struttura della sezione (colonne)

Dopo aver impostato la struttura, ora puoi iniziare a trascinare e rilasciare i widget nelle diverse sezioni. Ci sono, ovviamente, molti widget diversi tra cui scegliere, dai semplici elementi forniti con la versione gratuita del plug-in, alle caratteristiche e funzioni più complesse disponibili con la versione PRO.

Elementi disponibili per l'aggiunta

Elementi disponibili

Molte delle funzionalità standard previste di un sito Web sono disponibili come widget che possono essere aggiunti alla pagina. Alcuni dei widget più interessanti da utilizzare sono:

  • icone
  • Google Maps
  • Portfolio
  • Titolo animato (testo rotante o cerchiato)
  • Listino prezzi o tabella dei prezzi
  • Inviti all'azione
  • Testimonianze
  • conti alla rovescia
  • Commenti e incorporamenti di Facebook
  • Scatola dell'autore
  • Barre di avanzamento
  • Gallerie di immagini o caroselli
  • Codici funzione
  • ecc. ecc

Basti dire che, in un unico plugin, ci sono tutti gli elementi che potresti aver bisogno di usare su una pagina.

Non solo, ma Elementor va ben oltre la maggior parte degli altri plugin. 

Questo perché, oltre a supportare i propri elementi nativi, il plugin supporta anche shortcode e widget standard di WordPress. Ciò significa che oltre a supportare tutti i suoi elementi e TUTTI i widget di WordPress, puoi anche incorporare caratteristiche e funzioni di terze parti abilitate tramite codici brevi. Questo significa praticamente che sei praticamente illimitato in ciò che puoi aggiungere a una pagina o a un post in fase di progettazione.

Prova Elementor adesso

Elementi dinamici

Un'altra grande caratteristica di questo generatore di pagine è la sua capacità unica di progettare pagine utilizzando contenuto dinamico anziché contenuto statico. Questa è una caratteristica piuttosto innovativa e sicuramente qualcosa che abbiamo incontrato spesso (o per niente).

Ovviamente, è fantastico poter trascinare e rilasciare gli elementi sopra descritti, ma questa è diventata una funzionalità prevista da questo tipo di strumento.

Tuttavia, Elementor è andato ben oltre, consentendo elementi di pagina dinamici. Il modo più semplice per spiegarlo sarebbe usare il titolo o l'intestazione di una pagina.

Supponiamo che tu voglia progettare una pagina che visualizzi le notizie correnti relative alla tua azienda. Ora, invece di utilizzare il banale titolo "Ultime notizie", vogliamo presentare il nostro attuale evento principale. 

Quindi, invece di avere la pagina costruita usando Elementor che mostra un "titolo" statico, usiamo l'elemento Theme Titolo del post che effettivamente interroga il nome del titolo corrente dal database e lo visualizza invece di qualsiasi contenuto generico.

Un altro utilizzo eccellente sulla stessa linea di questa è l'immagine in primo piano. Avendo un'immagine in primo piano dinamica, puoi essere certo che è la tua ultima immagine in primo piano che viene effettivamente visualizzata (personalizzata per l'evento del titolo corrente) anziché un'immagine generica che dovresti visualizzare utilizzando gli elementi statici.

Dai un'occhiata al seguente video esplicativo di 2 minuti sugli elementi dinamici di Elementor.

ruMtMAVVF_Y

Modelli Elementor

Sopra abbiamo visto come una pagina o un post può essere costruito da zero utilizzando gli elementi integrati disponibili con questo prodotto. Ma c'è un file più veloce, più efficiente modo di creare pagine. Oppure, piuttosto che solo pagine, puoi creare facilmente siti Web completi in pochi minuti! Questo è attraverso l'uso di Elementor Templates.

Questa è una funzionalità che diventa un modo abbastanza efficace di utilizzare un page builder. In sostanza, l'idea è questa: invece di creare le pagine da zero, con il rischio di rovinarlo (in particolare se non sei tipicamente esposto al design del sito web o al design in generale), usi un modello di pagina predefinito .

Dopo aver selezionato un modello, il tuo unico compito è personalizzare leggermente gli elementi per adattarli alle esigenze della pagina o del post che stai creando. Che sia per un cliente o per te stesso, il tuo lavoro sarebbe quello di modificare i contenuti per riflettere le esigenze del sito web che stai creando.

Questo, ovviamente, ridurrà notevolmente i tempi di progettazione. Non solo, ma assicurerà anche che il tuo design sarà quello di un'azienda di design professionale, piuttosto che quello di qualcuno che potrebbe non essere completamente abituato a progettare.

Ci sono più di 100 modelli disponibili per impostazione predefinita con Elementor Pro, ma non è tutto.

I modelli Elementor sono ormai un settore di nicchia in sé e per sé. Scoprirai che ci sono centinaia di altri plugin gratuiti e premium disponibili per l'acquisto e il download, per coprire e nicchia, settore o necessità.

Modelli di Elementor

Solo per citare alcuni dei modelli disponibili, si possono trovare

  •  Interior Design
  • Modello di app
  • Caffetteria, ristorante e servizi di ristorazione
  • Pagine del prodotto
  • Fitness
  • Studio legale
  • Copywriter
  • Agenzia e creativi
  • Hotel
  • Architetto
  • Matrimonio
  • Grafica Pubblicitaria
  • Startup
  • Informazioni personali
  • CV
  • Portfolio
  • Ebook
  • e molti molti altri.

Elementor - pagina di destinazione della fotografia

Ti consigliamo di visitare libreria.elementor.com per dare un'occhiata all'elenco completo dei modelli di landing page di WordPress disponibili per impostazione predefinita con il plug-in, dove puoi anche vedere una demo effettiva della pagina esatta che verrebbe creata dal modello.

Prezzi

Elementor è disponibile in sei gusti:

prezzi elementari

  • Gratuita
  • Essenziale (per 1 sito) - $ 49
  • Avanzate (per 3 siti) - $ 99
  • Esperto per (25 siti) - $ 199
  • Studio (per 100 siti) - $ 499
  • Illimitato (siti illimitati) - $ 999

Tutti i piani prevedono 1 anno di aggiornamenti e supporto. Con il prezzo ridicolmente basso di $ 49, quando ci vorranno letteralmente al massimo alcune ore (in base ai modelli) per creare un sito nuovo di zecca da zero, crediamo che questo sia un valore eccellente. 

Se sei un designer, è probabile che sfornerai più di 4 siti Web in un anno (anche data la velocità di sviluppo dei siti ora che hai Elementor nel tuo arsenale), quindi è altamente consigliato optare direttamente per il Piano illimitato immediatamente. 

Codice sconto Elementor

Ogni volta che abbiamo un codice sconto Elementor o un codice coupon, lo pubblicheremo qui, in modo da ottenere il prezzo migliore.

Il link sottostante ti porterà al sito ufficiale dove otterrai il miglior prezzo su Elementor in Settembre 2021.

Clicca qui per il prezzo più basso su Elementor

 

Dai un'occhiata a ciò che alcune persone hanno detto sul plugin:

testimonianze

 

Avanzate Campi personalizzati

La parte successiva del nostro articolo sposta l'attenzione su un altro plug-in che amiamo, Advanced Custom Fields.

Inizieremo con una breve panoramica di ACF, dopodiché ci concentreremo su come combinare Advanced Custom Fields ed Elementor per ottenere risultati sorprendenti. Anche rivoluzionario.

Per chi non lo sapesse, ACF consente a un utente di creare campi personalizzati per modificare le schermate per migliorare sia l'esperienza dell'utente che crea il sito che, naturalmente, in definitiva l'utente che visita il sito.

Proprio come una breve introduzione

  • Il generatore di campi ACF consente di aggiungere campi alle schermate di modifica WP in pochi secondi
  • I campi possono essere aggiunti a qualsiasi contenuto, post, utente, termini di tassonomia, media, commenti o altrove
  • È quindi possibile mostrare i campi ovunque, con funzioni intuitive per gli sviluppatori

Come sviluppatore / designer, non appena vedi quanto sopra, la tua mente può iniziare rapidamente a correre alle enormi possibilità disponibili. Con quanto sopra, puoi letteralmente creare una "copia personalizzata" di WordPress che si adatta esattamente alle esigenze di ogni cliente che hai. 

Probabilmente saprai che la maggior parte dei clienti, sebbene sarebbe felice di utilizzare WordPress, avrà comunque i propri requisiti particolari. Sai anche che modificare il codice di base per implementare queste modifiche è in genere una cattiva idea perché significa che non sarai in grado di ottenere aggiornamenti di base, creando rischi significativi per la sicurezza per quell'installazione.

ACF ti permette di "personalizzare" WordPress, senza toccare alcun codice core, semplicemente attraverso un plugin.

Puoi leggere di più sui plugin qui: https://www.collectiveray.com/wp/plugins/

E, naturalmente, non siamo solo noi ad essere tutti entusiasti delle possibilità di utilizzare Advanced Custom Fields. Questo è uno dei plugin più popolari, installati e apprezzati in circolazione. Dato che questo è orientato al designer / sviluppatore, puoi vedere che le seguenti statistiche di installazione sono a dir poco straordinarie.

Quindi, prima ancora di approfondire ulteriormente, è bene notare che questo plugin ha più di 1 milione di installazioni attive e gode di una valutazione a 5 stelle da oltre 1000 recensioni. È un risultato eccezionale se dovessi chiedermelo.

Campi personalizzati avanzati, installazioni attive e revisioni correnti 

Creazione di campi personalizzati

Il punto di forza di ACF è, ovviamente, la creazione di campi personalizzati che possono poi essere completamente combinati in forme complesse. Lo vediamo come molto utile per creare una varietà di cose:

  • I moduli di contatto personalizzati chiedono a un visitatore informazioni dettagliate e specifiche che possono essere utilizzate per rispondere meglio alle loro domande. Ad esempio, se il tuo cliente è un tipo di cliente orientato al servizio o alla produzione, puoi richiedere un modulo complesso che pone domande molto specifiche sulle esigenze del visitatore. Alla fine, tutte queste informazioni combinate per emettere un client migliore o dare una risposta migliore alla query specifica.

Tutto questo sta solo scalfendo la superficie di ciò che ACF può fare nella realtà. Dato quanto è concentrato nei confronti degli sviluppatori, non c'è da meravigliarsi che questo plugin sia così popolare. Una volta che i campi personalizzati sono stati creati, è possibile incorporare facilmente questi campi in

  • Temi: come sviluppatore di un tema, puoi effettivamente includere i campi personalizzati e le funzioni che hai creato per personalizzare il tuo lavoro in modo che i tuoi utenti possano trarre vantaggio da queste personalizzazioni: pensa, ad esempio, la possibilità di creare diversi moduli personalizzati per diverse nicchie
  • Plugin: ancora una volta come sviluppatore di plug-in, puoi effettivamente personalizzare moduli specifici per creare funzionalità estese per caratteristiche specifiche di WordPress o il tuo plug-in - puoi effettivamente utilizzare ACF per progettare funzionalità di modulo estese che potrebbero essere utilizzate per personalizzare l'acquisizione dei dati del tuo collegare

Ancora una volta, come sviluppatore, o anche come web designer, puoi già iniziare a vedere (e probabilmente emozionarti) sulle potenzialità di ACF.

Quindi iniziamo a giocherellare un po 'con ACF e vediamo di cosa è capace. Dai un'occhiata al seguente modulo che abbiamo creato in un paio di minuti. Vorremmo portare alla vostra attenzione alcune cose che non ci aspettavamo.

Creazione di un modulo personalizzato

Oltre ai campi dei moduli standard come testo, casella di controllo e selezione, datepicker e le opzioni standard run of the mill, ACF supporta anche

  • Tipi di post relazionali - questo tipo di campo ti consente di visualizzare elementi (come post e pagine) già esistenti nel sito corrente. Quindi, ancora una volta, immaginiamo per un momento di essere uno sviluppatore di temi e di voler dare all'utente la possibilità di selezionare alcuni post da mostrare nella home page. Utilizzando i filtri avanzati di questo tipo possiamo creare facilmente un'interfaccia utente che ci consenta di fare tutto questo. Abbiamo anche accesso a cose come pagine, tassonomie, utenti e ruoli.
  • Google Maps, selezione data e ColorPicker - questi tipi di campi sono tutti basati su jQuery e sono tutti supportati immediatamente (anche con la versione gratuita di ACF)
  • Regole - i campi possono essere visualizzati o meno in base alla logica condizionale che è possibile definire tramite l'interfaccia utente ACF. Ciò significa che il modulo può essere adattato agli input dell'utente, mostrando campi aggiuntivi o nascondendone altri se necessario in base a ciò che l'utente sta effettivamente inserendo
  • Opzioni - il finale e la ciliegina sulla torta, ti permettono di decidere le esatte opzioni di come e dove vuoi visualizzare il tuo modulo. Sia che tu voglia visualizzare il modulo nella parte superiore della pagina (nel backend), utilizzando un Metabox o meno e altre opzioni.

Di seguito è riportato un elenco completo di tutti i tipi di campo disponibili:

  • Testo: campo di testo a riga singola con supporto HTML opzionale e limiti di caratteri
  • Area di testo: uguale al testo ma può contenere più righe
  • Numero: campo numerico che può avere valori min / max opzionali per limiti e convalida
  • E-mail: campo personalizzato per l'input e-mail inclusa la convalida
  • Password: immissione della password con mascheramento del testo
  • Editor WYSIWYG: input dell'editor di WordPress con opzioni per l'inserimento multimediale e pulsanti dell'editor
  • Immagine: carica un'immagine o selezionane una dalla libreria multimediale. Restituisce un oggetto, URL o ID.
  • File: uguale all'immagine ma per i file in generale
  • Seleziona: menu a discesa con supporto per selezioni multiple
  • Casella di controllo: campo della casella di controllo per elementi singoli o multipli
  • Pulsante di opzione: seleziona un singolo elemento tramite il pulsante di opzione
  • Vero / Falso: selettore di base vero o falso
  • Link alla pagina: restituisce l'URL di qualsiasi post o pagina. Può essere limitato a tipi di post specifici.
  • Oggetto post: restituisce un oggetto WordPress di qualsiasi post o pagina, tipo di post o tassonomia
  • Relazione: come l'oggetto post ma con un'interfaccia avanzata e riordino tramite trascinamento
  • Tassonomia: restituisce un oggetto o un ID per una o più tassonomie. Può essere limitato a tag, categorie o termini di tassonomia personalizzata.
  • Utente: selezionare uno o più utenti. Opzione per limitare la scelta in base al ruolo dell'utente.
  • Google Map: imposta un centro, un livello di zoom e una larghezza
  • Selezione data: selezionare una data del calendario e restituire una stringa di data formattata
  • Selettore colore: seleziona un colore esadecimale
  • Messaggio: lascia un messaggio
  • Scheda: combina i campi in un'interfaccia a schede 

 

È difficile pensare a scenari che le funzioni di cui sopra non coprono. Non c'è da meravigliarsi se il plugin si chiama Advanced Custom Forms, perché la funzionalità fornita è molto potente nelle mani di qualcuno che sa come sfruttare queste funzionalità. è estremamente flessibile e può consentire di estendere le funzioni standard di WordPress, limitato solo dalla tua immaginazione.

La cosa grandiosa è che tutta questa personalizzazione viene eseguita senza toccare una riga di codice e, cosa più importante, senza toccare alcun file core, assicurandoti di non creare problemi di sicurezza per i siti Web che stai personalizzando.

Questo è senza dubbio un punto di svolta.

Frontend vs backend 

Dagli esempi e dalle opzioni sopra, puoi vedere che ACF può essere utilizzato sia nel front-end che nel back-end. Ora, davvero e veramente, sappiamo che ci sono un milione e un plugin di moduli là fuori, che ti consentono di creare moduli personalizzati per il back-end.

Il vero vantaggio deriva dalla possibilità di modificare le pagine di amministrazione di WordPress: questo essenzialmente rende questo prodotto un prodotto costruito da sviluppatori per sviluppatori e designer. In quanto sviluppatori, conoscono e comprendono i limiti dell'operare esclusivamente entro i limiti di WordPress.

Quindi questo è un prodotto che consente a sviluppatori e designer di spingere i confini di WordPress, non dal frontend, ma in particolare in termini di possibilità offerte all'amministratore o al webmaster di WordPress.

Ora che abbiamo visto le capacità di ACF ed Elementor, diamo alcuni esempi di come possono funzionare insieme.

Moduli di contatto personalizzati

Abbiamo già discusso sopra come un modulo di contatto personalizzato specifico per il tuo servizio, settore o prodotto farà molto per chiudere una nuova attività. Quindi diamo un'occhiata a cosa possiamo fare usando Elementor e Advanced Custom Fields.

Abbiamo già creato un modulo personalizzato per un settore specifico (è ancora di natura piuttosto generica, ma hai un'idea, puoi quindi personalizzare e aggiungere campi secondo il tuo caso specifico).

Quindi ora vogliamo aggiungere questo modulo a una pagina Contattaci creata da Elementor. Creiamo la pagina Contattaci e invece di progettarla da zero, prenderemo un modello da quelli già pronti.

modello di pagina di contatto

Ora che abbiamo una base da cui iniziare, aggiungiamo il nostro modulo personalizzato:

Abbiamo rimosso l'esistente Modulo di Contatto e rilasciato il widget del modulo e personalizzato il modulo di contatto per creare il nostro modulo di preventivo personalizzato - letteralmente in un paio di minuti abbiamo finito.

Progettazione di un modulo preventivo personalizzato

E questa è la bellezza di usare questi due plugin. Sia che tu voglia creare moduli personalizzati nel back-end per i tuoi temi e plug-in, sia che tu voglia utilizzare moduli personalizzati nel front-end, le possibilità sono finiteless.

Una cosa che avremmo voluto poter fare, e siamo sicuri che il team di Elementor alla fine si integrerà nei loro prodotti, sarebbe la possibilità di creare moduli utilizzando ACF e aggiungerli direttamente nel pagebuilder. 

AGGIORNAMENTO Settembre 2018 - le nuove versioni di questi due plugin sono ora in grado di integrarsi direttamente. I moduli personalizzati creati in ACF possono ora essere integrati direttamente in Elementor utilizzando i tipi di post personalizzati.

Combinazione di ACF ed Elementor

Quindi, questo è stato qualcosa che i due plugin hanno perso fino a pochi mesi fa quando stavamo esaminando questi due prodotti. I nostri lettori hanno anche scoperto un po 'di confusione e delusione per non essere in grado di farlo.

Come dovrebbe fare un buon revisore, ci siamo messi in contatto con il team di sviluppo e abbiamo suggerito che questo dovrebbe essere qualcosa che dovrebbe essere integrato in questi due prodotti, per essere in grado di creare una bella soluzione per l'integrazione tra i due.

E come un buon team che si prende cura dei propri clienti, ci ha subito saltato addosso e solo pochi mesi dopo, abbiamo nuove versioni di entrambi i prodotti che ora offrono un'integrazione diretta.

Ciò può essere possibile utilizzando i tipi di post personalizzati in WordPress. Solo per coloro che non hanno familiarità, i tipi di post personalizzati più comuni sono post, pagine e allegati, ma ce ne sono di più. Altri tipi di post comuni che potresti aver visto sono prodotti WooCommerce, testimonianze, eventi, recensioni, portfolio ... e molti altri. 

In altre parole, i tipi di post personalizzati sono un tipo specifico di "contenuto" che assume un certo formato.

Bisogna notare che è anche possibile al 100% definire nuovi tipi di post personalizzati se si dispone di contenuti specifici che devono essere "strutturati".

In sostanza, ciò che devi fare per creare un tipo di post personalizzato è utilizzare un plug-in Post personalizzato per definire i nuovi campi di cui avrai bisogno o farlo utilizzando il codice.

I ragazzi di Elementor hanno creato un articolo di lunga durata molto dettagliato su come eseguire questa integrazione.

Il modo più semplice per farlo è utilizzare il plug-in dell'interfaccia utente CPT che puoi trovare qui. Non esamineremo tutti i dettagli della creazione di un tipo di post personalizzato, ci sono molti articoli là fuori, anche se ti consigliamo vivamente di visitare questo.

Tipo di post personalizzato dell'interfaccia utente CPT

Dopo aver creato il tipo di post personalizzato, ora devi creare i campi personalizzati utilizzando ACF e mostrare solo i campi specifici in base al fatto che il tipo di post sia uno che hai appena definito.

creare campi personalizzati con acf

 

Per poter visualizzare questi tipi di post personalizzati sulle pagine del blog, è necessario capire come funzionano questi tipi di post personalizzati nelle diverse aree del sito.

Se dovessi immaginare un tipo di post personalizzato di testimonianza, puoi aggiungerlo in qualsiasi pagina o post che stai utilizzando. Puoi anche creare un "post" completo utilizzando il tipo di post personalizzato.

Per usarli con Elementor, utilizzeremo modelli e questi sono i passaggi che dovrai seguire:

  • Crea un nuovo modello singolo, puoi dargli il nome del tuo nuovo tipo e aggiungere un nuovo widget di testo. Ad esempio, utilizzeremo il widget dell'intestazione. 
  • Fare clic sull'icona dinamica e scegliere Campo ACF. Fare di nuovo clic su di esso e, sotto "tasto", scegliere il tipo di articolo personalizzato che è stato creato. Il contenuto che hai aggiunto in precedenza apparirà ora.
  • Ora non resta che pubblicare e ora puoi utilizzare questo modello all'interno dei tuoi contenuti.

 

Se vuoi essere in grado di riutilizzare questi tipi di contenuto e questi campi, puoi usarli nei modelli Elementor. Utilizzando la funzionalità Theme Builder, è possibile creare modelli utilizzando questi tipi personalizzati, selezionando i campi da Dynamic Content.

Visita Elementor per una spiegazione più lunga dei tipi di post personalizzati

Elementor Extra

Ora che abbiamo parlato in dettaglio di questi due fantastici prodotti, vorremmo espanderci un po '. Quando plugin come questi due crescono fino a raggiungere una tale popolarità, è inevitabile che diventino una nicchia e un'industria tutta loro e inizino ad attirare fornitori di software che effettivamente creano altre estensioni per estendere la funzionalità di questi plugin.

Quindi esamineremo una serie di extra di Elementor che potresti prendere in considerazione per spingere ulteriormente la funzionalità.

Componenti aggiuntivi definitivi per Elementor

Si tratta di una serie di widget mirati ad aggiungere più funzionalità e flessibilità al page builder. Dato che questi widget provengono da Brainstorm Force, la società dietro WP Astra, puoi capire che la qualità di queste funzionalità è di altissimo livello.

Componenti aggiuntivi definitivi

Ci sono più di 24 widget disponibili al momento della scrittura, inclusi, ma non limitati a:

  • Sequenza temporale - questo è un modo fantastico per mostrare grafici della sequenza temporale, tabelle di marcia o altri elementi basati sul tempo
  • Attiva / disattiva contenuto - questo consente al tuo utente finale di alternare tra parti specifiche di contenuto, ad esempio, desideri mostrare il prezzo mensile rispetto a quello annuale o altri cambi di prezzo simili
  • Popup modale - un modo semplice e pulito per creare popup, per cose come iscrizioni a newsletter o altri contenuti che desideri includere.
  • Orario di apertura - utilizzato per rendere i tuoi orari di lavoro più attraenti e dall'aspetto professionale
  • Google Map - una funzione essenziale per qualsiasi sito per un'attività locale, per garantire che i clienti sappiano dove ti trovi
  • Listino prezzi e box prezzi - il prezzo è, ovviamente, un'altra funzione essenziale se ti occupi di vendita di servizi o pacchetti

La bellezza di questo pacchetto di widget sono le varie strutture dei prezzi, se opti per il pacchetto agenzia, riceverai anche una copia gratuita del plug-in Astra Pro e WP Portfolio oltre a una serie di siti Web di avviamento già pronti per avviare il tuo web design lavoro.

Crocoblock

Questa è una società che è un grande fan di Elementor e ha creato un buon numero di plugin premium come:

  • JETElements - una serie di bellissimi widget per modellare meravigliosamente le tue pagine come tabelle dei prezzi, SVG in linea, timeline, barre di avanzamento, layout in muratura e molto altro ancora, ci sono più di 40 widget tra cui scegliere
  • Menu JET - un modo semplice per creare un Mega Menu facile da usare e personalizzabile
  • JETabs - un ottimo modo per organizzare pagine affollate che richiedono molte informazioni essenziali come le pagine dei prodotti
  • JETWoobuilder - questo è un altro ottimo prodotto che è essenzialmente un ottimo modo per creare pagine WooCommerce che vendono
  • Motore a reazione - questo è un plugin eccellente per creare contenuti dinamici all'interno delle tue pagine, come campi dinamici, meta, link e persino immagini e layout.

Plugin Crocoblock

Tutto sommato, con Crocoblock, hai un unico fornitore in grado di soddisfare tutte le tue esigenze di WordPress. Sia il loro tema Kava, i molteplici widget Elementor, vari plugin e molto altro ancora, tutti disponibili a un prezzo enorme tramite il pacchetto Lifetime, questo è un ottimo affare.  

 

Elementor contro Beaver Builder

Letture consigliate: Beaver Builder vs Elementor - Una guida e un confronto definitivi (2019) 

Esistono molti prodotti diversi per creare siti Web WordPress. Senza alcuna esitazione possiamo dire che questo prodotto è sicuramente uno dei prodotti più popolari e di successo in circolazione, raggiungendo 5 milioni di installazioni attive a settembre 2020.

Ma sicuramente non è l'unico che puoi usare. Ad esempio, mentre i web designer e gli amministratori di siti web hanno una preferenza per il generatore di pagine drag and drop, gli sviluppatori web in genere tendono a preferire framework come Beaver Builder che danno loro una maggiore flessibilità piuttosto che dare loro solo l'opzione supportata dal plugin.

Ci sono molti altri punti da discutere quando si tratta di confrontare Elementor con Beaver Builder. In effetti, abbiamo appena esaminato entrambi questi elementi e creato un confronto completo e una guida definitiva che puoi vedere al link sopra.

Considerazioni finali

Crediamo che Elementor stabilisca il livello quando si tratta di page builder - e lo imposta piuttosto in alto.

Questo è sicuramente uno dei migliori costruttori di pagine in circolazione e altri fornitori si farebbero un favore se guardassero questo prodotto per assicurarsi che, per lo meno, forniscano lo stesso livello di funzionalità di Elementor.

Non solo, ma come designer e sviluppatore la combinazione dell'utilizzo di Elementor e ACF insieme per potenziare i tuoi temi personalizzati ti dà la possibilità di iniziare a creare temi di nicchia, che si rivolgono a settori molto specifici, in un modo che prima era difficilmente possibile.

Crediamo che entrambi questi plugin siano di per sé rivoluzionari, ma insieme: una vera combinazione vincente.

Clicca qui per il prezzo più basso su Elementor

L'autore
David Attard
Autore: David AttardSito web: https://www.linkedin.com/in/dattard/
David ha lavorato nel o intorno al settore online / digitale negli ultimi 18 anni. Ha una vasta esperienza nei settori del software e del web design utilizzando WordPress, Joomla e le nicchie che li circondano. In qualità di consulente digitale, il suo obiettivo è aiutare le aziende a ottenere un vantaggio competitivo utilizzando una combinazione del loro sito Web e delle piattaforme digitali disponibili oggi.

Un'altra cosa... Sapevi che anche le persone che condividono cose utili come questo post sembrano FANTASTICHE? ;-)
Fatti un favore: lasciare un utile commenta con i tuoi pensieri, quindi condividi questo articolo sui tuoi gruppi di Facebook che lo troverebbero utile e raccogliamo insieme i frutti. Grazie per la condivisione e per essere gentile!

Disclosure: Questa pagina può contenere collegamenti a siti esterni per prodotti che amiamo e consigliamo vivamente. Se acquisti prodotti che ti suggeriamo, potremmo guadagnare una commissione per segnalazione. Tali commissioni non influenzano le nostre raccomandazioni e non accettiamo pagamenti per recensioni positive.

Autore / i in primo piano su:  Inc Magazine Logo   Logo di Sitepoint   Logo CSS Tricks    logo webdesignerdepot   Logo WPMU DEV   e molti altri ...