Come costruire un sito Web WordPress nel 2021 in 6 passaggi. Una guida dalla A alla Z

Come costruire un sito web WordPress nel 2021

Nel 2017, c’è stata un’opportunità presso la società in cui stavo lavorando per imparare il web design.

Ho iniziato a imparare HTML, CSS e Javascript. Mi è piaciuto molto. Finché non mi sono imbattuto nei miei primi bug. Più tardi, mi è stato assegnato un progetto parallelo: un vero e proprio sito web. Ero entusiasta, i miei colleghi erano lì per me quando ho chiesto aiuto.

Alcuni mesi dopo stavo lavorando a un incarico WordPress pro-bono per una ONG.

Permettetemi di affermare che eravamo nel mercato dei viaggi e stavo facendo marketing. Ma c’era questa cultura di responsabilizzare le persone nell’apprendimento di nuove abilità.

Sono il tipo fai da te e mi sono reso conto che la curva di apprendimento per l’apprendimento del codice è molto più lunga del previsto. Con WordPress, le cose hanno funzionato in modo diverso.

Avanti veloce, nel 2020, ho finito per lavorare per i produttori di Colibri, Colibri è un popolare costruttore di pagine drag and drop di WordPress.

Le cose sono così facili oggi con tali strumenti. WordPress può davvero consentire alle persone di costruire un sito web da zero in pochissimo tempo. E l’ispirazione per i siti web è solo all su Internet.

Ora, ecco i passaggi:

  1. Scegli il tuo nome di dominio
  2. Acquistare sito di hosting
  3. familiarizzare con l’interfaccia di WordPress
  4. Installare un tema per WordPress
  5. Costruisci il tuo sito web WordPress
  6. Installare vitale WordPress plugins

Perchè avendo alcuni passaggi non è sufficiente per avere un supercalifragilisticexpialidocious sito, ho un premio per te, alla fine della guida: UX design, consigli e trucchi.

Ma prima di saltare nell’argomento, voglio far luce su un altro argomento. Non ci vorra ‘ molto, te lo prometto.

Quanto costa un sito web WordPress?

Se vogliamo fare una ripartizione dei costi per un sito web WordPress, ecco cosa dovremmo includere:

  • Acquisto di un dominio: i prezzi possono iniziare a $15 / anno
  • Acquisizione di hosting: i prezzi iniziano a partire da theme 8 / anno
  • Tema WordPress. Ora, a seconda dei livelli di personalizzazione e quante funzioni si desidera includere, si può iniziare con $0. Se non vuoi accontentarti di un sito Web di base, i piani annuali a tema WordPress ruotano intorno a 7 70.
  • Plugin WordPress. Molti di loro sono gratuiti, ma se si desidera opzioni avanzate, è necessario eseguire l’aggiornamento a un piano di pagamento.

Ciò significa che il sito web più semplice inizierà da $23/anno. Nel momento in cui si desidera funzioni a tema avanzate, il costo salirà a circa $100/anno.

Quando aggiorni i plugin, potresti finire per pagare circa $200-500 all’anno.

Se si desidera qualcosa su misura, ed è necessario chiamare in uno sviluppatore WordPress, i costi possono andare oltre $1000 nel primo anno.

Per i negozi online, i costi possono aumentare in modo significativo, perché hai bisogno di molte funzionalità e le prestazioni e la sicurezza sono al top della mente.

Ora che lo chiariamo, è il momento di andare a fondo del nostro argomento oggi: come creare un sito web WordPress nel 2021.

Scegli il tuo nome di dominio

scegli il nome di dominio del tuo sito web

Fonte: https://unsplash.com/photos/N1XUwR8iOf0

Se non lo sapevi ancora, il nome di dominio è il nome della tua azienda o il nome del prodotto. I nomi possono essere davvero potenti, quindi non essere frettoloso quando scegli il tuo nome di dominio. Se senti che stai ricevendo i piedi freddi, non ti preoccupare, ci sono strumenti là fuori che possono aiutarti.

Suggerimenti e trucchi per la scelta del nome di dominio del sito web

Stavo facendo un po ‘ di brainstorming per un dominio del sito Web per un’azienda qualche tempo fa e mi sono reso conto che “Wazz” sembrava piuttosto interessante. È breve, facile da ricordare. Ma nel momento in cui l’ho cercato su Google, beh welllasciatemi dire, sono scoppiato a ridere. Nel gergo britannico, significava “minzione”. Davvero gente, fate la vostra ricerca.

Più tardi, volevo dare un nome al mio sito web di fotografia. Stavo analizzando”chiaro di luna”. Sembrava così bello, romantico, fiabesco except tranne che non lo era. Sembra che significasse “alcol distillato illecitamente o contrabbandato”.

Quindi, assicurati che la tua denominazione sia unica, memorabile e non abbia alcun significato strano in inglese o in un’altra lingua popolare (ad esempio: spagnolo) se vuoi diventare internazionale. Se sei un business locale, si potrebbe saltare questo.

Ora, diamo un’occhiata a una piccola lista di controllo per la scelta di un nome di dominio per il tuo sito web WordPress:

  • Fare un elenco di parole chiave rilevanti per il vostro business/prodotto. Pensa a come gli utenti dovrebbero sentirsi dopo aver usato il prodotto. Diciamo che hai una linea di prodotti per la pelle basata su ingredienti naturali. La tua lista potrebbe contenere parole come” pelle”,” cura”,” sicuro”,” naturale”,” bello”,” fresco ” ecc. Utilizzare uno strumento come Namelix o Novanym per generare idee nome di dominio.
  • Controlla il significato del nome di dominio appena trovato. Lo cerco sempre su Google in questo modo “{inserisci nome qui} che significa”. Finirò con le spiegazioni del dizionario. Successivamente, vado su Google immagini e vedo come viene abbinato. Forse c’è un cantante con quel nome, un nome di cartone animato manga, ecc. Se è così, è necessario rifare il processo.
  • Cerca il nome di dominio su Facebook o LinkedIn per vedere se c’è una pagina aziendale con quel nome.
  • Controlla se c’è un dominio del sito Web disponibile per la vendita. Per molti siti,”. com ” è il miglior dominio di primo livello (TLD), seguito da “.org”,”. net” o”. io”.
  • Acquista il tuo nome di dominio. Puoi farlo tramite un registrar di domini come GoDaddy o tramite il tuo provider di hosting.

E questo ci porta al nostro prossimo capitolo.

Acquisisci sito web hosting

Ogni sito web che hai mai visitato è ospitato su un server. Ciò significa che è necessario acquisire web hosting da un provider di hosting.

Considerando che stiamo costruendo un sito web WordPress è possibile scegliere un piano di hosting da WordPress.com o qualche altro fornitore di hosting di terze parti.

Fammi chiarire qualcosa prima di procedere. Ci sono wordpress.com e wordpress.org. La differenza è che su WordPress.com è possibile ospitare e costruire un sito web. Da WordPress.org di solito acquisisci temi e plugin per il tuo sito web, che è ospitato altrove. È possibile confrontare il WordPres.com piani qui.

L’ipotesi di questa guida è che vuoi davvero costruire un marchio e avere il pieno controllo sul tuo sito web. Ciò significa che andrai a un provider di hosting di terze parti.

Esistono tre principali servizi di hosting: hosting condiviso, VPS e hosting gestito. Nella prima situazione le risorse del server vengono suddivise tra più siti. A lungo termine, se questi siti crescono, e il vostro pure, si potrebbero incontrare problemi di prestazioni. Potresti renderti conto che hai bisogno di un servizio VPS o di un piano di hosting gestito.

Quindi, è necessario avere questo in mente quando si sceglie un provider di hosting: quali sono i tuoi obiettivi di business?

Se vai con l’hosting VPS, le risorse saranno comunque condivise, ma otterrai un certo controllo su di esse. Vedrai miglioramenti anche in termini di sicurezza e prestazioni.

L’hosting gestito è un po ‘ un servizio “à la carte”. Avrai il tuo server fisico tutto per te e vedrai un aumento delle prestazioni e della sicurezza.

Sicuramente, le cose possono diventare più complicate di questo, ma volevo solo dipingere il quadro generale dell’hosting.

Quindi, quando analizzi i piani, dai un’occhiata più da vicino:

  • Prezzi
  • Storage
  • Supporto
  • Prestazioni

Alcuni provider di hosting hanno alcune funzionalità extra come l’offerta di dominio (ad esempio: Namecheap), website builder (ad esempio: GoDaddy), opzioni di e-commerce, ecc.

Ora, probabilmente avete notato ormai alcuni siti web che utilizzano ” HTTP “o”HTTPS”. Che succede con quelli?

HTTP è la base del web moderno. Collega i browser e i server e funziona su base richiesta-risposta. Ora, la “s” aggiuntiva significa che la connessione al sito Web è crittografata e i dati condivisi con il sito Web sono sicuri.

Supponiamo che un utente effettui un pagamento sul tuo sito web o registri un account. Le informazioni che l’utente digiterà saranno private. Al sicuro da hacking. Questo sta accadendo attraverso la tecnologia SSL, che sta per “Secure Sockets Layer.”Per i consumatori, vedendo “HTTPS” segnali di fiducia, perché è possibile proteggere i loro dati e la privacy. Ciò significa che è necessario acquisire un certificato SSL.

Assicurati che il tuo piano scelto includa anche questo.

Nel momento in cui acquisisci il tuo piano di hosting e hai impostato i tuoi dati di accesso, l’unico pezzo mancante sarà WordPress stesso. La maggior parte dei provider di hosting là fuori ti consente di installare WordPress dal loro dashboard/wizard. È tutto abbastanza intuitivo.

Come accederai al tuo sito? Facile peasy. Basta digitare nel browser il tuo indirizzo web e aggiungere ad esso “/ wp-admin”, come si vede di seguito.

WP admin

Familiarizza con l’interfaccia WordPress

La dashboard di WordPress ha 9 sezioni. Diamo un’occhiata a loro.

Impostazioni WordPress

 Impostazioni generali WordPress

All’interno di questa sezione, ci sono altre 7 voci di menu. Descriverò brevemente le cose più importanti che devono essere fatte qui.

  • In “Generale” è possibile impostare il titolo del sito, tagline, URL, fuso orario, ora & formato data e lingua.
  • Sotto ” Reading “” dirai “a WordPress quale pagina funge da homepage e quale è il tuo”blog”. Questo è un passo importante. Potrai anche scegliere quanti post del blog possono apparire su una pagina o se vuoi che il tuo sito web indicizzato da Google.
  • In “Discussione” si sta andando a fare la configurazione dei commenti del blog.
  • All’interno di “Media” è possibile stabilire le dimensioni massime in pixel da utilizzare quando si aggiunge un’immagine alla Libreria multimediale.
  • All’interno di” Permalinks ” configurerai il formato dei tuoi URL.
  • Puoi definire le tue pagine sulla privacy all’interno di “Privacy”.

Il modo migliore per accedere al pannello “Impostazioni” è inserire tutti questi elementi e inserire le informazioni mancanti, solo per essere sicuri di non saltare nulla di importante. Le cose sono piuttosto semplici, quindi non avere i piedi freddi. Tutta la configurazione può essere eseguita in meno di 30 minuti.

Pagine e post WordPress

Quello che devi sapere è che i tuoi contenuti andranno all’interno di “pagine” o “post”. Qui trascorrerai il 95% del tuo tempo.

Le “pagine” sono statiche. Puoi avere una pagina “homepage”, “servizi”, “contattaci”, ottieni il punto. Sotto i post puoi avere i tuoi ultimi articoli di blog, forse il tuo portfolio. Queste sono pagine dinamiche perché posizionano automaticamente il contenuto del tuo sito Web più recente in alto.

WordPress dashboard - post e pagine

Quando selezioni “Post” dalla dashboard, sarai in grado di creare un post, visualizzare tutti i post e gestire tag e categorie.

WordPress dashboard - posts

Puoi creare un nuovo post se selezioni “Aggiungi nuovo” come visto sopra, o vai su “Tutti i post” e quindi seleziona “Aggiungi nuovo”.

Aggiungi nuovi post WordPress

Lo stesso funziona per le pagine.
Quello che vedrai in “Tutte le pagine “o” Tutti i post ” sono alcune pagine e post predefiniti distribuiti dal tuo tema.

 Modifica una pagina in WordPress

Ora, come puoi modificare un post o una pagina?

Quando passi il mouse sopra le pagine e i post predefiniti vedrai alcune opzioni: modifica, modifica rapida, cestino, vista. Nello screenshot qui sopra c’è anche “Modifica in Colibri”. Questo perché abbiamo installato un plugin che consente di personalizzare le pagine utilizzando il Colibri WordPress builder (ma ne parleremo un po ‘ più tardi).

WordPress media

Tutti i tuoi media vanno qui: immagini e video. È possibile trascinarli o caricarli.

WordPress dashboard - Media library

Puoi anche aggiungere file multimediali dal tuo post/livello di pagina. Ti mostrerò di più sull’argomento più tardi.

WordPress comments

La 4a sezione dashboard si chiama “Commenti”. Qui puoi gestire i commenti dei tuoi post. Riceverai tonnellate di commenti spam che possono essere spostati in spam o cestino. Puoi approvare quelli pertinenti.

 WordPress commenti

Il menu “Aspetto”

WordPress Aspetto Menu-default

A questo livello è possibile:

  • Cerca, installa e attiva un tema (maggiori dettagli nel capitolo seguente).
  • Personalizza i widget per aggiungere blocchi di contenuti alle barre laterali, ai piè di pagina e ad altre aree del tuo sito.
  • Definisci i menu del tuo sito web WordPress.
  • Aggiungi un’immagine di sfondo al tuo sito.
  • Modifica il codice del tuo tema all’interno di” Theme Editor ” (consigliato solo se sei uno sviluppatore).

Ora, nel momento in cui attivi alcuni plugin, potresti vedere alcune nuove voci di menu sotto “Aspetto”. In questo caso, poiché abbiamo attivato il tema Skyline, vediamo un’opzione per configurarlo in “Impostazioni SkylineWP”. Ogni tema può venire con la propria configurazione.

Pannello di configurazione di SkylineWP WordPress

“Installa plugin” è l’altra voce di menu extra aggiunta dal tema Skyline. Qui vedrai alcuni consigli sui plugin che funzionano bene con Skyline.

Questo ci porta alla nostra prossima voce di menu.

Plugin

Ci sono molte funzionalità che non possono essere gestite solo per tema, come l’ottimizzazione SEO, l’audit SEO, la sicurezza del sito Web e il backup, tabelle, moduli, funzionalità di e-commerce e altro ancora. I plugin sono qui per compensare la mancanza di tali opzioni.

Ecco un piccolo tutorial su come installare, attivare e disattivare i plugin. È tutto intuitivo e facile da usare.

Utenti

Utenti WordPress

A questo livello, deciderai chi ha accesso al tuo sito web. Puoi dare accesso a contributori, autori ospiti, editori e altro, a seconda delle tue esigenze.

Strumenti

 WordPress dashboard - strumenti

In “Strumenti” avrete la possibilità di importare ed esportare i dati strumenti da e verso altri sistemi di gestione dei contenuti(ad es. Blogger).

C’è anche una sezione “Salute del sito”, che mostra informazioni critiche sulla configurazione di WordPress e gli elementi che richiedono la vostra attenzione, con alcuni consigli.

Poiché dobbiamo rispettare le politiche sulla privacy, qui puoi esportare o cancellare i dati personali per i tuoi utenti.

E, con questo, abbiamo avvolto il capitolo dashboard di WordPress.

Andiamo ad affari più interessanti.

Come installare un tema WordPress

Per questo, è necessario andare alla dashboard di amministrazione di WordPress, fare clic su “Aspetto” dal menu a sinistra, quindi su “Temi”.

Temi WordPress

Quindi, fare clic sul pulsante “Aggiungi nuovo”.
Vedrai apparire un sacco di modelli e puoi filtrarli per ultime, in primo piano, popolarità…o per funzionalità.

Seleziona temi WordPress per funzionalità

Siamo orgogliosi di dire che i nostri temi Mesmerize e Colibri sono elencati tra i primi 20 temi WordPress più popolari.

Nel momento in cui scegli un tema, fai clic su “Installa”, quindi su “Attiva”.

Installa il tema WordPress

Attivare il tema WordPress

È inoltre possibile attivare il tema WordPress se si testa di nuovo a Aspetto-> Temi.

L’intero processo di installazione è spiegato nel nostro tutorial pure.

Ora sei pronto per il rock and roll!

via GIPHY

Costruisci il tuo sito WordPress

In WordPress, il design del tuo sito web dipende dal tema scelto. Se hai bisogno di qualcosa in più, beh might potrebbe essere necessario trovare qualcosa per riempire le funzionalità mancanti.

Di solito, ogni tema WordPress ha 2 disegni: uno per il blog e uno per le pagine. I colori sono limitati, non ci sono personalizzazioni speciali. Ciò significa che in un certo momento, i plugin saranno utili.

Ora, temi WordPress hanno un customizer tema con funzionalità di base. Sono una buona misura per coloro che non hanno bisogno di funzionalità personalizzate e vogliono costruire il loro sito molto rapidamente. Quando hai bisogno, puoi aggiungere i tuoi stili CSS. Basta fare in modo di scegliere un tema che ha un layout che corrisponde alla propria visione.

Come si può personalizzare un tema? Basta andare su Appearance – > Personalizza.

Personalizzazione dei temi WordPress

Dal lato sinistro, puoi scegliere cosa modificare: contenuto, menu e altro ancora. Sul lato destro, c’è l’anteprima del tuo sito web. È possibile modificare il testo in tempo reale, facendo clic sull’icona della matita.

Dall’altra parte della storia, abbiamo costruttori di WordPress. Sono plugin che ti aiutano a costruire siti web davvero unici. È possibile modificare completamente il layout del tema.

Nel nostro caso, Skyline pre-installa un tale costruttore chiamato Colibri, lo useremo come esempio.

A seconda della versione del tema, quella gratuita o a pagamento, hai vari elementi con cui giocare: da intestazioni, sezioni di pagina specifiche, a componenti più piccoli come chiamate all’azione, schede, contatori, fisarmoniche e altro ancora.

È possibile modificare il tema come prima, da Aspetto-> Personalizza, o prendere la scorciatoia, come mostrato di seguito.

 Scorciatoia Customizer quando si utilizzano i costruttori di siti Web WordPress

Cosa cambia? Avrai accesso a più funzioni all’interno del Customizer.

Blocchi e componenti WordPress nel Customizer

Oltre a utilizzare il customizer, c’è un’altra opzione per la personalizzazione del sito web in WordPress – l’editor predefinito. Puoi accedervi dall’opzione “Modifica” sotto ogni post e pagina. Inoltre, nel momento in cui aggiungi un nuovo post o una pagina, entrerai direttamente nell’editor predefinito (a meno che tu non abbia attivato un builder).

Modifica le pagine nell'editor predefinito di WordPress

Quindi, nel nostro prossimo capitolo approfondiremo come:

  1. Crea un sito web WordPress usando un generatore di pagine WordPress
  2. Crea un sito WordPress usando l’editor predefinito di WordPress

A. Come costruire un sito web WordPress usando costruttori di siti web gratuiti

I costruttori di siti web WordPress ti aiutano a portare il Customizer WordPress a un livello completamente nuovo. Sarete in grado di personalizzare tutto: intestazioni, contenuto della pagina, piè di pagina, menu di navigazione, globale, stile individuale, è il nome! Nessuna progettazione o codifica competenze necessarie!

Di solito è un processo drag and drop. E non devi preoccuparti del design mobile, i costruttori hanno coperto l’aspetto della reattività.

Come regolare le impostazioni del sito web nel Customizer

Guarda il pannello laterale sinistro. Ora scorri verso il basso fino a “Impostazioni generali”.

 WordPress impostazioni generali-WordPress builder panel

Ecco dove è possibile impostare:

  • Il nome del tuo sito web.
  • La combinazione di colori complessiva e la tipografia del tuo sito web.
  • Modelli per blog, intestazione e piè di pagina: quali sfondi utilizzare, spaziature, bordi, ombre, ecc.
  • Spaziatura: all’interno di pulsanti, colonne, ecc.
  • Stile CSS personalizzato

Come creare contenuti in WordPress usando builders

Come accennato in precedenza, se vuoi creare una nuova pagina del sito web, vai su “Pagine” e seleziona “Aggiungi nuovo”. Verrai indirizzato all’editor predefinito di WordPress dove nominerai la tua pagina. Quindi, selezionare “Modifica con Colibri”.

Quando vuoi modificare una pagina WordPress esistente, fai clic su “Modifica in Colibri”.

Customizer shortcut quando si utilizza WordPress website builders

Come aggiungere sezioni alle pagine di WordPress

Ogni segno “+” nel pannello laterale sinistro apre una finestra con blocchi e componenti. È possibile scorrere verso il basso fino a trovare un disegno che ti piace, o semplicemente digitare una categoria. Ecco le categorie disponibili nel Colibri builder: Hero Accent, About, Caratteristiche, Contenuti, Call To Action, Blog, Contatori, Portfolio, Galleria fotografica, Testimonianze, Clienti, Team, Contatto, domande frequenti e Prezzi.

Aggiunta di blocchi a una pagina WordPress

Questi sono modelli predefiniti, che corrispondono alla combinazione di colori di vostra scelta.
Selezionando uno dei blocchi, cliccando sul segno ” + ” che compare sul blocco, il blocco verrà posizionato in fondo alla pagina.

Puoi spostarli dove vuoi, trascinando e rilasciando la sezione dal pannello laterale sinistro.
Come spostare i blocchi WordPress

C’è anche un’opzione per i blocchi “vuoti”.

 Blocchi vuoti in WordPress

Ciò significa che puoi personalizzarli come meglio credi. Alla fine, puoi persino salvare il tuo design per un uso successivo.

Dall’icona delle impostazioni nell’angolo in alto a destra di ogni sezione è possibile regolare il numero di elementi per riga, è possibile riordinare gli elementi, aggiungere nuovi blocchi e persino eliminare l’intera sezione.

Cambia il layout del blocco

Come personalizzare le sezioni della tua pagina WordPress

Se vuoi cambiare il testo nelle tue sezioni, puoi farlo in linea, cioè all’interno della sezione stessa, dal vivo.

La modifica in linea non è disponibile per i testi sui pulsanti. Saranno gestiti nel pannello a sinistra.

Se vuoi cambiare un’immagine dal tuo sito, è tutto intuitivo. Inizia selezionando la tua immagine.

Immagini in WordPress

Sarai in grado di vederlo anche all’interno del pannello a sinistra. Clicca sull’immagine. Vedrai una nuova finestra che ti chiede di caricare un’immagine o selezionarne una dalla libreria. Se si sceglie di caricare, è possibile farlo con il drag and drop.

carica immagini su WordPress

Ora, tornando al pannello che ho appena menzionato, ha 3 opzioni principali: Layout, Stile e Avanzate. Ogni volta che selezioni una sezione dall’anteprima del sito Web a destra, vedrai il pannello corrispondente della sezione.

Personalizzazione di WordPress sezioni e blocchi

prendiamo uno per uno:

  • Layout

struttura del Pannello

Qui è possibile regolare la larghezza e l’altezza del contenitore, presso la struttura di livello. . In poche parole, il contenitore è lo spazio effettivo che occupa un blocco. All’interno del contenitore, si posiziona il contenuto (testo, immagini).

Puoi anche regolare la spaziatura dei tuoi contenuti e quanto vicino alla parte superiore o inferiore viene posizionato.

Puoi anche aggiungere nuove righe all’interno del tuo blocco.

  • Stile

Stile di una sezione

A questo livello, è possibile personalizzare lo sfondo del blocco o aggiungere divisori. I divisori sono segnali visivi che segnalano quando una sezione del sito web termina o inizia.

 WordPress ddividers

  • Avanzate

Blocchi avanzati e sezioni WordPress editing

Ecco che arriva il divertimento, gente!

Dalla tipografia e spaziatura alla reattività, è qui che puoi entrare nei più piccoli dettagli del sito web.

È possibile creare variazioni a seconda dello stato dell’elemento: normale o hover.

Se selezioni un determinato elemento all’interno di un blog, diciamo un’intestazione, lo stesso pannello apparirà a sinistra.

modifica dell'intestazione

Questo significa che puoi andare più granulare con la tua modifica.

Parlando di intestazioni ed elementi più granulari, questi sono chiamati “componenti”. Vediamo come si può giocare con loro.

Come utilizzare i componenti nel tuo sito WordPress

I componenti si riferiscono a intestazioni, cursori, divisori, pulsanti, caroselli, prezzi e altro ancora. È possibile accedervi allo stesso modo dei blocchi. Si siedono fianco a fianco e hanno funzionalità drag and drop. Colibri offre 40 componenti.

Aggiunta di componenti WordPress
Come accennato in precedenza, puoi regolarli dal pannello a sinistra, se vai su “layout”, “stile” o “avanzate”.

Reattività mobile

In un mondo multi-dispositivo, è fondamentale avere un sito web completamente reattivo. Per impostazione predefinita, Skyline è un tema reattivo mobile. Ciò significa che le sue sezioni si regoleranno in base a vari dispositivi. Se si desidera visualizzare in anteprima come il vostro sito WordPress si presenta come su tablet o cellulare, è possibile farlo, quando si gioca con i controlli in basso a sinistra.

Creazione di un sito WordPress reattivo

È inoltre possibile selezionare per nascondere alcune funzionalità sul cellulare, ad esempio, all’interno delle opzioni “avanzate”.

Come creare un menu nel Customizer di WordPress

Ora, diciamo che hai progettato le tue pagine e devi aggiungerle a un menu. Nel pannello a destra, hai tutte le tue sezioni, ordinate dall’alto verso il basso, come sul tuo sito. Il piè di pagina è la tua ultima sezione. Sotto di esso, vedrete alcune caratteristiche extra.

Creazione di menu sito Web in WordPress customizer

Qui puoi creare il tuo menu.

Dopo aver selezionato “Crea nuovo menu”, potrai dare un nome al tuo menu e scegliere un posizionamento per esso (intestazione, piè di pagina, pagine, ecc.).

Quando selezioni “Avanti” sarai in grado di aggiungere le tue pagine al menu, dall’opzione “Aggiungi elementi”. Non puo ‘essere piu’ facile di cosi’.

Aggiunta di elementi al menu di un sito web in WordPress

Come lavorare con i widget di WordPress

Ho già detto che i widget sono blocchi di contenuti che puoi aggiungere alle barre laterali, ai piè di pagina e ad altre aree del tuo sito.

Quando si utilizza un plugin WordPress builder, utilizzerai i widget solo per le barre laterali di WordPress, perché hai layout di piè di pagina predefiniti.

Di solito, le barre laterali sono utilizzate dalle pagine del blog. Ogni tema ha diverse opzioni di widget, dalle barre di ricerca, post recenti e commenti, widget sociali, immagini e video. Diciamo che si desidera mostrare il tuo profilo Instagram in una barra laterale, c’è un widget Instagram WordPress per questo.

widget sidebar per WordPress blog

WordPress widgets

Uno dei miei widget preferiti è quello che consente l’editing HTML personalizzato. Lo trovo davvero potente.

Detto questo, hai finito. Congratulazioni, il tuo sito WordPress è attivo e funzionante!

Ora, controlliamo l’altro metodo per i cantieri in WordPress.

B. Come costruire un sito web WordPress utilizzando l’editor WordPress predefinito (Gutenberg)

Ho intenzione di fare questo davvero veloce. Questo editor è ancora nuovo in WordPress (è l’editor di WordPress predefinito da dicembre 2018), ma si sta evolvendo continuamente grazie al contributo della comunità.

Il classico editor di WordPress guardato come questo:

Classico editor di WordPress

Ora abbiamo:

di Default WordPress editor

Ora, quello che dovete sapere è che non tutti i temi sono compatibili con questo nuovo editor. Dovrai trovarne uno pronto per Gutenberg.

La progettazione del layout con l’editor WordPress predefinito è limitata. Si basa anche su blocchi. Ora, come probabilmente hai scoperto nel capitolo precedente, i blocchi possono essere praticamente tutto: intestazioni, immagini, pulsanti, video, ecc.

Block manager in Gutenberg editor

Ora, perché non insisto sull’argomento: se controlli le recensioni di Gutenberg, le più recenti sono recensioni a 1 stella. Non è una buona esperienza. Anche se è già stato 2 anni dal lancio, e molti aggiornamenti nel mezzo, questo è ancora nella sua infanzia. WordPress si basa ora sulla comunità per creare nuovi blocchi in modo che l’esperienza di editing possa evolversi.

In questo momento lo strumento si comporta come un editor di testo, con bassa potenza sul lato styling.

Ci sono strumenti là fuori come Kadence, che possono aiutarti,ma non ci siamo ancora.

Installa vital WordPress plugins

L’ecosistema WordPress è fatto di temi e plugin

Ci sono migliaia di plugin WordPress disponibili là fuori che possono estendere la funzionalità o aggiungere nuove funzionalità al tuo sito web.

Questo è un breve tutorial su come installare un plugin.

il Nostro plugin raccomandazioni

tipo di plug-in Cosa Raccomandazione
WordPress builder Dona il tuo tema drag and drop Colibri
SEO plugin WordPress Minime modifiche al sito web che possono aiutare rango organicamente Yoast SEO
Forme di WordPress plugins Utilizzare i moduli per catturare preziosi dati utente (con il loro consenso, ovviamente). Formatore
Email marketing Sviluppa campagne di marketing per rimanere in contatto con i tuoi abbonati e clienti. Mailchimp per WordPress
Plugin di sicurezza Pulizia malware e protezione da accessi non autorizzati. Jetpack
E-commerce WordPress plugin Per aiutarti a creare un negozio online. WooCommerce
Media Library manager Per aiutarti a organizzare i tuoi file multimediali. Uccello di file
Anti-spam Impedisci al tuo sito di pubblicare contenuti dannosi. https://akismet.com/
Analytics Consente di comprendere il traffico e il comportamento degli utenti. Google Analytics

Ora, entriamo un po ‘ in un altro argomento: velocità della pagina.

Sia i tuoi visitatori che Google si preoccupano molto della velocità del tuo sito.

Perché Google?

La velocità è un fattore importante che sta prendendo in considerazione quando classifica organicamente, il che significa qui:

 Risultati organici di Google

Perché la velocità del sito è negativa per gli utenti e, in definitiva, per te?
Bene, se offri loro una brutta esperienza, potrebbero non impegnarsi con la tua offerta, o potrebbero anche non tornare presto.

Secondo la ricerca 2018 di Google, il 53% degli utenti mobili lascia un sito che richiede più di 3 secondi per essere caricato (Holy Moly!).

E dai un’occhiata a questo!

caricamento del sito web

In che modo il caricamento della pagina influenza i visitatori mobili (nota: bounce significa lasciare il sito)?
.
Quindi, come puoi risolvere questo problema e migliorare anche le prestazioni complessive del tuo sito Web in modo da non ricevere un pollice verso sia dai tuoi utenti che da Google?

Ho scelto 2 soluzioni rilassate (ce ne sono molte altre là fuori, ma piuttosto tecniche).

● Ottimizza immagini
Le immagini del tuo sito web non dovrebbero essere caricate nella loro dimensione originale. Inoltre, prova ad andare con PNG invece di JPEG (hanno meno colori).
Smush è il nostro plugin WordPress preferito per la compressione delle immagini. Non vedrai alcun calo visibile della qualità e la velocità della tua pagina sarà ottimizzata.

● Caching
In poche parole, la cache fornisce archiviazione temporanea per l’accesso ai contenuti in un secondo momento. Il tuo sito web viene caricato in modo diverso se si accede per la prima volta o la 5a volta dallo stesso visitatore.

Perché?
Quando si ha a che fare con la cache del browser, il browser salva una copia di file da un sito web sul dispositivo dell’utente
(disco rigido, telefono cellulare). Quando un sito Web viene memorizzato nella cache, il browser deve solo caricare pezzi nuovi o aggiornati di una pagina e non dovrà avviare una nuova richiesta del server. La stessa cosa accade se si fa clic sul pulsante” indietro”, il browser visualizzerà la pagina dalla cache. Questo è
anche super utile quando si tratta di una connessione Internet lenta, le pagine verranno caricate rapidamente.

Vuoi capire di più su come funziona il caching? Continua a leggere qui.

Gli strumenti che consigliamo qui sono:
➔ W3 Total Cache (W3TC) migliora la SEO e l’esperienza utente del tuo sito aumentando le prestazioni del sito web e riducendo i tempi di caricamento.
Hum Colibrì. Questo ha anche alcune funzionalità extra che amiamo, come la compressione di file Javascript, HTML & CSS.

Ora, come puoi controllare quanto velocemente si sta caricando il tuo sito web?
Google ha solo lo strumento per aiutarti in questo, e fornisce anche alcune idee di fissaggio.

Bonus: UX design tips and tricks

Ricordami di dire “sky’s the limit” con i page builder di WordPress?

Beh Well c’è sempre un “ma”. Quando si progetta un sito web si dovrebbe sempre avere in mente il vostro
pubblico, o il compratore personas (come il marketing piace dire). È necessario fornire loro una grande esperienza sul tuo sito web, questo è ciò che UX sta per (user-experience).

Ora, per questo, ci sono alcune regole che dovresti seguire per fornire un’esperienza utente senza attrito.

Soddisfare le esigenze degli utenti
Gli utenti di un sito web non vogliono pensare troppo. Hanno bisogno di informazioni utili che possono essere scremate e comprese con facilità. Non hanno bisogno di un’esperienza composta da molti clic o molto avanti e indietro.

Le persone cercano una gratificazione immediata: trovare ciò di cui hanno bisogno velocemente e con facilità. Se questo non sta accadendo sul tuo sito web, cercheranno un altro.

Gerarchia visiva

Non tutte le parti del sito web sono trattate allo stesso modo, alcune sono più importanti di altre (moduli, pulsanti, titolo, proposta di valore, ecc.).

Dove vorresti che il tuo utente atterrasse? Dove vuoi che clicchi?

Fare uso di segnali visivi per aiutarlo a raggiungere ciò che si desidera. Tutti gli elementi sulle pagine dovrebbero comportarsi come una guida turistica.

segnali visivi

I ricercatori hanno scoperto che gli utenti che leggono da sinistra a destra scansionano i siti Web in un modello a forma di Z.

z shape

Questo significa che è lì che dovresti dirigere le tue informazioni più importanti.

Facile navigazione

Si dovrebbe mantenere la barra di navigazione semplice, non andare in troppe opzioni. Si potrebbe finire con una situazione di scelta paradosso quando gli utenti vengono sopraffatti con le possibilità.

Le pagine devono essere collegate internamente ad altre pagine pertinenti in modo che la navigazione sia fluida e che l’utente non debba fare clic su “indietro” molte volte per accedere alle pagine precedenti.

Utilizzare lo spazio bianco. Lo spazio bianco consente di organizzare le informazioni in aree di contenuto digeribile. Ciò renderà gli utenti più a loro agio e non sopraffatti da carichi di dati.

Stessa combinazione di colori (consistenza)

Evita colori super scuri o super intensi sul tuo sito web. Potrebbero mandare via gli utenti. È possibile utilizzare colori più forti per evidenziare aspetti importanti del tuo sito web.

consistenza del colore

Usa colori ugualmente bilanciati. Ecco qualche ispirazione.

E un’altra cosa prima di passare al prossimo principio di progettazione UX. I colori hanno significati in tutto il mondo, sono collegati a varie emozioni. Questa infografica brillerà una luce sul tema.

color emotion guide

Usa la scrittura efficace

Non usare esagerate e clickbait copy. Scrivi con buon senso, in un linguaggio naturale, non usare il gergo (non tutti hanno familiarità con certe parole tecniche).

clickbait

Utilizzare max. 3 caratteri tipografici in un massimo di 3 dimensioni punto-un massimo di 18 parole o 50-80 caratteri per riga di testo come Smashing Magazine consiglia.

Usa social proof

Perché dovrei fidarmi di te, della tua attività o dei tuoi prodotti?
Noi, umani, siamo creature sociali. Viviamo in comunità, abbiamo amici e familiari. Possono essere i nostri influencer. Ci preoccupiamo molto della loro opinione.
.
Permettetemi di elencare alcuni esempi per voi:
● Valutazioni e recensioni

 Valutazioni

● Testimonianze

 Testimonianze

● No. di clienti (“sei in buona compagnia”).

clients
● Clienti loghi

Loghi
● studi di Caso sostenuta da risultati

studi di Caso
● Premere con e premi

Premere

Inoltre, se si desidera scoprire le ultime tendenze del design, la Costiera Creativo la gente ha fatto una meravigliosa infografica sull’argomento.

Conclusioni

Possiamo chiamarlo un involucro non pensi?

Volevamo andare nel modo più breve, per non sopraffarti con le informazioni. Ma, alla fine, il diavolo è nei dettagli. Ti abbiamo appena dato la vista dell’elicottero.

Il fatto è che puoi avere il tuo sito web attivo e funzionante in meno di 2 ore. Ma, più caratteristiche, pagine, contenuti che si desidera aggiungere, più tempo ci vorrà. E non trascurare mai le ultime tendenze del web design.

Un’ultima cosa però, se siete il tipo fai da te, è sicuramente bisogno di prendere il nostro Colibri builder per un giro!

Ecco un video su come costruire una pagina web WordPress utilizzando tonnellate di funzionalità.

Ora, se ti è piaciuto questo articolo e vuoi saperne di più su come progettare un sito web WordPress, assicurati di iscriverti al nostro canale Youtube e seguici su Twitter e Facebook!

Leave a Reply

Lascia un commento

Il tuo indirizzo email non sarà pubblicato.