Landing Builderrel kompatibilis sitebuild készítése

Ez a dokumentáció leírja, hogy hogyan érdemes felépíteni egy olyan weblapot, amit végül a ConyCMS Landing Builder-ével szeretne a megrendelő szerkeszteni.

Konténer

A grafikai terv alapján el kell dönteni, hogy mi lesz a konténere annak a tartalmi résznek, amit a Landing Builderrel kell tudni szerkeszteni. Ennek a résznek már eleve egy, az oldal szélességét meghatározó konténerben kell lennie, mivel a Landing Builderrel már csak a grid rendszer lehet konfigurálni.

A konténer elem gyökerében kizárólag sor típusú elemek szerepelhetnek, semmilyen más komponens, vagy segéd elem.

Grid rendszer

A grid rendszer felépítése a klasszikus sor / oszlop elrendezést követi. Egy sorba maximum annyi oszlop rakható, amit a grid rendszer meghatároz (ez jelenleg fixem 12), azonban ezeknek az oszlopoknak a pontos szélessége 1 és 12 grid között külön-külön beállítható.

Egy oszlop szélességét az összes beállított képernyő méretre meg kell adni, akkor is, ha összesen két különböző méretet használ (pl 12 grid, azaz teljes szélesség mobil, és 6 grid desktop méreteken).

Erre a sitebuild során figyelni kell, és egyrészt nem szabad kihagyni egy képernyő méretre vonatkozó szélességet sem, másrészt nem szabad használni a Bootstrap automata tördelő kódjait (col, col-sm, col-md, stb class-ok), kizárólag a pontos szélességet beállító class-okat (col-6, col-sm-6, col-md-6, stb).

Egy oszlopon belül lehet egy újabb sort, és abban is oszlopokat indítani, hogy pontosabban be lehessen állítani az elrendezést, azonban ettől mélyebbre nem enged a Landing Builder menni, tehát egy belső oszlopon belül nem lehet még egy harmadik sort indítani, csak komponenseket. Amennyiben szükség van ilyen szintű sor / oszlop struktúrára, a 3. szinttől kezdve már a komponensekben kell azokat megvalósítani, amit viszont már nem lehet a Landing Builderrel szerkeszteni.

Szükség esetén a soroknál és az oszlopoknál megadhatunk kiegészítő CSS osztályokat, amennyiben szükséges, de ezeket nem szabad méretezésre használni, elsődlegesen keret, háttérszín, vagy térközök egyedi beállítására használható.

Komponensek

A komponenseken belül nem lehet másik komponenst elhelyezni a Landing Builderrel, ezért úgy kell meghatározni és felépíteni a komponenseket, hogy azok közvetlenül felhasználhatók legyenek a Landing Builderben.

Például ha van egy standard gombunk, ami elérhető mint komponens, de egy másik, összetett komponensen belül ugyanazt a gombot szeretnénk használni, akkor azt csak úgy tehetjük meg, hogy az összetett komponenst felépítjük HTML szinten, és legfeljebb a szövegezést lehet paraméterezni a Landing Builderben.

Példakódok

A következő példakódok azt az alap HTML struktúrát mutatják be, amit a konténer elem gyökerébe kell rakni, és amitől nem szabad logikailag eltérni, ha a Landing Builderrel kompatibilis sitebuildet szeretnénk készíteni.

Egy szintű grid rendszer

A következő struktúrát szeretnénk felépíteni desktopon úgy, hogy md méreten és az alatt teljes szélességűre váltsanak az oszlopok:

HTML kód:

<div class="row">
    <div class="col-12 col-sm-12 col-md-12 col-lg-4 col-xl-4">
        ide jöhet a tartalom
    </div>
    <div class="col-12 col-sm-12 col-md-12 col-lg-4 col-xl-4">
        ide jöhet a tartalom
    </div>
    <div class="col-12 col-sm-12 col-md-12 col-lg-4 col-xl-4">
        ide jöhet a tartalom
    </div>
</div>

Az oszlopokon belül már lehet rakni a komponenseket, vagy a következő példa alapján egy újabb sor / oszlop struktúrát:

Két szintű grid rendszer

A következő struktúrát szeretnénk felépíteni desktopon úgy, hogy md méreten és az alatt teljes szélességűre váltsanak a külső oszlopok, de a belsők ne változzanak:

HTML kód:

<div class="row">
    <div class="col-12 col-sm-12 col-md-12 col-lg-4 col-xl-4">
        ide jöhet a tartalom
    </div>
    <div class="col-12 col-sm-12 col-md-12 col-lg-4 col-xl-4">
        <div class="row">
            <div class="col-6 col-sm-6 col-md-6 col-lg-6 col-xl-6">
                ide jöhet a tartalom
            </div>
            <div class="col-6 col-sm-6 col-md-6 col-lg-6 col-xl-6">
                ide jöhet a tartalom
            </div>
        </div>
    </div>
    <div class="col-12 col-sm-12 col-md-12 col-lg-4 col-xl-4">
        ide jöhet a tartalom
    </div>
</div>

A belső oszlopokon belül már kizárólag komponensek helyezhetők, de a külső oszlopokba lehet sorokat is, egy oszlopba akár több sort is indítva, ahogy a következő példa mutatja.

Két szintű grid rendszer, több belső sorral

A következő struktúrát szeretnénk felépíteni desktopon úgy, hogy md méreten és az alatt teljes szélességűre váltsanak a külső oszlopok, a belsőkből pedig az első sorban lévők szintén váltsanak teljes szélességűre, de a második sorban találhatók ne:

HTML kód:

<div class="row">
    <div class="col-12 col-sm-12 col-md-12 col-lg-4 col-xl-4">
        ide jöhet a tartalom
    </div>
    <div class="col-12 col-sm-12 col-md-12 col-lg-4 col-xl-4">
        <div class="row">
            <div class="col-12 col-sm-12 col-md-12 col-lg-6 col-xl-6">
                ide jöhet a tartalom
            </div>
            <div class="col-12 col-sm-12 col-md-12 col-lg-6 col-xl-6">
                ide jöhet a tartalom
            </div>
        </div>
        <div class="row">
            <div class="col-6 col-sm-6 col-md-6 col-lg-6 col-xl-6">
                ide jöhet a tartalom
            </div>
            <div class="col-6 col-sm-6 col-md-6 col-lg-6 col-xl-6">
                ide jöhet a tartalom
            </div>
        </div>
    </div>
    <div class="col-12 col-sm-12 col-md-12 col-lg-4 col-xl-4">
        ide jöhet a tartalom
    </div>
</div>