Idag ska jag visa dig hur du designar en design för iögonfallande bokrecensioner med hjälp av Ebook Endast Divi Layout Pack och Divi inbyggda alternativ. Det är ett utmärkt sätt att lägga till sociala bevis på dina målsidor, öka trovärdigheten och dela människors korta recensioner på ett elegant sätt.
Låt oss börja designen
Ladda upp layout för e-bokpaketets målsida
Det första du ska göra är att skapa en ny sida med hjälp av målsideslayouten förEbook Layout Pack som du hittar i Premade Layouts.
Lägg till en ny sektion
Rulla ner layouten och lägg till ett nytt avsnitt där du vill visa bokrecensionerna.
Lägg till en ny rad
Kolumnstruktur
Fortsätt lägga till en ny rad med följande kolumnstruktur:
1 Kolumngradientbakgrund
Utan att lägga till fler moduler öppnar du radinställningarna och lägger till en lutningsbakgrund till den första kolumnen.
- 1 färg: #ffffff
- 2-färg: #f4f4f4
- Kolumn 1 Startposition: 12%
- Kolumn 1 Slutlig position: 12%
Kolumn 2 bakgrundsfärg
Lägg också till en anpassad bakgrundsfärg i den andra kolumnen.
- Kolumn 2 Bakgrundsfärg: #9400ff
dimensionering
Byt till fliken Design och ta bort allt anpassat utrymme mellan kolumner med följande inställningar:
- Använd en anpassad rännbredd: Ja
- Rännbredd: 1
avstånd
Vi ändrar också inställningarna för linjeavstånd.
- Övre marginal: 100px
- Nedre marginal: 100px
- Toppad padding: 0px
- Botten stoppning: 0px
Lägg till en bildmodul i kolumn 1
Ladda upp 1: 1 Image
När dina radinställningar är på plats kan du börja lägga till de olika modulerna och börja med en bildmodul i den första kolumnen. Ladda upp en bild efter eget val men se till att bildförhållandet är 1: 1. Detta innebär att höjden och bredden ska vara samma värde.
Bildjustering
Välj inriktningen för den vänstra bilden på fliken Design.
- Bildjustering: vänster
dimensionering
Vi ändrar också bredden på denna modul för olika skärmstorlekar.
- Bredd: 20% (skrivbord och surfplatta), 30% (telefon)
avstånd
För att tillåta överlappning på vänster sida av raden lägger vi till ett negativt vänster marginalvärde i avståndsinställningarna för bildmodulen.
- Vänster marginal: -30px
gräns
För att slutföra bildens design lägger vi till '50vw' i varje hörn i gränsinställningarna. Detta säkerställer att bilden bibehåller sin cirkulära form över olika skärmstorlekar.
Lägg till textmodul # 1 i kolumn 1
Lägg till stjärnsymboler i innehållsområdet
Låt oss gå vidare till nästa modul, som är rankningstextmodulen. För att markera antalet stjärnor kommer vi att använda symboler. Fortsätt, kopiera följande symboler och klistra in dem i rutan innehåll av en ny textmodul: ★★★★.
Bakgrundsfärg
Ändra sedan modulens undersida.
- Bakgrundsfärg: # 9400ff
Textinställningar
Byt till fliken Design och ändra även textinställningarna.
- Text teckensnitt: Montserrat
- Textens textvikt: Tung
- Textstorlek: 45px (skrivbord), 30px (surfplatta), 25px (telefon)
- Höjd på textrad: 1em
- Justering av texten: centrum
dimensionering
Fortsätt genom att ändra modulens bredd.
- Bredd: 35%
avstånd
Och lägg till ett anpassat avstånd.
- Vänster marginal: 50px
- Höger marginal: 50px
- Toppad padding: 20px
- Botten stoppning: 20px
Skugga låda
För att markera betygsrutan ska vi lägga till en subtil skugga.
- Box Shadow Blur Force: 50px
- Skuggfärg: rgba (0,0,0,0,3 XNUMX XNUMX)
Transformator Översätt
Slutligen flyttar vi om textmodulen med anpassade översättningsvärden för översättning. Du kan skjuta upp detta steg tills du också har lagt till alla moduler i din kolumn.
- Höger: 360px (skrivbord), -84px (surfplatta), -70px (telefon)
- Nedre: -113px (skrivbord), 190px (surfplatta), 141px (telefon)
Lägg till textmodul # 2 i kolumn 1
Lägg till innehåll
Nästa modul vi behöver i kolumn 1 är ytterligare en textmodul. Lägg till innehåll efter eget val och en länk till recensenten och boken.
Textinställningar
Byt till fliken Design och ändra textinställningarna i enlighet med detta:
- Text teckensnitt: Montserrat
- Textstorlek: 18px
Inställningar för textlänk
Ändra färgen på länktexten också.
- Länktextfärg: #9400ff
avstånd
Gå sedan till avståndsinställningarna och placera om elementet med anpassade marginalvärden.
- Övre marginal: -100px (skrivbord), 0px (surfplatta och telefon)
- Vänster marginal: 200px (skrivbord), 50px (surfplatta), 20px (telefon)
- Höger marginal: 50px (surfplatta), 20px (telefon)
Lägg till textmodul # 3 i kolumn 1
Lägg till H3-innehåll
Låt oss gå vidare till nästa modul, som är en textmodul som innehåller titeln på H3-revisionen.
H3 textinställningar
Gå till fliken Design och ändra H3-textinställningarna.
- Rubrik 3 Teckensnitt: Montserrat
- Titel 3 Teckensnitt vikt: fet
- Titel 3 Textfärg: #000000
avstånd
Lägg också till en anpassad marginal.
- Övre marginal: 80px (skrivbord), 50px (surfplatta och telefon)
- Vänster marginal: 50px (skrivbord och surfplatta), 20px (telefon)
- Höger marginal: 50px (skrivbord och surfplatta), 20px (telefon)
Lägg till textmodulen 4 i kolumnen 1
Lägg till innehåll
Låt oss gå vidare till nästa och sista modul vi behöver i 1-kolumnen, som är en annan textmodul med den faktiska revisionen.
avstånd
Gå till avståndsinställningarna för denna modul och använd följande inställningar:
- Övre marginal: 20px
- Nedre marginal: 50px
- Vänster marginal: 50px (skrivbord och surfplatta), 20px (telefon)
- Höger marginal: 50px (skrivbord och surfplatta), 20px (telefon)
Lägg till en bildmodul i kolumn 2
Ändra CSS-inställningarna i 2-kolumnen
Vi ska använda flexegenskaperna för att anpassa bilden till mitten:
display: flex;
Ladda ner bokomslagsbilden
I den andra kolumnen behöver vi två moduler, som börjar med en bildmodul med omslaget till boken. För denna handledning använder vi de omslag som medföljer Divi översiktsbok, men du kan också lägga till din egen bokomslag.
dimensionering
Gå till fliken Design i bildmodulen och ändra bredden.
- Bredd: 79% (skrivbord), 40% (surfplatta och telefon)
Avancerat primärt element
Här kommer vi att försöka justera bilden i mitten.
- align-self: center;
Klon designen så många gånger du vill
När du har skapat den första bokrecensionen kan du klona hela raden så många gånger du vill, beroende på hur många recensioner du vill se på din målsida.
Avslutande tankar
I den här handledningen visade vi dig hur du designar fantastiska bokrecensioner för dina nästa e-bokpubliceringssidor. Detta hjälper dig att lägga till socialt bevis på din sida och övertyga besökare trovärdigheten i din bok. Om du har några frågor eller förslag, se till att lämna en kommentar i kommentarsfältet nedan!
