Blog

Ano Nga Ba Talaga ang mga Shortcode?

Kung napansin mo, isa sa mga pangunahing tuntunin ng WordPress ay ang palagi, palaging gawing mas madali ang mga bagay para sa lahat– baguhan man o may karanasang developer. Isa sa mga paraan kung paano nila nakakamit ang layuning ito ay sa pamamagitan ng paggamit ng mga shortcode.

Tinutukoy sila ng WordPress.com Support Page nang ganito:

Mukhang napakasimple. Ngayon, kung hindi mo pa narinig ang tungkol sa mga shortcode bago ang artikulong ito, at hindi mo alam kung ano ang hitsura ng mga ito, ang mga ito ay ang mga tila lumang tekstong tulad ng code na nakapaloob sa mga square bracket.

Kung ikukumpara sa karaniwang code, na karaniwang ganito ang hitsura:

(Erm. Ano?)

shortcode naman sa pangkalahatan ay ganito ang hitsura:

(Kayang-kaya.)

…at kung isa kang developer (o kahit sino man na nakagamit na ng computer nang kahit dalawang beses), malamang na sasang-ayon ka na ang mismong pag-type at pag-click para lang magawa ang isang maliit na gawain ay maaaring umubos ng marami sa iyong oras. Sa parehong dahilan kung bakit mayroon tayong mga keyboard shortcut, umiiral ang mga shortcode upang gawing mas madali ang mga bagay para sa ating lahat, upang makatipid tayo sa oras para makagawa at makalikha ng mas magagandang bagay; halos katulad na katulad sila ng mga shortcut key dahil mayroon silang parehong layunin.

Ngayon, balikan natin ang partikular na shortcode na ito, katulad ng nasa itaas:

Ang partikular na ito ay tinatawag na embed shortcode at built-in nang default sa WordPress. Ini-embed nito ang video mula sa URL papunta sa iyong content. Kung nasa WordPress ka ngayon, maaari mong kopyahin at i-paste ang shortcode sa itaas sa iyong site kung nais mo itong subukan.

Gayunpaman, ang mga shortcode ay hindi ang perpektong solusyon sa pagtitipid ng oras. Sa aming nakaraang artikulo, mas pinalalim namin kung bakit may sarili ring kahinaan ang mga shortcode, at kung ano ang inihahanda ng Sandwich Team upang ayusin ang mga ito.

Sa ngayon naman, huwag mag-atubiling mag-eksperimento sa mga shortcode at tingnan kung ano ang magagawa ng mga ito para sa iyo.

Maligayang Pagbuo ng Site!

October 2, 2026
Shortcode Mapping: Paano Susuportahan ng PBS ang 800+ na Plugin at 2,000+ na Shortcode
When I started getting further into software development and WordPress, I noticed that not a lot of page builders I come across with have that “page builder standard” I was looking for: fast, easy, convenient.

Page Builder Sandwich, then, was created with the goal of having a builder meet these same standards.

I wanted- and still want it– to be the best page builder out there, and the best way I could accomplish that, I figured, was to add in features in a way in which page building becomes helpful and accessible to everyone –developers and noobs alike.

I’d like to note though, that I didn’t simply create PBS with the intent of merely bombarding it with features just for the sake of it.

I want to add in features that people would want to work with; features that hopefully, would make the experience of page building feel a little bit more like magic.

Nitong mga nakaraang linggo, nagdagdag ang team ng PBS ng elemento ng mapa, at elemento rin ng mga tab.

Ngayon, magmumukhang medyo madali at payak na gawain para sa amin ang manatili sa pagdaragdag ng bagong elemento kada ilang araw.

But I think it’d be better if we take it to the next level; to take a bigger leap, do something more drastic, something drizzled with a little more awesomesauce.

And so we came up with an idea: “How about we start supporting 800+ plugins along with their 2000+ shortcodes?!?!”

I know what you’re thinking: “How the heck can you support that much shortcodes? Is that even possible?”

Well, the simple answer is yes. Yes it is.

And we’ve managed to achieve this feat through shortcode mapping.

What is Shortcode Mapping?

Shortcode mapping makes building shortcodes more friendly.

Put more simply, shortcode mapping is like letting Page Builder Sandwich memorize all the shortcodes available on your site: their names, descriptions, their attributes, and what each of these attributes do.

Napakalaki ng mga pakinabang ng sistemang tulad nito:

1.) Since PBS already knows what your shortcodes are, you get to spend less time going through the documentation of each plugin you use, and check how to use their shortcodes.

2. ) In other words: Say goodbye to the grueling task of manually typing in your shortcodes!

3.) With shortcode mapping, you can also say goodbye to manually checking post type ID’s. How? PBS can give you a list of all your contact forms through a drop-down list, so instead of looking for ID’s while on admin mode, you can pick from the list we made instead.

4.) You’ll get to use dropdowns, colorpickers, image uploaders, and even number sliders when adjusting shortcode attributes.

5.) Overall faster page building time!

Hindi naman bago ang shortcode mapping, at marami nang page builder ang mayroon nito. Pero ano ang nagpapaiba sa atin?

Kung Paano Gumagana ang Shortcode Mapping sa Ibang mga Page Builder

Each person/site does their own shortcode mapping.

Other page builders have a dedicated admin page for shortcode mapping. You go inside your admin page, and then their admin page. You put in your shortcode, edit a number of text fields, then hit save. Finally, when you go to your page builder editor, the shortcode is now there in element list.

Sa sitwasyong ito, ang pasanin ng shortcode mapping ay maiiwan sa iyo, ang gumagamit. Kung gusto mong ganap na mai-map ang lahat ng iyong shortcode kasama ang lahat ng attribute (at kasama ang magagandang colorpicker at iba pang mga bagay), kailangan mong tiyaking ilagay ang bawat detalye ng bawat shortcode.

What’s more, all your mappings only reside on your site. So when the times comes that you need to work on another site, you’ll have to copy your mappings all over again. Additionally, if and when you install a new plugin that has shortcodes, then you’re going to have to map those too.

Kung Paano Gumagana ang Shortcode Mapping sa Page Builder Sandwich

Shortcode mappings are shared across all users.

Unlike the norm, shortcode mapping in Page Builder Sandwich is done on a global scale. The most used and popular plugins are gathered first, and all their shortcode mappings are created and updated in a central area. These will then spread out to all users depending on what they have installed. In other words, PBS studies and reviews all the shortcodes you have, including your activated plugins. Afterwards, it gives you the mapping of basically everything you need.

Nagbibigay ito sa atin ng maraming magagandang benepisyo:
1. Maximum coverage. Since we’ll be mapping out the shortcodes of the popular plugins, PBS will be able to support a majority of the shortcodes available on your site.
2. Constant and frequent additions, updates and corrections. And since it’s in a central area, changes can be made quickly, and can be disseminated to all users.
3. It basically works like magic. Let’s say you just installed a new plugin. Then you activate it, all mappings for its shortcodes will automatically get sent to you right away.
4. Gone are the days when you have to personally map shortcodes yourself. PBS will do that for you.
5. Your site remains lean and fast, and will only contain shortcode mappings that are relevant to you.
6. Plugin zip size remains small. Even though PBS supports thousands of shortcodes, the plugin file size is still small. Your site and your backups remain small too!
In case you’re interested in reading into how we made all of this possible, we actually have a second part to this article in which things might start sounding a little more technical (if that’s your drift).

Mag-sign up sa Aming Newsletter!

You can also opt to sign up to our mailing list, which will automatically notify you when we officially release this feature, (you can get future updates from us too, if you want). The shortcode mapping functionality will be out for our customers tentatively on August 12 August 15 2016. Not all shortcodes will be mapped by this time (our estimate is maybe 100 plugins), but mapping will be continuously done and customers will get them as soon as new ones roll out.

So sign up to our newsletter to get news on shortcode mapping, when we’ll release it, and when we open shortcode mapping to the public! Until then, we hope you enjoy this new feature of ours, and that you have fun exploring it!
October 2, 2026
Ang Hindi Binabanggit na Problema ng mga Shortcode

Ang mga shortcode ay isa sa mga tugatog ng WordPress. Ang mga shortcode ang tulay sa pagitan ng mga developer at mga tagalikha ng site, na nagpapahintulot sa mga tao na maglagay ng detalyadong piraso ng nilalaman saanman nila naisin. Gustung-gusto ng mga tagalikha ng plugin ang mga shortcode dahil nagbibigay-daan ito ng higit na flexibility sa paraan kung paano at saan ipinapakita ng kanilang mga user ang kanilang nilalaman.

Kung hindi mo alam kung ano ang mga shortcode at kung ano ang hitsura ng mga ito, sila iyong mga lumang text na parang code na nakapaloob sa mga square bracket. Ganito ang hitsura ng mga ito:

Ang partikular na ito ay tinatawag na embed shortcode at built-in nang default sa WordPress. Ang partikular na ito ay nag-e-embed ng video mula sa URL patungo sa iyong nilalaman. Kopyahin at i-paste lang ang shortcode sa itaas sa iyong site kung nais mo itong subukan.

Sa likod ng mga eksena, ang nangyayari ay kapag nakatagpo ang WordPress ng shortcode sa iyong nilalaman, pinoproseso ito at ikinukumberte sa ibang bagay. Sa ating kaso sa itaas, tuwing may isang

shortcode na matutukoy, kinukuha ng WordPress ang URL sa shortcode at sinusuri ito laban sa ilang content provider na mayroon ito. Kapag may nakita ito, kukunin nito ang naaangkop na iframe embed code at iyon ang ipapakita sa halip.

Kaya ano ang problema rito? Mukhang madali naman, maglalagay ka lang ng maikling text na may mga bracket at tapos ka na.

Pumasok ang Shortcode API..

Napakaraming Shortcode

Binubuksan ng Shortcode API ang paglikha ng mga shortcode sa mga developer. Dahil dito, maaaring magdagdag ang mga developer ng kanilang sariling mga shortcode sa loob ng kanilang mga plugin.

Napakaganda nito, ngayon sa pamamagitan lamang ng isang maikling snippet na parang code (kaya tinawag na “shortcode”), ang mga baguhan at advanced na user ay maaaring maglagay ng halos anumang uri ng nilalaman na gusto nila saanman.

Ang WordPress ay mayroon lamang kaunting shortcode bilang default. Madaling i-type ang mga ito mula sa memorya dahil kakaunti lamang ang mga ito. Ngunit kung mag-i-install ka ng ilang plugin, ang bilang ng mga shortcode ay mabilis na aakyat sa isang dosena o higit pa, at sa ilang mga kaso ay higit sa isang daan. Ang bawat shortcode ay may sariling hanay ng mga attribute at mga tagubilin kung paano gamitin ang mga ito. Ang bawat plugin ay malamang na mayroong ilang uri ng dokumentasyon kung paano gumagana ang lahat ng kanilang mga shortcode at naglilista ng lahat ng mga parameter na available sa bawat isa. Ngunit mababaliw ka kung susubukan mong isaulo ang lahat ng mga shortcode at ang kanilang mga attribute.

Ang problema ay walang sentralisadong lugar kung saan mo mahahanap ang lahat ng mga shortcode na available sa iyong site at kung paano gamitin ang mga ito.

Sinusubukan ng Ilan na Lutasin ang Problema

Sinusubukan ng ilang plugin na lutasin ang problemang ito sa pamamagitan ng pagpapakita ng lahat ng kanilang sariling mga shortcode sa isang madaling ma-access na drop down. Pagkatapos, ang pag-click sa isa ay maglalabas ng shortcode, kumpleto kasama ang lahat ng posibleng attribute para dito. Hindi na kailangang isaulo ito, na isang magandang bagay.

Ang iba ay mas lumalayo pa at nagdaragdag ng settings popup form na may mga checkbox at color picker upang punan ang mga attribute ng shortcode.

Medyo gumagana ang solusyong ito. Gayunpaman, binibilang lang ng bawat plugin ang sarili nilang mga shortcode. Kaya kung ang bawat plugin ay lumilikha ng kanilang sariling anyo ng shortcode picker, tiyak na makakaranas ka ng mga pagkakataon kung kailan mayroon kang maraming shortcode picker sa iyong screen (Nangyari na ito sa akin dati).

Sa madaling salita, bawat plugin ay may kani-kaniyang ginagawa at nagpapatupad ng sarili nilang solusyon para sa sarili nilang mga shortcode. Ang ilang mga plugin ay nagdaragdag ng alinman sa isang bagong button sa tabi ng button na “Add Media”, o isang bago sa loob ng TinyMCE.

Kaya ngayon ay maaaring iniisip mo, “Bakit hindi na lang din tipunin ang mga shortcode ng iba pang mga plugin at isama rin iyon sa iyong dropdown / shortcode picker?” Bueno, iyan mismo ang naisip ko. Ngunit, mas madali itong sabihin kaysa gawin. Ipaliliwanag ko kung bakit mamaya, ngunit tingnan muna natin kung ano ang magiging hitsura ng isang perpektong solusyon.

Ang Perpektong Solusyon

Ang perpektong plano ay gumawa ng isang plugin na nagtitipon ng lahat ng available na shortcode sa iyong site, pagkatapos ay ipapakita sa iyo ang listahan at tutulungan ka ring punan ang lahat ng mga attribute. At sa bawat oras na mag-install ka ng bagong plugin, ang lahat ng mga bagong ipinakilalang shortcode na iyon ay ipapakita rin sa iyo.

Isipin ang isang sentral na lugar kung saan ilalagay ang lahat ng iyong mga shortcode para sa madaling pag-access. Ilalarawan ng bawat shortcode kung ano ang ginagawa ng mga ito at kung saang plugin sila nabibilang. Pagkatapos, para sa bawat available na attribute, isipin na ang bawat isa sa mga iyon ay magkakaroon ng label, isang tamang paraan upang pumili ng halaga para sa kanila at isang paglalarawan. Ipapakita sa iyo ang mga drop down, color picker, radio button, toggle at kung ano-ano pa.

Ang isang bagay na tulad nito ay magpapadali sa ating buhay bilang mga tagalikha ng website at nilalaman. Wala nang pagsusuri sa iba’t ibang dokumentasyon, o iba’t ibang bahagi ng iyong admin para lamang kumopya ng nabuong shortcode para sa isang slider na nais mong gamitin.

Ang Caveat

Sa kasamaang palad, medyo mahirap gawin ang ganoong bagay sa ngayon. Walang siguradong paraan upang malaman ang lahat ng mga detalye ng isang shortcode. Makakakuha ka ng listahan ng lahat ng shortcode, ngunit ang mga aktwal na tag/pangalan lamang ng mga ito, hindi ka makakakuha ng anumang karagdagang mga detalye tungkol sa mga ito tulad ng listahan ng mga attribute, kung ano ang ginagawa ng mga ito at ang kanilang mga uri – tulad ng isang string, isang kulay o isang numero. Hindi ka rin makakakuha ng kahit anong anyo ng paglalarawan para sa bawat attribute.

Paalala sa mga developer diyan: oo may bagong idinagdag na ikatlong argumento para sa shortcode_atts function, ngunit hindi ito isang kinakailangang argumento. Kaya maliban na lang kung ipapatupad ito ng bawat developer ng plugin sa mundo, wala pa rin tayong tiyak na paraan upang matukoy ang lahat ng attribute ng isang shortcode.

Ang Shortcode API ay hindi nagbibigay ng anumang pasilidad para sa pagdaragdag ng mga paglalarawan ng shortcode, type casting attributes o mga paglalarawan ng attribute. At maliban kung ang WordPress mismo ay magdagdag ng isang sentral na lugar para sa pag-access ng mga shortcode, nagdududa ako na malilikha ang pasilidad na ito.

Konklusyon

Sa ngayon, ang gawain ng pag-aayos ng mga shortcode ay ipinauubaya sa bawat developer. Maliban kung ang isang sentral na pamamaraan ay mabubuo sa loob ng WordPress, asahan na patuloy na makakakita ng maraming button na “Add Shortcode” sa iyong backend. Kung ang isang bagay na tulad nito ay dapat idagdag sa WordPress Core o hindi ay isa pang malaking talakayan sa sarili nito.

Isang Alternatibo

May mga page builder plugin na humaharap dito sa ibang paraan. Sa halip na matukoy ang mga shortcode sa pamamagitan ng programmatic na paraan, mayroon silang mga shortcode mapper kung saan maaaring manu-manong i-input ng mga user ang bawat detalye ng isang shortcode. Kapag tapos na, magiging available na ito sa loob ng page builder. Bagama’t gumagana ito, available lamang ang mga iyon sa sarili mong site.

Kami rito sa Page Builder Sandwich ay gumagawa ng isang bagay na sana’y makalutas sa palaisipang ito sa shortcode. Mag-subscribe sa aming newsletter sa ibaba upang maabisuhan sa aming progreso.

October 2, 2026
5 Dahilan Kung Bakit Mahalaga ang Whitespace

Sa pinakasimpleng kahulugan nito, ang whitespace ay ang espasyo sa paligid at pagitan ng lahat ng elemento ng isang komposisyon na iniwang walang marka. Hindi lang ito pag-aaksaya ng espasyo sa screen, gaya ng iniisip ng karamihan sa mga may-ari ng website. Kapag nagamit nang maayos, talagang makapagbibigay ang whitespace ng mga benepisyo upang mas maitaguyod ang isang produkto. Isa itong mahalagang susi sa paggawa ng magandang disenyo at pinapaganda nito ang isang website sa bawat paraan.

Bagama’t ipinapahiwatig ng pangalang whitespace na puti ang espasyo, hindi naman palaging kailangang literal na puti ito. Maaari talagang maging anumang kulay ang whitespace—Maaari pa nga itong magkaroon ng bahagyang pattern o texture. Isa itong lugar kung saan ayaw mong magtuon ang mata. Bilang kahalili, tinatawag itong negative space.

Kaya, bakit mahalaga ang whitespace?

Pinagmulan ng Larawan: News Feed

Dahilan #1: Nagpapabuti ng pagiging madaling basahin

Ang whitespace sa pagitan ng mga baseline at talata ay talagang nakatutulong sa mga tao na kumportableng basahin ang lahat ng nilalaman sa site. Ang pag-aayos ng maliliit na detalye ng iyong site (tulad ng line-spacing/leading o letter-spacing) ay maaaring gumawa ng malaking pagkakaiba sa pagpapadali ng pagbabasa.

Ang layunin ay gawing naisin ng mga tao na magpatuloy sa pagbabasa sa pamamagitan ng pagdidisenyo ng mga layout na madali sa paningin.

Pinagmulan ng Larawan: HP Magic Words

Dahilan #2: Nagpapabilis ng interaksyon

Maging tapat tayo: karamihan sa iyong mga bisita ay walang sapat na pasensya para tumingin nang masusi kapag nagba-browse sa mga website. Kapag mukhang magulo ang isang website, nagiging sanhi ito ng pagkaabala ng mga user sa paghahanap ng gusto nila.

Dapat makatulong ang whitespace na gabayan ang tumitingin sa buong pahina. Ang mas kaunting elementong nagpapaligsahan sa atensyon kasama ang wastong paggamit ng whitespace ay maaaring maiwasan ang mga abala na nagpapabagal sa mga bisita.

Pinagmulan ng Larawan: Google

Dahilan #3: Itinutuon ang atensyon sa tamang mga elemento

Maaaring magbigay ang whitespace sa mga user ng mga visual na pahiwatig kung saan sila dapat tumitingin. Kapag ginamit sa tamang paraan, nakatutulong ang whitespace na bigyang-diin ang impormasyon at ituon ang atensyon sa isang partikular na lugar sa iyong website.

Tandaan, kung ang lahat ay namumukod-tangi, wala nang namumukod-tangi.

Pinagmulan ng Larawan: Pocket Penguins

Dahilan #4: Mahalaga ang mga unang impresyon

Ang hitsura at dating ng isang website ang pangunahing susi sa magagandang unang impresyon. Ang magagandang unang impresyon ay kadalasang humahantong sa mas mahabang tagal ng pagbisita. Ang masyadong kaunting whitespace ay maaaring magpamukhang mura at hindi mapagkakatiwalaan ang iyong website. Hindi iisipin ng mga bisita na kapani-paniwala ang site o ang brand maliban kung maganda ang hitsura nito. Ang pagkakaroon ng tamang dami ng whitespace ay nakatutulong na lumikha ng tamang tono para sa iyong website. Ang whitespace ay maaaring maging isang paraan upang maghatid ng katalinuhan sa paglikha, kasariwaan, at kung minsan, karangyaan.

Tip: Narito ang isang ideya kung paano gagawing simple at pamilyar.

Pinagmulan ng Larawan: Flock Knitwear

Dahilan #5: Tumutulong na lumikha ng espasyong makakahinga at balanse

Ang balanseng disenyo ay hindi nangangahulugang simetriko. Ang isang malaking elemento ng disenyo ay maaaring mabalanse ng ilang mas maliliit. Ang pagdaragdag ng whitespace ay isang magandang paraan upang balansehin ang magkakaibang laki ng mga elemento ng disenyo sa iyong pahina. Lumikha ng daloy upang hindi lumipat-lipat kung saan-saan ang mga mata ng user. Dapat magabayan ng isang magandang disenyo ang user mula sa isang punto patungo sa iba nang hindi nalilito ang bisita.

Konklusyon

Sa susunod na bumisita ka sa isang website at mapansing tumatagal ka roon, isipin kung ano ang nagpatagal at nagpabasa sa iyo. Sa tingin mo ba ay ginagawang mas madaling basahin ng line-spacing ang isang artikulo? Dahil ba sa karanasan kaya gusto mong patuloy na bumalik para sa marami pa? Nahirapan ka ba sa paghahanap ng navigation?

Pansinin ang magandang paggamit ng whitespace sa website. Kung sa tingin mo ay gagana rin ito sa iyong website, matutong maglapat at mamahala kung gaano karaming espasyo ang dapat mong ilaan sa iyong elemento hanggang sa maramdaman mong naiparating mo ang tamang tono at pagiging madaling basahin nang hindi isinasakripisyo ang “daloy” na gusto mo para sa iyong website.

Ang pangunahing layunin ng anumang website ay komunikasyon. Magkasabay ang visual appeal at ang tagumpay ng iyong website.

October 2, 2026
Ang Pagdaragdag ng Naka-istilong mga Mapa sa Iyong Pahina ay Isang Interaktibong Karanasan
Maaari ka nang maglagay ng mga mapa sa mga disenyo ng iyong pahina gamit ang Page Builder Sandwich!

Kakaibang bagay na ma-excite tungkol sa mga mapa. Kukunin mo ang URL ng Google Map at pagkatapos ay i-embed ito. O kaya’y kumuha ng map plugin online at maglagay ng shortcode. O baka naman ang isa mo pang page builder ay mayroon na nito at maaari kang magdagdag anumang oras na gusto mo. Ngunit ang dahilan kung bakit kami nasasabik ay dinala namin ang pagdaragdag ng mga mapa sa isang panibagong antas.

Narito ang isang preview:

Ang Lumang Nakakainip na Paraan ng Pagdaragdag ng Mapa

Narito kung paano ka magdagdag ng mapa gamit ang iyong karaniwang page builder:
1. Hihilahin mo ang isang bagong map element,
2. Ilalagay mo ang latitude at longitude sa mga field,
3. Maglalagay ka ng iba pang mga value sa mga field tulad ng taas ng mapa, lapad ng mapa, lalagyan ng tsek ang checkbox ng road style, atbp.,
4. Pipindutin ang preview at titingnan kung ano ang hitsura nito at magpapasyang kailangan mong baguhin ang isang bagay upang maging mas maganda ito,
5. Babalik sa page builder at babaguhin ang mga value, pagkatapos ay uulitin ang hakbang 4 sa itaas.
Ang Paraan ng Page Builder Sandwich sa Pagdaragdag ng Mapa

Interactive ang mga mapa sa mga website – maaari kang mag-pan sa paligid, mag-zoom in at out sa mapa. Kaya naisip namin, bakit hindi alisin ang lahat ng panghuhula at hayaan na lang ang mga tao na direktang makipag-ugnayan sa mapa habang binubuo ang iyong pahina?

Narito kung paano ka magdagdag ng mapa gamit ang Page Builder Sandwich:
1. Magdagdag ka ng map element,
2. I-type mo ang latitude at longitude o address kung saan mo gustong nakasentro ang mapa,
3. Igalaw ang mapa sa paligid at mag-zoom in o out dito upang makuha ang iyong ninanais na hitsura,
4. Magdagdag ng ilang magagandang kulay sa iyong mga mapa upang umangkop sa iyong estilo,
5. Pindutin ang save.
Ang aming paraan ay higit na masaya at intuitive. Karaniwan kang nakikipag-ugnayan sa mapa sa paraang gagawin mo sa isang normal na Google Map.

May Kulay na mga Mapa o I-istilo ang mga Ito gamit ang SnazzyMaps

Isang kahanga-hangang feature na inilagay namin ay ang kakayahang mag-tint at magkulay ng iyong mga mapa, at napakadali nitong gawin. (Ito ay para sa premium na bersyon lamang). Kung nais mong kulayan ang iyong mapa, i-click lamang ang aming color picker at pumili ng kulay, at agad na magbabago ang iyong mapa.

Narito ang isa na nilagyan namin ng pink na tint:

Sinusuportahan din ng Page Builder Sandwich ang mas detalyadong mga color scheme sa pamamagitan ng SnazzyMaps. Mayroon silang napakalaking listahan ng mga color scheme na iniambag ng mga user, at pinapayagan ka nilang gumawa ng sarili mo kung nais mo ng higit na kontrol sa mga kulay.

Hanapin lamang ang color scheme na gusto mo, pagkatapos ay kunin ang code at i-paste sa Page Builder Sandwich. Agad na mailalapat ang color scheme sa iyong mapa.

Narito ang isang astig na color scheme na tinatawag na papuportal dark mula sa SnazzyMaps:

Ilagay ang mga Mapa Saanman Mo Gusto

Marami pang magagandang bagay na maaari mong gawin sa mga mapa – tulad ng pagdaragdag sa mga ito sa mga full-width na row para sa mas kapansin-pansing epekto. Maaari mo ring idagdag ang mga ito sa loob ng carousel kung gusto mo, o sa loob ng tabs (isang paparating na feature).

Kung wala ka pang Page Builder Sandwich, maaari mong subukan ang premium na bersyon sa pamamagitan ng pag-click sa link na “Live Demo” sa itaas.
October 2, 2026
5 Simpleng Tip Para Maging Maganda ang Hitsura ng Iyong Website

In general, one thing that most people tend to overlook is today’s demand for functional design and aesthetics. While not all of us may be aware of the extent of just how much it matters, the fact remains that design is a very crucial factor towards success—any kind of success– including your website’s. Yes, your content is an important key towards reeling your audience in, but how your site looks will definitely be a determining factor as well.

Narito ang ilang pangunahing tip kung ano ang maaari mong gawin upang mapabuti ang disenyo ng iyong website.

Add high-quality images

oars.com

whitetablecatering.com

You want to add the best quality images on your website that reflect your brand style, but if you don’t have a high-resolution camera or the money to pay a photographer, you can get free stock photos from sources like Pexels and Pixabay. Images should pertain directly to the content of your site. Including images is always better than no images at all.

Piliin ang mga tamang kulay

Lawrence Boone Selections uses black to add a sense of luxury and value to their website

Juicebox used this zesty combination for people to get that organic and fresh that the brand represents

Malaki ang ginagampanang papel ng color scheme ng isang website sa paglikha ng tamang tono at damdamin para sa iyong brand. Ang pagpili ng magandang kulay ay hindi nangangahulugang ito na ang tamang kulay. Bawat kulay ay nagpapadala ng magkakaibang mensahe at tugon. Ang mga kulay ay isa sa mga unang bagay na napapansin ng mga bisita sa site at maaari talaga nitong maapektuhan ang tagumpay ng iyong website.

Pumili ng dalawa hanggang tatlong base color sa pinakamarami para sa iyong disenyo. Kung nararamdaman mong kailangan mong magdagdag ng higit pang kulay, maaari mong gamitin ang mga tint at shade ng iyong mga base color. Sa teorya ng kulay, ang tint ay ang halo ng isang kulay sa puti, na nagpapataas ng liwanag habang ang shade ay ang halo ng isang kulay sa puti, na nagpapabawas ng liwanag.

Additional Tip: There are great tools such as Adobe Colour CC and Coolors to make picking colors easier.

Gumamit ng contrasting typefaces

There are more fonts other than Arial, Georgia and Times New Roman. Google Web Fonts offer a variety of typefaces you can use for free on your site. Just like with choosing colors you can easily over do fonts, so I suggest you do not use more than two typefaces on your website. Most well-designed websites use two typefaces only, one for the headlines and one for the body text.

Ang pagpapares ng dalawang typeface ay maaaring maging mahirap kahit para sa mga designer. Maaari mong panatilihing simple ito sa pamamagitan ng pagsubok ng dalawang magkaibang font mula sa isang typeface. Kung kinakailangan ang pangalawang typeface, pumili ng isang bagay na may magandang contrast laban sa iyong unang typeface. Karaniwan, ang pagsasama ng isang serif font at sans-serif ay maayos na gumagana nang magkasama. Ang isa pang mahalagang tip ay ang pumili ng mga typeface na tumutugma sa estilo ng iyong kumpanya. Maaaring mayroon kang pinakamagandang font sa mundo, ngunit kapag ginamit sa maling konteksto, maaari pa rin itong magmukhang kakila-kilabot.

Panatilihing malinis ito gamit ang whitespace

Whitespace is one of the easiest and most effective ways to create a visually effective website. Your website should look well organized and clutter free, directing users exactly where they need to go. Make sure elements stand out and are grouped together by using whitespace properly.

Gawin itong mobile-friendly

People are probably going to visit your site at different times using different devices and screen sizes. While content is important, consistency across devices provides a better user-experience for anyone who visits your site. It makes it easier for users to share and link contents on your website to social media platforms on mobile. On top of that, Google prioritizes responsive websites on search results.

Karagdagang Tip: Ang paggamit ng Page Builder Sandwich sa iyong website ay awtomatikong magpapagana ng mobile viewing at iaakma ito para sa laki ng mobile screen.

Konklusyon

Tandaan: Ang pagmamaliit sa kapangyarihan ng disenyo ay isa sa mga pinakamalalang pagkakamali na magagawa mo kapag gumagawa ng iyong website. Hindi mo kailangang magbuhos ng labis na pagsisikap kapag nagdidisenyo ng iyong website, siyempre, ngunit pansamantala, ang simpleng pagsunod sa mga tip na ito ay makatutulong na matiyak na ang iyong site ay hindi magdulot ng anumang damdamin ng pagtutol mula sa iyong audience.

October 2, 2026

WordPress.com VS WordPress.org

Kung medyo bago ka pa lang sa paggawa ng mga website, malamang ay hindi ka pa pamilyar sa malaking debate sa pagitan ng WordPress.com laban sa WordPress.org. Maaaring hindi mo pa nga alam na mayroon palang isa o ang isa pa, at ang iba’t ibang mga kahusayan at kahinaan ng bawat isa. Kaya ano nga ba itong malaking debate sa pagitan ng paggamit ng WordPress.com at WordPress.org? Ang isa ba ay mumurahing panggagaya lang na naghihintay na makasuhan?

Sa totoo lang, hindi.

Ang debate, sa madaling salita, ay tungkol sa kung alin sa dalawang serbisyo ng WordPress na ito ang mas angkop para sa website na sinusubukan mong buuin. Walang nanggagaya sa isa’t isa, at parehong pag-aari ng WordPress ang dalawang site; sadyang ang isa (.com) ay mas madaling gamitin para sa mga hindi developer kumpara sa isa, at ang .org naman ay may mas kaunting limitasyon pagdating sa paggawa ng site kumpara sa .com.

“Pero paano ko malalaman kung alin ang kailangan ko?”

Ang sagot sa tanong na ito ay ganap na nakadepende sa mga pangangailangan ng iyong magiging website. Walang iisang bersyon ng WordPress na masasabing talagang “mas maganda” o maging “pinakamahusay” gamitin. Ang dalawa ay may kani-kaniyang natatanging feature, at pantay na dami ng mga kahusayan at kahinaan.

WordPress.com: Bakit at Kailan Ko Ito Dapat Gamitin?

Inaasikaso ng WordPress.com ang mga pangunahing pangangailangan para sa iyo, na nagbibigay-daan sa iyong magtuon nang higit sa nilalaman ng iyong site. Isa itong site builder na ganap na pinapatakbo at hino-host ng grupong kumpanya na tinatawag na Automattic. Makakakuha ka ng premium hosting, mga backup, seguridad, at iba pa. Nangangahulugan ito na mas madali kang makakapagtuon sa nilalaman ng iyong site, kumpara sa kailangang gumugol ng napakaraming oras sa pagbuo nito mula sa simula.

Tandaan gayunpaman, na may sarili ding mga limitasyon ang WordPress.com. Bagama’t maaaring hindi mo na kailangang mag-alala nang husto sa pagpapanatili ng mga panloob na proseso ng iyong site, dapat mong tandaan na malamang ay hindi ka magkakaroon ng ganoong kalawak na kalayaan dito tulad ng nais mo. Bagama’t ang pag-customize ng interface ng iyong site ay maaaring hindi problema (ang WordPress.com ay may napakaraming tema, halimbawa), ang pagdaragdag ng ilang partikular na feature at elemento sa anyo ng mga plugin ay maaaring maging problema, lalo na kung kailangan ng iyong site ng mga partikular na feature na hindi available sa WordPress.com.

Ang pagpapanatili ng isang website ay ibang usapan naman. Malaki ang impluwensya nito kung 1.) hindi ka isang WordPress developer 2.) wala kang balak matutong mag-code, o 3.) kakaunti o wala kang oras para dito.

WordPress.org: Kailan Panahon Upang Isaalang-alang Ito?

Ang isang pangkalahatang panuntunan pagdating sa pagsasaalang-alang sa WordPress.org ay kung ikaw ay kahit papaano pamilyar sa takbo ng code, o handang maglaan ng oras sa pag-aaral kung paano. Dahil ang WordPress.org ay isang self-hosted na bersyon ng WordPress, maaari mong galawin at kalikutin ang lahat hangga’t gusto mo. Dagdag pa rito, may kalayaan kang baguhin ito nang marami o kaunti ayon sa iyong kagustuhan. Ikaw ang mamamahala sa paghahanap ng sarili mong host, pag-set up ng sarili mong mga security backup, at pangkalahatang pagpapanatili ng website nang mag-isa—at ang pinakamahalaga, sa sarili mong mga pamantayan.

“Pero teka, bakit ko gugustuhin iyon? Hindi ba’t ang layunin ng WordPress ay gawing mas madali ang paggawa ng site?”

…Hindi eksakto. Isipin mo ito sa ganitong paraan: Ang The Daily Post ay lumikha ng isang napakahusay na analohiya sa pagitan ng WordPress.org at WordPress.com, sa paraang maging ang pinakabaguhan sa lahat ng baguhan (tulad ko) ay agad na maiintindihan ang punto.

Ayon sa kanila, dapat mong isipin ang WordPress.com bilang isang bagay na wala kang ganap na pagmamay-ari. Halimbawa, ang iyong 15-anyos na sarili, na nakatira pa rin kasama ang iyong mga magulang. Kung nais mong pinturahan ang iyong kuwarto, kailangan mo munang humingi ng pahintulot sa iyong mga magulang (na siyempre ay may ganap na pagmamay-ari sa bahay, kabilang ang iyong kuwarto). Sa teknikal na aspeto, sa iyo ang kuwarto, ngunit sa huli, kumbaga… hindi rin naman talaga.

Kaya kung kailangan mo o nais mong gumawa ng anumang malaking pagbabago (tulad ng pagpipinta sa iyong mga pader, o pagpapalaki ng kuwarto), kailangan mo pa ring makipag-usap at/o makipagkasundo sa mga tunay na may-ari ng bahay, o kilala bilang nanay at tatay. Ang maganda naman dito, kapag pumutok ang piyus sa basement, o huminto sa paggana ang aircon, ang mga magulang mo ang mag-aasikaso nito, at hindi mo kailangang mag-alala tungkol sa anumang bagay.

Ang WordPress.org naman, sa kabilang banda, ay isang bagay na malaya mong maiko-customize at makakalikot sa sarili mong kagustuhan. Maihahambing ito sa panahong sa wakas ay nakabukod ka na sa edad na 18, at nakakuha ng sarili mong apartment. Dahil may ganap kang pagmamay-ari sa iyong tirahan, hindi mo kailangang makipagkasundo kaninoman para pinturahan ang iyong mga pader ng kulay na kinatatakutan ng iyong nanay; may kalayaan kang magdesisyon, at/o umupa ng isang taong pasok sa iyong mga pamantayan para gawin ito para sa iyo. Bukod pa rito, may kalayaan ka ring pumili nang eksakto kung aling aircon unit ang gusto mo para sa iyong sala. Ang problema nga lang, kung sakaling masira ito, kailangan mong kumuha ng mekaniko o technician para ayusin ito, o alamin kung ano ang mali at kung paano ito kumpunihin nang mag-isa (na hindi naman ganoon kasama, dahil natuto ka, at magandang bagay ang pagkatuto).

Sa ngayon, sana ay nakakuha ka na ng mas malinaw na larawan kung ano talaga ang mga kapansin-pansing pagkakaiba sa pagitan ng WordPress.com at WordPress.org. Ngunit sa madaling salita:

mag-install nang kasing dami o kasing kaunti ng nais mo ang mga tema ay limitado lamang sa mga tema ng WordPress, kailangan mong magbayad ng partikular na halaga upang maalis ang mga ad.May halos ganap kang kontrol sa iyong site; maaari kang magdagdag, mag-customize, o maging bumuo ng sarili mong mga tema.

Limitado ang kontrol sa nilalaman;

WordPress.com	WordPress.org
Ganap na hino-host ng WordPress; sakop ang lahat ng mahahalagang pangangailangan.	Self-hosted; pumili ng sarili mong mga pangangailangan, o pumili ng mas mahuhusay.
Limitado ang mga feature sa iniaalok ng WordPress.com	Libu-libong mga feature sa anyo ng mga plugin;

Ilan lamang ito sa mga paghahambing na kaakibat ng pagtitimbang sa mga pagkakaiba ng dalawa. Ang pagpili sa pagitan ng dalawa ay sa huli nakasalalay sa dami ng kalayaan na nais mo sa paglikha ng iyong site, at kung gaano karaming resources (oras, pagsisikap, pera, atbp.) ang handa mong ilaan para dito. Tandaan, na pareho itong napakahalagang opsyon na dapat timbangin bago ka magdesisyon kung aling platform ng WordPress ang pinakaangkop sa iyo. Kaya, huwag magmadali sa pagpapasya!

Maligayang Paggawa ng Website!

October 2, 2026

Bakit WordPress?

Isang mahalagang bagay na dapat isaalang-alang kapag gumagawa ng iyong unang website– negosyo ka man, isang freelancer, o kahit sino man– ay hindi lahat ay bihasa sa wika ng code at software development. Maaaring ikaw ay, halimbawa, isang chef na gustong mag-publish ng kanyang mga recipe online. Maaari ka ring isang Fine Arts undergrad na nangangailangan ng professional-looking na portfolio, o isang start-up na negosyo na nangangailangan ng sarili nilang site. Alinman dito o kahit ano pa man, nananatili ang katotohanang bagama’t ang ilan sa atin ay pamilyar sa mga basic ng code, hindi tayong lahat ay full-time na mga developer, at hindi lahat ng nangangailangan o nagnanais ng isang site ay marunong gumawa nito mula sa umpisa. Dito maaaring maging kapaki-pakinabang ang WordPress. Kaya narito ang tanong: “Bakit WordPress?”

DAHILAN #1

Ang WordPress ay isang Content Management System, Kaya Talagang User-Friendly Ito.

Ang unang bagay na kailangan mong malaman ay ang WordPress ay isang Content Management System (o CMS). Sa mas simpleng salita, nangangahulugan ito na pinapayagan ng WordPress ang mga gumagamit nito na gumawa ng mga website nang hindi kinakailangang gumawa ng code mula sa simula. Mayroon itong sistematiko at organisadong interface na nagbibigay-daan sa iyo na patuloy na mamahala nang hindi kinakailangang magkalikot ng code paminsan-minsan.

Kung ikukumpara sa paggawa ng website mula sa simula, na karaniwang nagsisimula nang ganito:

Sa isang Content Management System, makapagsisimula ka gamit ang isang bagay na tulad nito:

Ang back-end interface ng WordPress. Ang pamamahala at paggawa ng mga website ay nagiging mas madali gamit ang CMS.

Maaari mong itanong sa iyong sarili, gayunpaman: “Mukhang maganda ang WordPress, ngunit paano kung wala rito ang mga feature na gusto ko para sa aking site?”, o “paano kung gusto ko ng mapa, music player, caching engine, o mas maaasahang security system?”

…Sa teknikal na pananalita, malamang na mayroon ang WordPress ng feature na gusto mo, at darating ito sa anyo ng isang WordPress Plugin.

DAHILAN # 2

Mga Plugin: Ang Cherry sa Ibabaw ng WordPress Cake

Kung nag-aalala ka na hindi kasama sa WordPress ang partikular na feature na maaaring gusto mo sa iyong site, huwag mag-alala: malamang na mayroon ito.

Ang mga plugin ay mga “extension feature” na umiiral upang madagdagan ang functionality ng iyong WordPress site. Kung ikaw ay isang entrepreneur na nangangailangan ng contact form para sa iyong site, maaaring mapansin mo na ang WordPress mismo ay walang ganoong feature, ngunit mayroong napakaraming mga plugin na meron nito. At dahil ang WordPress ay open-source—ibig sabihin halos kahit sino ay maaaring mag-ambag sa pagbuo nito—ang mga bagong plugin ay regular na nagagawa. Makukuha mo ang contact form na gusto mo, at higit pa. May kalayaan kang magdagdag ng iba pang mga plugin mula sa mga social sharing button, hanggang sa mga mapa, at maging karagdagang mga security measure para sa iyong site, bukod sa marami pang ibang mga feature at extension. Ngayon sabihin mo sa akin na hindi ‘yan maganda.

Sa ngayon, ang WordPress ay may libu-libo sa mga plugin na ito—at ang ilan sa mga ito ay libre pa at/o may mga libreng bersyon, kabilang ang PBS.

DAHILAN #3

Open Source: Ang Komunidad ng WordPress

Ang WordPress ay Open Source. Nangangahulugan ito na malaya ang sinuman na mag-ambag sa pag-develop nito, at bukas ang sinuman na pag-aralan ang backbone code nito upang matuto pa tungkol sa software development, at maging sa WordPress mismo. Mayroon pang mga negosyo na nakatuon lamang sa paglikha at pagbuo ng mga produktong nauugnay sa WordPress, tulad ng mga plugin at tema (tulad namin!)

Dahil ang WordPress ay open source, mayroong napakaraming mga user, developer, at maging mga designer na patuloy na nagtutulungan at nagtutulungan pa nga sa mga problemang may kaugnayan sa WordPress. Sa ganitong paraan, nakakakuha ka ng totoong tulong mula sa mga totoong tao, at kasabay nito, natututo mula sa isa’t isa. Ito ay isang bagay na halos hindi nagagawa ng iyong karaniwang mga customer relations service.

DAHILAN #4

Lehitimo ang WordPress.

Ang CNN, Ang Opisyal na Star Wars Blog, Time Magazine, at maging (GASP!) si Beyonce ay may mga site na pinapagana ng WordPress, bukod sa marami pang iba. Ang mga malalaking pangalang ito ay hindi lamang ang nagpapatunay sa pagiging lehitimo ng WordPress– ayon sa Treehouse.com, humigit-kumulang 25% ng lahat ng mga site sa web ay pinapagana ng WordPress. Isinasaalang-alang kung gaano karaming milyon-milyon at libu-libong mga website ang umiiral… well, ang 25% ay isang napakalaking numero.

DAHILAN #5

Napakaraming Pagpapasadya!

Ang WordPress ay may napakaraming tema na magagamit para sa iyo at sa iyong site. Malaya kang pumili mula sa mga libreng bersyon, mga premium, o kahit na gumawa ng isa sa iyong sarili (o kumuha ng taong gagawa nito para sa iyo!).

DAHILAN #6:

Libre Ito.

Oo, tama ang nabasa mo. Sa pamamagitan ng Local Development, libre ang WordPress at maaari mo itong i-install sa iyong computer sa pamamagitan lamang ng isang pag-click. Gayundin, sa halip na kumuha ng developer, maaari mong gamitin ang anumang kaalaman mo sa pag-code upang mas matuto pa tungkol sa kung paano gumagana ang WordPress (at siyempre, laging maganda ang matuto).

…bukod pa roon, kung sakaling wala kang sapat na oras para magpakadalubhasa sa WordPress at paggawa ng site, maaari kang kumuha ng isang magandang page builder plugin at subukan ang sa amin.

Tandaan na walang katapusan ang mga posibilidad sa WordPress, at hindi kailangang maging henyo upang maunawaan kung paano ito gumagana!

Malaking oras, pera, at pagod ang matitipid mo sa paggamit ng WordPress. At sa panahong kakaunti ang mga yamang ito, isaisip na ang mga WordPress site, ang mga plugin ng mga ito (tulad ng PBS!), ang mga tema, at lalo na ang komunidad nito, ay talagang makatutulong sa iyo upang gawing mas magaan at napakadali ng lahat.

Maligayang paggawa ng website!

October 2, 2026
3 Bagay na Dapat Isaalang-alang Bago Sumabak sa Page Builders

May posibilidad na narito ka dahil narinig mong ang PBS ay posibleng isa sa pinakamabilis na shortcut sa paggawa ng site. Bagama’t ang mga page builder sa pangkalahatan ay nariyan upang padaliin ang mga bagay-bagay, may ilang bagay pa rin na maaari mong isaalang-alang bago sumabak nang mas malalim sa partikular na larangang ito ng pag-develop sa WordPress.

Pag-aaral ng WordPress: Isang Mahalagang Prerequisite sa Page Builder

Ito marahil ang pinakahalatang bagay sa listahang ito, ngunit ito pa rin ang pinakamahalaga. Sa kasamaang-palad, ang mga Page Builder ay hindi nabibili nang mag-isa lamang. Dumarating ang mga ito sa anyo ng mga plugin sa WordPress, na kakailanganin mong i-install at pag-aralan upang magamit. Makatitiyak ka na ang WordPress ay isa sa pinakamadali at pinakalehitimong paraan upang gumawa ng website. Hindi mo pagsisisihan ang pag-alam sa teknikal na bagay, kung isasaalang-alang ang panahong kinabibilangan natin ngayon. May pagkakaiba ang WordPress.com at WordPress.org, at ang pag-alam kung alin ang angkop sa iyong pangangailangan ay makakatipid din ng oras!

Kung medyo natatakot ka sa dami ng ilang teknikal na termino sa artikulong ito, gayunpaman, huwag mag-alala. May ilang kapaki-pakinabang na site na maaari mong bisitahin upang matulungan kang magsimula. Ilan sa mga ito ay ang WordPress Codex, at Treehouse. Naglalaman ang mga ito ng mga tip sa WordPress at paggawa ng website, depende sa iyong pangangailangan at antas ng kaalaman.

Maaaring naisin mong subukan muna ito, para lang makasiguro

Laging magandang ideya na subukan muna ang mga libre at/o trial na bersyon bago gumawa ng anumang malalaking pagbili na baka pagsisihan mo sa hinaharap. Mabuti na lang at karamihan sa mga page builder ay may kasamang mga libreng/demo na bersyon. Siyempre, maaari rin tayong sumangguni sa napakaraming maaasahang review tungkol sa mga page builder habang ang iba naman ay naghahambing at sumusuri sa mga page builder. Siguraduhing timbangin nang mabuti ang iyong mga opsyon!

Bukod sa pagbabasa ng mga artikulo at review, isa sa mga bagay na gusto namin sa WordPress ay mayroon itong napakalaking komunidad sa likod nito. May mga indibidwal, team, at maging mga negosyo na handang tumulong sa kanilang mga kapwa gumagamit ng WordPress, lalo na sa mga bago tulad mo! Ang komunidad ay karaniwang gumagana sa isang pay-it-forward scheme kaysa sa give-and-take.

Malaki ang nagagawang pagkakaiba ng mga disenyo

Ang WordPress Enthusiast na si Donna Fontenot Cavalier ay may napakagandang punto tungkol sa mga drag-and-drop na Page Builder, at ang kahalagahan ng pangunahing disenyo. Bagama’t ang mga drag-and-drop builder tulad ng PBS ay makakatipid sa iyo ng maraming oras, ang pangunahing kaalaman at kahit kaunting pamilyaridad sa aesthetics ay isa pang mahalagang bagay na dapat isaalang-alang kapag gumagawa ng mga website. Isipin ang isang senaryo– sabihin nating napasakamay mo ang isang magandang page builder na napili mo: napakaganda niyan! Ngunit paano kung ikaw ay isang taong hindi gaanong mahusay pagdating sa sining, disenyo, at functionality: naku po.

Huwag mag-alala, gayunpaman. Ang Page Builder Sandwich ay hindi lamang isang Page Builder; ang aming team ay nakatuon din sa pagtulong sa iba pang mga gumagamit ng WordPress. Kaya kung nahihirapan ka nang kaunti pagdating sa disenyo, huwag mag-alala– mayroon kaming maraming artikulo rito sa PBS Blog na may maraming kapaki-pakinabang na tip upang matulungan kang magsimula. Sa ganoong paraan, mas marami kang magagawa, mas marami kang matututuhan, at mas kaunti ang iyong aalalahanin.

Tandaan, kung mayroon kang anumang katanungan o alalahanin tungkol sa mga page builder, o anumang may kinalaman sa mga nabanggit sa itaas, huwag mag-atubiling mag-iwan ng mensahe sa seksyon ng mga komento sa ibaba. Lagi kaming masayang tumulong sa aming mga customer.

Maligayang Pagbuo ng Site!

October 2, 2026
Paano Gumawa ng Mga Simpleng Hero Header sa 3 Madaling Hakbang

When your dream website finally becomes a reality, the first thing you want your audience to know is what your site’s all about. The trick to reel them in is to give them a good but quick summary of your site’s content – and the easiest way to do that is by creating a Hero Header for your page.

Ano ang mga Hero Header?

The purpose of the Hero Header is to visually communicate with your target audience in the fastest and most efficient way possible. You need to grab their attention quickly, in a way that it says: “Hey, this is my website, and here are the reasons it may be worth your time.”

Typically, hero headers take up most of the space on the page, usually with large text and an equally large background image in order to give your readers a quick but firm-enough grasp as to what your website can offer them.

Upang magsimula sa iyong kauna-unahang PBS hero header, sundin ang mabilis na mga hakbang sa ibaba:

Hakbang 1: Maglagay ng Column at i-adjust ang Lapad ng Row

Click 1 Column below the Insert Content tab on the inspector (that thing on the left/sidebar). Make sure your caret (the blinking cursor on the text box) is inside the text box.

Under the Row Properties tab, you may change the background color in order to use it as a guide for the next steps. Change Row Width from Normal to Full-Width: Retained Content Width using the toggle button shown above.

What’s the difference between Normal, Full-Width and Full-Width: Retained Content Width?

Normal – Background, text and other elements are contained within the bounds of your current theme’s row width

Full-Width – Background, text and other elements fill the entire width of your browser window

Full Width: Retained Content Width – Only the background fills the entire width of your browser window. Text and other elements are contained within the bounds of your current theme’s row width

In this layout, Full Width: Retained Content Width is used because the text that will be applied is centered; not full-width.

Hakbang 2: I-adjust ang margin upang gumawa ng Whitespace

Increase the top and bottom margin by hovering the cursor on the arrow pointing to the margin you want to adjust. When the cursor turns into a double-headed arrow, click and drag down to your desired margin height. Its important to put Whitespace (also called Negative Space) between elements in a composition to create flow and help draw focus to the content on the page.

Hakbang 3: Magdagdag ng background na may mga overlay ng teksto at elemento

To add a background image with text and element overlays, simply click the Background Image icon under the Row Properties tab, upload your desired background image, and select to apply.

Tip #1: For Premium users, using the Background Image Tint option, helps to provide more contrast for text, buttons or other elements. You can select a tint color and adjust its value by clicking on the Background Color icon. Both icons can be found under Background on the Row Properties tab.

Type in the message for your header. See Text Formatting tab to adjust the style. Choose typefaces that are easy to read and goes well with the background image. Remember to show contrast from the background image.

Tip #2: Para sa mga elemento ng pagba-brand, isaalang-alang ang paggamit ng puti o itim na logo upang hindi ito sumalungat sa makulay na larawan sa background.

You can also add buttons by clicking on Button below the Insert Content tab.

Huwag kalimutang i-save ang iyong gawa at handa ka na!

Binabati kita sa paggawa ng iyong unang hero header gamit ang PBS! Kung sakaling hindi mo man magawa, hindi kailangang mag-alala; masasabing mas madali ang magsimula sa simula gamit ang PBS, kaya hindi ito dapat maging ganoon kalaking problema.

Maligayang paggawa ng website!

October 2, 2026