Oggi con questo articolo ti mostro come si realizza un sito web con Elementor in modo completamente pratico.
Non è il solito contenuto che puoi trovare su Youtube oppure nella documentazione di Elementor.
Però questo articolo è un po’ diverso. Perché fino a questo momento non ho mai trovato un contenuto come questo sul web.
In questo articolo (anzi, mini corso) voglio portare un reale contributo a tutte quelle persone che vogliono entrare nel fantastico mondo di Elementor partendo da zero.
Ciò che andremo a scoprire si basa sulla mia esperienza e sul mio processo di esecuzione che applico ogni giorno su diversi clienti.
Si esatto, ti mostrerò il mio processo di esecuzione con l’utilizzo del mio tools preferito per sviluppare siti web per rendere la fase di sviluppo rapida ed efficiente.
Personalmente progetto e specialmente sviluppo su foglio bianco.
Capirai molto presto di cosa intendo, per foglio bianco.
É un termine che utilizzo spesso per far capire che non uso temi già realizzati ma progetto e creo tutto da zero, usando solamente la mia creatività per raggiungere l’obiettivo stabilito.
Ci sono diversi obiettivi che si possono prefissare per singolo progetto e dobbiamo seguirlo tramite una corretta progettazione comunicativa.
In breve..
Per progettazione comunicativa intendo, tutto ciò che si inserisce in una pagina web dal semplice colore, il pulsante, l’icona e fino ad arrivare alle parole.
Tutto si comunica.
Ecco alcuni obiettivi finali che mi vengono in mente, che un progetto online può raggiungere:
- la vendita o la sola scoperta di un qualsiasi servizio offerto
- la compilazione di un modulo di contatto per determinate richieste
- la lettura degli articoli per un blog
- la vendita di semplici prodotti di un shop online
- l’iscrizione alla newsletter per un possibile sconto oppure altri tipologie di vantaggi
Ogni progetto può avere uno o più obiettivi.
Ma nel caso di più obiettivi, si dovrebbe stilare un lista di obiettivi che reputiamo: dal più importante al meno importante.
Quindi la cosa più importante che dobbiamo tenere a mente durante la progettazione (e anche mentre sviluppiamo) è avere ben chiaro l’obiettivo del progetto in modo gerarchico.
Non preoccuparti dopo aver chiarito questo abbiamo fatto il 50% del lavoro che verrà dopo.
In molti punti prenderò per scontato che conosci Elementor e com’è composto un sito web.
Ora possiamo partire!
Scopri un approccio unico per la creazione di sito web con Elementor
Dopo aver eseguito l’installazione semplicemente di Elementor Basic o/e anche dell’inserimento della cartella zip di Elementor PRO possiamo entrare nel Theme Builder.
Su come funziona l’installazione e che differenza c’è tra i due piani, può trovare molti contenuti sul web, anche sul mio blog in uno dei miei ultimi articoli che ho pubblicato.
Il Theme Builder è il vero cuore per un sviluppatore no-code di Elementor.
Come avrai capito non serve avere competenze o semplici conoscenze di codici nativi, ma consiglio sempre di studiare anche il 10% di HTML e di CSS.
Che potrebbe essere molto utile per risolvere alcuni problemi e personalizzare le pagine.
Creare un Design System con Elementor: Risparmia tempo e velocizza lo sviluppo
Questo primo step da fare quando si sviluppa è l’inserimento dei dati di progetto del Design System.
Ma prima di passare a questo step dobbiamo avere chiaro dalla progettazione o comunque avere in testa, dati come questi: i colori e la dimensione dei titoli e testi vari.
Questi sono i dati basilari da cui partire.
Se non abbiamo questo non serve procedere con questo processo esecutivo.
Questi dati servono per velocizzare in modo efficace il nostro lavoro di sviluppatori.
Per costruire il Design System dovremmo entrare nella funzione Theme builder e aggiungere in qualsiasi elemento che può essere:
l’header, il footer oppure una semplice pagina singola.
Non importa, basta che entriamo nell’editor di sviluppo e andiamo nella zona impostazione dell’intero sito web.
Ovviamente questi dati inseriti verranno replicati automaticamente in ogni sezione o pagina creata da zero, in sostanza ovunque nel sito web in cui stiamo lavorando.
Basterà cliccare l’icona delle impostazioni predefinite presente accanto alla scelta dei colori e dello stile di qualsiasi elemento inserito, come in questa immagine.
Ma prima vediamo come riusciamo a vedere i dati del Design System del sito web.
Entrando nel editor di sviluppo, clicchiamo sull’icona con tre linee orizzontali in alto a sinistra, e andiamo nelle “impostazioni del sito web” (prima voce).
Questa schermata si divide in 3 macro sezioni: sistema di progettazione, stile di tema e impostazioni.
Non tutte le voci interne a queste macro sezioni sono utili.
Però andremo in ordine di sequenza per inserire ogni singolo dato necessario.
Partiamo dal primo, colori globali.
Qui inseriamo chiaramente i primi dati necessari ai colori che comporrà la palette del progetto.
Dobbiamo inserire tutti i colori per avere tutto salvato per la fase di sviluppo del sito web.
Compreso il bianco e il nero, che sono colori considerati standard.
Il secondo sono i caratteri globali.
Invece qui, dobbiamo inserire lo stile dei font con le dimensioni divise sia per singolo testo (h1, h2, h3 ..) sia per i dispositivi digitali (desktop, tablet e smartphone) per offrire la migliore esperienza.
Quest’ultima funzione è necessario cliccare sulla iconcina accanto alla voce “Dimensione” e apparirà una tendina che può portare al cambio di device, per ottenere un sito web responsive.
In questa sezione dedicata ai testi, ti consiglio di nominare ogni singolo dato con il numero della dimensione del font della versione desktop.
Perché solo desktop?
Perché nello sviluppo partiamo del device più grande e quindi in automatico il testo diventa responsive per device selezionato.
Ovviamente inserire il dato anche dello spazio di interlinea con l’unità di misura “px”.
Ci sei fin qui? (Lo so c’è molto da sapere)
Poi proseguiamo verso la seconda macro sezione.
In questa sezione dobbiamo modificare solamente le prime due voci: tipografia e pulsanti.
I primi dati da inserire sono la scelta dei diversi caratteri che andiamo ad aggiungere alle pagine web del sito, come: H1, H2, H3, H4 e infine “p”, il paragrafo di testo.
Non andiamo solamente inserire le dimensioni dei testi presenti nella sezione dei “caratteri globali” ma possiamo anche inserire i colori globali inseriti precedentemente.
Scorrendo, arriviamo alla zona dedicata allo stile dei pulsanti.
Qui dobbiamo scegliere lo stile e il colore del testo del pulsante standard, senza lasciare per scontato il contrasto con lo sfondo del pulsante.
Non finisce qui la personalizzazione..
Possiamo inserire al pulsante le ombreggiature e le spaziature interne del pulsante standard.
Ora passiamo alla terza sezione, dedicato alle impostazione generali.
Il primo che andiamo a personalizzare è la denominazione del sito.
Dove dobbiamo inserire diverse cose veloci come il nome del sito web e possiamo inserire anche il logo del brand in due formati e posizioni visivi diversi.
Il logo viene visualizzato sia nelle varie pagine del sito web con la dimensione (350 x 100 px) sia nel tab del browser con la dimensione (512 x 512 px).
Infine, dobbiamo personalizzare la larghezza base da cui partire per il device desktop e anche la spaziatura laterale per il device smartphone.
Consiglio sempre di impostare una larghezza variabile tra i 1000 px fino ai 1300 px, non possiamo superare mai queste dimensioni perché si rischia, in certi device, di tagliare lateralmente le pagine del sito web.
Nessun problema questo inserimento della larghezza rimane standard ed è un punto di partenza per lo sviluppo.
Di seguito possiamo inserire a nostra scelta la dimensione che desideriamo direttamente nell’editor delle singole sezioni che andiamo a sviluppare.
È tutto chiaro fin qui?
Utilizzo dei blocchi in Elementor: Scopri i trucchi per una migliore efficienza
Ci sono davvero molti, anche troppi, blocchi su questo fantastico strumento.
La scelta non è facile.
Abbiamo a disposizione dei blocchi con funzioni diverse ma anche simili, in Elementor.
Ma si possono aggiungere altrettanti plugin per riempire con molti altri blocchi il Theme Builder, per avere siti web sempre più funzionali e belli da vedere.
Ho creato un kit tools apposta solo per la scelta dei plugin che possiamo incorporare ad Elementor.
Ci sono alcuni blocchi che vengono usati per forza in modo ripetitivo.
Come i titoli e i vari testi di paragrafo, anche le immagini e le icone.
Proprio per questa ripetizione ho capito subito dopo che dobbiamo realizzare pagine web super performanti con una buona velocità di caricamento.
Quindi il modo migliore è utilizzare un unico blocco che può essere versatile per ogni situazione di sviluppo.
Il blocco di cui sto parlando è “riquadro icona” o “riquadro immagine”.
Questi due blocchi sono identici come funzionamento, però la loro unica differenza è l’inserimento dell’icona o dell’immagine.
Il loro vantaggio è la possibilità di inserire il titolo e il paragrafo di testo assieme anche senza l’inserimento di nessuna icona o immagine.
E sono completamente personalizzabili dall’impostazione degli spazi, dei colori e stili di testo.
Utilizzo questo blocco praticamente in ogni sezione in cui inserisco titolo e testo.
Quindi la miglior soluzione per ottenere un sito web veloce è l’inserimento di blocchi che hanno più funzioni in una e ci permettono.
Ma senza dimenticare che questo modo di sviluppare ci permette per velocizzare la realizzazione.
Questa regola non vale sempre.
Ci sono casi in cui non abbiamo scelta di usare più blocchi seguendo l’idea di progetto.
Concludo questo step con il dire che Elementor è in costante aggiornamento con l’aggiunta di nuovi blocchi sempre più utili per sviluppare solamente con questo tool.
Molto presto pubblicherò altri articoli sui nuovi blocchi.
Verifica del responsive design: Assicurati che il tuo sito si adatti a tutti i dispositivi
Forse non non ho mai approfondito questo argomento.
In fase di progettazione parto sempre dal device desktop.
Avendo l’occhio e scelta della struttura desktop, verso il device più piccolo, cioè lo smartphone.
Ovvero il dispositivo digitale che dobbiamo considerare quando si realizza qualsiasi progetto digitale che offriamo agli utenti.
Questa modalità di costruzione del progetto per molti professionisti potrebbe essere un errore per il successo del risultato.
Mi posso permettere questo processo creativo perché dopo anni di progetti sviluppati con Elementor (e non solo), riesco già in fase di progettazione a sapere nella mia testa come verrà il risultato online.
Con la pratica capirai sempre di più che questa modalità di progettazione e successivo sviluppo è molto semplice.
Ovviamente questo è solo il mio parere che si basa solamente sulla mia esperienza lavorativa di più di 20 progetti completati.
Come facciamo a rendere un sito web responsive con Elementor?
Concretamente ci viene in aiuto il nostro Design System e il resto fa tutto l’editor di questo strumento.
La scelta delle dimensioni inserite dal Design System del progetto e con la valutazione degli spazi inseriti dovremmo ottenere il risultato ottimale nei tre device.
Ho creato apposta un sistema di dimensionamento del carattere e puoi vedere in questo file Google Sheet la bussola che mi porto dietro per realizzare ogni singolo sito web.
Però..
Non dobbiamo prendere per scontato questo concetto di automazione responsive.
Ma dobbiamo sempre controllare su come risponde i dati inseriti con l’inserimento dei vari elementi sul device più piccolo, in base al testo e gli altri elementi inseriti.
Ormai da molto tempo tutti noi utilizziamo sempre il cellulare per navigare ed ecco il motivo per cui parliamo spesso del concetto di mobile first.
Quindi è importante!
Alla fine dobbiamo fare un check del responsive del sito web.
Nell’editor dobbiamo cliccare su una piccola icona in basso a sinistra, che rappresenta lo schermo di un computer e di un cellulare.
Di seguito, apparirà in alto della schermata della pagina un banner con 3 icone dei 3 device di utilizzo.
In questo modo possiamo verificare l’effettiva riuscita del responsive, con l’aggiustamento dei vari valori di spaziatura per rendere il tutto visibile per i device più piccoli.
Ovviamente gli spazi impostati nella versione desktop, non potranno essere identici agli altri device.
Quasi sicuramente dovresti dimezzare, se non di più, i valori in px dei diversi spazi verticalmente e orizzontalmente.
La funzione di condizione in Elementor: Personalizza le tue pagine come mai prima
Le funzioni non finiscono qui!
(mi dispiace!)
Entra in campo la funzione che preferisco di più su Elementor.
Ovvero, la funzione di condizione ci permette di scegliere su quale pagina vogliamo che sia mostrata e navigata la pagina sviluppata.
Ma non solo..
Specialmente per l’header e per il footer la funzione di condizione può essere mostrata sia su tutte le pagine ma anche su alcune delle pagine del sito web.
Invece, per le semplici pagine possono essere mostrate in una sola pagina web inserita nella sezione dedicata alla pagine.
Facciamo un esempio per chiarire alcuni dei casi in cui è utile questa funzione.
Quando vendiamo un prodotto o un servizio e dobbiamo far in modo di concentrare l’attenzione degli utenti verso l’obiettivo finale.
Quindi per evitare elementi di distrazione come il menu di navigazione e i link vari del footer.
È necessario sviluppare più header e footer per le diverse pagine del funnel di vendita.
In poche parole, questa funzione serve per perfezionare la personalizzazione ogni singola pagina.
Ma non solo, ci sono altri casi per sfruttare al massimo questa funzione.
__
Siamo arrivati alla conclusione di questo articolo.
Spero di averti dato degli spunti e un manuale di utilizzo per la realizzazione dei tuoi siti web con l‘aiuto di Elementor.
Ovviamente non basta questo articolo per farti capire come funziona realmente Elementor.
Ma nel caso ti interessasse approfondire questo argomento, puoi contattarmi e vediamo come posso aiutarti!
Ci vediamo al prossimo articolo!
