Gå till innehållet

Hur man skapar en idealisk design för e-bokförhandsgranskningar med Divi

Divi: det enklaste WordPress-temat att använda

Divi: Det bästa WordPress-temat hela tiden!

mer 901.000-nedladdningar, Divi är det mest populära WordPress-temat i världen. Den är komplett, lätt att använda och levereras med mer än 62 gratis mallar. [Rekommenderas]

Idag ska jag visa dig hur man skapar en design för iögonfallande bokrecensioner med Divis Ebook Layout Pack och Divis inbyggda alternativ. Det är ett utmärkt sätt att lägga till sociala bevis på dina målsidor, öka trovärdigheten och elegant dela korta kundrecensioner.

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 Ebook Layout Pack-landningssidlayouten som du hittar i de förutbestämda layouterna.

Landningslayout för e-bokLägg till en ny sektion

Rulla ner layouten och lägg till ett nytt avsnitt där du vill visa bokrecensionerna.

Infoga en divisionsbokslayoutdel

Lägg till en ny rad

Kolumnstruktur

Fortsätt lägga till en ny rad med följande kolumnstruktur:

Lägg till en divi-layout1 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%

Divi bakgrund

Kolumn 2 bakgrundsfärg

Lägg också till en anpassad bakgrundsfärg i den andra kolumnen.

  • Kolumn 2 Bakgrundsfärg: #9400ff

Linje 2 bakgrund

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

Parameterlinjestorlek

avstånd

Vi ändrar också inställningarna för linjeavstånd.

  • Övre marginal: 100px
  • Nedre marginal: 100px
  • Toppad padding: 0px
  • Botten stoppning: 0px

Divi-avstånd

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.

Lägg till en divi-bild

Bildjustering

Välj inriktningen för den vänstra bilden på fliken Design.

  • Bildjustering: vänster

Bildjustering

dimensionering

Vi ändrar också bredden på denna modul för olika skärmstorlekar.

Skapa enkelt din webbplats med Elementor

Med Elementor kan du enkelt skapa en webbdesign med ett professionellt utseende. Sluta betala dyra för vad du kan göra själv. [Fritt]

  • Bredd: 20% (skrivbord och surfplatta), 30% (telefon)

Divi-bildändring

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

Bild för justering av vänster marginal

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.

Divi-bild rundade inställningar

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 ska vi använda symboler. Fortsätt, kopiera följande symboler och klistra in dem i innehållsområdet i en ny textmodul: ★★★★.

Lägg till etoile diviBakgrundsfärg

Ändra sedan modulens undersida.

  • Bakgrundsfärg: # 9400ff

Divi-stjärninställningarTextinstä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

Divi-textparameterdimensionering

Fortsätt genom att ändra modulens bredd.

  • Bredd: 35%

Divi stjärna breddjusteringavstånd

Och lägg till ett anpassat avstånd.

  • Vänster marginal: 50px
  • Höger marginal: 50px
  • Toppad padding: 20px
  • Botten stoppning: 20px

Lägg till stjärndivi

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)

Textinställning skuggad diviTransformator Ö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.

Letar du efter de bästa WordPress-teman och plugins?

Ladda ner de bästa plugins och WordPress-teman på Envato och enkelt skapa din webbplats. Redan mer än 49.720.000-nedladdningar. [EXKLUSIV]

  • Höger: 360px (skrivbord), -84px (surfplatta), -70px (telefon)
  • Nedre: -113px (skrivbord), 190px (surfplatta), 141px (telefon)

Divi-modultransformation

Lägg till textmodul # 2 i kolumn 1

Lägg till innehåll

Nästa modul vi behöver i kolumn 1 är en annan textmodul. Lägg till innehållet du väljer och en länk till recensionen och boken.

Divi författare anteckning textmodul

Textinställningar

Byt till fliken Design och ändra textinställningarna i enlighet med detta:

  • Text teckensnitt: Montserrat
  • Textstorlek: 18px

Divi typsnitt

Inställningar för textlänk

Ändra färgen på länktexten också.

  • Länktextfärg: #9400ff

Divi-modulens färg

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.

Textmodul rubrikstilar ebook divi recension

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

Textmodul rubrikstilar ebook divi recension

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)

Divi textmodulinställningar avståndskonfiguration

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.

Lägg till en divi-modultext

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)

Redigera divi buildr-text

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;

Anpassa kolumninriktning 2

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.

Skapa enkelt din webbutik

Ladda ner gratis WooCommerce, de bästa e-handelspluggarna för att sälja dina fysiska och digitala produkter på WordPress. [Rekommenderas]

Lägg till divi ebook-bilddimensionering

Gå till fliken Design i bildmodulen och ändra bredden.

  • Bredd: 79% (skrivbord), 40% (surfplatta och telefon)

Justera bildens storlek

Avancerat primärt element

Här kommer vi att försöka justera bilden i mitten.

  • align-self: center;

Rikta in bilden i mitten

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.

Duplicera divisektionen

Avslutande tankar

I den här handledningen har vi visat dig hur du utformar fantastiska bokrecensioner för dina nästa e-bokpubliceringssidor. Det hjälper dig att lägga till socialt bevis på din sida och övertyga besökare om din boks trovärdighet. Om du har några frågor eller förslag, var noga med att lämna en kommentar i kommentarfältet nedan!

Den här artikeln innehåller kommentarer 0

Lämna en kommentar

Din e-postadress kommer inte att publiceras. Obligatoriska fält är markerade *

Den här webbplatsen använder Akismet för att minska oönskade. Läs mer om hur dina kommentarer data används.

Tillbaka till toppen
3 aktier
del3
tweet
Enregistrer