Guida creare template elementor ed astra

Come creare un sito web responsive con Elementor ed il tema Astra

Come creare un sito responsive partendo dal tema Astra. Questo tutorial ci mostra come creare un sorprendente sito web responsive senza inserire alcuna riga di codice e utilizzando Elementor ed il tema Astra.

La creazione di un sito Web seguendo questo tutorial non richiede competenze di programmazione e vengono utilizzati il tema Astra gratuito, Elementor ed Elementor Pro.

Nel video, viene mostrato come creare il sito Web completo, sezione per sezione. Questo tutorial, tuttavia, è incentrato sui passaggi per personalizzare il sito Web in modo che diventi responsive al 100%. Se pensate che creare un sito web mobile responsive richiede migliaia di righe di codice, ripensateci. Qui si vedrà il modo in cui Elementor crea un sito Web sbalorditivo che viene visualizzato perfettamente su ogni dispositivo.

Seguendo questo tutorial passo dopo passo, non solo sarai in grado di creare questa stupefacente pagina:

Creare template responsive con elementor ed astra theme

Sarà anche spettacolare su qualsiasi dispositivo mobile:

Tema responsive con Elementor ed Astra

Ecco i passaggi per l'impostazione di uno stile specifico per dispositivi mobile:

Punto 1: rendere responsive i titoli della pagina

La differenza di larghezza dello schermo tra desktop e dispositivi mobile è notevole. Ciò significa che se hai unintestazione progettata per desktop, spesso, nel passaggio al mobile diventa troppo grande. Potrebbero esserci anche problemi di allineamento e può capitare di dover cambiare l'allineamento da sinistra a centro per fare in modo che il design rimanga bilanciato durante la transizione nella visualizzazione mobile.

Nel tutorial vengono ridotte le dimensioni delle intestazioni in modo che non occupi l'intero schermo dei dispositivi mobile e vengono allineati anche i titoli al centro. Questo passaggio dovrebbe essere fatto con tutte le intestazioni presenti nella pagina.

 

Template responsive elementor con astra

Punto 2: aggiustare il padding ed i margini per la versione mobile

Un margine sinistro di 20 pixel può dare un effetto nel desktop e totalmente differente nei dispositivi mobile. Le regolazioni dei margine e padding sono facilmente eseguibili con la scala di dimensioni trascinabili in Elementor.

Imposta nuovi margini più ampi per i titoli, le immagini e gli altri widget della pagina in modo che lo spazio sia visualizzato su tutti i lati degli elementi. Dovresti anche assicurarti che la spaziatura non sia troppo ampia visto che a volte può avere una dimensione eccessiva.

Template responsive creato con Elementor ed Astra

Punto 3: regolazione dell'editor di testo per il mobile

Come puoi vedere nel video, il widget dell'editor di testo è un'altra caratteristica comunemente usata in Elementor che richiede regolazioni specifiche per essere responsive. Nel nostro esempio, centriamo il testo e ne aumentiamo la larghezza e la dimensione del carattere. Viene anche impostato un padding maggiore per allontanare il testo dal bordo sinistro.

Punto 4: regolazione dei margini negativi per la visualizzazione nei dispositivi mobile

Questo potrebbe essere un po' avanzato per i principianti, ma l'utilizzo dei margini negativi è comunemente usato dai progettisti web che usano Elementor, specialmente per ottenere due diversi widget da sovrapporre per creare design interessanti.

In questo tutorial, la regolazione manuale del margine negativo viene utilizzata per ottenere l'allineamento dell'immagine con il testo.

Impostare i margini nel template creato con Elementor ed Astra

Punto 5: invertire le colonne su mobile

Il layout di pagina in Elementor è stato creato in modo tale che le sezioni a più colonne vengono suddivise automaticamente nella transizione verso il dispositivo mobile. In questo modo, nella visualizzazione mobile, ogni colonna riceve la propria riga separata e occupa l'intera larghezza dello schermo mobile.

Il problema con questo è che a volte ottieni un ordine inverso del necessario. Facciamo un esempio in cui hai una sezione a due colonne sul desktop: una contenente un'immagine e una un widget di testo. Quando andiamo alla visualizzazione mobile, ogni colonna ottiene la sua riga, ma l'immagine, poiché è stata visualizzata nella colonna destra della sezione originale, ora si trova sotto il widget dell'editor di testo su dispositivo mobile. Se vogliamo invertire il loro ordine, c'è un pulsante apposito di Elementor che fa questo.

Basta andare su Sezione> Avanzate> Responsive e attivare 'Reverse Columns'

Colonne responsive nel template elementor ed astra

Punto 6: regolare la larghezza della colonna responsive

E’ stato accennato prima che ogni colonna ottiene automaticamente il 100% di larghezza quando si passa al mobile, ma questo può essere modificato in modo specifico e si può impostare una larghezza diversa per colonna sul dispositivo mobile.

Per la sezione delle icone presente nel video, impostiamo ogni colonna con una larghezza del 50%, in modo che ogni riga ha 2 icone.

Punto 7: mostrare o noscondere gli elementi da mobile

In Elementor, hai la flessibilità di nascondere una sezione, una colonna o un widget su desktop, tablet e dispositivi mobile. Nel video viene nascosta un'immagine dalla visualizzazione sui dispositivi mobili. Possiamo anche scegliere di mostrare la stessa immagine solo su dispositivi mobile e utilizzare questo strumento per impostare una visualizzazione completamente differenziata in base ai dispositivi.

Punto 8: regolazioni mobile specifiche per i widget

Ogni widget di Elementor offre opzioni avanzate di modifica per la visualizzazione da mobile. Nel video viene mostrato come impostare il divario di riga Form, per aumentare il divario tra le righe in modo che i campi siano più distanziati. Si mostra anche come regolare i margini ed il padding per il media carosello, oltre a restringerlo in modo da avere maggiore spazio sui lati.

Perchè è stato scelto il tema Astra

Esistono diversi vantaggi dell'utilizzo del tema Astra per creare siti Web mobili responsive con Elementor, tra cui: Semplicità: Astra si concentra sulla semplicità. Propone opzioni minime, gli utenti ottengono l'output desiderato attraverso impostazioni ben categorizzate nel customizer. Accessibilità - L'accessibilità è un requisito in molti paesi e in progetti di livello enterprise. Oltre a ciò, è semplicemente una buona cosa avere un'interfaccia accessibile per una buona esperienza utente. Oggi sul mercato sono disponibili pochissimi temi pronti per l'accessibilità e Astra è uno di questi.

Made for Speed - Astra è fatto per la velocità! Ecco alcuni dati: - Astra effettua solo 4 richieste HTTP (il minimo possibile per un tema WordPress funzionale) - Carica meno di 50 KB di codice - Non usa jQuery per impostazione predefinita.

Astra eccelle per prestazioni e velocità. Ma tieni presente che la velocità dei siti web dipende da vari fattori come l'hosting, altri plug-in installati, le immagini presenti sul sito web, la versione di PHP e la posizione del server. Scegliere un tema veloce e orientato alla prestazione come Astra è solo il primo passo.

Feemium - Proprio come Elementor, Astra è gratuito nel Repository WordPress. Per ulteriori funzioni come white labeling, transparent headers gli utenti possono acquistare un'estensione a pagamento.

Realizzato per Elementor - Quando si usa Elementor, Astra diventa automaticamente a larghezza intera senza titolo e barra laterale. Nessun clic o altre impostazioni.

Decine di siti Elementor gratuiti, pronti per l'importazione - Sì, siti completi, non modelli di pagina singola. I creatori di Astra hanno creato un plug-in gratuito che consente agli utenti di importare in un clic siti Web pronti al 100% creati utilizzando Elementor e Astra.

Controlli tipografici - La tipografia è importante e probabilmente l'aspetto più importante di un sito Web ben progettato e orientato all'UX. E tema Astra, proprio come Elementor offre i controlli per impostare una tipografia bella, responsive con a disposizione a molti font.

Widget Ready - L'utente può posizionare i widget in varie aree tematiche. Anche nelle intestazioni!

Multilingua, RTL & Traduzione Ready

Developers - Astra is "Framework Theme"

Se sei uno sviluppatore, ti divertirai a lavorare con Astra. Può essere considerato un vero Framework, in quanto offre molteplici possibilità di azioni / filtri. Puoi anche consultare lo sviluppo attivo su GitHub e contribuire.

Realizzato da Brainstorm Force - Astra è sviluppatoda Brainstorm Force, un'organizzazione di professionisti di WordPress che opera da 8 anni. Le aziende e le agenzie possono utilizzare Astra e essere certi dello sviluppo attivo e del supporto professionale.

Conclusione

Come puoi vedere, tutti questi passaggi sono facilmente comprensibili, in quanto non richiedono codice e vengono raggiunti utilizzando le impostazioni di controllo intuitive di Elementor. In questo modo, puoi progettare liberamente la versione desktop ed adattarla rapidamente ai dispositivi mobile in pochi minuti. Spero che tu possa approfittare degli strumenti di modifica mobile la prossima volta che crei una pagina o un sito Web in WordPress. Se hai domande relative a questo tutorial, sentiti libero di aggiungere i tuoi commenti qui sotto.

Traduzione dell'articolo "How to Create a Responsive WordPress Website with Astra theme" che potete trovare qui.

Roberto Marinello

Roberto si occupa di web da quasi 20 anni, vive con 2 cani ed è (quasi) sempre felice

Elementor-Pro-Italia.it is run by a 3rd party and not associated, or act on behalf of Elementor or Pojo Themes. Elementor is a registered trademark of Pojo Themes.