Ti piacerebbe scoprire come personalizzare un tema WordPress con il Plugin elementor ?
La personalizzazione del tema WordPress è una delle attività principali durante la creazione di siti Web WordPress. Dal momento che controlla il design di un sito web, è qui che molti professionisti trascorrono la maggior parte del loro tempo.
La creazione di un tema WordPress personalizzato di solito implica lavorare con i file del tema e un editor di codice. Le modifiche al layout avvengono nei file modello, le modifiche al design tramite CSS. Inoltre, dovrai aggiornare costantemente la finestra del browser per mostrare le tue personalizzazioni, il che può essere un po 'macchinoso.
Fortunatamente, con Elementor, questo processo diventa estremamente facile, quindi potresti volerlo controllare.
Ma prima scopriamo insieme Come installare un blog Wordpress passi 7 et Come trovare, installare e attivare un tema WordPress sul tuo blog.
Quindi, tornando al perché siamo qui.
Cos'è un tema WordPress
Un tema WordPress è, in sostanza, una raccolta di modelli che definiscono l'aspetto visivo di un sito Web WordPress.
Il tema WordPress comprende tutto ciò che influisce sul design di un sito Web, dalle intestazioni e piè di pagina alla combinazione di colori, layout e altro.
Ci sono molti temi disponibili, sia gratuiti che premium, che si adattano a quasi tutti i settori siti web di fotografia, siti web di palestre, siti web per parrucchieri, siti web di dirittoE altro ancora.
Perché personalizzare un tema WordPress?
Uno dei motivi principali per creare un sito web è promuovere la tua attività . Quale modo migliore per farlo che farlo creare un sito Web unico che promuove lo stile e il design dell'azienda.
Riuscite a immaginare Amazon, eBay o Google come sono senza il loro design unico?
Certo che no, e questo è uno dei motivi per cui vogliamo personalizzare un tema WordPress. Vogliamo renderlo unico e adattarlo al messaggio della nostra azienda.
Inoltre, a volte, o meglio, spesso, ti imbatti in un tema WordPress afflitto da un design scadente, colori che non vanno bene insieme o un tema che è troppo pesante e influisce solo sulle prestazioni del sito. ragnatela. Il tema WordPress potrebbe essere potente tranne per quella cosa che ti dà fastidio. Personalizzarlo e cambiare questa cosa potrebbe risolvere tutti i tuoi problemi e creare migliore esperienza utente.
Come personalizzare un tema WordPress
Esistono diversi metodi per personalizzare un tema WordPress.
- Manualmente, tramite il personalizzatore di WordPress
- Con codice
- Con Elementor
Come personalizzare manualmente un tema WordPress
Puoi personalizzare il tema WordPress di tua scelta tramite il Personalizzatore WordPress integrato. Se lo fai senza codice, spesso sei limitato in ciò che puoi modificare. Alcuni Temi WordPress premium ti consente più opzioni di personalizzazione, ma in sostanza non ci sono molte opzioni di design per te.
Prima di approfondire quest'area, vorremmo sottolineare che quando personalizzi un tema WordPress esistente, è meglio che tu lo usi un tema figlio e non il tema principale.
Tema figlio di WordPress
Un tema figlio è un tema WordPress che ha esattamente le stesse funzioni e caratteristiche di un altro tema WordPress, il tema principale. Il tema figlio viene utilizzato per personalizzare e modificare il tema in modo sicuro, senza influire sul tema principale e senza perdere la possibilità di aggiornarlo.
Personalizzatore di temi WordPress
Quindi, ora che sappiamo che è meglio lavorare con un tema figlio, impariamo come personalizzare un tema con il personalizzatore di WordPress. Per accedervi, vai sulla tua dashboard, fai clic su Apparence sul lato sinistro e scegli Personalizzare.
Le caratteristiche principali che puoi modificare con questo Customizer sono le seguenti:
Aggiunta di titolo, logo e icona di un sito Web
Per aggiungere o modificare il tuo titolo, logo o icona, puoi semplicemente andare al pannello Identità del sito web. e scegli ciascuno di questi elementi per modificarli.
Cambiare i colori del tema WordPress
Alcuni Temi WordPress ti permetterà di cambiare i loro schemi di colori, ma non tutti, e di solito lo sono Temi WordPress premio. Se il tuo tema WordPress ti consente di cambiare la combinazione di colori, vedrai questa opzione quando accedi al Personalizzatore.
Aggiunti menu di navigazione
Il Customizer ti consente anche di aggiungere e modificare facilmente i menu di navigazione del tuo sito web.
Come personalizzare un tema WordPress con il codice
Noterai che nella scheda Aspetto hai la possibilità di scegliere l'editor del tema. Cliccandoci sopra ti verrà visualizzata una finestra con il codice del tema. Questa opzione richiede una buona conoscenza della codifica CSS e non è consigliata ai principianti.
Qui avrai accesso a file come style.css, function.php, ed è proprio per questo scenario che avrai bisogno di un child theme per non rompere il tuo sito web.
L'altro modo per personalizzare il tuo tema tramite la codifica è caricare i file utilizzando una soluzione FTP. Il processo prevede la creazione di credenziali FTP tramite il tuo provider di hosting, il download e l'installazione di una soluzione FTP (come FileZilla), l'accesso al tuo account e la modifica dei tuoi file, che poi caricherai tramite lo stesso. Soluzione FTP.
Scopri la nostra guida su Come installare WordPress con FileZilla
A meno che tu non abbia familiarità con la codifica, non consigliamo questa opzione.
Personalizza facilmente un tema WordPress con Elementor
Puoi farlo direttamente dall'interfaccia utente. Non è necessario modificare una singola riga di codice o ricaricare una finestra del browser, nemmeno una volta.
Elementor ti consente di modificare ogni elemento del sito Web in modo rapido e semplice con pochi clic del mouse e puoi persino ottimizzare queste funzionalità per la piattaforma mobile.
Elementor rende questo processo molto più semplice utilizzando contenuti dinamici e consentendoti di visualizzare in anteprima le tue pagine. In questo modo, puoi vedere immediatamente come le modifiche al design influenzeranno il tuo sito web e il tuo contenuto.
Personalizza l'intestazione e il piè di pagina
Elementor ti offre una flessibilità completa quando si tratta di progettare intestazioni e piè di pagina. Sappiamo tutti quanto può essere noioso, che hai un tema WordPress e non puoi cambiare un singolo aspetto del design dell'intestazione o del piè di pagina. Hai bisogno di temi specializzati, plugin, ecc.
Con Elementor è facile.
1. Creare un modello di intestazione
Prima configura un nuovo modello di intestazione. Per fare ciò, vai su Elementor> I miei modelli.
Qui un modo per iniziare è premere il pulsante Aggiungi nuovo in alto. Nella schermata successiva, utilizza il menu a discesa per selezionare Intestazione come tipo di modello da progettare.
Puoi anche raggiungere questa schermata facendo clic sulla scheda Intestazione dalla schermata precedente e quindi premendo il grande pulsante verde che appare.
Preselezionerà l'intestazione come tipo di modello. In ogni caso, è necessario aggiungere un nome appropriato per il modello (in modo da sapere di cosa si tratta in seguito) e quindi continuare facendo clic su Crea modello.
Ti porterà qui.
Con Elementor Pro, puoi scegliere tra blocchi di intestazione predefiniti. Questi sono modelli di design che puoi utilizzare come punto di partenza per il tuo design, che è ciò che faremo in questo caso.
Quando passi il mouse su un blocco di intestazione, fai clic su inserire ti permette di iniziare a progettarlo immediatamente. Altrimenti, clicca prima sull'immagine per visualizzare una versione più grande. Quindi puoi sempre premere inserire sopra.
Altrimenti, se vuoi iniziare da zero, chiudi la finestra facendo clic X nell'angolo in alto a destra.
2. Modificare il design di base dell'intestazione
Dopo aver inserito la nuova intestazione, la prima cosa che noterai è che il logo e il menu che abbiamo configurato in precedenza sono già presenti.
Questo è esattamente il motivo per cui li mettiamo insieme e parleremo di come personalizzarli. Tuttavia, vediamo prima come personalizzare la sezione dell'intestazione stessa.
Per fare ciò, passa il mouse sopra di esso e fai clic sul pulsante di modifica in alto. Si apre un elenco di opzioni di modifica sulla sinistra.
Ecco cosa puoi controllare nei diversi menu:
- disposizione - Controlla la larghezza della sezione, la dimensione dello spazio tra le colonne, la sua altezza, la colonna verticale e il posizionamento del contenuto, il tag HTML assegnato e la struttura generale.
- Style - Qui puoi cambiare il colore di sfondo incluso il file effetti al passaggio del mouseanche aggiungi immagine o video se lo desideri, aggiungi effetti di sovrapposizione, bordo e divisore e modifica le impostazioni tipografiche.
- Avanzate - Questa parte ti consente di aggiungere attributi CSS come margin e z index, animazioni, ID e classi. Ti consente anche di rendere la sezione appiccicosa e di controllare le impostazioni reattive, nonché di aggiungerne alcune CSS personalizzato.
Tutto quanto sopra è abbastanza autoesplicativo e otterrai rapidamente ciò che desideri.
3. Personalizza gli elementi dell'intestazione
Tuttavia, non solo puoi modificare la sezione dell'intestazione nel suo insieme, ma anche gli elementi inclusi in essa. Ad esempio, per personalizzare il logo del sito Web, è sufficiente fare clic su di esso. Anche questo ti fornirà le opzioni di modifica sul lato sinistro.
Nel caso del logo, questo ti offre le seguenti opzioni:
- Contenuti - Modificare le dimensioni dell'immagine, l'allineamento e il luogo a cui è collegata.
- Style - Controlla larghezza e altezza, aggiungi effetti CSS ed effetti al passaggio del mouse, includi bordo e ombra se lo desideri.
- Avanzate - Qui troverai essenzialmente le stesse opzioni della sezione dell'intestazione.
Utilizza le impostazioni per personalizzare il logo nel modo in cui desideri che venga visualizzato correttamente nell'intestazione. Tieni inoltre presente che ogni articolo ha il proprio tipo di opzioni, quindi assicurati di controllare ognuna.
4. Aggiungi elementi
Naturalmente, con Elementor puoi anche aggiungere elementi all'intestazione. Basta cliccare sul simbolo in alto a destra per vedere cosa è disponibile.
Quando si modifica un modello di intestazione, Elementor visualizza automaticamente i blocchi pertinenti in cima all'elenco, il che ha più senso nelle circostanze. In questo caso, si tratta di elementi come il logo del sito Web, il menu di navigazione e il titolo del sito Web.
Quindi, ad esempio, se desideri aggiungere il titolo del sito Web accanto al logo, trascinalo e rilascialo su di esso. Tuttavia, il modello di intestazione che abbiamo attualmente scelto ci consente di aggiungerlo sopra o sotto il logo. Ma è un problema che sarà facilmente risolto.
In un caso come questo, passa il mouse sopra l'intestazione e usa il simbolo più -+-per aggiungere una sezione sopra.
Fare clic qui sul pulsante viola per scegliere un design a tre colonne.
Quindi trascina gli elementi dalla sezione dell'intestazione esistente nella nuova sezione e aggiungi il titolo del sito web al centro.
Ma aspetta, lo stile è totalmente diverso! nessun problema. Basta fare clic con il tasto destro sull'intestazione esistente e selezionare Copia. Quindi fare clic con il tasto destro sulla nuova sezione e fare clic qui su Incolla stile. Elementor applicherà quindi lo stile della sezione esistente, che potrai chiudere in seguito.
Puoi fare lo stesso processo con qualsiasi altro elemento dell'intestazione e, ovviamente, con tutti gli altri elementi inclusi in Elementor.
Personalizza un modello di post unico
In Elementor, puoi anche personalizzare un singolo modello di post. Ecco come :
1. Crea un nuovo modello
La creazione di un modello funziona nel solito modo. Tuttavia, questa volta scegli Singolo come tipo di modello. Quindi, di seguito, scegli il modello unico che desideri modificare. In questo esempio, quello di Post.
Se desideri creare un nuovo design di pagina, modifica la tua pagina 404 (ne parleremo più avanti) o modifica un tipo di post personalizzato particolare, sceglieresti qualcos'altro. In entrambi i casi, inserisci un nome e continua.
Nella schermata successiva, puoi scegliere come al solito dai modelli predefiniti. Tuttavia, in questo caso vogliamo creare un nuovo modello da zero. Quindi fai clic sulla X in alto a destra per chiudere questa finestra.
2. Configurare l'anteprima
Quindi imposta la finestra di anteprima su un post esistente. Puoi farlo facendo clic sull'icona dell'occhio nella parte inferiore delle opzioni dell'editor, quindi Impostazioni.
Nel menu che si apre, sotto Anteprima contenuto dinamico, scegli Pubblicare. Dopodiché, nella riga successiva, puoi cercare e scegliere un post esistente per nome.
Dopo averlo fatto, tocca APPLICA & Anteprima. Anche se non sarai in grado di vedere nulla a questo punto (poiché non c'è nulla sulla pagina), d'ora in poi dirà a Elementor di utilizzare i dati di questo post. Presto vedrai cosa significa.
3. Creiamo la sezione sopra
Innanzitutto, creeremo la sezione sopra. Qui di solito troverai cose come il titolo del post e metadati come autore, data e categoria.
Il primo passo è fare clic sul segno + e creando una singola sezione di colonna.
Quando lo fai, nella sezione layout, hai la possibilità di controllare la sua larghezza, altezza, posizionamento e stile. In questo caso, non c'è molto da fare qui. Inoltre, non preoccuparti, puoi sempre tornare indietro e apportare modifiche in seguito.
Quindi trascina il widget del titolo del post nella nuova sezione.
Quando lo fai, assicurati di utilizzare tutte le opzioni disponibili per regolare il design e il layout a tuo piacimento. Ad esempio, ecco le mie impostazioni per farlo:
C'è anche una caratteristica interessante che dovresti imparare. Quando fai clic sul simbolo della chiave del titolo del post, puoi aggiungere contenuto statico prima e dopo i tuoi dati dinamici.
Ad esempio, se crei un modello per una determinata categoria di post come Notizie o Ricette, puoi aggiungerlo al titolo del post in questo modo:
In questo modo, i dati verranno visualizzati per ogni post in quella categoria. Non lo userò a questo punto, ma ho pensato che fosse una nota a margine importante per te.
Sotto il titolo del post inseriremo il file Post Info widget di per visualizzare i metadati del post.
Ecco le impostazioni che utilizzo:
Inoltre, ho utilizzato le opzioni di stile per adattare il design al resto della pagina. Assicurati di fare lo stesso.
4. Prepara il corpo del palo
Dopo l'intestazione, è il momento di creare il corpo della pagina. Se desideri che questa parte abbia un design diverso dall'intestazione, dovrai impostare una nuova sezione. Tuttavia, lo mantengo semplice, quindi non devo.
La prima cosa che vogliamo inserire è l'immagine in primo piano. Per fare ciò, puoi posizionare il widget con lo stesso nome sotto ciò che è già presente nella pagina.
Fondamentalmente non ho cambiato nessuna delle impostazioni, ho lasciato tutto così com'è.
Quindi è il momento di pubblicare il contenuto. Anche qui hai un blocco corrispondente.
Noterai che per l'immagine in primo piano e il contenuto del post, Elementor estrae automaticamente ciò che è già sul sito web. Apporta le modifiche necessarie al design del nuovo blocco, ad esempio giocando con le impostazioni tipografiche.
A parte questo, è tutto. Non c'è molto lavoro da fare qui per poter passare all'ultima parte.
5. Configurare il piè di pagina
In questo caso, vogliamo che il piè di pagina mostri il profilo dell'autore, le opzioni di condivisione e i commenti del lettore. Per fare ciò, prima di tutto, dobbiamo creare una nuova sezione con due colonne. Per creare più spazio per il profilo dell'autore, puoi impostarlo su un layout 66.33.
Dopo quel posto il widget Box dell'autore nella sezione di sinistra.
Assicurati di personalizzare lo stile in base alle tue esigenze. Ho aggiunto un po 'di colore di sfondo e ho regolato leggermente le impostazioni tipografiche.
Dopodiché, è il momento di aggiungere il blocco dei pulsanti di condivisione sul lato destro.
Puoi vedere le mie impostazioni nello screenshot qui sopra.
Dopodiché, non resta che creare una sezione un'altra colonna in basso e trascinare il widget Commenti post al suo interno.
(A proposito, se hai problemi a trovare uno di questi widget, usa la funzione di ricerca).
Apporta le modifiche che ritieni necessarie alla sezione dei commenti (l'ho lasciata così com'è) e sei pronto per pubblicare. Ecco il design finito:
Personalizza il modello di archivio
1. Configura il tuo modello di archivio WordPress
Ormai conosci già la soluzione per creare nuovi modelli. L'unica differenza è che in questo caso sceglierai Archivio come tipo di modello.
Dopodiché, come al solito, ottieni un numero di blocchi tra cui scegliere o puoi anche creare il tuo modello da zero. Tuttavia, per gli archivi ne hai approssimativamente solo due widget Elementor che sono comunque importanti.
2. Definire il titolo dell'archivio
Il primo blocco di cui voglio parlare è il titolo dell'archivio Titolo dell'archivio.
Oltre alle normali impostazioni sotto Stile e Avanzato, puoi trovare un'opzione importante quando fai clic sul simbolo della chiave sotto Titolo.
Qui puoi abilitare e disabilitare se Elementor mostra il tipo di archivio sulla pagina come la parte in cui dice Autore: di seguito. Questo avviene tramite il pulsante sotto Includi contesto.
A proposito, come al solito, puoi visualizzare in anteprima diversi archivi utilizzando le impostazioni di anteprima (Simbolo dell'occhio> Impostazioni). In questo modo puoi vedere il design per categorie, tag, autori e altro. Tienilo a mente.
3. Utilizzare il blocco delle pubblicazioni dell'archivio
Il secondo widget importante per gli archivi è Archive Posts. Questo porta tutti i post appartenenti a qualsiasi archivio in una pagina. Quando scegli un modello, sono già presenti, ma puoi anche aggiungerli facilmente da solo con questo blocco.
Diamo un'occhiata alle opzioni che ti offre per personalizzare le tue pagine di archivio:
- Pelle - Scegli di visualizzare i tuoi post in un design classico o in stile carta.
- colonne - Determina il numero di colonne in cui vengono visualizzati i tuoi post.
- Mostra immagine - Attiva le immagini in primo piano nelle pagine di archivio
- Muratura – Visualizza o meno elementi in muratura.
- Dimensione dell'immagine - La dimensione dell'immagine che Elementor dovrebbe usare nelle pagine di archivio.
- Titolo - Vuoi visualizzare i titoli dei post o no?
- Tag HTML del titolo - In caso affermativo, quale tag HTML dovrebbe essere avvolto attorno ad esso?
- Estratto - Includi estratti dai tuoi post o mostra solo il titolo.
- Lunghezza estratto - Determina la lunghezza degli estratti.
- Metadati - Definisce i metadati dei post disponibili per i visitatori.
- Separatore tra - Simbolo separatore tra le informazioni sui metadati.
- Scopri di più - Includere un collegamento "leggi di più", sì o no?
- Distintivo - Ti consente di aggiungere ulteriori informazioni ai post, come categorie e tag.
- Distintivo di tassonomia - Qui puoi decidere quali informazioni includere.
- Avatar – Con questo puoi cambiare l'immagine del profilo degli autori degli articoli
Oltre a quanto sopra, hai alcune altre opzioni. Sotto paging, è possibile definire come gestire la paginazione dell'archivio. Ad esempio, come visualizzarlo, il numero di pagine da includere e l'allineamento del testo.
Infine, Tecnologia consente di impostare il messaggio da visualizzare quando un visitatore atterra su un archivio vuoto. Tutto il resto dovrebbe essere familiare. Tieni presente che le opzioni di stile cambiano a seconda della skin che hai scelto.
4. Controllare il numero di pubblicazioni per archivio
Una breve nota sui modelli di archivio. Per modificare il numero di post che appaiono in un archivio (o sulla pagina del tuo blog), devi farlo in WordPress sotto Impostazioni> Lettura.
Qui, inserisci il numero di post che vuoi che i tuoi visitatori vedano.
Personalizzazione facile Tema WordPress con Elementor
La personalizzazione dei temi WordPress è il pane quotidiano di molti professionisti. Sebbene questo di solito implichi molta codifica e modifica dei file, con Elementor questo non è più necessario.
Come hai visto sopra, il plugin è un vero e proprio editor di temi WordPress. Ti permette di personalizzarne ogni parte dalla sua interfaccia utente. Puoi modificare l'intestazione del sito web, il piè di pagina, i modelli di pagina e di post, i modelli di archivio e altro ancora.
Con la possibilità di utilizzare contenuti dinamici e visualizzare in anteprima qualsiasi parte del tuo sito web, puoi implementare tutte le personalizzazioni di tendenza
In breve, Elementor semplifica la personalizzazione del tuo tema WordPress. Invece di apportare meticolosamente modifiche con dozzine di file e centinaia di righe di codice, puoi eseguire rapidamente tutto in un unico posto.
Ottieni Elementor Pro ora!
Conclusione
Ecco ! Questo è tutto per questo articolo che ti mostra come personalizzare un tema WordPress con Page Builder Elementor. Se hai dubbi su come arrivarci, faccelo sapere all'interno commentaires.
Tuttavia, puoi anche consultare le nostre risorse, se hai bisogno di più elementi per realizzare i tuoi progetti di creazione di siti Internet, consultando la nostra guida su Creazione di blog WordPress o quello acceso Divi: il miglior tema WordPress di tutti i tempi.
Ma nel frattempo, condividi questo articolo sui tuoi diversi social network.
...
