Come creare un fantastico negozio online con WooCommerce, Divi e SiteGround (ottobre 2019)

Più di 74 milioni di siti dipendono dalla piattaforma WordPress per ospitare i loro blog, vendere i loro prodotti o semplicemente scrivere le loro riflessioni quotidiane per il mondo. Quando inizi a costruire il tuo sito di e-commerce hai sicuramente molte scelte da fare e WordPress si lega a questo.

Quale di standout piattaforme di e-commerce sceglierai? Stai pensando di prendere un tema per vendere i tuoi prodotti o c'è qualcuno che puoi pagare per costruire il sito da zero? Diamine, cosa pensi di vendere attraverso il tuo sito di e-commerce?

Nota del redattore: questo post è stato originariamente pubblicato su gennaio 15, 2015 ed è stato completamente rinnovato e aggiornato per accuratezza e completezza.

Ci sono da milioni a milioni di temi WordPress tra cui scegliere quando cerchi la struttura di frontend e backend per iniziare a vendere online. Quasi lo stesso con l'hosting (ma preferiamo SiteGround or Bluehost).

I temi migliori includono strumenti di gestione e-commerce facili e veloci in modo che tu possa caricare i prodotti e gestire cose come sconti, premi, pulsanti e pagine dei prodotti. Il tuo tema è anche la prima cosa che le persone vedranno quando visitano il tuo sito. Li guida attraverso il processo e porta davvero la differenza tra qualcuno che è soddisfatto dell'esperienza o meno.

In breve, i temi di WordPress sono fondamentali e il Divi Tema WordPress da temi eleganti è un'opzione piuttosto carina da considerare. Può essere utilizzato per un sito Web aziendale standard, ma include anche integrazioni per la vendita di e-commerce e processi di vendita veloci. Impariamo come creare un negozio online con il tema Divi WordPress.

Prendi il tuo dominio e l'hosting prima

💡Il primo passo in qualsiasi processo di creazione di siti Web è l'acquisizione di un account di hosting, il nome di dominio e l'installazione di WordPress sul sito. Divi non è diverso. Esistono molti modi per ottenere hosting e nomi di dominio, ma personalmente ritengo che SiteGround sia una delle opzioni più sicure e affidabili. (Per maggiori dettagli dai un'occhiata al nostro completo Recensione SiteGround).

La cosa davvero interessante è che SiteGround offre un servizio specializzato gestione di hosting WooCommerce pacchetto di servizi con praticamente tutto il necessario per iniziare a vendere online. All'interno del pacchetto, puoi accontentarti di entrambi Piano di avvio per principianti, Piano GrowBig per aziende in crescita, o GoGeek per negozi WooCommerce affermati.

Ognuna di queste offre funzionalità avanzate per l'ottimizzazione del tuo sito WooCommerce a un prezzo ragionevole.

Detto questo, è un altro servizio di hosting che consigliamo vivamente per i negozi Divi WooCommerce BlueHost. Sebbene le funzionalità qui non corrispondano a quelle di SiteGround, ottieni comunque l'hosting incentrato su WooCommerce attraverso il suo pacchetto e-commerce WordPress. I piani possono gestire comodamente un negozio Divi WooCommerce, ma purtroppo non otterrai servizi gestiti.

👉 Ora, per motivi di chiarezza, procediamo con SiteGround ...

Come si inizia?

Vai Hosting WooCommerce gestito da SiteGround pagina, selezionare un piano ideale e fare clic Ottieni piano.

Secondo me, il GoGeek Plan sembra l'opzione più adatta poiché supporta siti Web WooCommerce illimitati con funzionalità di e-commerce avanzate. Oltre a una maggiore potenza del server, ottieni supporto prioritario, gestione temporanea di WordPress, backup su richiesta e risorse di super chacher, oltre a trasferimenti gratuiti di siti e CDN Cloudflare, tra le altre solide funzionalità.

👉 E per quanto riguarda le quote di risorse, questo piano prevede:

  • Cassetta postale 6GB
  • 1 GB Archiviazione database
  • Archiviazione SSD
  • Trasferimento dati illimitato
  • 30GB spazio di archiviazione
  • Fino a 100,000 visite mensili

Tieni presente che questo servizio inizia a $ 11.95 al meseed è molto simile a come installeresti un normale sito WordPress su un account di hosting BlueHost.

Ma ricorda, questo è un prezzo speciale per i principianti. Aspettatevi che aumenti a $ 34.95 nei futuri rinnovi, il che è ancora un costo ragionevole se considerate tutte le funzionalità che otterrete nel lungo periodo.

Ora, dopo aver selezionato il tuo piano preferito, SiteGround ti indirizzerà alla sua pagina di registrazione del dominio. Se possiedi già un dominio, scegli la seconda opzione e inserisci i suoi dettagli. Altrimenti, procedi con la nuova registrazione del nome di dominio a $ 15.95 all'anno.

Il prossimo è la fase finale, in cui scegli le tue opzioni di hosting preferite, oltre a inserire le informazioni di pagamento e i dettagli personali, prima di creare l'account.

Bene, ovviamente, queste sono cose di base che hai gestito molte volte prima. Quindi, non dovresti avere difficoltà a inserire il tuo numero di telefono, paese, nome, email, password dell'account, ecc.

La parte di pagamento richiede l'inserimento dei dettagli della carta di credito. Puoi procedere con entrambi Scopri, MasterCard or Visa.

Tuttavia, e piuttosto interessante, SiteGround non elenca PayPal, nonostante la sua crescente popolarità tra i commercianti di WooCommerce. Ma, per fortuna, si scopre che possono accettare pagamenti PayPal, anche se indirettamente.

Se questa è la tua modalità preferita, quindi, lascia vuoti i campi e contatta gli agenti di vendita di SiteGround tramite lo strumento di chat live. Ti aiuteranno a completare il processo tramite PayPal.

L'ultima sezione contiene diverse opzioni per il tuo servizio di hosting, inclusa la posizione del tuo data center preferita, oltre al periodo di abbonamento.

Ora, per ridurre al minimo la distanza di trasferimento dei dati tra i server Siteground e i visitatori del tuo sito WooCommerce, scegli la posizione del data center più vicina alla tua area di mercato di destinazione.

Quindi scegli eventuali servizi aggiuntivi che desideri includere nel tuo pacchetto e voilà! Questo è tutto ciò che serve per configurare un account Siteground.

Una volta terminato, accedi al tuo account e vai direttamente alla tua area cPanel. Troverai un programma di installazione automatica di WordPress predefinito. Quindi, selezionalo, inserisci i dettagli di accesso a WordPress e premi il pulsante di installazione.

Bene, noterai che il processo di installazione di WordPress richiede alcuni secondi poiché è tutto automatizzato. E dopo aver impostato tutto, SiteGround ti fornirà il nome di dominio corretto a cui accedere se desideri modificare le cose sul back-end del tuo sito.

Creare il tuo negozio online con Divi

Cos'è Divi?

Ok, se non l'hai provato, scommetto che ne hai già sentito parlare. Divi non è un tema WooCommerce ordinario. È, infatti, uno dei temi WordPress più popolari su Temi eleganti. E, cosa interessante, Divi lo è Tema eleganteprodotto di punta.

Quindi, cosa c'è di così speciale in questo tema? E c'è qualcosa di eccezionale nel WooCommerce di Divi?

Bene, a differenza dei tipici temi WordPress, Divi è più di un pacchetto completo. Ciò significa che combina funzionalità tematiche standard con funzionalità extra utili per i negozi Divi WooCommerce.

cos'è il divi

Non fraintendetemi però. Sebbene il supporto WooCommerce di Divi sia l'obiettivo principale qui, il tema è in grado di fare molto di più. In sostanza, Divi può essere perfettamente integrato con qualsiasi tipo di sito, grazie alla sua vasta gamma di layout di siti Web. Non solo e-commerce.

Quindi, per finire, Divi arriva con il suo intuitivo plug-in per la creazione di pagine WordPress. Puoi usarlo per personalizzare liberamente il tuo negozio Divi WooCommerce senza alcuna codifica.

In effetti, Divi è stato sviluppato per i principianti. Quindi, puoi aspettarti di trovare un pannello di controllo pulito con quasi nessuna curva di apprendimento. Bastano pochi minuti per appendere l'intero ecosistema Divi, configurarlo e personalizzare i layout WooCommerce di Divi.

👉 Alla fine, quindi, sarai in grado di capitalizzare Divi'S:

  • Matrice di layout personalizzabili per qualsiasi tipo di sito Web WordPress, inclusi i negozi online WooCommerce.
  • Page Builder facile da usare, che fornisce una serie di elementi del sito Web e funzionalità di progettazione.
  • Processo di personalizzazione flessibile senza alcuna forma di codifica. Anche i principianti possono configurare e modificare comodamente i negozi Divi WooCommerce perfettamente funzionanti.
  • Integrazione semplice con WordPress. Divi è uno dei pochi temi WordPress esterni che può essere installato senza problemi senza modifiche complesse.
  • Modelli WooCommerce ottimizzati per l'e-commerce.

Divi Drag and Drop Page Builder

Come abbiamo detto, Divi ha due gusti diversi. Quando paghi per l'iscrizione Temi eleganti, troverai il tema Divi standard sulla dashboard, accompagnato dal plug-in Divi WordPress Page Builder.

Ma vale la pena notare che questo costruttore non è legato esclusivamente al tema Divi. Viene fornito come plug-in aggiuntivo per ogni singolo tema acquisito da Elegant Themes.

Detto questo, Divi WordPress Page Builder è un editor drag-and-drop con funzionalità di personalizzazione avanzate. Ti consente di spostare e definire elementi, colonne, righe e moduli senza alcuna esperienza di codifica. In altre parole, è il tipo di costruttore di un Divi WooCommerce il principiante spera di ottenere.

impostazioni divi

Ma non commettere errori. Sebbene Divi Page Builder sia rivolto ai principianti, è un editor che facilita anche sviluppatori esperti. Possono combinare sistematicamente le sue funzionalità visive con i controlli CSS per portare i loro siti Web Divi WooCommerce al livello successivo.

Vieni a pensarci, tuttavia, non hai bisogno di uno sviluppatore per progettare tutti gli elementi nel tuo negozio Divi WooCommerce. Puoi fare affidamento solo sulle funzionalità visive.

E sai una cosa?

Divi tenta persino di rendere l'intero processo molto più semplice etichettando e codificando i colori nei suoi moduli di layout.

E a proposito di ciò, un'altra importante disposizione qui è la semplificazione generale di Divi del processo di personalizzazione del layout. Se vuoi introdurre una nuova sezione, ad esempio, dovrebbe fare un solo clic. Quindi la duplicazione, la rimozione e l'inserimento di moduli per il tuo negozio Divi WooCommerce ti richiederà solo pochi clic di pulsanti.

Nel frattempo, la finestra di modifica di Divi mostrerà le modifiche al layout del tuo sito in tempo reale. Sarai in grado di monitorare visivamente ogni singola regolazione e vedere come influisce sul design generale delle prospettive del tuo negozio Divi WooCommerce.

Layout del sito Web Divi WooCommerce prestabiliti

Per salvarti dal doloroso processo di creazione di un sito Web da zero, il tema Divi WordPress viene fornito con una serie di modelli di siti predefiniti. E poiché potresti aver bisogno di diverse opzioni di layout dello stesso modello, Divi offre i suoi design di siti Web come pacchetti completi. Di conseguenza, si ottengono diversi layout e colori del modello.

Bene, per essere più precisi, Divi fornisce circa 7-8 diversi layout pre-progettati su ogni singolo pacchetto di siti Web. Considerando che ognuno è completamente costruito, puoi facilmente adottare i layout senza rielaborare ampiamente la loro struttura sottostante. Hai solo un paio di modifiche qua e là.

layout del sito Web divi

Ora per trovarti uno perfetto per il tuo negozio online WooCommerce, basta scorrere le varie categorie di siti sul tema Divi. In alternativa, utilizzare le parole chiave per cercare tutte le opzioni contemporaneamente.

Bene, tutto sommato, non ci vuole molto per identificare un adatto Divi layout del negozio online. Devi solo integrarlo con WooCommerce e sarai sulla buona strada per creare un attraente sito di e-commerce WordPress.

Andando avanti, una cosa particolarmente eccezionale che noterai è che Divi non si concentra solo sull'aspetto. I layout di WooCommerce forniti con il tema Divi sono stati realizzati pensando anche alla funzionalità.

Quindi, oltre alle tipiche pagine di negozi come checkout, prodotti e carrello, Divi include moduli di e-commerce per impostazione predefinita. Più specificamente, ottieni sezioni come prodotti in vetrina, articoli in saldo e molto altro.

Divi è adatto a WooCommerce?

Tutto sommato, Divi è sempre più popolare perché è fondamentalmente una soluzione a tema WordPress all-in-one.

Combinati, Divi Page Builder e Divi Theme l'offerta offre praticamente tutto il necessario per configurare qualsiasi tipo di sito WordPress. E questo include un negozio WooCommerce completamente funzionale con tutte le funzionalità di e-commerce di base.

👉 In poche parole, Divi è un'opzione che vale la pena considerare per il tuo sito WooCommerce perché:

  • Puoi personalizzare il tuo sito Web WooCommerce tramite un editor visivo con trascinamento della selezione.
  • Divi ti consente di salvare le tue modifiche come elementi globali in tutti i layout.
  • Viene fornito con oltre 20 layout di siti Web predefiniti ben progettati.
  • È possibile esportare facilmente i layout e, successivamente, sfruttarli su altri siti Web.
  • Puoi progettare il tuo negozio WooCommerce con più colonne, righe ed elementi di contenuto.
  • Tutti i layout di WooCommerce sono stati ottimizzati per i dispositivi mobili.
  • Proprio come MS Word, la modifica del contenuto del testo è semplice come fare clic e digitare.
  • L'intero processo di personalizzazione del sito viene monitorato in tempo reale, fornendo di conseguenza un'anteprima in tempo reale di tutte le modifiche di progettazione.
  • I layout di WooCommerce sono dotati di pagine e moduli principali del negozio online.

Passo 1: iscriviti con temi eleganti per ottenere l'accesso a Divi

Inizia andando al Elegante pagina di prodotti tematici per il tema Divi WordPress. Questa pagina offre l'opzione per una demo del tema e un pulsante di download rapido. Elegant Themes vende i suoi temi utilizzando una struttura di pagamento annuale o una tantum che è utile per gli sviluppatori con più siti client o persone che gestiscono numerosi siti di e-commerce. Non puoi davvero comprare solo un tema, ma il Piano Personal per $ 67 all'anno è simile a quello che potresti pagare per un tema normale e puoi interrompere i pagamenti annuali se non vuoi più il supporto. Sentiti libero di giocare con il tema prima di impegnarti per il pagamento.

Tema Divi WordPress

Passo 2: installa Divi sul tuo sito WordPress

Dopo esserti registrato, fai clic sul pulsante di download per il tema. Questo mette il tema come un file zip sul tuo computer. Vai alla scheda Aspetto sul back-end del tuo sito WordPress e fai clic sull'opzione Temi.

Wordpress nuovo tema

Passaggio 3: fare clic sul pulsante Aggiungi nuovo

Wordpress aggiunge un nuovo tema

Fai clic sul pulsante Carica tema. Trova e carica il file zip del tema. Passare attraverso il processo per attivare completamente il tema e quindi si dovrebbe essere in grado di vedere il tema sul frontend del tuo sito.

Caricamento del tema Wordpress

Passaggio 4: configura il tuo negozio WooCommerce

Se vai al Pagina di documentazione del tema Divi troverai praticamente tutti gli strumenti e le funzionalità con cui puoi lavorare sul tema, ma ci concentreremo principalmente sulla creazione di un sito di e-commerce. Il tema di Divi è completamente compatibile con WooCommerce in modo da poter visualizzare tutti i tuoi prodotti da quello.

La cosa fantastica è che l'iscrizione iniziale a SiteGround ha già installato WooCommerce sul tuo sito Web WordPress, quindi non devi preoccuparti di installarlo o configurarlo. Dovrebbe essere già disponibile nella tua dashboard.

Passo 5: aggiungi i tuoi primi prodotti a WooCommerce

Tecnicamente hai già configurato il sito di e-commerce, ma vogliamo aggiungere alcuni prodotti per farlo sembrare un sito di e-commerce sul frontend. Vai alla tua dashboard di WordPress, fai clic sulla scheda Prodotti sotto WooCommerce e fare clic sulla voce Aggiungi prodotto.

WooCommerce aggiunge un nuovo prodotto

Terzo

Questo fa apparire una nuova pagina di prodotto da compilare. Sembra molto simile a qualsiasi editor di pagine di WordPress, tranne che puoi aggiungere un nome di prodotto, una descrizione e un'immagine in primo piano in modo che le persone possano vedere come appare il prodotto sul tuo sito web.

L'e-commerce aggiunge un nuovo campo di prodotto

Step 7: esplora le funzionalità di WooCommerce

Se scorri verso il basso sotto l'area della descrizione troverai tutte le possibili funzioni di WooCommerce con cui giocare. Sentiti libero di modificare cose come numeri SKU, inventario, prezzi, spedizioni e attributi. Le caratteristiche sono troppo vaste per poterle delineare tutte qui, ma puoi andare al Pagina di documentazione di WooCommerce per capire tutto ciò che puoi impostare sul tuo sito di e-commerce.

Funzionalità di WooCommerce

Passaggio 8: creare la home page

Il punto centrale di questo è quello di crea una homepage o pagina normale che presenta tutti i tuoi prodotti quando le persone si presentano al tuo sito. Pertanto, si dovrebbe andare su Pages> Aggiungi nuovo sul lato sinistro del dashboard di WordPress.

Wordpress nuova pagina

Passaggio 9: aggiungi un titolo per la tua pagina Divi

Crea un titolo per la tua pagina. Fai clic sul pulsante Usa il generatore di pagine nella parte superiore e tocca l'area Inserisci moduli per includere un'intestazione a larghezza intera. Non devi scegliere un'intestazione a larghezza intera, ma stiamo andando a questo tutorial.

Pagina wordpress costruttore

Terzo

Fare clic sul pulsante Intestazione larghezza completa.

Aggiungi un'intestazione

Terzo

Inserisci i dettagli per il titolo del sito, il testo della sottotitolo e il colore del testo. È anche possibile modificare l'etichetta amministrativa, che è principalmente per il proprio riferimento. Premi il pulsante Salva quando completato.

Personalizzazione dell'intestazione

Terzo

Toccare le tre barre a sinistra del modulo di intestazione Full Width per modificare altre impostazioni.

Configurazione woocommerce di WordPress

Terzo

Qui puoi dare all'intestazione un bel colore di sfondo e persino includere un video per la tua azienda.

Tweak questi pulsanti intorno

Terzo

Ora che l'intestazione è completa, possiamo includere il modulo e-commerce facendo clic sull'area Inserisci colonne.

Configurazione e-commerce di Wordpress

Terzo

Scegli quante colonne vuoi, quindi fai clic sull'opzione Inserisci moduli che appare. Seleziona il pulsante Negozio in basso.

Configurazione e-commerce di Wordpress

Terzo

Sentiti libero di modificare il modo in cui desideri visualizzare i tuoi prodotti. Quindi potresti voler mostrare i tuoi prodotti recenti, insieme agli articoli 12 sulla pagina, alcune colonne e come vuoi che vengano ordinati. Fai clic sul pulsante Salva.

Configurazione e-commerce di Wordpress

Passaggio 17: Anteprima e pubblicazione

Una volta completato, puoi premere il pulsante Anteprima o Pubblica per visualizzare le modifiche sul frontend. Come puoi vedere, i prodotti si presentano bene e puoi sempre tornare indietro per modificare i tuoi prodotti o le impostazioni del negozio sul backend di WordPress. Congratulazioni!

In caso di domande sulla configurazione di Tema Divi WordPress, fatecelo sapere nella sezione commenti qui sotto.

Conclusione

E questo è tutto ciò che serve per ottenere il tuo Divi Negozio online WooCommerce attivo e funzionante utilizzando un account di hosting SiteGround.

Andando avanti, puoi essere certo che SiteGround gestirà tutte le cose tecniche critiche come gli aggiornamenti di WordPress e WooCommerce sicurezza. Questa è la differenza fondamentale tra l'hosting WooCommerce gestito e le normali soluzioni di hosting condiviso. Quindi, ti dà il tempo e lo spazio tanto necessari per concentrarti sulla gestione del tuo negozio WooCommerce.

E come abbiamo già visto, dovrebbe essere un gioco da ragazzi con il tema Divi. Puoi sempre accedere al tuo layout Divi WooCommerce dal tuo backend WordPress per personalizzarlo ulteriormente. Se lo desideri, puoi persino modificare l'intero design spostandoti in un layout diverso in grado di gestire anche un negozio WooCommerce. La scelta è tua.

Se hai domande sulla configurazione del tema Divi WordPress, faccelo sapere nella sezione commenti qui sotto.

Divi Valutazione: 5.0 - Recensione di

Catalin Zorzini

Sono un blogger di web design e ho iniziato questo progetto dopo aver trascorso alcune settimane cercando di capire quale sia la migliore piattaforma di e-commerce per me. Controlla la mia corrente i migliori costruttori di siti di e-commerce 10.