Cum transformi o tema WordPress de blog intr-una business

Astazi o sa vedem cum putem sa ne folosim de o tema WordPress simpla, de blog, pentru a face un site de prezentare.

Vom pleca de la tema child standard care vine cu Genesis Framework – Genesis Sample Theme – care arata cam asa.

genesis

Genesis Framework este un framework pentru WordPress, din punctul nostru de vedere, cea mai buna varianta pentru a construi un site pe WordPress. Are design responsive, este rapid, foloseste cele mai noi tehnologii: html5, css3, microdata; iar codul sursa este auditat dpdv al securitatii chiar de unii membri din echipa WordPress.

Pentru a transforma o tema de blog intr-una business, pentru un site de prezentare, trebuie sa definim mai intai ce inseamna tema WordPress business. In general, temele business au un homepage personalizat, nu doar o insiruire a ultimelor articole postate.

De obicei, temele business au pe homepage un slider sau o poza mare, un slogan, o prezentare a serviciilor, testimoniale ale clientilor, un call-to-action, etc. In acest gen o sa facem si noi tema noastra, fara a insista prea mult pe elementele de pe homepage, acest articol fiind doar o demonstratie conceptuala a ceea ce se poate face cu Genesis Framework.

Primul pas este sa deschidem un cont de hosting, instalam WordPress cu ajutorul Softaculous (din cPanel) apoi ne logam in wp-admin unde incarcam Genesis Framework si Genesis Sample Theme, tema pe care o si activam.

Mai avem nevoie si de cateva pluginuri:

  • Genesis Simple Edits
  • Genesis Title Toggle
  • Genesis Translations
  • Genesis Bootstrap Carousel
  • Widget Logic
  • Simple Basic Contact Form
  • Symple Shortcodes

Pentru a avea un obiectiv bine definit care ne ajuta sa fim eficienti in constructia site-ului, m-am gandit ca tema business nou creata sa fie pentru site-ul de prezentare al unei firme care pune parchet. E un exemplu luat la intamplare, poate fi orice. Demo-ul temei va fi accesibil international asa ca vom face site-ul in engleza.

Intram in wp-admin si facem cateva pagini – Homepage, About Us, Services, Contact.

In pagina de Contact punem shortcode-ul de la Simple Basic Contact Form, in pagina About Us punem un text de prezentare si o poza, pe pagina Servicii punem o lista cu serviciile prestate, preturi, termen de executie, etc.

Vom mai creea si 3 subpagini pentru Servicii – Servicii 1, 2, 3.

Homepage-ul necesita mai mult de lucru, deocamdata o sa setam layout ca Full Width si bifam Hide Title de la Title Toggle.

edit-homepage

Facem un meniu nou de la Aspect > Meniuri, punem paginile in meniu, il salvam si apoi de la Aspect > Widget-uri punem widgetul Meniu Personalizat in zona de widgeturi Antet Dreapta (Header Right).

De la Setari > Afisare setam „Homepage” ca pagina principala.

Home Slider Widget

In continuare o sa facem un widget care sa apara pe homepage intre header si content si care o sa contina un slider cu cele 3 servicii. In mod normal, nu recomandam folosirea sliderelor, exista suficiente studii care atesta ineficienta acestora in a obtine o rata de conversie buna insa multa lume prefera sliderele pe criterii exclusiv de frumusete asa ca o sa folosim si noi un slider in tema noastra.

Introducem urmatorul cod in functions.php. Ca sa simplificam interfata, scoatem si layouturile pe care nu le folosim.

https://gist.github.com/fasterwp/4730b04aba9ecb6a11ded348bd63e3ec

In acest moment, daca mergem la Aspect > Widgeturi ar trebui sa gasim zona de widget Home Slider in cadrul careia vor trage widgetul Genesis – Bootstrap Carousel iar pentru ca sliderul sa apara doar pe prima pagina vom introduce in caseta Widget Logic codul din imagine.

home-slider

NOTA: afisarea zonei de widget Home Slider doar pe prima pagina s-ar fi putut face si din functions.php insa am decis sa folosim Widget Logic pentru a putea sa afisam in zona respectiva si alte elemente, in functie de pagina. De exemplu, pe pagina Contact vom afisa o harta Google.

Sliderul se configureaza de la Genesis > Slider Settings ca sa preia cele 3 pagini de servicii (e nevoie sa stiti ID-urile paginilor). In cadrul paginilor respective va trebui sa setam ca Imagine reprezentativa o imagine de dimensiuni 1920x380px.

Cautam pe Google Images „wooden background”, „wooden textures”, „wooden floors” sau ce ne mai trece prin minte ca sa gasim o poza frumoasa. Atentia la drepturile de autor, noi am folosit poze de pe graphicburger.com care sunt gratuite.

Copywriting

Urmatorul pas este cel de copywriting – crearea si introducerea continutului pe site.

Acest pas este probabil cel mai important in crearea unui site de prezentare, arhitectura informatiei fiind principalul motor al imbunatatirii ratei de conversie.

Nu vom acorda prea multa atentie acestui lucru aici pentru ca scopul nostru este demonstrarea unui concept – transformarea unei teme de blog intr-una business – si nu crearea efectiva a unui site de prezentare pentru un client real.

Am folosit pluginul Symple Shortcodes ca sa introducem diverse elemente: testimoniale, tabele de pret, call-to-action, etc. Pluginul se poate descarca gratuit de aici.

Desi demonstratia conceptului este terminata si avem in acest moment o tema business, am decis sa o si stilizam putin din CSS ca sa arate mai bine, editand fisierul style.css al temei.

Pentru gasirea unor culori potrivite am dat o cautare pe Google dupa „color palette from image” ca sa ne alegem o paleta de culori potrivita cu una dintre pozele alese pentru site.

Am ajuns pe cssdrive.com unde incarcam poza si ne apare un set de culori pe care le vom folosi la stilizare.

Modificarile sunt prea numeroase pentru a le descrie in detaliu aici (am schimbat culori, fonturi, am micsorat inaltimea headerului, etc).

Final

KIMI-My-WordPress-Site

2 responses

  1. Avatar Cristi
    Cristi

    Misto, o singura nelamurire am. De ce recomanzi instalarea wordpress folosind Softaculous? Am citit multe articole din afara care nu recomanda instalarea folosind scripturi.

    Si la un moment dat, un plugin nu functiona bine pe wordpress instalat cu scripturi. Am instalat manual si mergea. Ambele instalari noi. Oricum, la updateurile facute, si manual iti ia 2 minute:)

    1. Avatar Andrei Chira
      Andrei Chira

      Nu am intalnit niciodata probleme cu instantele WP create cu Softaculous. Se poate instala si manual, eu nu am preferinte, daca am datele FTP la indemana instalez prin FTP, daca sunt logat in cPanel instalez cu Softaculous.

Lasă un răspuns

Adresa ta de email nu va fi publicată.