Gå till innehållet

Så här använder du Summary-modulen på Divi Builder

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]

Innan du kan lägga till en sammanfattningsmodul på din sida måste du först komma åt Divi Builder. När Divi-temat har installerats på din webbplats kommer du att märka en knapp Använd Divi Builder ovanför inläggsredigeraren när du skapar en ny sida. Genom att klicka på den här knappen aktiverar du Divi Builder, vilket ger dig tillgång till alla Divi Builder-moduler. Klicka sedan på knappen Använd Visual Builder för att starta generatorn i visuellt läge. Du kan också klicka på knappen Använd Visual Builder när du surfar på din uppströmswebbplats om du är inloggad på din WordPress-instrumentpanel.

knappen divi builder modul blogg divi

När du väl har gått in i Visual Builder kan du klicka på den grå plusknappen för att lägga till en ny modul på din sida. Nya moduler kan bara läggas till inom rader. Om du börjar en ny sida, kom ihåg att först lägga till en rad på din sida.

modul återuppta divi builder.png

Hitta Sammanfattningsmodulen i listan över moduler och klicka på den för att lägga till den på din sida. Listan över moduler är sökbar, vilket innebär att du också kan skriva ordet "Sammanfattning" och sedan klicka på Enter för att automatiskt hitta och lägga till den beskrivande textmodulen! När modulen har lagts till hälsas du med listan över modulalternativ. Dessa alternativ är indelade i tre huvudgrupper: Innehåll , Conception et advanced .

använd fall för att lista företagstjänster på hemsidan

Eftersom Sammanfattningsmodulen kombinerar både bilder och text för att visa upp vissa funktioner kan du använda den för att lägga till en lista över dina företagstjänster på din startsida. Blurb-modulen låter dig också förvandla din bild / ikon och titel till en länk till din tjänstesida. I det här exemplet ska jag använda Blurb-modulen för att lägga till fyra utvalda tjänster till en hemsida.

divi.png service sida

För att lägga till de fyra Blurbs till din sida, använd den visuella byggaren för att lägga till en standardavsnitt med en rad med fyra kolumner. Lägg sedan till en Blurb-modul i den första kolumnen i din rad.

Uppdatera inställningarna för Blurb med följande:

Innehållsalternativ

Titel: [enter service title] Innehåll: [enter short description of service] URL: [add URL to service page] Använd ikon: YES
Ikon: [välj en ikon som illustrerar din tjänst]

Designalternativ

Ikonfärg: # 42bb99 (gör den färg som komplimangerar webbplatsens design)
Använd teckenstorleksikonen: YES
Ikonstorlekstorlek: 68 pixlar (justerar ikonstorlek)
Textorientering: Centrum -
Huvudstorlekstorlek: 24 pixlar
Teckenstorlek: 18 pixlar
Kroppslinjehöjd: 1.5em

design services divi.png

Nu är din första inledande text klar.

lista över tjänster divi builder.jpg

Dubblera nu den sammanfattningsmodul som du precis skapat tre gånger och dra var och en av de duplicerade sammanfattningarna till de andra tre kolumnerna. Eftersom dina designparametrar har integrerats i dina duplicerade moduler behöver du bara ändra innehållet (rubrik, innehåll, ikon, URL, etc.) och ändra färgerna för att passa var och en av dina tjänster.

komplett lista över tjänster divi.jpg

Alternativ för sammanfattning av innehåll

På fliken innehåll hittar du alla innehållselement i modulen, till exempel text, bilder och ikoner. Allt som styr vad visas i din modul kommer alltid att finnas på den här fliken.

parametrar modulöversikt wordpress.png

Titel

Ge din text en titel som visas ovanför texten i fetstil. URL-alternativet under rubrikfältet gör att du kan göra din titel till en hyperlänk.

Innehåll

Det här fältet är där du kan ange kroppsinnehållet i din text. Blurb Text täcker också hela kolumnens bredd upp till 550 pixlar.

URL

Placera en giltig webbadress i det här fältet för att göra din Blurb-titel till en länk. Om du lämnar fältet tomt lämnar du bara din titel som ett statiskt element.

Öppningsadress

Här kan du välja om din länk ska öppnas i ett nytt fönster.

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]

Använd ikonen

När du använder Blurbs kan du välja att använda en ikon eller en bild med din text. Om du väljer "Ja" för alternativet "Använd ikon" kommer du att erbjudas följande alternativ för att anpassa din ikon. Om du inte väljer att använda en ikon uppmanas du att ladda upp en bild istället.

icon

Om du har valt “Ja” för inställningen “Använd ikon” kommer detta alternativ att visas. Detta alternativ ger dig en lista över tillgängliga ikoner som du kan använda med din blurb. Klicka bara på ikonen du vill använda så visas den i din text.

använd ikoner divi builder.png

Bild

Om du inte valde att använda en ikon visas denna inställning. Placera en giltig webbadress här, eller välj / ladda upp en bild via WordPress-mediebiblioteket. Bilder i Sammanfattningsmodulen visas alltid centrerade i sina kolumner och spänner över hela kolumnens bredd upp till 550 pixlar. Din bild kommer dock aldrig att vara större än den ursprungliga uppladdningsstorleken. Presentationsbildens höjd bestäms av bildformatet för din originalbild. Det är därför lämpligt att placera alla dina presentationsbilder i samma höjd om du placerar dem sida vid sida.

Bakgrundsfärg

Definiera en anpassad bakgrundsfärg för din modul eller lämna tom för att använda standardfärgen.

Bakgrundsbild

Om den är inställd kommer den här bilden att användas som bakgrund för denna modul. För att ta bort en bakgrundsbild tar du bara bort webbadressen från fältet Inställningar. Bakgrundsbilderna visas ovanpå bakgrundsfärgerna, vilket innebär att bakgrundsfärgen inte kommer att synas när en bakgrundsbild appliceras.

Admin-etikett

Detta ändrar moduletiketten i generatorn för enkel identifiering. När du använder WireFrame-vyn i Visual Builder visas dessa etiketter i modulblocket i Divi Builder-gränssnittet.

Alternativ för sammanfattning av moduldesign

På fliken Design hittar du alla modulstilalternativ, som teckensnitt, färger, storlek och avstånd. På den här fliken kan du ändra utseendet på din modul. Varje Divi-modul har en lång lista med designinställningar som du kan använda för att justera nästan vad som helst.

alternativ designmodul återuppta divi.png

Ikonfärg

Om du har valt “Ja” för inställningen “Använd ikon” kommer detta alternativ att visas. Med det här alternativet kan du anpassa färgen på din ikon. Som standard är ikonerna inställda på ditt temas accentfärg.

Cirkelikonen

Om du har valt “Ja” för inställningen “Använd ikon” kommer detta alternativ att visas. Med det här alternativet kan du placera din ikon i en färgad cirkel. Om du väljer "ja" för den här inställningen kommer du att erbjudas ytterligare alternativ för att anpassa färgen och kanten på din cirkel.

Cirkelens färg

Om du valde "Ja" för inställningen "Cirkelikon" kommer detta alternativ att visas. Här kan du välja en färg som ska användas för din cirkel. Den här färgen är oberoende av färgen på din tidigare valda ikon. Din ikon, i dess färg, kommer att visas i en cirkel med den färg du väljer här.

Visa cirkelns gräns

Om du valde "Ja" för inställningen "Cirkelikon" kommer detta alternativ att visas. Med det här alternativet kan du aktivera en gräns för din cirkel. Om det här alternativet är valt visas ett ytterligare alternativ för att välja din kantfärg.

Cirkelfärg

Om du valde "Ja" för inställningen "Visa cirkelgräns" kommer detta alternativ att visas. Här kan du justera färgen på cirkelns gräns.

Bild / ikonplacering

Här kan du välja platsen för din bild / ikon. Det kan antingen visas ovanför texten eller till vänster om texten. Genom att placera bilden / ikonen till vänster om din text blir bilden mindre än om den placerades högst upp.

Använd ikonstorlek

Om det här alternativet är aktiverat kan du ange en anpassad storlek för ikonen som visas ovan eller två till vänster om din blurb.

Textfärg

Om din blurb är placerad på en mörk bakgrund bör textfärgen ställas in på "Dark". Omvänt, om din blurb är placerad på en ljus bakgrund, bör textfärgen vara inställd på "Ljus".

Textorientering

Den här rullgardinsmenyn låter dig ange riktningen för din text som ska lämnas motiverad, centrerad eller höger motiverad.

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]

Rubrik teckensnitt

Du kan ändra teckensnittet i din rubrik genom att välja önskat teckensnitt i rullgardinsmenyn. Divi levereras med dussintals fantastiska teckensnitt som drivs av Google-teckensnitt. Som standard använder Divi Open Sans-teckensnittet för all text på din sida. Du kan också anpassa stilen på din text med hjälp av fetstil, kursiv, versaler och understrykning.

Rubrikstorlek

Här kan du justera storleken på rubriktexten. Du kan dra intervallreglaget för att öka eller minska storleken på din text, eller du kan direkt ange önskat textstorleksvärde i inmatningsfältet till höger om reglaget. Inmatningsfälten stöder olika måttenheter, vilket innebär att du kan ange "px" eller "em" beroende på din storlek för att ändra enhetstyp.

modulen sammanfattar avsnittet style title.png

Rubriktextfärg

Som standard visas alla textfärger i Divi i vitt eller mörkgrått. Om du vill ändra färgen på din rubrik väljer du den färg du vill ha i färgväljaren med det här alternativet.

Rubrikbokstavsavstånd

Bokstavsavstånd påverkar utrymmet mellan varje bokstav. Om du vill öka utrymmet mellan varje bokstav i rubriktexten, använd intervallreglaget för att justera mellanslag eller ange önskad avståndsstorlek i inmatningsfältet till höger om reglaget. Inmatningsfälten stöder olika måttenheter, vilket innebär att du kan ange "px" eller "em" beroende på din storlek för att ändra enhetstyp.

Rubrikrad Höjd

Radhöjd påverkar utrymmet mellan varje rad i rubriktexten. Om du vill öka utrymmet mellan varje rad använder du skjutreglaget för att justera mellanslag eller anger önskad avståndsstorlek i inmatningsfältet till höger om markören. Inmatningsfälten stöder olika måttenheter, vilket innebär att du kan ange "px" eller "em" beroende på din storlek för att ändra enhetstyp.

Kroppsfont

Du kan ändra ditt kroppsteckensnitt genom att välja önskat typsnitt i rullgardinsmenyn. Divi levereras med dussintals fantastiska teckensnitt som drivs av Google-teckensnitt. Som standard använder Divi Open Sans-teckensnittet för all text på din sida. Du kan också anpassa stilen på din text med hjälp av fetstil, kursiv, versaler och understrykning.

Kroppstypstorlek

Här kan du justera storleken på din kroppstext. Du kan dra intervallreglaget för att öka eller minska storleken på din text, eller du kan direkt ange önskat textstorleksvärde i inmatningsfältet till höger om reglaget. Inmatningsfälten stöder olika måttenheter, vilket innebär att du kan ange "px" eller "em" beroende på din storlek för att ändra enhetstyp.

Kroppstextfärg

Som standard visas alla textfärger i Divi i vitt eller mörkgrått. Om du vill ändra färgen på din kroppstext väljer du önskad färg i färgväljaren med det här alternativet.

Spacing av kropps bokstäver

Bokstavsavstånd påverkar utrymmet mellan varje bokstav. Om du vill öka utrymmet mellan varje bokstav i din kroppstext, använd skjutreglaget för att justera utrymmet eller ange storleken på det utrymme du vill ha i inmatningsfältet till höger om skjutreglaget. Inmatningsfälten stöder olika måttenheter, vilket innebär att du kan ange "px" eller "em" beroende på din storlek för att ändra enhetstyp.

Höjd på kroppslinjen

Radhöjd påverkar utrymmet mellan varje rad i brödtexten. Om du vill öka utrymmet mellan varje rad, använd intervallreglaget för att justera utrymmet eller ange önskad rymdstorlek i inmatningsfältet till höger om reglaget. Inmatningsfälten stöder olika måttenheter, vilket innebär att du kan ange "px" eller "em" beroende på din storlek för att ändra enhetstyp.

Använd gränsen

Om du aktiverar det här alternativet placeras en gräns runt din modul. Denna kant kan anpassas med följande villkorliga parametrar.

Färg på gränsen

Det här alternativet påverkar färgen på din kant. Välj en anpassad färg från färgväljaren för att tillämpa den på din kant.

Bredden av gränsen

Som standard är gränserna 1 pixel breda. Du kan öka detta värde genom att dra områdesreglaget eller ange ett anpassat värde i inmatningsfältet till höger om reglaget. Stöd anpassade måttenheter, vilket innebär att du kan ändra standardenheten från "px" till något annat som em, vh, vw etc.

konfiguration av sbourdires-modulen återuppta divi builder.png

Gränsstil

Gränser stöder åtta olika stilar, inklusive: solid, prickad, prickad, dubbel, spår, ås, insats och start. Välj den stil du vill ha i rullgardinsmenyn för att tillämpa den på din gräns.

Maximal bildbredd

Om du använder ett maximalt breddvärde här begränsas presentationsbildens bredd. Detta påverkar bara oskärpa som inte är i ikonläge.

Anpassad marginal

Marginalen är utrymmet som läggs till på utsidan av din modul, mellan modulen och nästa element ovanför, under eller till vänster och höger om den. Du kan lägga till anpassade marginalvärden till någon av modulens fyra sidor. För att ta bort en anpassad marginal, ta bort mervärdet från inmatningsfältet. Som standard mäts dessa värden i pixlar, men du kan ange anpassade måttenheter i inmatningsfälten.

Anpassad stoppning

Padding är utrymmet som läggs till i din modul, mellan kanten på modulen och dess interna element. Du kan lägga till anpassade utfyllnadsvärden till någon av modulens fyra sidor. För att ta bort en anpassad marginal, ta bort mervärdet från inmatningsfältet. Som standard mäts dessa värden i pixlar, men du kan ange anpassade måttenheter i inmatningsfälten.

Avancerade alternativ Sammanfattningsmodul

På fliken Avancerat hittar du alternativ som mer erfarna webbdesigners kan hitta användbara, till exempel anpassade CSS- och HTML-attribut. Här kan du använda anpassad CSS på något av modulens många element. Du kan också tillämpa anpassade CSS-klasser och ID på modulen, som kan användas för att anpassa modulen i ditt barns temas style.css-fil.

avsnitt för modulöversikt avancerad

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]

CSS ID

Ange ett valfritt CSS-ID som ska användas för den här modulen. Ett ID kan användas för att skapa en anpassad CSS-stil eller för att länka till vissa delar av din sida.

CSS klass

Ange de valfria CSS-klasserna som ska användas för den här modulen. En CSS-klass kan användas för att skapa anpassad CSS-styling. Du kan lägga till flera klasser, åtskilda av ett mellanslag. Dessa klasser kan användas i ditt Divi Child-tema eller i anpassad CSS som du lägger till på din sida eller webbplats med Divi-temalternativen eller Divi Builder-sidinställningarna.

Anpassad CSS

Anpassad CSS kan också tillämpas på modulen och alla modulens interna element. I avsnittet Anpassad CSS hittar du ett textfält där du kan lägga till CSS direkt till varje element. CSS-posterna i dessa inställningar är redan inbäddade med stiltaggar. Så du måste bara ange CSS-regler åtskilda av semikolon.

Bild / ikon animering

Detta styr riktningen för den lata laddningsanimationen.

ALT-text från bilden

Om du inte valde att använda en ikon visas denna inställning. Annan text ger all information som behövs om bilden inte laddas, visas korrekt eller i någon annan situation där en användare inte kan se bilden. Det gör också att bilden kan läsas och kännas igen av sökmotorer.

synlighet

Med det här alternativet kan du styra enheterna där din modul visas. Du kan välja att inaktivera din modul på surfplattor, smartphones eller stationära datorer individuellt. Detta är användbart om du vill använda olika mods på olika enheter eller om du vill förenkla mobildesignen genom att ta bort några element från sidan.

Det är det för denna handledning. Vi hoppas ha visat dig hur du använder sammanfattningsmodulen på Divi.

Denna artikel innehåller 1 kommentar

  1. Hej!
    Jag vill använda sammanfattningsmodulen för att infoga cirka 200 miniatyrer på en sida.
    Varje miniatyrbild representerar en produkttitel till salu men jag vill inte använda woocommerce, bara en kontaktlänk ...
    Den här sidan uppdateras regelbundet med nya miniatyrer.
    Dessa miniatyrer (så de 200 sammanfattningsmodulerna) bör listas i alfabetisk ordning (baserat på titeln), även när jag lägger till nya moduler i slutet av sidan ...
    Vet du hur jag kunde göra det här?
    merci beaucoup

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
12 aktier
del6
tweet
Enregistrer6