Divi låter dig skapa ett obegränsat antal färdiga områden i farten. Sidofält kan sedan läggas till på vilken sida som helst, så att du kan skapa unika sidofält för olika delar av din sida webbplats.
Hur man lägger till en Zonde widget modul från Divi
Innan du kan lägga till en sidofältsmodul på din sida måste du först hoppa in i Divi Builder. När Divi-tema installerat 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. Klicka på den här knappen för att aktivera Divi Builder och få 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 bläddrar i din webbplats i förgrunden om du är inloggad på din WordPress-instrumentpanel.
När du använder Visual Builder kan du klicka på den grå knappen (+) för att lägga till en ny modul till din sida. Nya moduler kan bara läggas till inom rader. Om du börjar en ny sida, kom ihåg att lägga till en rad på din sida först.
Leta reda på sidofältet modulen i modullistan och klicka för att lägga till din sida. Listan över moduler är sökbar, vilket innebär att du också kan skriva ordet "sidofält" och sedan klicka på "Enter" för att automatiskt hitta och lägga till sidofältsmodulen! När modulen läggs till kommer du att välkomnas av listan modulens alternativ. Dessa alternativ är uppdelade i tre huvudgrupper: Innehåll , Conception et advanced .
Exempel på användningsfall: Lägga till en sidofält på din bloggsida
Sidofältsmodulen låter dig infoga en sidofält (och alla inbäddade widgets) var som helst på din sida. I själva verket kan du lägga till widget område med hjälp av sidomodulen. För det här exemplet visar jag dig hur du infogar ett anpassat sidofält på din bloggsida med hjälp av avsnittet för att visa widgeten och söka efter senaste artiklar på WordPress.
Den här bloggen sidan har en full bredd rubrik för att visa bloggen titeln högst upp på sidan. Under rubrikmodulen finns en specialbreddlayout med en bloggmodul på det vänstra och högra vertikala sidofältet till höger.
Med hjälp av avsnitt kan du lägga till varianter av komplexa kolumner nästa vertikala sidofältet, utan att oönskade störningar på sidan. Detta är perfekt för en blogg med sidofältet.
Först måste du se till att du har widgetar som inrättats i Widgets sida på din Wordpress instrumentbrädan. I det här exemplet lägger jag till sökwidgeten och widgeten för senaste artiklar i widgetens sidofält.
Sedan distribuera Visual Builder att redigera bloggsidan. Lägg till ett avsnitt på din sida (precis under ditt brevpapper) med följande layout:
När du har lagt ett avsnitt till den sida du kommer att märka att ett område (till vänster) på en knapp "Lägg till Module." För detta exempel är det här bloggmodulen med en rutnätlayout lades till för att visa blogginlägg.
Den andra (till höger) har en "Infoga rad" -knappen. Området "Infoga Module" representerar din vertikala sidofältet. Det är där du anger sidomodulen. Du kan lägga till så många moduler här, på en rad, och de sprider sektionens vertikala bredd intill kolumnstrukturen du bygger bredvid den. För det här exemplet har bloggsidan faktiskt redan en e-postoptimodul och en personmodul i det området av det vertikala sidofältet i speciallayouten.
Lägg nu till sidofältmodulen överst på de andra modulerna i det vertikala sidofältområdet.
Uppdatera följande i inställningen för sidofältmodul:
Innehållsfliken
Widgetområde: välj sidofält
Design fliken
Orientering: Höger (eftersom sidofältet är till höger)
Radera gränsavskiljare: JA
Textfärg:
Rubrik Mörk teckenstorlek: 26 pixlar
Spacing of letters of
header: 3px Header radhöjden: 1.1em
Avancerad flik
Under Anpassad CSS avsnittet lägga till följande CSS till Widget textrutan. Detta säkerställer att utformningen av widgetar i sidofältet motsvarar webbdesign:
bakgrund: #fff; vaddering: 20px; -webkit-box-skugga: 0 1px 5px rgba (0, 0, 0, 0.1) -moz-box-skugga: 0 1px 5px rgba (0, 0, 0, 0.1); boxskugga: 0 1px 5px rgba (0, 0, 0, 0.1);
Spara inställningar
Du kan nu se att sidofältmodulen visar elementen i sidofältets widget (Sök och senaste artiklar) och visar dem i det vertikala sidofältområdet i ditt specialavsnitt.
Innehållsalternativ för sidofältet
På fliken Innehåll, hittar du alla modulinnehållselement de som text, bilder och ikoner. Allt som styr vad som visas i din modul finns alltid på den här fliken.
Widget område
Modulen Sidebar använder widget skapa områden som du kan skapa på fliken Skins> Widgets. Du kan välja ett av dina anpassade widgetområden i den här rullgardinsmenyn.
Admin-etikett
Detta ändrar moduletiketten i konstruktorn för enkel identifiering. När du använder vyn WireFrame i Visual Builder visas dessa etiketter i modulblocket i Divi Builder-gränssnittet.
Alternativ för sidofältet
På fliken Design hittar du alla stilalternativ för modulen, som teckensnitt, färger, storlek och avstånd. Det här är fliken du använder för att ändra utseendet på din modul. Varje Divi-modul har en lång lista med designinställningar som du kan använda för att ändra vad som helst.
Riktning
Här kan du välja vilken sida av sidan ditt sidofält ska visas på. Detta styr textens orientering och gränsens position.
Radera gränsseparatorn
Här kan du ta bort den tunna grå gränsen som skiljer din sidofält från innehållet på din sida.
Textfärg
Här kan du välja om din text ska vara ljus eller mörk. Om du arbetar med en mörk bakgrund bör din text vara ljus. Om din bakgrund är ljus bör din text vara mörk.
Header Font
Du kan ändra typsnittet i rubriktexten genom att välja önskat typsnitt i rullgardinsmenyn. Divi levereras med dussintals fantastiska teckensnitt som drivs av Google-teckensnitt. Som standard använder Divi teckensnittet Open Sans för all text på din sida. Du kan också anpassa stilen på din text med fetstil, kursiv, versaler och understrukna alternativ.
Rubrikstorlek
Här kan du justera storleken på rubriktexten. Du kan dra avståndsreglaget för att öka eller minska storleken på din text eller direkt ange värdet för önskad textstorlek 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å ditt storleksvärde för att ändra enhetstyp.
Rubriktextfärg
Som standard visas alla textfärger i Divi i vitt eller mörkgrått. Om du vill ändra färgen på rubriktexten väljer du önskad färg från 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 avståndsreglaget för att justera utrymmet 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å ditt storlek för att ändra enhetstyp.
Rubrikrad Höjd
Linjehöjden påverkar utrymmet mellan varje rad i rubriktexten. Om du vill öka utrymmet mellan varje rad, använd skjutreglaget för att justera utrymmet eller ange önskad storlek i mellanslagsfältet inträde till höger om reglaget. Inmatningsfälten stöder olika måttenheter, vilket innebär att du kan ange "px" eller "em" beroende på ditt storleksvärde 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 fetstil, kursiv, versaler och understrukna alternativ.
Kroppstypstorlek
Här kan du justera din kroppsstorlek. Du kan dra i reglaget för att öka eller minska storleken på din text eller direkt ange värdet på den önskade textstorlek 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å ditt storleksvärde 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 text väljer du önskad färg från 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 text, använd skjutreglaget för att justera mellanslag eller ange önskad avståndsstorlek 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å ditt storleksvärde för att ändra dess enhetstyp.
Höjd på kroppslinjen
Radhöjd påverkar utrymmet mellan varje textrad i din kropp Om du vill öka utrymmet mellan varje rad, använd avståndsreglaget för att justera mellanslag eller ange ö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å ditt storleksvärde för att ändra dess enhetstyp.
Avancerade sidofältalternativ
På den avancerade fliken 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.
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-underordnade tema eller i det anpassade CSS-stilarket som du lägger till på din sida eller på din webbplats med hjälp av Divi-temalternativ eller Divi Builder-sidinställningarna.
Anpassad CSS
Anpassad CSS kan också tillämpas på modulen och vilken modul som helst. I avsnittet Anpassad CSS hittar du ett textfält där du kan lägga till anpassade CSS-formatmallar direkt till varje element. CSS-poster i dessa inställningar är redan inslagna i stiltaggar. Så skriv bara in CSS-reglerna åtskilda av semikolon.
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 eliminera vissa element från sidan.
[vc_row center_row=”yes”][vc_column width=”1/2″][vcex_button target=”blank” layout=”expanded” align=”center” font_family=”Raleway” font_weight=”700″ style=”platt” custom_background=”#18b69d” custom_hover_background=”#118d7a” custom_color=”#ffffff” custom_hover_color=”#ffffff” icon_right=”fa fa-download”]LADDA NED DIVI TEMA [/vcex_button][/vc_column 1 ][vc_column] /2″][vcex_button url=”https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=23065&url=40632&tid1=tutorials” target=”blank” layout=”expanded” align=”center” font_family = ”Raleway” font_weight=”700″ style=”flat” custom_background=”#c4226e” custom_hover_background=”#8d184f” custom_color=”#ffffff” custom_hover_color=”#ffffff” icon_right=”fa fa-download”]LADDA NED DEN TEMPLATES DIVI[/vcex_button][/vc_column][/vc_row]
Andra Divi tutorials
- 5 webbplatser för restaurang användning Divi tema
- Så här lägger du till text på en Divi WooCommerce-produkt
- Så här byter du menyfärg mellan Divi-sidor
- Hur du anpassar rutorna på en blogg med Divi
- Hur man använder roll Divi editor på Wordpress
- Hur man skapar en Divi-skjutreglage på full skärm
- Hur man ändrar menyens färg mellan Divi-sidor
- Funktioner du antagligen inte känner till Divi
- Så här använder du Divi Builder på WordPress
- Så här använder du Divi video-rullningsmodulen
- Så här använder du Divi Builder Flip-modulen
- Hur man lägger till en vittnesmodul om Divi Builder
- Så här använder du Divi-textmodulen
- Hur man skapar en reglage på Divi
- Hur man redigerar en Divi-användarroll
- Så här använder du Divi Social Media-modulen
- Hur man använder butikmodulen på temat WordPress Divi
- Så här använder du Divi sidebar-modulen
- Så här använder du Divi Price Table Module
- Hur man använder titelfodulen i Divi-publikationer
- Hur lägger jag till en videomodul av Divi
- Så här använder du artikelnavigationsmodulen
- Så här använder du Divi-sökmodulen
- Så här använder du Divi-plånboksmodulen
- Hur man använder personmodulen på Divi Builder
- Hur man använder plånboksmodulen med Divi-filter
- Hur man använder skjutreglaget med hela bredden
- Så här använder du Divi Builder Image Module
- Så här använder du Divi Builder med fullbredd navigationsmodul
- Hur man använder modulen för bildgalleri
- Så här använder du Divi Builder Full-Width Card Module
- Så här använder du Divi Full Width Portfolio Module
- Hur du använder Divi-modulen med full bredd
- Så här använder du Divi Counter Module
- Hur man använder artiklarna på Divi Builder
- Så här använder du Divi Email Optin-modulen
Hallå
Till skillnad från dig försöker jag ta bort sidofältet på mina sidor i blogginlägget och jag vet inte hur jag gör det på den nya Divi 4-versionen
Har du ett tips?
tack
Aurélie
Hej och tack för dessa handledning.
I det här exemplet började du med en sida med full bredd eller med en mall med ett originalt sidofält?
Hej Cess, jag kommer inte riktigt ihåg det.