Az Astra sablon bemutatása, telepítése, beállítása

A gyors WordPress weboldal egyik fontos összetevője maga a sablon, amit használsz. Megfontoltan kell megválasztani a weboldalad kinézetét, mert menet közben sablont cserélni nem a legegyszerűbb feladat. Tervezek egy esettanulmányt, melyben részletesen bemutatom a sablonváltás nehézségeit saját példámból merítve, ahol az Avada lett cserélve az Astra sablon Pro változatára.

Ebben a cikkben a népszerű és ingyenes Astra sablont mutatom be részletesen. Ezen a weboldalon is az Astra Pro változata fut és nagyon elégedett vagyok vele.

A PageSpeed Insight-on 74/98 értékelést kap úgy, hogy 38 aktív bővítmény fut alatta.  Köztük néhány nagyobb méretű is, mint például a WooCommerce, LearnDash, Thrive Architect, Thrive Leads, Thrive Quiz Builder, Thrive Ultimatum. Nem használok CDN-t, nincs overcache, csak a Swift Performance ingyenes változata.

Az Astra egy ideális kezdősablon már Free változatában is, de természetesen van fizetős opciója is, kibővített tudással. Ideális azoknak is, akik valamilyen oldalépítőt használnak, mert tökéletes együttműködik a legnépszerűbb pagebuilderekkel, mint a Thrive Architect, Elementor, Beaver Builder, Divi, Visual Composer.

Amit az Astra sablonról tudni kell

Az Astra sablon főoldala

Sebességre optimalizált: Kifejezetten a gyorsaságra helyezték a hangsúlyt a sablon létrehozásakor. Nem használ például jQurey-t, ami jelentősen lassítja a betöltődést. A használaton kívüli modulok kikapcsolhatóak, ezzel is javítva a teljesítményt.


Könnyen alakítható: Az ingyenes verzióban is számtalan beállítási lehetőséget nyújt, mindezt kapcsolókkal, jelölőnégyzetekkel egyszerűen megoldva. A Pro modul pedig még jobban kibővíti a testreszabhatóságot, de erről majd később.


Komplett weboldalak: Már az ingyenes változathoz is tudsz egy kattintással kész weboldalakat beimportálni az Astra Starter Sites bővítmény telepítésével.


Oldalépítő kompatibilis: Az Astra kiválóan együttműködik a legnépszerűbb WordPress oldalépítőkkel, mint amilyen a Thrive Architect, Elementor, Beaver Builder, Divi, Visual Composer.


WooCommerce kompatibilis: Az Astra azon túl, hogy tökéletesen integrálható a WooCommerce webáruház bővítménnyel, még további funkciókkal is kiterjeszti azt.


LearnDash kompatibilis: Ha online tanfolyamokkal szeretnél foglalkozni, akkor a LearnDash tökéletes választás erre a célra. Az Astra (Pro)pedig tartalmaz egy LearnDash integrációt is.

Az Astra sablon telepítése

Először lépj a WordPress vezérlőpult Megjelenés/Sablonok/Új hozzáadása és a keresőbe írd be azt, hogy Astra. Kattints a telepítésre, majd bekapcsolás. Ezzel meg is vagy.

Ha szeretnél kész weboldalakat beimportálni, akkor irány a bővítmények Új hozzáadása és a keresőbe írd be azt, hogy Astra Starter Sites. telepítsd, majd kapcsold be. A Megjelenés főmenüben lépj az Astra Starter Sites fülre. Itt tudsz választani az előre elkészített weboldalak közül. Megtekintéshez kattints a preview gombra, a telepítéshez pedig az Import Site gombra.


Az Astra sablon testreszabása


Az Astra sablon testreszabását a hagyományos módon a Megjelenés/Testreszabás útvonalon is eléred, de egy külön Astra Options menüpontot is találsz a Megjelenés menüben, ahonnan ugyanez a szekció érhető el. Ha a Pro változatot használod, akkor itt megjelenik egy újabb ablak, a 18 Pro modullal.

Az Astra sablon beállítás moduljaAz Astra sablon ingyenes moduljai

Az Astra sablon Pro moduljai

Az Astra sablon Pro moduljai

Ebben a részben az Astra Pro beállítási lehetőségeit mutatom be nagy vonalakban, ha az ingyenes változatot használod, akkor néhány menüpont hiányozni fog, vagy kevesebb opciót tartalmaz. A bejegyzésed / oldalad szerkesztésekor a jobb oldali menüben megjelenik két további beállításpanel, mely segítségével el tudsz térni a fő beállítástól. Lásd lenti kép. (Ha megtetszik a Pro változat, akkor iratkozz fel a hírleveleimre, mert a belső kör tagjai potom összegért juthatnak hozzá általam egy Astra Pro LifeTime licenchez.)


Layout főmenü


Fejléc almenü:


Site indetity: Itt adhatsz meg logót, egysoros leírást.
Primary Header: A fejléc elrendezés, ikon beállítás.
Above header (pro): A fejléc felett jeleníthető meg egy terület.
Below header (pro): A fejléc alatt jeleníthető meg egy terület.
Sticky Header (pro): Ragadós fejléc állítható be.
Transparent Header: Átlátszó fejlécet tudsz beállítani.


Breadcumb almenü:

Morzsamenü állítható be a fejlécben, a fejléc után, a címsor előtt.


Blog almenü:

A blog/Archívum beállítása, a Free változatban csak egyféle elrendezés van.
Single Post: A bejegyzés metaadatait lehet beállítani.


Sidebar almenü:

Eltérő oldalsávokat adhatsz meg oldalaknak, bejegyzéseknek, shopnak.


Footer almenü:

A lábléc widgetek elrendezését és a lábléc sávot állíthatod be.


WooCommerce:


General (pro): Akciós termékhez értesítéseket adhatsz meg, kosár ikont, számlálót a fejlécbe.
Shop: A webáruház beállítása a pro-hoz képest korlátozva.
Single Product: A free változatban csak a morzsamenü tiltható.
Cart Page: Upsell-t lehet beállítani.
Checkout Pages (pro): A fizetés oldalt lehet vele dizájnolni.
Scroll to Top (pro): Az oldal tetejére ugrás gomb beállítása.
LearnDash (pro): További LearnDash beállítások.
Container: Eltérő elrendezést állíthatsz be oldalnak, bejegyzésnek, shopnak.


Colors&Background főmenü


Base Colors almenü:

Megadhatod a téma főszínét, a szöveg színét, a linkek színét simán, illetve rámutatáskor.
Breadcrumb: Itt a morzsamenü tekintetében a fentieket.
Header: Itt a fejlécek színbeállítását adhatod meg.
Content (Pro): Betűtípusokat és a színüket adhatod meg H1-H6-ig.
Blog(pro): További színbeállítások a bejegyzésekhez.
Sidebar(pro): További színbeállítások az oldalsávokhoz.
Footer Widgets: A lábléc widgetek színbeállítása.
Footer Bar: A láblécsáv színbeállítása.
WooCommerce: A shop színbeállítása.
Learndash: A Learndash modul színbeállítása.

Typography főmenü


Base Typography: A tartalom, fejléc betűtípusainak beállítása.
Primary Header: Az oldal neve betűméret beállítása.
Breadcrumb: A morzsamenü betűtípus beállítása.
Content: A tartalom betűtípusainak beállítása.
Button (pro): A gombok betűtípusainak beállítása.
Blog: A cikkek betűtípusának beállítása.
Sidebar(pro): Az oldalsáv betűtípusainak beállítása.
Footer Widget Area(pro): A lábléc widget terület betűtípusainak beállítása.
Footer(pro): A lábléc betűtípusainak beállítása.
WooCommerec(pro): A WooCommerce betűtípusainak beállítása.
LearnDash (Pro): A Learndash betűtípusainak beállítása.

Buttons főmenü


Theme button: A sablon gombok beállítása.
Header Button: A fejléc gomb beállítása.

Menük főmenü

A menü elrendezés beállítása.


Widgetek főmenü

A Widgetek elrendezésének beállítása.


Kezdőoldal Beállítások főmenü

A kezdőoldalt és a blog oldalt tudod beállítani.


WooCommerce főmenü

A webshop elrendezés beállítása.


További CSS főmenü

Egyedi css-t adhatsz hozzá a honlapodhoz.

Újabb almenük is megjelenhetnek attól függően, hogy bekapcsolsz-e még további modulokat.

Az Astra Pro árazása

Az Astra sablon árazása

Az Astra Pro változatához 3 féle csomagban (Astra Pro/Mini Agency Bundle/Agency Bundle), 2 féle előfizetéssel (éves/lifetime) juthatsz hozzá. Van éves licenc, ahol 59$-ért korlátlan weboldalon használhatod, illetve lehetőség van Lifetime licenc beszerzésére 249$-os áron, ahol örökös hozzáférést kapsz minden további fejlesztéshez. (Egy ilyen licenc lehet a tiéd az egyik termékem megvásárlásakor)

​Az Astra Free és Pro összehasonlítása táblázatban

​Astra Pro

Astra Free

​Ár

​59$

​Ingyenes

​Transparent Header

Sticky Header

​Mobile Headers

Page Headers

​Mega Menu

​Colors & Typography

​Dedicated Sidebar

​WooCommerce Ready

Boxed Layout

​Full Width Layout

​Padded Layout

​Fluid Layout

​Spacing Control

​Default Container

​Google Fonts

​Custom Fonts

​Responsive Font Size

​Paragraph Margin Option

Font Size PX, EM

​Text Transform

​Primary Header Colors

Above Header Colors

​Below Header Colors

​Transparent Header Colors

​Sticky Header Colors

​Content Colors

​Blog / Archive Colors

​Single Page Colors

​Sidebar Colors

​Footer Colors

​Grid Layout

​List Layout

​Masonary Layout

​Highlight First Post

​Date Box

​Excerpt Count

​Blog Structure Control

​Blog Content Width

​Post Pagination

​Infinite Loading

​Logo Align

​Mobile Header Designs

​Above Header Content

​Below Header Content

​Above Header Layout

​Below Header Layout

​Flexible Footer Layouts

​Footer Bar Layout

​WooCommerce Grid Settings

​WooCommerce Infinite Scroll

​WooCommerce Off-Canvas Sidebar

​WooCommerce Quick View

​WooCommerce Gallery Options

​​WooCommerce Dropdown Cart

​WooCommerce Sales Bubble Style

​LifterLMS Integration

​LearnDash Integration

​Schema Integrated

​SEO Optimized

​Address Widgets

​Info List Widgets

​Social Icons Widgets

​Custom Header

​Custom Footer

​Custom 404 Page

​Custom Layout – Hooks

​Display Conditions

​Gutenberg ready

Összefoglalás

Az Astra jelenleg az egyik legjobb ingyenes sablon, amit a 300.000. aktív telepítés is alátámaszt. Ideális kezdősablon, melyet a Pro modullal még tovább lehet fejleszteni. A kódolási megoldásainak és a kikapcsolható moduljainak köszönhetően mindig annyi erőforrást használ, amennyire szükséged van. Tökeletes társ bármely oldalépítőhöz. Az Astra Starter Sites bővítmény segítségével pedig egyszerűen importálhatsz be kész weboldalakat, így gyorsítva meg a folyamatokat.

 

Szólj hozzá

Az email címet nem tesszük közzé. A kötelező mezőket * karakterrel jelöltük

Az oldal tetejére