Szerző: Neil Lock

Mik a csudák azok a shortcode-ok egyáltalán?

Ha észrevette már, a WordPress egyik alapszabálya, hogy mindig, de mindig tegye egy kicsit könnyebbé a dolgokat mindenki számára – a kezdők és a tapasztalt fejlesztők számára egyaránt. Az egyik módja e cél elérésének a shortcode-ok (rövidkódok) használata.

A WordPress.com támogatási oldala a következőképpen határozza meg őket:

Elég egyszerűen hangzik. Nos, ha a jelen cikk előtt még nem hallott a shortcode-okról, és nem tudja, hogyan néznek ki: ezek azok a szögletes zárójelbe zárt, kissé régies, kódszerű szövegek.

A normál kódhoz képest, amely jellemzően így néz ki:

(Ööö. Micsoda?)

A shortcode-ok általában valahogy így néznek ki:

(Pofonegyszerű.)

…és ha Ön fejlesztő (vagy a csudába, akár csak olyasvalaki, aki legalább kétszer látott már számítógépet), valószínűleg egyetért azzal, hogy pusztán a gépelés és a kattintgatás egyetlen apró feladat elvégzéséhez is rengeteg időt felemészthet. Ugyanabból az okból, amiért a billentyűparancsok is léteznek, a shortcode-ok azért vannak, hogy megkönnyítsék mindannyiunk dolgát, és időt takarítsunk meg, hogy még jobb dolgokat alkothassunk; nagyon hasonlítanak a gyorsbillentyűkhöz abban a tekintetben, hogy pontosan ugyanaz a céljuk.

Most térjünk vissza erre a konkrét shortcode-ra, amely megegyezik a fentivel:

Ezt a konkrét változatot embed shortcode-nak (beágyazó rövidkódnak) hívják, és alapértelmezés szerint be van építve a WordPressbe. Beágyazza az URL-ben szereplő videót a tartalmába. Ha éppen a WordPressben dolgozik, kimásolhatja és beillesztheti a fenti shortcode-ot az oldalára, ha szeretne tenni vele egy próbát.

Nem a shortcode-ok jelentik azonban a tökéletes megoldást az időmegtakarításra. Korábbi cikkünkben részletesebben körüljárjuk, hogy miért vannak meg a shortcode-oknak is a maguk hátulütői, és mit forral a Sandwich csapata ezek kijavítására.

Addig is bátran kísérletezzen a shortcode-okkal, és nézze meg, miben lehetnek a segítségére.

Jó weboldal-építést!

október 2, 2026
Shortcode leképezés: Hogyan támogat majd a PBS 800+ bővítményt és 2000+ shortcode-ot
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.

Az elmúlt hetekben a PBS csapata egy térkép elemet és egy fülek elemet is hozzáadott.

Nos, meglehetősen egyszerű és megszokott rutinnak tűnne számunkra, ha csak annyit tennénk, hogy pár naponta hozzáadunk egy új elemet.

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.

Egy ilyen rendszer előnyei meglehetősen jelentősek:

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!

A shortcode leképezés (shortcode mapping) ugyan nem újdonság, és egy csomó oldalkészítőben már megtalálható. De mitől más a miénk?

Hogyan működik a shortcode leképezés más oldalkészítőkben

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.

Ebben a forgatókönyvben a shortcode leképezés terhe rád, a felhasználóra hárul. Ha azt szeretnéd, hogy minden shortcode-od teljesen le legyen képezve az összes attribútummal (és a szép színválasztókkal meg egyéb dolgokkal), akkor neked kell gondoskodnod arról, hogy minden egyes shortcode minden apró részletét megadd.

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.

Hogyan működik a shortcode leképezés a Page Builder Sandwichben

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.

Ez rengeteg nagyszerű előnnyel jár számunkra:
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).

Iratkozz fel hírlevelünkre!

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!
október 2, 2026
A shortcode-ok kimondatlan problémája

A shortcode-ok a WordPress egyik legnagyszerűbb vívmányai. A shortcode-ok hidat képeznek a fejlesztők és a webhelykészítők között, lehetővé téve, hogy a felhasználók szinte bárhová összetett tartalmakat helyezzenek el, ahová csak szeretnék. A bővítmények készítői azért szeretik a shortcode-okat, mert nagyobb rugalmasságot biztosítanak abban, hogyan és hol jelenítsék meg a felhasználók a tartalmaikat.

Ha nem tudja, mik azok a shortcode-ok, és hogyan néznek ki, ezek azok az archaikus, kódszerű szövegek, amelyek szögletes zárójelek közé vannak zárva. Valahogy így néznek ki:

Ezt a konkrét kódot beágyazási (embed) shortcode-nak hívják, és alapértelmezés szerint be van építve a WordPressbe. Ez a hivatkozáson szereplő videót ágyazza be a tartalomba. Egyszerűen másolja be a fenti shortcode-ot a webhelyére, ha ki szeretné próbálni.

A háttérben az történik, hogy amikor a WordPress egy shortcode-dal találkozik a tartalomban, feldolgozza és valami mássá alakítja azt. A fenti esetünkben, valahányszor egy

shortcode-ot észlel, a WordPress fogja a shortcode-ban található URL-t, és összeveti a rendelkezésére álló tartalomszolgáltatók listájával. Amikor talál egyet, lekéri a megfelelő iframe beágyazási kódot, és azt jeleníti meg helyette.

Mi tehát itt a probléma? Elég egyszerűnek tűnik: csak beír egy rövid szöveget szögletes zárójelekkel, és kész is.

És ekkor jön a Shortcode API…

Shortcode-ok tömkelege

A Shortcode API lehetővé teszi a shortcode-ok létrehozását a fejlesztők számára. Ennek köszönhetően a fejlesztők saját shortcode-okat adhatnak hozzá a bővítményeikhez.

Ez nagyszerű, hiszen egyetlen rövid, kódszerű részlettel (innen a „shortcode” elnevezés) a kezdő és a haladó felhasználók egyaránt gyakorlatilag bármilyen típusú tartalmat elhelyezhetnek bárhol, ahol csak szeretnék.

A WordPress alapértelmezés szerint csak egy maroknyi shortcode-ot tartalmaz. Könnyű őket fejből beírni, mert csak néhány van belőlük. Ha azonban telepít néhány bővítményt, a shortcode-ok száma gyorsan tucatnyira vagy még többre, bizonyos esetekben akár száznál is többre nőhet. Minden egyes shortcode saját attribútumkészlettel és használati útmutatóval rendelkezik. A legtöbb bővítmény valószínűleg rendelkezik valamiféle dokumentációval arról, hogyan működnek a shortcode-jai, és felsorolja az egyes elérhető paramétereket. De megőrülne, ha megpróbálná megjegyezni az összes shortcode-ot és azok attribútumait.

A probléma az, hogy nincs olyan központi felület, ahol megtalálhatná a webhelyén elérhető összes shortcode-ot és azok használatának módját.

Egyesek megpróbálják megoldani a problémát

Néhány bővítmény úgy próbálja megoldani ezt a problémát, hogy az összes saját shortcode-ját egy könnyen elérhető legördülő menüben jeleníti meg. Egyikre kattintva a rendszer kiírja a shortcode-ot, kiegészítve az összes lehetséges attribútumával. Nem kell többé megjegyezni őket, ami nagyszerű dolog.

Egyesek még tovább mennek, és egy olyan beállítási felugró űrlapot adnak hozzá, amely jelölőnégyzeteket és színválasztókat tartalmaz a shortcode attribútumainak kitöltéséhez.

Ez a megoldás többé-kevésbé működik. Azonban minden bővítmény csak a saját shortcode-jait sorolja fel. Így ha minden bővítmény létrehozza a saját shortcode-választóját, óhatatlanul előfordul, hogy egyszerre több shortcode-választó jelenik meg a képernyőn (velem már megesett ilyen).

Más szóval, minden bővítmény a saját útját járja, és saját megoldást valósít meg a saját shortcode-jaihoz. Egyes bővítmények új gombot adnak hozzá a „Média hozzáadása” gomb mellé, vagy egy újat a TinyMCE szerkesztőn belül.

Így most talán azt gondolja: „Miért nem gyűjtik össze a többi bővítmény shortcode-jait is, és miért nem szerepeltetik azokat is a legördülő menüben / shortcode-választóban?” Nos, pontosan erre gondoltam én is. De ezt könnyebb mondani, mint megtenni. Mindjárt elmagyarázom, miért, de először nézzük meg, hogyan nézne ki egy ideális megoldás.

Az ideális megoldás

A tökéletes terv az lenne, ha létrehoznánk egy olyan bővítményt, amely összegyűjti az oldalon elérhető összes shortcode-ot, majd megjeleníti a listát, és segít kitölteni az összes attribútumot is. És valahányszor új bővítményt telepít, az összes újonnan bevezetett shortcode szintén megjelenne Önnek.

Képzeljen el egy központi helyet, ahol az összes shortcode megtalálható a könnyű hozzáférés érdekében. Minden shortcode leírná, hogy mit csinál, és melyik bővítményhez tartozik. Aztán minden egyes elérhető attribútumhoz tartozna egy címke, egy megfelelő mód az érték kiválasztására és egy leírás. Megjelennének legördülő menük, színválasztók, választógombok, kapcsolók és minden egyéb.

Egy ilyen dolog megkönnyítené az életünket weboldal- és tartalomkészítőként. Nem kellene többé különböző dokumentációkat vagy az adminisztrációs felület különböző részeit böngészni csak azért, hogy kimásoljunk egy generált shortcode-ot egy használni kívánt sliderhez.

A bökkenő

Sajnos jelenleg elég nehéz ilyesmit megvalósítani. Nincs biztos módszer arra, hogy megtudjuk egy shortcode összes részletét. Lekérhető ugyan az összes shortcode listája, de csak a tényleges címkéik/neveik; semmilyen további adatot nem lehet kapni róluk, mint például az attribútumok listáját, mit csinálnak, vagy milyen típusúak – például szöveg, szín vagy szám. Ahogyan az egyes attribútumokhoz sem érhető el semmiféle leírás.

Megjegyzés a fejlesztőknek: igen, van egy újonnan hozzáadott harmadik argumentum a shortcode_atts függvényhez, de ez nem kötelező argumentum. Így hacsak a világ minden bővítményfejlesztője nem implementálja, továbbra sem lesz biztos módunk egy shortcode összes attribútumának meghatározására.

A Shortcode API nem biztosít semmilyen lehetőséget shortcode-leírások hozzáadására, típusos attribútumok meghatározására vagy attribútumleírásokra. És hacsak maga a WordPress nem hoz létre egy központi felületet a shortcode-ok eléréséhez, kétlem, hogy ez a funkció valaha is megszületik.

Összegzés

Jelenleg a shortcode-ok rendszerezésének feladata az egyes fejlesztőkre hárul. Hacsak nem fejlesztenek ki egy központi módszert a WordPressen belül, a vezérlőpulton továbbra is több „Shortcode hozzáadása” gombbal fogunk találkozni. Hogy egy ilyesmit be kellene-e építeni a WordPress magjába vagy sem, az önmagában is egy újabb hatalmas vita tárgya.

Egy alternatíva

Vannak olyan oldalépítő bővítmények, amelyek ezt másképp kezelik. A shortcode-ok programozott észlelése helyett rendelkeznek egy shortcode-feltérképezővel (shortcode mapper), ahol a felhasználók manuálisan adhatják meg a shortcode minden részletét. Ha ez kész, elérhetővé válik az oldalépítőn belül. Bár ez működik, ezek csak a saját webhelyén érhetők el.

Mi itt a Page Builder Sandwichnél olyan megoldáson dolgozunk, amely remélhetőleg megoldja ezt a shortcode-rejtvényt. Iratkozzon fel hírlevelünkre alább, hogy értesüljön az előrehaladásunkról.

október 2, 2026
Stílusos térképek hozzáadása az oldalhoz egy interaktív élmény
Mostantól térképeket is elhelyezhet az oldalelrendezéseiben a Page Builder Sandwich segítségével!

Furcsa dolog a térképekért lelkesedni. Kimásolja a Google Térkép URL-címét, majd beágyazza. Vagy keres egy térképes bővítményt az interneten, és beilleszt egy rövidkódot. Vagy talán a másik oldalkészítőjében már van ilyen lehetőség, és bármikor hozzáadhat egyet. Mi viszont azért vagyunk izgatottak, mert a térképek hozzáadását egy teljesen új szintre emeltük.

Íme egy előnézet:

A térképek hozzáadásának régi, unalmas módja

Így adhat hozzá térképet egy átlagos oldalkészítővel:
1. Behúz egy új térképelemet,
2. Megadja a szélességi és hosszúsági koordinátákat a mezőkben,
3. Megad egyéb értékeket a mezőkben, például a térkép magasságát, szélességét, bepipálja az útvonalstílus jelölőnégyzetét stb.,
4. Az előnézetre kattintva megnézi, hogyan néz ki, és úgy dönt, hogy módosítania kell valamit, hogy jobban mutasson,
5. Visszatér az oldalkészítőbe, módosítja az értékeket, majd megismétli a fenti 4. lépést.
Térkép hozzáadása a Page Builder Sandwich módján

A weboldalakon található térképek interaktívak – mozoghat bennük, ráközelíthet és eltávolíthat. Ezért arra gondoltunk, miért ne hagynánk el a felesleges találgatást, és tennénk lehetővé, hogy közvetlenül interakcióba léphessen a térképpel az oldal készítése közben?

Így adhat hozzá térképet a Page Builder Sandwich segítségével:
1. Hozzáad egy térképelemet,
2. Beírja a szélességi és hosszúsági fokokat vagy a címet, amelyre a térképet középre szeretné igazítani,
3. Mozgatja a térképet, ráközelít vagy eltávolít a kívánt megjelenés eléréséhez,
4. Klassz színeket választ a térképhez, hogy illeszkedjen a stílusához,
5. Kattintson a Mentés gombra.
A mi módszerünk sokkal szórakoztatóbb és intuitívabb. Alapvetően pontosan úgy kezelheti a térképet, mint egy normál Google Térképet.

Színes térképek vagy egyedi stílus a SnazzyMaps segítségével

Egy nagyszerű funkció, amelyet beépítettünk, a térképek színezésének és árnyalatának lehetősége, és ezt rendkívül egyszerű megtenni. (Ez a funkció csak a prémium verzióban érhető el). Ha színezni szeretné a térképét, csak kattintson a színválasztónkra, válasszon egy színt, és a térképe azonnal megváltozik.

Íme egy, amelyet rózsaszínűre színeztünk:

A Page Builder Sandwich a kifinomultabb színsémákat is támogatja a SnazzyMaps révén. Hatalmas listával rendelkeznek a felhasználók által beküldött színsémákból, és akár sajátot is létrehozhat, ha teljesen kézben szeretné tartani a színeket.

Csak keresse meg a tetsző színsémát, másolja ki a kódot, és illessze be a Page Builder Sandwichbe. A színséma azonnal alkalmazásra kerül a térképén.

Íme egy klassz színséma, a papuportal dark a SnazzyMaps oldaláról:

Helyezzen el térképeket bárhol, ahol csak szeretné

Még rengeteg klassz dolgot megvalósíthat a térképekkel – például teljes szélességű sorokba illesztheti őket a drámaibb hatás kedvéért. Ha szeretné, lapozható galériába (carousel) vagy fülekbe (hamarosan érkező funkció) is elhelyezheti őket.

Ha még nem rendelkezik a Page Builder Sandwichcsel, kipróbálhatja a prémium verziót a fenti „Live Demo” hivatkozásra.
október 2, 2026
5 ok, amiért a whitespace számít

Alapvetően a fehér tér (whitespace) a legegyszerűbb meghatározása szerint a kompozíció minden eleme körüli és közötti olyan tér, amely üresen marad. Ez nem csupán a képernyőterület pazarlása, ahogyan azt a legtöbb weboldaltulajdonos gondolja. Helyes használat mellett a fehér tér valójában előnyökkel járhat egy termék jobb népszerűsítésében. A jó dizájn létrehozásának kulcsfontosságú eleme, és minden tekintetben jobbá teszi a weboldalt.

Bár a fehér tér elnevezés arra utal, hogy a terület fehér, nem feltétlenül kell szó szerint fehérnek lennie. A fehér tér valójában bármilyen színű lehet – akár finom mintázata vagy textúrája is lehet. Ez egy olyan terület, amelyre nem szeretné, hogy a szem fókuszáljon. Más néven negatív térnek

Miért számít tehát a fehér tér?

Kép forrása: News Feed

1. ok: Javítja az olvashatóságot

A bázisvonalak és bekezdések közötti fehér tér segít a látogatóknak kényelmesen elolvasni a webhely teljes tartalmát. A webhely apró részleteinek finomhangolása (például a sorköz/sortávolság vagy a betűköz) óriási különbséget jelenthet az olvasás megkönnyítésében.

A cél az, hogy a szemnek kellemes elrendezések megtervezésével fenntartsuk a látogatók olvasási kedvét.

Kép forrása: HP Magic Words

2. ok: Felgyorsítja az interakciót

Legyünk őszinték: a legtöbb látogatónak nincs elég türelme ahhoz, hogy alaposan körülnézzen a weboldalak böngészése közben. Ha egy weboldal zsúfoltnak tűnik, az elvonja a felhasználók figyelmét arról, amit keresnek.

A fehér tereknek segíteniük kell a látogató tekintetét vezetni az oldalon. A figyelemért versengő kevesebb elem és a fehér terek megfelelő használata megelőzheti a figyelmet elterelő tényezőket, amelyek lelassítják a látogatókat.

Kép forrása: Google

3. ok: A megfelelő elemekre irányítja a figyelmet

A fehér tér vizuális jelzéseket adhat a felhasználóknak arra vonatkozóan, hogy hová kell nézniük. Megfelelő használat esetén a fehér terek segítenek kiemelni az információkat, és felhívni a figyelmet a weboldal egy bizonyos területére.

Ne feledje: ha minden kiemelkedik, semmi sem emelkedik ki.

Kép forrása: Pocket Penguins

4. ok: Az első benyomás számít

A weboldal megjelenése és hangulata a kulcsa a jó első benyomásnak. A jó első benyomás gyakran hosszabb látogatási időhöz vezet. A túl kevés fehér tér miatt weboldala olcsónak és megbízhatatlannak tűnhet. A látogatók addig nem tartják hitelesnek az oldalt vagy a márkát, amíg az nem néz ki vonzónak. A megfelelő mennyiségű fehér tér jelenléte segít megteremteni a megfelelő alaphangot webhelye számára. A fehér tér a találékonyság, a frissesség és néha az elegancia közvetítésének eszköze is lehet.

Tipp: Íme egy ötlet arra vonatkozóan, hogyan teheti webdizájnját egyszerré és ismerőssé.

Kép forrása: Flock Knitwear

5. ok: Segít lélegzetvételnyi teret és egyensúlyt teremteni

A kiegyensúlyozott dizájn nem feltétlenül jelent szimmetriát. Egy nagy dizájnelemet több kisebb is ellensúlyozhat. A fehér tér hozzáadása nagyszerű módja a különböző méretű dizájnelemek kiegyensúlyozásának az oldalon. Hozzon létre egy folyamatot, hogy a felhasználók szeme ne ugráljon összevissza. Egy jó dizájnnak képesnek kell lennie arra, hogy vezesse a felhasználót egyik pontból a másikba anélkül, hogy összezavarná a látogatót.

Összegzés

Amikor legközelebb ellátogat egy weboldalra, és azt veszi észre, hogy hosszabb ideig ott marad, gondoljon bele, mi késztette maradásra és olvasásra. Úgy gondolja, hogy a sorköz könnyebben olvashatóvá teszi a cikket? Az élmény arra ösztönzi, hogy újra és újra visszatérjen? Nehéz volt eligazodni a navigációban?

Figyelje meg a fehér tér megfelelő alkalmazását a webhelyen. Ha úgy gondolja, hogy ez az Ön webhelyén is működhet, tanulja meg alkalmazni és kezelni, hogy mennyi helyet szánjon az egyes elemekre, amíg el nem éri a megfelelő hangvételt és olvashatóságot anélkül, hogy feláldozná a weboldala számára kívánt lendületet és ritmust.

Minden weboldal végső célja a kommunikáció. A vizuális vonzerő kéz a kézben jár webhelye sikerével.

október 2, 2026
5 egyszerű tipp, hogy a weboldala jól nézzen ki

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.

Íme néhány alapvető tipp arra vonatkozóan, hogyan javíthatja weboldala dizájnját.

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.

Válassza ki a megfelelő színeket

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

Egy weboldal színsémája nagy szerepet játszik márkája megfelelő hangnemének és hangulatának megteremtésében. Egy szép szín kiválasztása nem feltétlenül jelenti azt, hogy az a megfelelő is. Minden szín más üzenetet és választ vált ki. A színek az elsők között vannak, amit a webhely látogatói észrevesznek, és valójában befolyásolhatják weboldala sikerét is.

Válasszon legfeljebb két-három alapszínt a dizájnhoz. Ha úgy érzi, több színre van szüksége, kihasználhatja az alapszínek világosabb és sötétebb árnyalatait. A színelméletben a tint a szín fehérrel való keveréke, ami növeli a világosságot, míg a shade a szín fehérrel való keveréke, ami csökkenti a világosságot.

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

Használjon kontrasztos betűtípusokat

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.

Két betűtípus párosítása még a tervezők számára is nehéz lehet. Egyszerűen megoldhatja, ha ugyanannak a betűcsaládnak két különböző betűváltozatával kísérletezik. Ha egy második betűtípusra is szükség van, válasszon olyat, amely jól kontrasztban áll az elsővel. Általában egy talpas (serif) és egy talpatlan (sans-serif) betűtípus kombinálása jól működik együtt. Egy másik fontos tipp, hogy a vállalkozása stílusához illő betűtípusokat válasszon. Lehet az öné a világ legszebb betűtípusa, de ha rossz környezetben használja, akkor is szörnyen nézhet ki.

Tartsa letisztultan az üres terek használatával

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.

Tegye mobilbaráttá

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.

További tipp: A Page Builder Sandwich használata weboldalán automatikusan engedélyezi a mobilnézetet, és a mobil képernyőmérethez igazítja azt.

Összegzés

Ne feledje: a dizájn erejének alábecsülése az egyik legrosszabb hiba, amit weboldala készítésekor elkövethet. Természetesen nem kell túlzott erőfeszítéseket tennie a weboldal tervezése során, de közben ezen tippek egyszerű követése biztosíthatja, hogy webhelye ne váltson ki semmilyen elutasító érzést a közönségéből.

október 2, 2026

WordPress.com VS WordPress.org

Ha viszonylag új vagy a weboldalkészítés világában, nagy a valószínűsége, hogy nem ismered a nagy WordPress.com kontra WordPress.org vitát. Lehet, hogy azt sem tudtad, hogy létezik a másik, és mik az egyes változatok előnyei és hátrányai. De miről is szól, mondd csak, ez a nagy vita a WordPress.com és a WordPress.org használata között? Vajon az egyik csak egy olcsó másolat, ami perre vár?

Nos, nem.

A vita dióhéjban arról szól, hogy a két WordPress-szolgáltatás közül melyik illik jobban a felépíteni kívánt weboldalhoz. Egyik sem a másik másolata, és mindkét webhely a WordPress tulajdonában van; csupán annyi a különbség, hogy az egyik (.com) fejlesztői tudást kevésbé igénylő változat, míg a .org-nak sokkal kevesebb korlátja van a weboldalkészítés terén a .com-hoz képest.

„De honnan tudom, hogy melyikre van szükségem?”

A válasz erre a kérdésre teljes mértékben a leendő weboldalad igényeitől függ. Nincs olyan WordPress-verzió, amely objektíven a „jobb” vagy akár a „legjobb” lenne. Mindkettő rendelkezik saját egyedi funkciókkal, valamint ugyanannyi előnnyel és hátránnyal.

WordPress.com: Miért és mikor érdemes ezt választani?

A WordPress.com gondoskodik a legalapvetőbb dolgokról helyetted, így jobban összpontosíthatsz az oldalad tartalmára. Ez egy olyan webhelyépítő, amelyet teljes egészében az Automattic nevű vállalatcsoport üzemeltet és hosztol. Prémium tárhelyet, biztonsági mentéseket, védelmet és hasonlókat kapsz. Ez azt jelenti, hogy sokkal könnyebben koncentrálhatsz a webhelyed tartalmára ahelyett, hogy órákat töltenél az alapoktól való felépítésével.

Vedd figyelembe azonban, hogy a WordPress.com saját korlátokkal is jár. Bár lehet, hogy nem kell annyit aggódnod a webhelyed belső működésének karbantartása miatt, észben kell tartanod, hogy valószínűleg nem lesz akkora szabadságod, mint szeretnéd. Bár a felület testreszabása nem feltétlenül jelent problémát (a WordPress.com például rengeteg témát kínál), bizonyos funkciók és elemek bővítmények formájában történő hozzáadása gondot okozhat, különösen, ha a weboldaladnak olyan speciális funkciókra van szüksége, amelyek nem érhetők el a WordPress.com-on.

Az, hogy hogyan tarts karban egy weboldalt, teljesen más tészta. Nagymértékben függ attól, hogy 1.) nem vagy WordPress-fejlesztő 2.) nem áll szándékodban megtanulni programozni, vagy 3.) kevés időd van erre, esetleg egyáltalán nincs.

WordPress.org: Mikor érdemes fontolóra venni?

Ökölszabályként elmondható, hogy a WordPress.org-ot akkor érdemes megfontolni, ha legalább egy kicsit ismered a kód működését, vagy hajlandó vagy némi időt fektetni a megtanulásába. Mivel a WordPress.org a WordPress saját tárhelyen futó (self-hosted) változata, annyira bepiszkolhatod a kezed, amennyire csak szeretnéd. Ráadásul szabadon bütykölheted, amennyit csak akarod. Te vagy felelős a saját tárhely megtalálásáért, a saját biztonsági mentések beállításáért, és összességében a weboldal önálló karbantartásáért – és ami még fontosabb, a saját feltételeid szerint.

„De várjunk csak, miért akarnám ezt? Nem az a WordPress lényege, hogy megkönnyítse a weboldalkészítést?”

…Nem egészen. Gondolj rá így: a The Daily Post egy kiváló analógiát hoz a WordPress.org és a WordPress.com összehasonlítására, méghozzá úgy, hogy még a legkezdőbb kezdők is (mint én magam) azonnal megértik a lényeget.

Szerintük a WordPress.com-ra úgy kell tekintened, mint aminek nem vagy a kizárólagos tulajdonosa. Képzeld el például a 15 éves önmagad, amint még a szüleiddel élsz. Ha ki akarnád festeni a szobádat, előbb engedélyt kellene kérned a szüleidtől (akik természetesen a ház kizárólagos tulajdonosai, beleértve a szobádat is). Technikailag a szoba a tiéd, de a nap végén, nos… valójában mégsem az.

Ha tehát bármilyen drasztikus változtatást szeretnél vagy kell eszközölnöd (például lefesteni a falakat vagy kibővíteni a szobát), meg kell beszélned és/vagy kompromisszumot kell kötnöd a ház tényleges tulajdonosaival, azaz anyuval és apuval. Ennek azonban megvan az az előnye, hogy amikor kimegy a biztosíték az alagsorban, vagy leáll a légkondi, a szüleid intézik el, neked pedig semmi miatt nem kell aggódnod.

A WordPress.org ezzel szemben olyasvalami, amit szabadon, saját belátásod szerint szabhatsz testre és bütykölhetsz. Ezt ahhoz lehet hasonlítani, amikor 18 évesen végre elköltözöl otthonról, és saját lakásod lesz. Mivel teljes mértékben a tiéd az otthonod, nem kell senkivel kompromisszumot kötnöd, hogy olyan színűre fesd a falakat, amitől anyukád mindig is rettegett; megvan a szabadságod a döntésre, és/vagy felbérelhetsz valakit, aki megfelel az elvárásaidnak, hogy megcsinálja helyetted. Ráadásul azt is szabadon eldöntheted, hogy pontosan melyik klímaberendezést szeretnéd a nappalidba. Csak éppen ha történetesen elromlik, neked kell szerelőt hívnod a megjavításához, vagy magadnak kitalálnod, mi a baj és hogyan javítsd meg (ami nem is olyan rossz, hiszen tanulópénz, és tanulni jó dolog).

Mostanra remélhetőleg tisztább képet kaptál arról, mik az éles különbségek a WordPress.com és a WordPress.org között. De dióhéjban:

telepíts annyit vagy amennyi keveset csak szeretnél, a témák kizárólag a WordPress-témákra korlátozódnak, bizonyos díjat kell fizetned a hirdetések eltávolításáért.Közel teljes ellenőrzésed van a webhelyed felett; hozzáadhatsz, testreszabhatsz, vagy akár saját témákat is építhetsz.

A tartalom feletti ellenőrzés korlátozott;

WordPress.com	WordPress.org
Teljes mértékben a WordPress hosztolja; minden alapvető dolog biztosított.	Saját tárhelyes; válaszd ki a saját alapvető szolgáltatásaidat, vagy válassz jobbakat.
A funkciók a WordPress.com által kínált lehetőségekre korlátozódnak	Funkciók ezrei bővítmények formájában;

Ez csupán néhány összehasonlítás a kettő közötti különbségek mérlegelésekor. A kettő közötti választás végső soron azon múlik, mekkora szabadságot szeretnél a webhelyed létrehozásában, és mennyi erőforrást (idő, energia, pénz stb.) vagy hajlandó rászánni. Ne feledd, hogy mindkettő nagyon lényeges lehetőség, amelyet érdemes mérlegelni, mielőtt eldöntöd, melyik WordPress-platform illik hozzád a legjobban. Szóval ne siesd el a döntést!

Kellemes weboldalkészítést!

október 2, 2026

Miért a WordPress?

Az első weboldal elkészítésekor egy fontos dolgot érdemes szem előtt tartani – legyen szó vállalkozásról, szabadúszóról, vagy igazából bárkiről és bármiről –, mégpedig azt, hogy nem mindenki jártas a kódolás és a szoftverfejlesztés világában. Lehet Ön például egy séf, aki online szeretné közzétenni a receptjeit. De lehet egy képzőművészeti hallgató is, akinek professzionális portfólióra van szüksége, vagy egy induló vállalkozás, amelynek saját weboldal kell. Akár az egyikről, akár a másikról, akár a kettő közötti bármely esetről van szó, a tény az, hogy bár néhányan ismerik a kódolás alapjait, nem vagyunk mindannyian főállású fejlesztők, és nem mindenki tud a nulláról weboldalt építeni, akinek szüksége van rá. Itt jöhet jól a WordPress. Felmerül a kérdés: „Miért pont a WordPress?”

1. OK

A WordPress egy tartalomkezelő rendszer (CMS), ami rendkívül felhasználóbaráttá teszi.

Az első dolog, amit tudnia kell, hogy a WordPress egy tartalomkezelő rendszer (Content Management System, CMS). Egyszerűbben fogalmazva ez azt jelenti, hogy a WordPress segítségével a felhasználók anélkül hozhatnak létre weboldalakat, hogy a kódot a nulláról kellene megírniuk. Áttekinthető, rendezett felülettel rendelkezik, amely lehetővé teszi, hogy folyamatosan kézben tartsa a dolgokat anélkül, hogy időről időre a kódban kellene turkálnia.

Összehasonlításképpen: egy weboldal nulláról történő felépítése általában így kezdődne:

Egy tartalomkezelő rendszerrel viszont valami ilyesmivel kezdhet:

A WordPress adminisztrációs felülete. A weboldalak kezelése és létrehozása egyszerűbbé válik a CMS segítségével.

Felteheti magának a kérdést: „A WordPress nagyszerűnek tűnik, de mi van akkor, ha nincsenek meg benne a weboldalamhoz szükséges funkciók?”, vagy „mi van akkor, ha térképet, zenelejátszót, gyorsítótárazó motort vagy megbízhatóbb biztonsági rendszert szeretnék?”

…Technikai értelemben a WordPress valószínűleg rendelkezik az Ön által kívánt funkcióval, mégpedig egy WordPress bővítmény.

2. OK

Bővítmények: a hab a WordPress tortáján

Ha attól tart, hogy a WordPress nem tartalmazza azt az adott funkciót, amit a weboldalán látni szeretne, ne aggódjon: valószínűleg létezik rá megoldás.

A bővítmények olyan kiegészítő funkciók, amelyek a WordPress-weboldal funkcionalitásának növelésére szolgálnak. Ha Ön olyan vállalkozó, akinek kapcsolatfelvételi űrlapra van szüksége a weboldalához, érdemes megjegyezni, hogy maga a WordPress alapból nem rendelkezik ezzel a funkcióval, de rengeteg olyan bővítmény van, amely igen. És mivel a WordPress nyílt forráskódú – ami azt jelenti, hogy szinte bárki hozzájárulhat a fejlesztéséhez –, rendszeresen készülnek új bővítmények. Megkaphatja a kívánt kapcsolatfelvételi űrlapot, és még sok minden mást is. Szabadon hozzáadhat egyéb bővítményeket a közösségi megosztási gomboktól kezdve a térképeken át egészen a weboldal további biztonsági intézkedéseiig, számos egyéb funkció és kiegészítő mellett. Na, ugye, hogy milyen jól hangzik?

Jelenleg a WordPress több ezer ilyen bővítménnyel rendelkezik – és némelyikük akár ingyenesen is elérhető és/vagy ingyenes verzióval is rendelkezik, beleértve a következőket: PBS.

3. OK

Nyílt forráskód: a WordPress közösség

A WordPress nyílt forráskódú. Ez azt jelenti, hogy bárki szabadon hozzájárulhat a fejlesztéséhez, és bárki tanulmányozhatja az alap kódját, hogy többet tudjon meg a szoftverfejlesztésről, vagy akár magáról a WordPressről. Még olyan vállalkozások is léteznek, amelyek kifejezetten a WordPresshez kapcsolódó termékek, például bővítmények és sablonok létrehozására és fejlesztésére szakosodtak (mint mi!).

Mivel a WordPress nyílt forráskódú, rengeteg felhasználó, fejlesztő és dizájner dolgozik együtt folyamatosan, és segítik egymást a WordPress-szel kapcsolatos problémák megoldásában. Így valódi emberektől kaphat valódi segítséget, és ezzel egyidejűleg tanulhatnak is egymástól. Ez olyasmi, amire egy tipikus ügyfélszolgálat szinte soha nem képes.

4. OK

A WordPress hiteles és elismert.

A CNN, a Hivatalos Star Wars Blog, a Time magazin, sőt még Beyoncé weboldala is a WordPressen fut, sok más mellett. Nemcsak ezek a nagy nevek támasztják alá a WordPress megbízhatóságát: a Treehouse.com szerint az interneten található weboldalak mintegy 25%-át a WordPress működteti. Figyelembe véve, hogy hány millió és ezer weboldal létezik… nos, a 25% elég nagy szám.

5. OK

Testreszabási lehetőségek tárháza!

A WordPress rengeteg sablont kínál Önnek és weboldalának. Szabadon válogathat az ingyenes és a prémium verziók között, vagy akár sajátot is készíthet (esetleg megbízhat valakit, hogy elkészítse Önnek!).

6. OK:

Ingyenes.

Igen, jól olvasod. A helyi fejlesztés révén a WordPress teljesen ingyenes, és egyetlen gombnyomással telepítheted a számítógépedre. Ugyanígy, ahelyett, hogy fejlesztőt fogadnál fel, meglévő kódtudásodat felhasználva többet is megtudhatsz arról, hogyan működik a WordPress (és hát tanulni mindig jó dolog).

…nem is beszélve arról, hogy ha nincs időd túl mélyen elmerülni a WordPressben és a webhelykészítésben, bármikor beszerezhetsz egy remek oldalépítő bővítményt, és kipróbálhatod a miénket is.

Ne feledd, a lehetőségek száma végtelen a WordPress segítségével, és nem kell zseninek lenned ahhoz, hogy rájöjj, hogyan működik!

A WordPress használatával rengeteg időt, pénzt és energiát takaríthatsz meg. Olyan időkben pedig, amikor ezekből az erőforrásokból igencsak kevés áll rendelkezésre, ne feledd, hogy a WordPress-webhelyek, a bővítményeik (mint a PBS!), a sablonjaik, és különösen a közösségük óriási segítséget nyújthatnak, és sokkal, de sokkal könnyebbé tehetik a dolgodat.

Kellemes weboldalkészítést kívánunk!

október 2, 2026
3 dolog, amit érdemes megfontolni, mielőtt belevágna az oldalépítők használatába

Könnyen lehet, hogy azért van itt, mert azt hallotta, hogy a PBS minden bizonnyal az egyik leggyorsabb út a weboldalkészítéshez. Bár az oldalépítők általában azért léteznek, hogy megkönnyítsék a dolgokat, mégis érdemes figyelembe vennie néhány szempontot, mielőtt mélyebben elmerülne a WordPress-fejlesztés ezen sajátos világában.

A WordPress elsajátítása: Az oldalépítők elengedhetetlen előfeltétele

Ez valószínűleg a legkézenfekvőbb pont ezen a listán, ám mégis a legfontosabb. Az oldalépítők sajnos önmagukban nem vásárolhatók meg. WordPress-bővítmények formájában érhetők el, amelyeket telepítenie és megtanulnia kell a használatukhoz. Biztos lehet benne, hogy a WordPress az egyik legegyszerűbb és legmegbízhatóbb módja egy weboldal létrehozásának. A jelenlegi korszakot tekintve biztosan nem fogja megbánni, ha szert tesz némi technikai tudásra. Jelentős különbség van a WordPress.com és a WordPress.org között, és ha tudja, melyik felel meg az igényeinek, azzal időt is megtakarít!

Ha kissé meg is ijeszti a cikkben szereplő technikai kifejezések sokasága, ne aggódjon. Van néhány hasznos oldal, amelyet meglátogathat a kezdéshez. Ilyen többek között a WordPress Codex és a Treehouse. Ezek WordPress-tippeket és weboldalkészítési tudnivalókat nyújtanak az Ön igényeitől és ismeretszintjétől függően.

Érdemes lehet először felmérni a terepet, a biztonság kedvéért

Mindig jó ötlet kipróbálni az ingyenes és/vagy próbaverziókat, mielőtt olyan nagyobb vásárlást eszközölne, amelyet a jövőben esetleg megbánhat . Szerencsére a legtöbb oldalépítő rendelkezik ingyenes/demó verzióval. Természetesen átböngészhetünk egy sor megbízható értékelést az oldalépítőkről , míg más források összehasonlítják az oldalépítőket. Mindenképpen mérlegelje alaposan a lehetőségeit!

A cikkek és vélemények áttekintésén túl az egyik dolog, amit szeretünk a WordPressben, az a mögötte álló hatalmas közösség. Magánszemélyek, csapatok és még vállalkozások is készségesen segítenek a többi WordPress-felhasználónak, különösen az olyan újaknak, mint Ön! A közösség alapvetően az önzetlen segítségnyújtás és továbbadás elvén működik a viszonzás elvárása helyett.

A dizájn óriási különbséget jelent

Donna Fontenot Cavalier WordPress-rajongó nagyon jó észrevételt tesz a drag-and-drop oldalépítőkkel és az alapvető dizájn fontosságával kapcsolatban. Bár a PBS-hez hasonló fogd és vidd szerkesztők rengeteg időt takaríthatnak meg Önnek, az alapszintű szaktudás és legalább némi esztétikai érzék szintén elengedhetetlen szempont a weboldalak készítése során. Képzeljen el egy helyzetet – mondjuk hozzájut egy tetszése szerinti nagyszerű oldalépítőhöz: ez remek! De mondjuk Ön olyan személy, akinek nem éppen a legjobb a szeme a művészethez, a dizájnhoz és a funkcionalitáshoz: ajjaj.

Ne aggódjon azonban. A Page Builder Sandwich nem csupán egy oldalépítő; csapatunk elkötelezett amellett is, hogy segítséget nyújtson más WordPress-felhasználóknak. Ha tehát némi nehézségbe ütközik a dizájn terén, ne aggódjon – itt a PBS Blogon számos cikkünk található rengeteg hasznos tanáccsal, amelyek segítenek a kezdésben. Így többet érhet el, többet tanulhat, és kevesebbet kell aggódnia.

Ne feledje, ha bármilyen kérdése vagy észrevétele van az oldalépítőkkel, vagy a fenti témák bármelyikével kapcsolatban, bátran írjon nekünk az alábbi hozzászólások szekcióban. Mindig örömmel segítünk ügyfeleinknek.

Jó weboldalkészítést!

október 2, 2026
Hogyan készítsünk alapvető Hero fejléceket 3 egyszerű lépésben

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.

Mik azok a Hero fejlécek?

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.

Ha szeretne nekilátni a legelső PBS hero fejlécének, kövesse az alábbi gyors lépéseket:

1. lépés: Oszlop beszúrása és a sorszélesség beállítása

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.

2. lépés: Margó beállítása térköz (whitespace) létrehozásához

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.

3. lépés: Háttér hozzáadása szöveges és egyéb elemekkel

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.

2. tipp: A márkaelemeknél fontolja meg a fehér vagy fekete logó használatát, hogy ne ütközzön a színes háttérképpel.

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

Ne felejtse el menteni a munkáját, és már kész is van!

Gratulálunk a legelső PBS hero fejléce elkészítéséhez! Ha mégsem sikerülne, nem kell aggódni; a PBS-sel a nulláról kezdeni vitathatatlanul egyszerűbb, így nem okozhat nagy gondot.

Jó weboldalkészítést kívánunk!

október 2, 2026