Előnézet

Íme egy pillantás, mit fogunk készíteni. Ennek a kialakításnak a mobil verziója nem lesz ragadós, ezért csak az asztali verziót mutatom meg az előnézethez.

Példa a Divi ajánlásom ragadós moduljára

Példámban a Divi szolgáltatásban elérhető ingyenes Electrical Services Layout Pack céloldalát használom . Ezen az oldalon már van egy ajánló rész az elrendezés alján, de teljesen más a design. Lecserélem az ebben a részben található ajánlásokat, és tükrözöm az új dizájn stílusát. A címet megtartom, de a beállítások megjelenítéséhez újra létrehozom.

Ehhez az oktatóanyaghoz két modul segítségével készítem el az ajánlást. Az ajánló modult használom a kép, név, munkakör és cég megjelenítésére. Az ajánlói tartalomhoz egy szöveges modult használok. A szövegmodul a szokásos módon gördül. Az ajánlási modul a helyén marad, amíg a felhasználó görget, amíg el nem éri az ajánlás végét. Ezután az ajánló modul a szöveges modullal együtt gördül.

Hozd létre a ragadós ajánlási szakasz címét

Először hozzon létre egy új szakaszt , és adjon hozzá egy egyoszlopos sort . Ez a sor tartalmazza a címet, amely középre kerül.

Cím szöveg modul

Ezután adjon hozzá egy szövegmodult a címhez.

Ezután nyissa meg a szövegmodul beállításait . Módosítsa a szöveget Címsor 3-ra, és adja hozzá a címet a törzstartalom-szerkesztőben.

• Szöveg: 3. címsor
• Tartalom: Boldog vásárlók

Tervezési beállítások

Ezután lépjen a Tervezés lapra . Állítsa a Szöveg igazítását Középre igazításra.

• Szöveg igazítása: Középre igazítva

Válassza a H3-at a címsor szövegéhez . Válassza a Chakra Petch betűtípust. Állítsa a súlyt félkövérre, a színt pedig feketére.

• Betűtípus: Chakra Petch
• Súly: félkövér
• Szín: #000000

Végül válassza ki a táblagép ikonját a szöveg méretéhez, és állítsa az Asztal méretét 50 képpontra, a Tablet méretét 28 képpontra és a Telefon méretét 20 képpontra. Zárja be a modul beállításait.

• Méret: asztali 50px, táblagép 28px, telefon 20px

Adjon hozzá egy sort az első ajánláshoz

Ezután adjon hozzá egy 2/3, 1/3 sort a cím alá. Ez a sor tartalmazza az első ajánlást.

Sorbeállítások

Nyissa meg a Tervezés lapot , és engedélyezze az Oszlopmagasságok kiegyenlítését .

• Oszlopmagasságok kiegyenlítése: Igen

Oszlopbeállítások

Nyissa meg az első oszlop beállításait a sor beállításaival.

Görgessen le a szegélystílusokhoz , és válassza ki a felső szegélystílust. Módosítsa a Width-et 2px-re, a színt pedig #ffd600-ra. Zárja be a sorbeállításokat. Ez egy sárga vonalat ad az ajánlás fölé, mint az eredeti ajánlás, amelyet lecseréltünk.

• Szegély stílusok: felső
• Felső szegély színe: #ffd600
• Szélesség: 2 képpont

Beszámoló szöveg modul

Ezután hozzáadjuk a szöveges modult az ajánlási tartalomhoz. Adjon hozzá egy szövegmodult a bal oldali oszlophoz, a sárga vonal alá.

Írja be az ajánlás tartalmát a tartalomszerkesztőbe.

Ezután lépjen a Tervezés lapra . Válassza a Chakra Petch betűtípust. Állítsa a súlyt félkövérre, a színt pedig feketére. A Szövegmérethez válassza a 30 képpontot az asztali számítógéphez és a 14 képpontot a táblagéphez. A Telefon beállítása automatikusan követi a Táblagépet, így nem kell módosítanunk. Állítsa a szövegsor magasságát 2em-re. Ez egy óriási nyomtatott ajánlást hoz létre, amely felkelti a figyelmet.

• Betűtípus: Chakra Petch
• Súly: félkövér
• Fekete szín
• Méret: asztali 30px, táblagépen 14px
• Vonal magasság: 2em

Görgessen le a Szöveg igazítás részhez , és válassza a Középre igazított lehetőséget. Zárja be a szövegmodul beállításait.

• Igazítás: Középre

Az ajánlási modul beállításai

Ezután adjon hozzá egy Beszámoló modult a jobb oldali oszlophoz. Ez ragadós lesz, és megjeleníti a személy nevét, cégnevét, beosztását és képét.

Tartalmi beállítások

Nyissa meg a modul beállításait , és adja hozzá az ajánlás tartalmát. Hagyja üresen a Testtartalom mezőt. Ehhez a szöveges modult használtuk.

• Szerző
• Munka megnevezése
• Vállalat
• Kép

Görgessen le a Háttér részhez , és állítsa fehérre.

• Háttér: #ffffff

Ezután válassza ki a Pin ikont . Ez a háttér ragadós változata, amely lehetővé teszi a háttér színének megváltoztatását, amikor a modul ragadóssá válik. Válassza a feketét a háttérszínnek.

• Ragadós háttérszín: #000000

Idézet ikon

Ezután lépjen a Tervezés lapra . Válassza az #ffd600-at az árajánlat ikon színéhez.

• #ffd600

Kép

Görgessen le a Kép részhez, és állítsa a Szélesség és Magasság értéket 150 képpontra. Módosítsa a Lekerekített sarkokat 0 képpontra.

• Kép szélessége: 150 képpont
• Lekerekített sarkok: 0 képpont

Szöveg

Görgessen le a Szöveg igazítás részhez , és válassza a Középre igazítás lehetőséget. Ez középre helyezi a szerző nevét, beosztását és a cégnév szövegét.

• Szöveg igazítása: Középre igazítva

Szerző szöveg

A Szerző szövege alatt válassza ki a Chakra Petch betűtípust, és állítsa a súlyt félkövérre és középre az igazításhoz. Normál színként válassza a feketét. Válassza a Pin ikont, és állítsa a ragadós színt #ffd600 értékre. Állítsa az Asztal méretét 20 képpontra, a Tablet méretét pedig 14 képpontra.

• Betűtípus: Chakra Petch
• Normál szöveg színe: fekete
• Rögzített szöveg színe: #ffd600
• Méret: 20px asztali, 14px táblagép

Pozíció szövege

Ezután görgessen a Szöveg pozíciója lehetőséghez . Válassza az Exo betűtípust. A normál szövegszínhez válassza a feketét. Kattintson a Pin ikonra, és állítsa a rögzített színt fehérre.

• Betűtípus: Exo
• Normál szövegszín: #000000
• Rögzített szöveg színe: #ffffff

Vállalati szöveg

Görgessen le a Vállalati szöveg részhez . Válassza az Exo betűtípust. A normál szövegszínhez válassza a feketét. Kattintson a Pin ikonra, és állítsa a rögzített színt fehérre.

• Betűtípus: Exo
• Normál szövegszín: #000000
• Rögzített szöveg színe: #ffffff

Box Shadow

Görgessen a Box Shadow elemhez , és válassza ki az első lehetőséget.

• Box Shadow: első árnyék opció

Görgetés effektusok

Végül lépjen a Speciális lapra, és görgessen le a Scroll Effects elemhez . Válassza az Asztal lehetőséget, és válassza a Stick to Top lehetőséget a ragadós pozícióhoz. Állítsa a Sticky Top Offset értékét 50 képpontra. Állítsa az alsó ragadós elemet oszlopra. Ez megmondja a modulnak, hogyan és hol kell ragasztani.

• Ragadó pozíció: Ragaszkodjon a tetejéhez
• Ragadós felső eltolás: 50 képpont
• Alsó ragadós elem: Oszlop

Válassza ki a Tablet ikont a ragadós pozícióhoz, és válassza a Ne ragadjon lehetőséget. Ez megakadályozza, hogy a modul leragadjon a táblagépeken és a telefonokon. Zárja be a modul beállításait.

• Ragadós helyzet: Ne ragadjon

Most, amikor görget, az ajánlómodul a képernyő tetejéhez tapad, és megváltoztatja a színét.

Miután a modul egy vonalba kerül az oszlop aljával, az oszloppal együtt görget.

Másolja meg az első ajánlási sort

Ezután létrehozzuk a második sort az első sor másolásával és változtatásokkal. Mutasson az egérrel a sor fölé, és kattintson a másolat ikonra.

Végül egyenként nyissa meg a szöveges és az ajánlási modulokat , és cserélje ki a korábbi tartalmat az új ajánlási tartalomra. A módosítások elvégzése után zárja be a modulokat, és mentse el az oldalt. Adjon hozzá további ajánlásokat a sokszorosítási folyamat megismétlésével. Most van egy érdekes, ragadós ajánlási rész, két olyan ajánlással, amelyek kiemelkednek és jól néznek ki.

Eredmények