Előnézet

Először is lássuk, mit készítünk. Íme egy pillantás az egyes háttérmintázatokra asztali számítógépen, táblagépen és telefon képernyőjén.

Az első egyedi méretű háttérminta eredményei

Asztali

Tabletta

Telefon

Második egyéni méretű háttérminta eredménye

Asztali

Tabletta

Telefon

Harmadik egyéni méretű háttérminta eredményei

Asztali

Tabletta

Telefon

Egyedi méretű háttérminta elrendezés

Példáinkhoz a Divi-n belül elérhető ingyenes Acai Bowl nyitóoldal első részét használom . Három különböző háttérmintát adunk hozzá, és személyre szabjuk őket az egyes eszközopciókhoz. A példáimhoz tartozó rész az #f9f3fd háttérszínt használja. Megtartjuk ezt a háttérszínt, és háttérmintákat adunk hozzá.

Első egyedi méretű háttérminta példa

Az első példánk átlós csíkokat ad hozzá, amelyek csak a szakasz alján jelennek meg. Különféle beállításokra lesz szükségünk az asztali számítógépekhez, táblagépekhez és telefonokhoz.

Először nyissa meg a szakasz beállításait a szakasz fogaskerék ikonjára kattintva.

Ezután görgessen le a Háttér elemhez . Mindhárom képernyőméretet módosítani fogjuk, ezért kezdjük a táblagép ikonjának kiválasztásával , amely akkor jelenik meg, amikor az egérmutatót a Háttér opciók fölé viszi.

Válassza ki a háttérmintát

Ezután győződjön meg arról, hogy az Asztal van kiválasztva, válassza a Háttérminta lapot, majd kattintson a Háttérminta hozzáadása elemre .

Válassza ki a háttérminta alatti legördülő listát .

Válassza ki a listából az Átlós csíkos háttérmintát. Ezt a mintát módosíthatjuk, így nem csak egy csíkokkal teli képernyőről van szó. Tehát ezt használjuk egyedi hátterünk létrehozására.

• Háttérminta: átlós csíkok

Háttérminta beállításai

Módosítsa a minta színét rgba(68,40,84,0,13) értékre. Ez a szín jól illeszkedik a háttérszínünkhöz.

• Minta színe: rgba (68,40,84,0,13)

Ezután nyissa meg a Mintaméret legördülő listát, és válassza az Egyéni méret lehetőséget. Állítsa a minta magasságát 41vh-ra, a minta ismétlési eredetét az alsó középpontra, és a minta ismétlődését az X ismétlésére (vízszintes). Ezzel szabályozhatjuk a háttérmintázat méretét és elhelyezését a képernyőn.

• Mintaméret: Egyedi méret
• Magasság: 41vh
• Ismétlési eredet: Alul középen
• Ismétlés: Ismétlés X (vízszintes)

A táblagép háttérbeállításai

Ezt követően a hátteret jól kell működtetnünk különböző képernyőméretekkel. Módosítanunk kell a minta magasságát a képernyő mérete alapján. Görgessen vissza a Háttérbeállításokhoz, és válassza ki a Táblagép ikont .

Módosítsa a minta magasságát 30 Vh-ra.

• Minta magasság: 30vh

Telefon háttérbeállítások

Végül görgessen vissza a Háttérbeállításokhoz, és válassza ki a Telefon ikont .

Módosítsa a minta magasságát 25 Vh-ra. Zárja be a modul beállításait, és mentse el az oldalt.

• Minta magasság: 25vh

Második egyedi méretű háttérminta példa

A második egyedi méretű háttérminta-példánk egy kört fog hozzáadni a képernyő közepéhez. Tervezésünkhöz az acai tál mögött jelenik meg kiemelt képünkön.

Válassza ki a háttérmintát

A beállítások részben görgessen le a Háttér részhez, és válassza ki a táblagép ikont az eszköz képernyőméret-beállításainak megnyitásához. Válassza az Asztal lapot , válassza a Háttérminta lapot , majd kattintson a Háttérminta hozzáadása lehetőségre .

Ehhez a példához Polka Dot s-t szeretnénk . Ez az alapértelmezett beállítás, így valójában nem kell megnyitnia a legördülő menüt. Megmutatom a lehetőségeket arra az esetre, ha egy másik háttérmintáról erre a mintára váltana. A pöttyök automatikusan megjelennek, ha a Háttérminta hozzáadása lehetőségre kattint. Kattintson duplán a mintára, vagy használja a legördülő listát a módosításához.

• Háttérminta: pöttyös

Változtassa meg a Színt fehérre. Ez lehetővé teszi, hogy egy fehér kört adjunk a háttérhez.

• Szín: #ffffff

Következő. állítsa a Pattern Size -t Custom-ra, a Height -ot 400vh-ra, és a Repeat Origin -t középre. Ezek a beállítások szabályozzák a pontok méretét és helyzetét. Ebben az esetben egyetlen pontot hoztunk létre, amely a háttérben jelenik meg.

• Mintaméret: Egyedi méret
• Minta magasság: 400 Vh
• Ismétlés Origin: Center

A táblagép háttérbeállításai

Ezután meg kell győződnünk arról, hogy minden képernyőméreten jól működik. Válassza ki a táblagép lapot .

Ezután módosítsa a minta magasságát 300 Vh-ra.

• Minta magasság: 300 Vh

Telefon háttérbeállítások

Végül lépjen vissza a Háttérbeállításokhoz, és válassza ki a telefon lapot a telefon képernyőméret-beállításainak megnyitásához.

Módosítsa a minta magasságát 200 Vh-ra. Zárja be a modul beállításait, és mentse el az oldalt.

• Minta magasság: 200 Vh

Harmadik egyedi méretű háttérminta példa

Ez a példa egyetlen cikk-cakk vonalat jelenít meg a szakasz közepén. Ehhez nem kell külön beállítani a telefont. Engedjük, hogy kövesse a táblagép beállításait.

Válassza ki a háttérmintát

A harmadik egyedi méretű háttérmintázat-példánkhoz nyissa meg a szakasz beállításait , és görgessen le a Háttér elemhez . Vigye az egérmutatót a Háttérbeállítások fölé, és kattintson a táblagép ikonjára az eszközbeállítások megnyitásához. Válassza az Asztal lapot , majd a Háttérminta lapot . Kattintson a Háttérminta hozzáadása elemre .

Nyissa meg a Háttérminta legördülő menüt, és válassza a Cikk-zag 2 lehetőséget. Ez a minta cikk-cakk vonalakkal tölti meg a képernyőt, de módosítani fogjuk úgy, hogy csak egy sort jelenítsen meg.

• Háttérminta: Zig Zag 2

Módosítsa a háttérminta színét rgba(68,40,84,0,09) értékre. Ennek a színnek nincs nagy kontrasztja a háttérszínünkkel, így nem lesz zavaró.

• Háttérminta színe: rgba(68,40,84,0,09)

Állítsa a Pattern Size -t Custom Size-re, a Pattern Height -ot 20vh-ra, a Pattern Repeat Origin -t a Center-re, és a Pattern Repeat -t az ismétlésre X (vízszintes). A többi példához hasonlóan ez is szabályozza a minta méretét és helyzetét.

• Mintaméret: Egyedi méret
• Minta magasság: 20vh
• Ismétlés Origin: Center
• Minta ismétlése: Ismétlés X (vízszintes)

A táblagép háttérbeállításai

Végül görgessen vissza a Háttérbeállítások elejére, és kattintson a táblagép ikonra . A telefon beállításai automatikusan ezeket a beállításokat fogják használni, így nem kell módosítanunk a telefon fülön.

Görgessen le a Pattern Height részhez, és módosítsa 10vh-ra. Zárja be a modul beállításait, és mentse el az oldalt.

• Minta magasság: 10vh

Eredmények

Íme egy pillantás az egyes háttérmintázatokra asztali számítógépen, táblagépen és telefon képernyőjén.

Az első egyedi méretű háttérminta eredményei

Asztali

Tabletta

Telefon

Második egyéni méretű háttérminta eredménye

Asztali

Tabletta

Telefon

Harmadik egyéni méretű háttérminta eredményei

Asztali

Tabletta

Telefon

Befejező gondolatok

Így nézzük meg, hogyan adhatunk egyéni méretet háttérmintájához a Divi segítségével. A Divi új háttérmintái rengeteg tervezési lehetőséget nyitottak meg. Ezek a minták jól mutatnak az elrendezéseinkkel. Az a koncepció, hogy egyéni méretet használunk a háttérmintához, azt jelenti, hogy nem vagyunk bezárva az ismétlődő mintákba. A Divi háttérmintái sokkal többre használhatók. Az itt ismertetett koncepciók segítségével a Divi bármelyik háttérmintáját használhatja saját egyedi háttértervek létrehozásához.

Szeretnénk hallani önről. Hozzáadott már egyéni méretet a háttérmintához a Divi segítségével? Ossza meg velünk tapasztalatait a megjegyzésekben.