A honlapszerkesztés folyamata, honlap költségei

Webáruház, vagy honlapszerkesztés folyamata, web költségei

Honlapszerkesztés folyamata
Az interneten való megjelenés ma már szinte minden vállalkozás számára létfontosságú, azonban a megjelenés módja nagyon eltérő lehet. Ezért a jó domain név kiválasztása épp úgy nagyon lényeges, mint a keretrendszer, amelyben a honlap megjelenik. A keretrendszereket, vagy CMS rendszereket egy külön menüben mutatom be, ahol a különféle rendszerek rövid leírása is megtalálható, az eredeti linkekkel együtt. A web-, honlapszerkesztés folyamata, mint megjelenési forma a koronavírus miatt az utóbbi időben sokkal hangsúlyosabbá vált.

Domain

A domain név tartománykódjaiból nálunk leginkább a .hu és .eu használatos, de azon kívül is rengeteg tartomány létezik. Ezek költségben is nagyon különböznek egymástól. Pl. 2021 elején a .hu domain 1.800 Ft, a .eu 2.400 Ft, de vannak kirívó árak is, pl. a .rich egy évi költsége 688.800 Ft. Azaz mindenki megtalálhatja a számára megfelelő végződést, csupán pénztárca kérdése.

Sebesség

A honlapok sebességét sokféle módon lehet növelni. Lehet bizonyos részek felgyorsításával, más részek lelassításával időt nyerni. Pl. a honlap bizonyos részei azonnal betölthetők, míg más részeket későbbre halasztunk. Ezekkel a módszerekkel egy lomha honlapot is meg lehet vadítani, hogy gyorsan betöltsön és azonnal reagáljon. A webhelytérképek beküldését és napra készen tartását a Google jutalmazza, ugyanis a keresők nem mindent tudnak értelmezni. Szükséges, hogy releváns információt kapjanak az adott honlapról. A szövegismétléseket is el kell kerülni. Ha ugyanaz a szöveg többször is szerepel egy honlapon, az bizony hibapontot és lejjebb sorolást okoz a keresési megjelenítésben. A honlapszerkesztés díja nagyon sok tényezőtől függ, ezért fontos, hogy tisztázzuk, mit szeretnénk elérni.
A honlapszerkesztés folyamata keresőoptimalizálás nélkül nem sokat ér, mert senki sem talál rá. Márpedig az üzlet nem működik vevők nélkül. A megfelelő keretrendszer kiválasztása azért lényeges, mert "nem érdemes ágyúval verébre lőni". Kisebb feladatokhoz szükségtelen egy nagy méretű, lassú rendszert telepíteni (bár feljebb írtam a gyorsítás lehetőségéről is), mert ha a honlap lassan tölt be, a potenciális vevők otthagyják a honlapot. Kutatások alapján 2-3 másodperces betöltési idő felett a potenciális vevők elriadnak.
A webáruházak többsége ma már a WordPress - WooCommerce kombót használja, de sok egyéb keretrendszer létezik, amelyek gyorsabban reagálnak. Persze megfelelő beállításokkal és optimalizálással a WooCommerce is gyors lehet, de mint minden általános rendszer, amely nem egy konkrét célfeladatra van kihegyezve, a WordPress is be tud lassulni.
A ma divatos grafikus szerkesztők nagyon kényelmessé teszik a honlapok egyedi tervezését, de sok erőforrást igényelhetnek. Néha egy jól megválasztott sablon többet jelenthet, de tény, hogy nem könnyű a rengeteg sablon között megtalálni az ideálisat. Például a Divi esetében a tárhelyszolgáltató oldalán meg kell változtatni néhány értéket a php beállításainál. Ezeket a Divi telepítésekor meg is mutatja a rendszer, ezért nem részletezem.
Amikor megismerkedtem a grafikus szerkesztők adta lehetőségekkel, először a Divi rendszerét használtam. Sok jó dolgot belepréseltek, de egy idő után megtapasztaltam a korlátait is. Később, az Elementor már sokkal több lehetőséget adott, de még mindig nem voltam elégedett. Csak nemrég ismertem meg az Oxygen rendszerét, viszont ez teljesen lenyűgözött. Mind sebességben, mind funkcionalitásában messze lekörözi riválisait.

Ellenőrzési lehetőségek

A honlapszerkesztés elengedhetetlen kelléke az ellenőrző rendszerek használata. Egyik leginkább használható rendszer a GTmetrix, amellyel ezt a honlapot is ellenőríztem. Az eredményt az alábbi linken lehet követni, de az aktuális állapotot is megjeleníti a frissítés gombra kattintva. Tehát a link: https://gtmetrix.com/reports/vawe.hu/kRQBfbKc/

Elementor vs Divi vs Oxygen

Divi-Elementor-Oxygen
 DiviElementorOxygen
CélKreatív oldalakSEO optimalizált webhelyekÜzleti webhelyek
Téma kompatibilitásCsak Divi témákkalKompatibilis az összes főbb WordPress témávalSok témával kompatibilis, de nem mindegyikkel
SEOViszonylag alacsonyLegmagasabb SEOAz utóbbi fejlesztések alapján nagyon nagy változás történt. Sokáig az utolsó helyen állt. Miután a sebesség az egyik legfontosabb mérőeszköz, talán már át is vette a vezető helyet
Felhasználói élmény, használhatóságNagyszerű felhasználói élmény és könnyen kezelhető műszerfalRendkívül felhasználóbarát felületBonyolult
VevőszolgálatKielégítőNagyszerűGyors és pontos
Árazás89 USD/év vagy 249 USD egyszer korlátlan oldalra49-999 USD/év attól függően, hogy hány oldalon használod129–349 USD egyszeri fizetés, korlátlan oldalra

Összehasonlító táblázat

Oxygen

Elementor

Beaver

Divi

$9
Élettartamú támogatás
Életre szóló frissítések

A webhelyek száma licenszenként
Korlátlan
1000
Korlátlan
Korlátlan
Engedély

GPL
GPL
GPL
GPL
Görgetés és bejárati animációk

CSS átalakítások
Szűrők
Élettartam támogatás
Háttér színátmenetek
Max színek egy színátmenetben
Korlátlan
2
2
2
Töréspontok
Asztali
Tároló (testreszabható)
Tablet (testreszabható)
Fekvő (testreszabható)
Álló (testreszabható)
Asztali
Tablet (testreszabható)
Telefon (testreszabható)
Asztali
Tablet (testreszabható)
Telefon (testreszabható)
Asztali
Tablet (testreszabható)
Telefon (testreszabható)
Reszponzív vezérlés az összes CSS-tulajdonságra
Elem elrejtése / megjelenítése az eszköz szélessége alapján
Oszlopok egymásra helyezése függőlegesen
Fordított oszloprend
50% szélesség függőleges halmozás előtt
Fejlécek és láblécek készítése
50% szélesség függőleges halmozás előtt
Ragadós fejléc
Overlay Effektus
Flexbox vezérlők
Oszlopok nélküli vízszintes elrendezések
Google PageSpeed
95
59
94
67
Pingdom
94
86
92
91
Eszköz mérete (nincs gzip)
295.5kb
1.5mb
444kb
1.7mb
HTTP kérések
12
39
16
20
Google betűtípus-arckorlátozó
Alapértelmezett WP Bloat Eliminator
HTTP kérések
0
7
9
9
Választható HTML5-címkék
Átment a Google Lighthouse Divception Testen
Globális WooCommerce stílusok
Stílusvezérlők a Woo Elements számára
WooCommerce stílusú modulok
Szabadság a témastílusoktól
Egyedi termék elrendezések
Egyéni archív elrendezések
Egyéni kosár, fizetés és fiók
Csak szerkesztés készítő mód
Teljes körű kliens hozzáférés-vezérlés
Használjon Builder által tervezett blokkokat Gutenbergben (szerkesztés nélkül)
Vizuálisan szerkeszthető Gutenberg blokkok
Az ügyfelek szerkeszthetik az építő által tervezett oldal tartalmát a Gutenbergben
Globális színek
Többelemes stílus CSS osztályokkal
Felhasználói tervezés könyvtár
Húzható oszlopszélesség
Húzható margó és párnázás
Dinamikus adatok beágyazása a sablonokba
Körülmények
Ismétlők
Speciális egyéni mezők integrálása
Eszköztár integráció
CSS
JavaScript
PHP
CSS államok és alosztályok
Vizuálisan stílusú egyedi CSS-választók
Építkezés alapvető HTML elemekkel
Kezdők számára a legmegfelelőbb a Divi szerkesztő, mert nem igényel mélyebb ismereteket, gyakorlatilag egyszerűen össze lehet legózni egy tetszőleges oldalt. Számos videó található róla a youtube-on.
Az elementor bonyolultabb felépítésű, így csak némi gyakorlat után tanácsolom a használatát,bár nagyon jó videók találhatók a youtube-on a megtanulásához.
Mindkét szerkesztő elérhető alap és pro verzióban is. Az Elementor mellett szól, hogy sokkal komplexebb és gyorsabb honlapot lehet vele készíteni, azonban a használata bonyolultabb, több szakértelmet kíván. A pro változatban pedig tényleg mindent be lehet állítani, de önmagában az ára eléggé borsos. Ezért is ajánlhatom a HelloWP partnerségét, ahol a közösségi megosztás elve alapján sokkal jutányosabban lehet hozzájutni mindkét rendszer pro változataihoza Hellopack csomagban. Havi 3.900Ft-ért, vagy évi 42.900 Ft-ért jelenleg több, mint 80 prémium Wordpress bővítmény megkapható a csomagban. (2021. áprilisi adat)
Az Oxygen a három közül a legfejlettebb, de egyben a legnehezebben kezelhető rendszer. (Valójában ez sem olyan nehéz.) Ismerni kell hozzá legalább alapszinten a kódolást, de megéri időt és energiát bele fektetni, ha valaki komolyabban szeretne weboldalak szerkesztésével foglalkozni. Jelenleg nem érhető el magyarul, de kezdők is el tudnak igazodni rajta az alábbi videó segítségével. https://youtu.be/Ipjvrlk_xRc
A táblázatban az alábbi adatokat hasonlítottuk össze. Elementor v2.3.4 / Elementor Pro v2.2.3 + Elementor Hello Theme v1.0, Divi 3.17.6 téma, és Oxigén 2.2. A jQuery nem volt benne, mivel alapértelmezés szerint a WordPress tölti be. Nem szabad persze elfelejteni, hogy azóta már mindhárom honlapépítő sokat lépett előre, de az arányok nagy vonalakban ugyanezek maradtak. Miért ilyen kicsi az Oxygen erőforrásigénye? Azért, mert míg a másik két szerkesztő minden erőforrást betölt, addig az Oxygen a sajátos moduláris felépítésével csak annyit igényel, amennyire konkrétan szükség van. Ezért is a leggyorsabb mind közül.
Honlapépítők erőforrásigénye

A HelloWP partnerségben jelenleg az alábbi bővítmények érhetők el

Admin Menu Editor Pro
Advanced Custom Fields PRO
AffiliateWP Ultimate
All-in-One WP Migration PRO + 8 kiegészítő
AutomateWoo
Booster Plus for WooCommerce
Custom User Registration Fields for WooCommerce
Divi Menu Cart Új
Divi Responsive Helper
Divi Supreme Pro
Divi Toolbox
Dynamic Content for Elementor
Elementor PRO Tipp
Email Customizer for WooCommerce with Drag and Drop Email Builder
gAppointments – Appointment booking addon for Gravity Forms
GeneratePress Premium
Gravity Forms
iThemes Security Pro
JetPlugins for Elementor (18 bővítmény)
LearnDash LMS
Mailchimp for WooCommerce Memberships
Master Addons for Elementor
Ninja Forms
Oxygen Builder
QuadMenu PRO
SeoPress Pro
The Plus Addons for Elementor Page Builder
UserPro – Community and User Profile
Visual Composer – WPBakery Page Builder
WooCommerce Additional Variation Images
WooCommerce Advanced Notifications
WooCommerce Advanced Product Quantity
WooCommerce All Products For Subscriptions
WooCommerce Appointments (BookingWP)
WooCommerce Back In Stock Notifications
WooCommerce Bookings
WooCommerce Bulk Stock Management
WooCommerce Checkout Field Editor
WooCommerce Composite Products
WooCommerce Conditional Shipping and Payments
WooCommerce Cost of Goods Új
WooCommerce Deposits
WooCommerce Dynamic Pricing
WooCommerce Email Attachments
WooCommerce Email Customizer
WooCommerce EU VAT Number
WooCommerce Follow Up Emails
WooCommerce Google Analytics Pro
WooCommerce Google Product Feed
WooCommerce Gravity Forms Product Add-ons
WooCommerce Local Pickup Plus
WooCommerce MailChimp Integration
WooCommerce Measurement Price Calculator
WooCommerce Membership
WooCommerce Name Your Price
WooCommerce One Page Checkout
WooCommerce Order Status Manager
WooCommerce PDF Invoice
WooCommerce Points Rewards
WooCommerce Pre-Orders
WooCommerce Product Add-Ons Ultimate PRO
WooCommerce Product Bundles TIPP
WooCommerce Product Reviews Pro
WooCommerce Product Vendors
WooCommerce Review for Discount
WooCommerce Sequential Order Numbers Pro
WooCommerce Slack
WooCommerce Smart Coupons
WooCommerce Social Login
WooCommerce Subscriptions
WooCommerce Tab Manager
WooCommerce Table Rate Shipping
WooCommerce URL Coupons
WooCommerce Wishlists
WooCommerce Zapier WooCommerce
WP All Export Pro
WP All Import Pro
WP-Rocket
WPML Agency
YITH WooCommerce Account Funds Premium
YITH WooCommerce Ajax Product Filter Premium
YITH WooCommerce Auctions Premium
YITH WooCommerce Customize My Account Page
YITH WooCommerce Deposits and Down Payments Premium
YITH WooCommerce Share for Discounts Premium
Yoast SEO Premium

A folyamatról részletesen

  • Elképzelések megbeszélése (miért van szükségünk honlapra, mit akarunk vele elérni, kiket akarunk vele megszólítani, milyen reakciókra van szükségünk, mennyit tudunk az időnkből, energiánkból, anyagiakból rá szánni...)
  • Az elképzelésekhez legjobban használható CMS rendszer kiválasztása (Van élet a WordPress-en és a WooCommerce-en túl is. Nem is akármilyen. Lásd a CMS rendszerek című menüben!)
  • Megállapodás
  • Tárhelyszolgáltató kiválasztása
  • Domainregisztráció
  • Alap-konfiguráció elkészítése
  • GDPR támogatás
  • Dokumentumok feltöltése
  • További elképzelések megbeszélése, módosítás
  • A honlap használatának megismertetése
  • Megállapodástól függően rendszeres karbantartás
  • Meglévő honlapok esetén verziófrissítést, tárhely költöztetést vállalok egyéni megállapodás alapján

Honlapszerkesztés folyamata, költségei

Várható költségekÁr
Tárhely díja (évente fizetendő, mérettől függően)~10.000-30.000 Ft
Domain díja (1-2 évente fizetendő, típustól függő)~0-3.000 Ft
Bemutatkozó honlap 5 oldalig egyszerűbb formázással150.000 Ft
Webáruház alapszintű formázással200.000 Ft
6-10 oldal közötti felár (11 oldaltól egyéni árajánlat kérése (4.000 Ft/oldal))30.000 Ft
Speciális design felár (Oxygene, Divi, vagy Elementor szerkesztővel)50.000 Ft
Keresőoptimalizálás (Ez csak a technikai SEO beállítása. Egy mindenre kiterjedő keresőoptimalizálást ennyiből nem lehet elkészíteni.)20.000 Ft
Két- vagy többnyelvű honlapok esetén nyelvenkénti felár15.000 Ft
Havi karbantartás díja5.000 Ft
Egyedi fejlesztésű honlapok, webáruházak tervezése, kivitelezéseEgyedi árajánlat
A szerkesztésen túl – ha a megrendelő úgy kívánja – vállalom a honlapok rendszeres karbantartását, feltöltését is, azonban a megrendelőnek is
lehetősége van a honlap bejegyzéseinek a szerkesztésére.

Webáruház építés elemei, jellemzőinek összefoglalása (példa)

Domainregisztráció
Tárhelyszolgáltatás kiválasztása
Rendszer tartalma (további kiegészítőket is tartalmazhat kívánság szerint): WordPress, WooCommerce
Egyedi dizájn Oxygen Builder, vagy Elementor, vagy Divi használatával, alkalmazkodva az elképzelésekhez (Ebben én az Oxygen buildert preferálaom, mert mindent meg lehet vele valósítani, nincsenek kötöttségek.)
Automatizált biztonsági mentések
Swift Performance a honlap gyorsításához
Spamszűrő
PWA (Progresszív webalkalmazás) beállítása (Ez a legutóbbi Google frissítés óta már nem növeli a weblap értékét, csak lassítja, ezért nem javaslom, hacsak nem pont az lenne a lényeg, hogy letölthető webalkalmazásként is működjön a honlap.)
Rendszer hibaellenőrzése és optimalizálása GTmetrix segítségével
Reszponzivitás (képernyőméretekre optimalizált): Általános, 1120px alatt, 992px alatt, 768px alatt, 480px alatt
Google integrációk: Search, Analitics, Adwords, Adsense, Cégem
Facebook integrációk: Facebook Pixel, Messenger, Like, megosztás gombok, Hirdetések kezelése,
SEO (keresőoptimalizálás): Squirrly SEO AI alapú optimalizálás, 100% SEO beállítások, Kulcsszókeresés, Versenytárselemzés, Rangelemzés
Kapcsolatok: Email címek, telefon, elérhetőségek beállítása
Webáruház jellemzői: Raktárkészlet kezelése, Kuponok kezelése, időzítése, Termékajánló, Hírlevélküldő akár különböző kategóriák szerint, Intelligens keresés termékekre, Termékszűrők, termékkategóriák, Bejelentkezés Google vagy Facebook fiókkal, Számlázó rendszer integráció (a rendszer használata előfizetéshez kapcsolódhat), Affiliate rendszer, Bankkártyás fizetések, PayPal

Webnode rendszerű honlapok

Ezeket korábban készítettem, amikor még nem használtam a WordPress-t.
WebnodeNőtörténeti MunkabizottságNőképek térben és időben tudományos konferenciaTrauma és válság Nemzetközi Konferencia