Transcript
Panimula
Ang araling ito ay tungkol sa landing pages at gagawa tayo ng sarili nating landing page gamit ang block theme. Ang landing page ay isang marketing page. Ito ay isang inilaang pahina kung saan ka dadalhin mula sa isang panlabas na pinagmulan, tulad ng social media post, advertisement, o email. Ang layunin ng landing page ay hikayatin ang mga bisita na gumawa ng aksyon. Mapapansin mong walang header navigation sa landing page dahil nais mong alisin ang anumang sagabal at ituon ang pansin sa call to action. Ang pangunahing layunin nito ay hikayatin ang mga bisita na mag-sign up sa isang serbisyo, bumili ng produkto, sumali sa mailing list, o mag-convert ng mga bisita upang gawin ang isang partikular na aksyon.
Mga Pangunahing Elemento
Karaniwan, may apat na elemento na bumubuo sa isang matagumpay na landing page. Ang una ay ang hero section na may pamagat, subtitle, at visual, pati na rin ang call to action. Ang proposal o pamagat at subtitle ay karaniwang binibigyang-diin kung bakit kaakit-akit at kapana-panabik ang iyong alok at kung bakit dapat kumilos ang user. Ang call to action ang pinakamahalagang bahagi ng pahina, kaya siguraduhing malinaw ito at kapansin-pansin, at sa pagdagdag ng salitang “aking” o “ako,” nagiging mas personal ito. Ang susunod na mahalagang bahagi ay ang pagbibigay-diin sa mga benepisyo ng iyong alok. Ipaliwanag kung paano natutupad ng iyong produkto o serbisyo ang pangakong binanggit mo sa naunang bahagi. Sunod, ang pagbibigay ng testimonials at social proof ay napakahalaga rin. Magbigay ng kredibilidad gamit ang testimonials, statistics, at mga halimbawa ng tagumpay ng iba. Sa huli, depende sa konteksto, ang FAQ section ay makakatulong din. Ang pagsagot sa mga madalas itanong ay makakatulong upang mapawi ang alinlangan o sagutin ang mga karaniwang tanong.
Halimbawa
Ngayon, ipapakita ko kung paano ko ginawa ang sumusunod na landing page para sa isang interior design company gamit ang block theme. Una, ginamit ko ang Twenty Twenty-Five default theme para gawin ang site na ito. Pagkatapos, pumunta ako sa Site Editor, binuksan ang Styles, at binago ang background color ng site sa Accent 5, isa sa mga kulay na bahagi ng theme’s color palette. Sunod, pupunta ako sa templates para gumawa ng custom template para sa aking landing page at pangalanan ito ng naaayon. Kapag na-click ang Create, mabubuksan natin ang template at magagawa ang mga pagbabago. Tatanggalin ko ang header dahil ayokong magkaroon ng header ang aking landing page. Tatanggalin ko rin ang Featured Image block at ilang horizontal padding mula sa Group block para alisin ang hindi kailangang espasyo. Kapag handa na ang custom template, i-click ang Save at pumunta sa pages. Magdadagdag ako ng bagong page at papangalanan itong “Book a consultation.” Kapag nagawa na ang page, maaari nating i-assign ang custom template. Sa Pages, sa tabi ng template sa sidebar settings, piliin ang swap template at piliin ang landing page custom template na ginawa natin, na tanging footer lang ang laman. Pagkatapos, bubuuin ko ang buong page gamit ang mga patterns na kasama sa theme. Magdagdag tayo ng iba’t ibang patterns para mabuo ang ating page. Magsisimula ako sa hero section, pagkatapos ay testimonial pattern, at iba pa. Mapapansin mo na kapag nagdagdag ka ng pattern, naka-zoom out ang view at makikita mo kung paano nabubuo ang page habang nagdadagdag tayo ng patterns mula sa iba’t ibang kategorya. Tatapusin ko ito sa pagdagdag ng frequently asked questions pattern at call to action.
Ngayon, sisimulan na nating i-modify ang bawat pattern isa-isa. Ang unang hakbang ay baguhin ang style ng bawat pattern sa style one, na kapareho rin ng kulay ng background ng site. Para sa testimonial pattern, tatanggalin ko ang pangalawang column dahil tatlong testimonials lang ang gusto kong ipakita. Idadagdag ko rin ang style one sa susunod na pattern. Sa three-column pattern, tatanggalin ko ang Image block sa bawat column dahil gagamitin ko ito para ipakita ang ilang stats. Pagkatapos, pipiliin ko ang style one para sa huling mga pattern. Sunod, sisimulan ko nang i-customize ang hero section. Tatanggalin ko ang content sa kaliwa at papalitan ng bagong heading at text. Susundan ito ng pag-update ng image sa kanan gamit ang larawan na na-upload ko na sa Media Library.
Sunod, magdadagdag tayo ng contact form. Para gawin ito, i-click ko ang publish at pupunta sa plugins. Maghahanap tayo ng forms at pipili ng angkop na plugin. Sa pagkakataong ito, i-install at i-activate ko ang WP Forms plugin. Kapag na-install na, gagawa ako ng unang form, blanko, at magdadagdag lang ng name at email fields. Para sa name field, pipiliin ko ang “simple” para payagan ang pagdagdag ng apelyido. Sa settings, babaguhin ko ang pangalan ng form sa “Quote” at ang text ng submit button sa “Get my quote” para maging mas personal. Para idagdag ang form, i-type ang forward slash WP at piliin ang form na Quote. Pagkatapos, bubuksan ko ang sidebar settings, mag-scroll pababa sa button styles, at babaguhin ang background color ng button sa itim at ang text color sa Accent 5. Sa ganitong paraan, tapos na ang hero section na may call to action.
Pag-scroll pababa sa susunod na pattern, ayos na ako sa testimonial section at kailangang i-update lang ang content. Sunod, lilipat tayo sa section na nagha-highlight ng isa sa mga benepisyo ng paggamit ng aming kumpanya. Una, papalitan ko ang image at ang content sa kaliwa ng bagong heading at text. Sisiguraduhin ko ring babaguhin ang laki ng heading sa XXL tulad ng ibang sections sa landing page. Sa huli, ililipat ko ang image at column mula kanan papuntang kaliwa. Tapos na ang section na ito. Sunod, lilipat tayo sa three-column pattern para ipakita ang ilang numero. Una, i-update ko ang heading at babaguhin ang laki sa XXL. Idadagdag ko ang mga kaukulang numero sa bawat heading ng bawat column, gagawing bold ang heading, at babaguhin ang laki sa XXL. I-aapply ito sa bawat column. Kapag nailagay na ang mga numero, i-update ang text sa ibaba. Para sa column 1, “10 taon sa negosyo”, column 2, “+500 bahay na nabago,” at column 3, “+12 design awards.”
Ang huling hakbang ay piliin ang heading at content sa bawat column at i-group sila sa Stack block. Pagkatapos, baguhin ang justification ng Stack block sa center sa bawat column. Tapos na ang social proof section at lilipat na tayo sa susunod na pattern. Muli, papalitan ang image sa kanan at ang content sa kaliwa ng bagong heading at text. Susundan ng pagbabago ng laki ng heading sa XXL. Sa FAQ section, ayos na ako sa disenyo, pero palalakihin ko rin ang heading. At siyempre, kailangang i-update ang mga tanong at sagot. Sa huli, i-update ang call to action sa ibaba ng page. Papalitan ko ang heading ng “Transform your spaces” at ang content sa ibaba. Pagkatapos, i-modify ang Buttons block sa pamamagitan ng pagbabago ng radius sa 0, pagbabago ng text ng Buttons block sa “Book a consultation,” at gawing bold ang text.
Konklusyon
At tapos na ang ating landing page. Kapag handa na ang landing page, maaari na tayong magpadala ng targeted traffic gamit ang ads, emails, o social media para makamit ang ating mga layunin.