Cum să creați un magazin online fantastic cu WooCommerce, Divi și SiteGround (martie 2021)

Peste 74 de milioane de site-uri depind de platforma WordPress pentru a-și găzdui blogurile, pentru a-și vinde produsele sau pentru a scrie doar meditațiile zilnice pentru ca lumea să le vadă. Când începeți să vă construiți site-ul de comert electronic cu siguranță aveți o mulțime de alegeri de făcut, iar WordPress se leagă de asta.

Care dintre cei mai remarcabili platforme de comert electronic vei alege? Aveți de gând să luați o temă pentru a vă vinde produsele sau există cineva pe care să îl puteți plăti pentru a construi site-ul de la zero? La naiba, ce intenționați chiar să vindeți prin intermediul site-ului dvs. de comerț electronic?

Notă editorului: această postare a fost publicată inițial pe 15 ianuarie 2015 și a fost complet renovată și actualizată pentru acuratețe și exhaustivitate.

Există mii până la milioane de teme WordPress dintre care puteți alege atunci când căutați structura frontend și backend pentru a începe să vindeți online. Aproape la fel cu găzduirea (dar preferăm SiteGround or Bluehost).

Cele mai bune teme includ instrumente de gestionare a comerțului electronic rapide și ușoare, astfel încât să puteți încărca produse și să gestionați lucruri precum reduceri, recompense, butoane și pagini de produse. Tema dvs. este, de asemenea, primul lucru pe care îl vor vedea oamenii când vă vizitează site-ul. Îi îndrumă prin proces și poartă într-adevăr diferența dintre cineva care este mulțumit sau nu de experiență.

Pe scurt, temele WordPress sunt cruciale, iar Divi Tema WordPress din Teme elegante este o opțiune destul de drăguță pe care trebuie să o luați în considerare. Poate fi utilizat pentru un site web de afaceri standard, dar include și integrări pentru vânzarea comerțului electronic și procesele de vânzare rapide. Să învățăm cum să creăm un magazin online cu tema Divi WordPress.

Obțineți mai întâi domeniul și găzduirea dvs.

????Primul pas în orice proces de creare a site-ului web este apucarea unui cont de găzduire, a unui nume de domeniu și instalarea WordPress pe site. Divi nu este diferit. Există o mulțime de modalități de a obține găzduire și nume de domenii, dar personal cred că SiteGround este una dintre cele mai sigure și fiabile opțiuni. (Pentru mai multe detalii, consultați detaliile noastre Recenzie SiteGround).

Ce este foarte interesant este că SiteGround oferă un sistem specializat găzduire WooCommerce gestionată pachet de servicii cu aproape tot ce aveți nevoie pentru a începe să vindeți online. În cadrul pachetului, vă puteți mulțumi fie cu Planul StartUp pentru incepatori, Planul GrowBig pentru afaceri în creștere sau GoGeek pentru magazinele WooCommerce consacrate.

Fiecare dintre acestea oferă funcții avansate pentru optimizarea site-ului dvs. WooCommerce la un preț rezonabil.

Acestea fiind spuse, un alt serviciu de găzduire pe care l-am recomanda cu tărie pentru magazinele Divi WooCommerce este BlueHost. Deși caracteristicile de aici nu se potrivesc cu cele ale SiteGround, veți primi totuși găzduirea WooCommerce prin pachetul său de comerț electronic WordPress. Planurile pot gestiona confortabil un magazin Divi WooCommerce, dar, din păcate, nu veți primi servicii gestionate.

???? Acum, din motive de claritate, să continuăm cu SiteGround ...

Cum să începeți?

Du-te la Găzduire WooCommerce gestionată de SiteGround pagina, selectați un plan ideal și faceți clic Obțineți planul.

În opinia mea, Planul GoGeek pare cea mai potrivită opțiune, deoarece acceptă site-uri web WooCommerce nelimitate cu capabilități avansate de comerț electronic. În afară de mai multă putere a serverului, beneficiați de asistență prioritară, organizare WordPress, backup la cerere și resurse super-chacher, precum și transferuri gratuite de site-uri și Cloudflare CDN, printre alte caracteristici solide.

???? Și în ceea ce privește alocațiile pentru resurse, acest plan include:

  • Cutie poștală de 6 GB
  • 1 GB stocare bază de date
  • Stocare SSD
  • Transfer de date nemăsurat
  • Spațiu de stocare 30GB
  • Până la 100,000 de vizite lunare

Țineți cont de faptul că acest serviciu începe de la 11.95 USD pe lună, și este foarte asemănător cu modul în care ați instala un site WordPress obișnuit pe un cont de găzduire BlueHost.

Dar nu uitați, acesta este un preț special pentru începători. Așteptați-vă să crească la 34.95 USD în viitoarele reînnoiri, ceea ce este încă o taxă rezonabilă dacă luați în considerare toate caracteristicile pe care le obțineți pe termen lung.

Acum, după ce ați selectat planul preferat, SiteGround vă va îndruma către pagina sa de înregistrare a domeniului. Dacă dețineți deja un domeniu, alegeți a doua opțiune și introduceți detaliile acestuia. În caz contrar, continuați cu înregistrarea unui nume de domeniu nou la 15.95 USD pe an.

Urmează etapa finală, în care alegeți opțiunile de găzduire preferate, precum și introduceți informațiile de plată și detaliile personale, înainte de a crea contul.

Ei bine, desigur, acestea sunt lucruri de bază pe care le-ați manipulat de multe ori înainte. Deci, nu ar trebui să aveți dificultăți în introducerea numărului de telefon, țării, numelui, e-mailului, parolei contului etc.

Partea de plată necesită introducerea detaliilor cardului dvs. de credit. Puteți continua cu oricare Descoperă, MasterCard or Visa.

Cu toate acestea, și destul de interesant, SiteGround nu listează PayPal, în ciuda popularității sale în creștere în rândul comercianților WooCommerce. Dar, din fericire, se pare că pot accepta plăți PayPal, deși indirect.

Prin urmare, dacă acesta este modul dvs. preferat, lăsați câmpurile necompletate și contactați agenții de vânzări SiteGround prin intermediul instrumentului de chat live. Acestea vă vor ajuta să finalizați procesul prin PayPal.

Ultima secțiune conține mai multe opțiuni pentru serviciul de găzduire, inclusiv locația preferată a centrului de date, plus perioada de abonament.

Acum, pentru a minimiza distanța de transfer de date între serverele Siteground și vizitatorii site-ului dvs. WooCommerce, alegeți locația centrului de date cea mai apropiată de zona dvs. de piață țintă.

Apoi alegeți orice servicii suplimentare pe care doriți să le includeți în pachetul dvs. și voila! Asta este tot ce trebuie pentru a configura un cont Siteground.

După ce ați terminat, conectați-vă la contul dvs. și mergeți direct la zona cPanel. Veți găsi un instalator auto WordPress implicit. Deci, selectați-l, introduceți detaliile de conectare WordPress și apăsați pe butonul de instalare.

Ei bine, veți observa că procesul de instalare WordPress durează câteva secunde, deoarece este automatizat. Și după ce totul este configurat, SiteGround vă va oferi numele de domeniu adecvat pentru a accesa dacă doriți să schimbați lucrurile de pe backend-ul site-ului dvs.

Crearea magazinului dvs. online cu Divi

Ce este Divi?

Ok, dacă nu l-ai încercat, pariez că ai auzit deja despre asta. Divi nu este o temă obișnuită WooCommerce. Este, de fapt, una dintre cele mai populare teme WordPress pe teme elegante. Și, interesant, Divi este Temă elegantăprodusul emblematic.

Deci, ce este atât de special la această temă? Și există ceva remarcabil la WooCommerce Divi?

Ei bine, spre deosebire de temele tipice WordPress, Divi este mai mult un pachet cuprinzător. Asta înseamnă că combină caracteristicile tematice standard cu funcționalități suplimentare care sunt utile pentru magazinele Divi WooCommerce.

ce este divi

Totuși, nu mă înțelege greșit. Deși asistența WooCommerce a lui Divi este principalul obiectiv aici, tema este capabilă de mult mai mult decât atât. În esență, Divi poate fi integrat perfect cu orice tip de site, datorită gamei sale largi de planuri de site-uri web. Nu doar comerțul electronic.

Apoi, pentru a finaliza acest lucru, Divi vine cu propriul plugin intuitiv pentru generatorul de pagini WordPress. Îl puteți utiliza pentru a vă personaliza în mod liber magazinul Divi WooCommerce fără nicio codificare.

De fapt, Divi a fost dezvoltat pentru începători. Deci, vă puteți aștepta să găsiți un panou de control îngrijit, cu aproape nici o curbă de învățare. Este nevoie de doar câteva minute pentru a obține un blocaj asupra întregului ecosistem Divi, a-l configura și a personaliza aspectele WooCommerce ale Divi.

???? Prin urmare, la final veți putea valorifica DiviE:

  • Matrice de machete personalizabile pentru orice tip de site web WordPress, inclusiv magazinele online WooCommerce.
  • Generator de pagini ușor de utilizat, care oferă o serie de elemente ale site-ului web și capabilități de proiectare.
  • Proces flexibil de personalizare fără nicio formă de codificare. Chiar și începătorii pot configura și regla confortabil magazinele Divi WooCommerce complet funcționale.
  • Integrare simplă WordPress. Divi este una dintre puținele teme WordPress externe care pot fi instalate fără probleme, fără modificări complexe.
  • Șabloane WooCommerce optimizate pentru comerț electronic.

Divi Drag and Drop Page Builder

Așa cum am spus, Divi vine în două arome diferite. Când plătiți abonamentul pe Teme elegante, veți găsi tema standard Divi pe tabloul de bord, însoțită de pluginul Divi WordPress Page Builder.

Dar, este demn de remarcat faptul că acest constructor nu este legat exclusiv de tema Divi. Acesta vine ca un plugin suplimentar pentru fiecare temă achiziționată de la Elegant Themes.

Acestea fiind spuse, Divi WordPress Page Builder este un editor drag-and-drop cu capabilități avansate de personalizare. Vă permite să mutați și să definiți elemente, coloane, rânduri și module fără nicio experiență de codificare. Cu alte cuvinte, este tipul de constructor al unui Divi WooCommerce începător ar spera să obțină.

setări divi

Dar, nu faceți nicio greșeală. Deși Divi Page Builder vizează începătorii, este un editor care facilitează și dezvoltatorii cu experiență. Aceștia își pot combina în mod sistematic caracteristicile vizuale cu comenzile CSS pentru a împinge site-urile web Divi WooCommerce la nivelul următor.

Gândiți-vă, totuși, nu aveți nevoie de un dezvoltator pentru a proiecta toate elementele din magazinul dvs. Divi WooCommerce. Vă puteți baza doar pe funcționalități vizuale.

Si tu ce știi?

Divi chiar încearcă să ușureze întregul proces prin etichetarea plus codificarea culorilor a modulelor sale de aspect.

Și vorbind despre aceasta, o altă prevedere notabilă aici este simplificarea generală a Divi a procesului de personalizare a aspectului. Dacă doriți să introduceți o nouă secțiune, de exemplu, ar trebui să faceți un singur clic. Apoi, duplicarea, eliminarea și inserarea modulelor pentru magazinul dvs. Divi WooCommerce vă vor face doar câteva clicuri pe butoane.

Între timp, fereastra de editare a Divi va afișa modificările de aspect ale site-ului dvs. în timp real. Veți putea urmări vizual fiecare ajustare și veți vedea cum afectează designul de perspectivă general al magazinului dvs. Divi WooCommerce.

Aspecte ale site-ului web Divi WooCommerce prealabil

Pentru a vă salva de la durerosul proces de creare a unui site web de la zero, tema Divi WordPress vine cu o serie de șabloane de site prestabilite. Și din moment ce este posibil să aveți nevoie de diferite opțiuni de aspect ale aceluiași șablon, Divi oferă design-urile sale de site-uri web ca pachete complete. În consecință, veți obține diferite modele de machete și culori.

Ei bine, pentru a fi mai precis, Divi oferă aproximativ 7-8 machete predefinite diferite pe fiecare pachet de site-uri web. Având în vedere că fiecare dintre acestea este complet construit, puteți adopta cu ușurință aspectele fără a reface extensiv structura lor de bază. Ai doar câteva modificări ici și colo.

machetele site-ului divi

Acum, pentru a vă găsi unul perfect pentru magazinul dvs. online WooCommerce, pur și simplu derulați prin diferitele categorii de site-uri pe tema Divi. Sau, alternativ, utilizați cuvinte cheie pentru a căuta toate opțiunile simultan.

Ei bine, una peste alta, nu durează mult până la identificarea unui potrivit Divi aspectul magazinului online. Trebuie doar să îl integrați cu WooCommerce și veți fi în cale să creați un site atractiv de comerț electronic WordPress.

Mai departe, un lucru deosebit de remarcabil pe care îl veți observa este că Divi nu se concentrează doar pe aspect. Aspectele WooCommerce care vin cu tema Divi au fost create și cu funcționalități.

Deci, pe lângă paginile tipice ale magazinului, cum ar fi plata, produsele și coșul de cumpărături, Divi include în mod implicit module de comerț electronic. Mai precis, veți obține secțiuni precum produse recomandate, articole din vânzare și multe altele.

Divi este potrivit pentru WooCommerce?

Toate lucrurile luate în considerare, Divi este din ce în ce mai popular, deoarece este fundamental o soluție tematică WordPress all-in-one.

Combinate, Divi Page Builder și Tema Divi oferta oferă aproape tot ce ai nevoie pentru a configura orice tip de site WordPress. Și asta include un magazin WooCommerce complet funcțional, cu toate capabilitățile de bază de comerț electronic.

???? Pe scurt, Divi este o opțiune demnă de luat în considerare pentru site-ul dvs. WooCommerce deoarece:

  • Puteți să vă personalizați site-ul web WooCommerce printr-un editor vizual drag-and-drop.
  • Divi vă permite să vă salvați modificările ca elemente globale în toate aspectele.
  • Acesta vine cu peste 20 de planuri de site-uri web preconstruite bine concepute.
  • Puteți exporta cu ușurință aspectele și, ulterior, le puteți utiliza pe alte site-uri web.
  • Puteți proiecta magazinul dvs. WooCommerce cu mai multe coloane, rânduri și elemente de conținut.
  • Toate aspectele WooCommerce au fost optimizate pentru dispozitivele mobile.
  • La fel ca MS Word, editarea conținutului textului este la fel de simplă ca un clic și apoi o tastare.
  • Întregul proces de personalizare a site-ului este urmărit în timp real, oferind în consecință o previzualizare live a tuturor modificărilor de design.
  • Aspectele WooCommerce vin cu pagini și module principale ale magazinului online.

Pasul 1: Înscrieți-vă cu teme elegante pentru a obține acces la Divi

Începeți prin a merge la Pagina produsului Teme elegante pentru tema Divi WordPress. Această pagină oferă opțiunea pentru o demonstrație tematică și un buton de descărcare rapidă. Teme elegante își vinde temele folosind o structură de plată anuală sau unică, ceea ce este plăcut pentru dezvoltatorii cu mai multe site-uri de clienți sau pentru persoanele care gestionează numeroase site-uri de comerț electronic. Nu puteți cumpăra cu adevărat o singură temă, ci Plan personal pentru 67 USD pe an este similar cu ceea ce ați putea plăti pentru o temă obișnuită și puteți opri plățile anuale dacă nu mai doriți sprijinul. Simțiți-vă liber să jucați cu tema înainte de a vă angaja la plată.

Tema Divi WordPress

Pasul 2: Instalați Divi pe site-ul dvs. WordPress

După ce vă înscrieți, faceți clic pe butonul de descărcare pentru temă. Aceasta plasează tema ca fișier zip pe computer. Accesați fila Aspect de pe backend-ul site-ului dvs. WordPress și faceți clic pe opțiunea Teme.

Wordpress temă nouă

Pasul 3: Faceți clic pe butonul Adăugați nou

Wordpress adaugă o temă nouă

Faceți clic pe butonul Încărcare temă. Găsiți și încărcați fișierul zip tematic. Parcurgeți procesul pentru a activa complet tema și atunci ar trebui să puteți vedea tema pe frontend-ul site-ului dvs.

Încărcare temă Wordpress

Pasul 4: Configurați-vă magazinul WooCommerce

Dacă te duci la Pagina de documentare a temei Divi veți găsi aproape fiecare instrument și caracteristică cu care puteți lucra la temă, dar ne vom concentra în primul rând pe crearea unui site de comerț electronic. Tema Divi este pe deplin compatibil cu WooCommerce, astfel încât să puteți afișa toate produsele din acesta.

Ce este minunat este că înregistrarea inițială SiteGround a instalat deja WooCommerce pe site-ul dvs. WordPress, deci nu trebuie să vă faceți griji cu privire la instalarea sau configurarea acestuia. Ar trebui să fie deja disponibil în tabloul de bord.

Pasul 5: Adăugați primele produse la WooCommerce

Din punct de vedere tehnic, aveți deja configurat site-ul de comerț electronic, dar vrem să adăugăm câteva produse pentru a face să pară un site de comerț electronic pe frontend. Accesați tabloul de bord WordPress, faceți clic pe fila Produse de sub WooCommerce și faceți clic pe elementul Adăugare produs.

WooCommerce adaugă un produs nou

Etapa 6

Aceasta afișează o nouă pagină de produs pe care o puteți completa. Arată foarte asemănător cu orice editor de pagini WordPress, cu excepția faptului că puteți adăuga un nume de produs, o descriere și o imagine prezentată, astfel încât oamenii să poată vedea cum arată produsul pe site-ul dvs. web.

Comerțul electronic adaugă un câmp de produs nou

Pasul 7: Explorați caracteristicile WooCommerce

Dacă derulați în jos sub zona de descriere, veți găsi toate caracteristicile posibile WooCommerce cu care să vă jucați. Simțiți-vă liber să modificați lucruri precum numerele SKU, inventarul, prețurile, transportul și atributele. Funcțiile sunt mult prea vaste pentru a le putea contura pe toate aici, dar puteți merge la Pagina de documentare WooCommerce pentru a înțelege tot ce puteți configura pe site-ul dvs. de comerț electronic.

Caracteristici WooCommerce

Pasul 8: Creați pagina de pornire

Scopul acestui lucru este să creați o pagină de pornire sau pagină obișnuită care conține toate produsele dvs. atunci când oamenii apar pe site-ul dvs. Prin urmare, ar trebui să accesați Pagini> Adăugați nou în partea stângă a tabloului de bord WordPress.

Wordpress pagină nouă

Pasul 9: Adăugați un titlu pentru pagina dvs. Divi

Creați un titlu pentru pagina dvs. Faceți clic pe butonul Utilizați Generatorul de pagini din partea de sus și atingeți zona Inserare module pentru a include un antet cu lățime completă. Nu trebuie să alegeți un antet cu lățime completă, dar vom face acest tutorial.

Creator de pagini Wordpress

Etapa 10

Faceți clic pe butonul Full Width Header.

Adăugați un antet

Etapa 11

Completați detaliile pentru titlul site-ului, textul subtitrării și culoarea textului. Puteți chiar modifica eticheta de administrare, care este în principal pentru propria dvs. referință. Apăsați butonul Salvare când ați terminat.

Personalizarea antetului

Etapa 12

Atingeți cele trei bare din stânga modulului antet Lățime completă pentru a modifica mai multe setări.

Configurare woocommerce WordPress

Etapa 13

Aici puteți da antetului o culoare de fundal frumoasă și chiar puteți include un videoclip pentru compania dvs.

Modificați aceste butoane

Etapa 14

Acum că antetul este complet, putem include modulul de comerț electronic făcând clic pe zona Inserare coloane.

Configurare comerț electronic Wordpress

Etapa 15

Alegeți câte coloane doriți, apoi faceți clic pe opțiunea Insert Modules care apare. Selectați butonul Magazin din partea de jos.

Configurare comerț electronic Wordpress

Etapa 16

Nu ezitați să modificați modul în care doriți să afișați produsele. Așadar, vă recomandăm să afișați produsele dvs. recente, împreună cu 12 articole pe pagină, câteva coloane și cum doriți să fie comandate. Faceți clic pe butonul Salvare.

Configurare comerț electronic Wordpress

Pasul 17: Previzualizați și publicați

Odată ce acest lucru este complet, puteți apăsa butonul Previzualizare sau Publicare pentru a vizualiza modificările de pe frontend. După cum puteți vedea, produsele apar frumos și puteți oricând să vă întoarceți pentru a vă schimba produsele sau setările vitrinei din backend-ul WordPress. Felicitări!

Dacă aveți întrebări despre configurarea Tema Divi WordPress, vă rugăm să ne anunțați în secțiunea de comentarii de mai jos.

Concluzie

Și asta este tot ce este nevoie pentru a obține dvs. Divi Magazinul online WooCommerce funcționează utilizând un cont de găzduire SiteGround.

Înaintând, puteți fi siguri că SiteGround se va ocupa de toate lucrurile tehnice esențiale, cum ar fi actualizările WordPress și WooCommerce Securitate. Aceasta este diferența fundamentală între găzduirea WooCommerce gestionată și soluțiile regulate de găzduire partajată. Prin urmare, vă oferă timpul și spațiul atât de necesare pentru a vă concentra asupra gestionării magazinului dvs. WooCommerce.

Și, așa cum am văzut deja, ar trebui să fie o briză cu tema Divi. Puteți accesa oricând aspectul Divi WooCommerce din backend-ul WordPress pentru a-l personaliza în continuare. Dacă doriți, puteți chiar să schimbați complet designul complet, trecând la un aspect diferit, care să poată gestiona și un magazin WooCommerce. Alegerea este a ta.

Dacă aveți întrebări despre configurarea temei Divi WordPress, vă rugăm să ne anunțați în secțiunea de comentarii de mai jos.

Divi
Rating-ul: 5.0 - Revizuit de

Catalin Zorzini

Sunt blogger în design web și am început acest proiect după ce am petrecut câteva săptămâni luptându-mă să aflu care este cea mai bună platformă de comerț electronic pentru mine. Verificați curentul meu primii 10 constructori de site-uri de comerț electronic.