Divi lar deg lage et ubegrenset antall klare til bruk områder på farten. Sidefelt kan deretter legges til på hvilken som helst side, slik at du kan lage unike sidefelt for forskjellige deler av din nettstedet Web.
Slik legger du til en Zonde widget modul fra Divi
Før du kan legge til en sidefeltmodul på siden din, må du først hoppe inn i Divi Builder. Først når Divi-tema installert på din nettstedet Web, vil du legge merke til en knapp Bruk Divi Builder over innleggsredaktøren når du oppretter en ny side. Klikk på denne knappen for å aktivere Divi Builder og få tilgang til alle Divi Builder-modulene. Klikk deretter på knappen Bruk Visual Builder for å starte generatoren i visuell modus. Du kan også klikke på knappen Bruk Visual Builder når du surfer på din nettstedet Web i forgrunnen hvis du er logget på WordPress-dashbordet.
Når du bruker Visual Builder, kan du klikke på den grå (+) knappen for å legge til en ny modul på siden din. Nye moduler kan bare legges til innenfor rader. Hvis du starter en ny side, husk å legge til en rad på siden din først.
Finn sidefeltmodulen i listen over moduler, og klikk på den for å legge den til siden din. Listen over moduler er søkbar, noe som betyr at du også kan skrive ordet "sidefelt" og deretter klikke "Enter" for automatisk å finne og legge til sidefeltmodulen! Når modulen er lagt til, blir du møtt av listen over modulalternativer. Disse alternativene er delt inn i tre hovedgrupper: Innhold , Conception et avansert .
Eksempel på brukstilfelle: Legge til et sidefelt på bloggsiden din
Sidefeltmodulen lar deg sette inn en sidefelt (og alle de innebygde widgetene) hvor som helst på siden din. Egentlig kan du legge til hvilket som helst widgetområde ved hjelp av sidefeltmodulen. For dette eksemplet vil jeg vise deg hvordan du setter inn et egendefinert sidefelt på bloggsiden din ved hjelp av den spesialiserte delen for å vise widgeten Søk og siste innlegg på WordPress.
Denne bloggsiden har overskrift i full bredde for å vise bloggtittelen øverst på siden. Under toppmodulen for fullbredde er et spesialoppsett med en bloggmodul til venstre og et høyre vertikalt sidefeltområde til høyre.
Ved å bruke den spesialiserte delen kan du legge til komplekse kolonnevariasjoner ved siden av de vertikale sidelinjene, uten å legge til uønskede pauser på siden. Dette er perfekt for en blogg med sidefelt.
Først må du sørge for at du har konfigurert widgetene på Widgets-siden på WordPress-dashbordet. For dette eksemplet legger jeg til widgeten Søk og modulen Nylige artikler i widgeten Sidepanel.
Distribuer deretter Visual Builder for å redigere bloggsiden. Legg til en spesialavdeling på siden din (rett under overskriften) med følgende oppsett:
Når du har lagt til en spesialseksjon på siden, vil du legge merke til at et område (til venstre) har en "Legg til modul" -knapp. For dette eksemplet er det her Blog-modulen med et rutenett er lagt til for å vise blogginnlegg.
Den andre (til høyre) har en "Sett inn rad" -knapp. Området "Sett inn modul" representerer ditt vertikale sidefelt. Det er her du kommer inn i sidefeltmodulen. Du kan legge til så mange moduler her, i en enkelt rad, og de vil strekke seg over den vertikale bredden på seksjonen, ved siden av kolonnestrukturen du bygger ved siden av den. Faktisk, for dette eksemplet har bloggsiden allerede en Optin-modul for e-post og en Person-modul i det området av det vertikale sidefeltet til Spesialitetsoppsettet.
Nå legger du sidepanelmodulen til toppen av de andre modulene i det vertikale sidefeltområdet.
I sidelinjen-modulinnstillingen oppdaterer du følgende:
Innholds-fanen
Widget-område: velg Sidepanel
Design-fanen
Orientering: Høyre (fordi sidefeltet er til høyre)
Delete Border Separator: YES
Tekstfarge:
Mørk topptekststørrelse: 26 px
Spacing av bokstaver av
topptekst: 3px Topptekstradhøyde: 1.1 em
Avansert fane
Under Custom CSS-seksjonen legger du til følgende CSS i tekstboksen Widget. Dette vil gjøre at utformingen av sidefeltmodulene samsvarer med utformingen av nettstedet:
bakgrunn: #fff; polstring: 20px; -webkit-box-shadow: 0 1px 5px RGBA (0, 0, 0, 0.1); -moz-box-shadow: 0 1px 5px RGBA (0, 0, 0, 0.1); box-shadow: 0 1px 5px RGBA (0, 0, 0, 0.1);
Lagre innstillinger
Du kan nå se at sidefeltmodulen viser elementene i sidefelt-widgeten (Søk og nylige artikler) og viser dem i det vertikale sidefeltområdet i din spesialitetsdel.
Innholdsalternativer for sidefeltet
I Innhold-fanen finner du alle innholdselementene i modulen, for eksempel tekst, bilder og ikoner. Alt som styrer det som vises i modulen din, vil alltid bli funnet i denne kategorien.
Widget området
Sidefeltmodulen bruker widgetopprettingsområder som du kan lage i kategorien Utseende> Widgets. Du kan velge et av dine egendefinerte widgetområder fra denne rullegardinmenyen.
Admin-etikett
Dette vil endre moduletiketten i konstruktøren for enkel identifisering. Når du bruker WireFrame-visningen i Visual Builder, vises disse etikettene i modulblokken i Divi Builder-grensesnittet.
Alternativer for sidefeltdesign
I kategorien Design finner du alle stilalternativene for modulen, for eksempel skrifter, farger, størrelse og avstand. Dette er fanen du vil bruke til å endre utseendet til modulen din. Hver Divi-modul har en lang liste over designinnstillinger som du kan bruke til å endre hva som helst.
Orientering
Her kan du velge hvilken side av siden sidefeltet skal vises på. Denne parameteren styrer orienteringen av teksten og posisjonen til rammen.
Slette randseparatoren
Her kan du fjerne den tynne grå kanten som skiller sidefeltet fra innholdet på siden din.
Tekstfarge
Her kan du velge om teksten skal være lys eller mørk. Hvis du jobber med en mørk bakgrunn, bør teksten være lys. Hvis bakgrunnen din er lys, bør teksten være mørk.
Topptekst
Du kan endre skrifttypen til overskriftsteksten ved å velge ønsket skrift fra rullegardinmenyen. Divi kommer med dusinvis av flotte skrifttyper drevet av Google Fonts. Som standard bruker Divi Open Sans-skrift for all teksten på siden din. Du kan også tilpasse stilen på teksten din med fet, kursiv, stor bokstav og understrekingsalternativer.
Topptekststørrelse
Her kan du justere størrelsen på overskriftsteksten. Du kan dra områdeglidebryteren for å øke eller redusere størrelsen på teksten, eller angi ønsket tekststørrelsesverdi direkte i inntastingsfeltet til høyre for glidebryteren. Inndatafeltene støtter forskjellige måleenheter, noe som betyr at du kan skrive inn "px" eller "em" avhengig av størrelsesverdien for å endre enhetstypen.
Topptekstfarge
Som standard vises alle tekstfargene i Divi i hvitt eller mørkegrått. Hvis du vil endre fargen på toppteksten, velger du ønsket farge fra fargevelgeren ved hjelp av dette alternativet.
Avstand mellom topptekster
Bokstavavstand påvirker avstanden mellom hver bokstav. Hvis du vil øke avstanden mellom hver bokstav i overskriftsteksten, bruker du skyvekontrollen for å justere mellomrom eller angir ønsket avstandsstørrelse i inntastingsfeltet til høyre for skyveknappen. Inndatafeltene støtter forskjellige måleenheter, noe som betyr at du kan skrive inn "px" eller "em" avhengig av størrelsesverdien for å endre enhetstypen.
Toppradens høyde
Linjehøyde påvirker mellomrommet mellom hver linje i overskriftsteksten. Hvis du vil øke mellomrommet mellom hver linje, bruker du glidebryteren for å justere mellomrom eller angi ønsket avstandsstørrelse i feltet. oppføringen til høyre for glidebryteren. Inndatafeltene støtter forskjellige måleenheter, noe som betyr at du kan skrive inn "px" eller "em" avhengig av størrelsesverdien for å endre enhetstypen.
Kropps skrifttype
Du kan endre kroppsfonten din ved å velge ønsket skrift fra rullegardinmenyen. Divi kommer med dusinvis av flotte skrifttyper drevet av Google Fonts. Som standard bruker Divi Open Sans-skrift for all teksten på siden din. Du kan også tilpasse stilen på teksten din med fet, kursiv, stor bokstav og understrekingsalternativer.
Kropp skriftstørrelse
Her kan du justere størrelsen på kroppen din. Du kan dra glidebryteren for å øke eller redusere størrelsen på teksten, eller angi verdien for ønsket tekststørrelse direkte i inndatafeltet til høyre for glidebryteren. Inndatafeltene støtter forskjellige måleenheter, noe som betyr at du kan skrive inn "px" eller "em" avhengig av størrelsesverdien for å endre enhetstypen.
Kropps tekstfarge
Som standard vises alle tekstfargene i Divi i hvitt eller mørkegrått. Hvis du vil endre fargen på teksten, velger du ønsket farge fra fargevelgeren ved hjelp av dette alternativet.
Spacing av kropps bokstaver
Bokstavavstand påvirker avstanden mellom hver bokstav. Hvis du vil øke avstanden mellom hver bokstav i teksten, bruker du skyvekontrollen for å justere mellomrom eller skriver inn ønsket avstandsstørrelse i inntastingsfeltet til høyre for skyveknappen. Inndatafeltene støtter forskjellige måleenheter, noe som betyr at du kan skrive inn "px" eller "em" avhengig av størrelsesverdien for å endre enhetstypen.
Høyde på kroppslinjen
Linjehøyde påvirker mellomrommet mellom hver tekstlinje i kroppen din. Hvis du vil øke mellomrommet mellom hver linje, kan du bruke skyveknappen for å justere mellomrom eller angi ønsket avstandsstørrelse i inndatafeltet plassert til høyre for markøren. Inndatafeltene støtter forskjellige måleenheter, noe som betyr at du kan skrive inn "px" eller "em" avhengig av størrelsesverdien for å endre enhetstypen.
Avanserte sidefeltalternativer
I den avanserte fanen finner du alternativer som mer erfarne webdesignere kan finne nyttige, for eksempel tilpassede CSS- og HTML-attributter. Her kan du bruke tilpasset CSS på alle modulens mange elementer. Du kan også bruke tilpassede CSS-klasser og IDer til modulen, som kan brukes til å tilpasse modulen i barnets temas style.css-fil.
CSS ID
Skriv inn en valgfri CSS-ID som skal brukes til denne modulen. En ID kan brukes til å lage en tilpasset CSS-stil eller for å koble til bestemte deler av siden din.
CSS klasse
Angi de valgfrie CSS-klassene som skal brukes til denne modulen. En CSS-klasse kan brukes til å lage tilpasset CSS-styling. Du kan legge til flere klasser, atskilt med et mellomrom. Disse klassene kan brukes i Divi-barnetemaet eller i det tilpassede CSS-stilarket du legger til på siden eller nettstedet ditt ved hjelp av Divi-temaalternativene eller innstillingene på Divi Builder-siden.
Tilpasset CSS
Tilpasset CSS kan også brukes på modulen og hvilken som helst av modulens interner. I Custom CSS-delen finner du et tekstfelt der du kan legge til tilpassede CSS-stilark direkte til hvert element. CSS-oppføringer i disse innstillingene er allerede pakket inn i stilkoder. Så bare skriv inn CSS-reglene atskilt med semikolon.
synlighet
Dette alternativet lar deg kontrollere enhetene som modulen din vises på. Du kan velge å deaktivere modulen din på nettbrett, smarttelefoner eller stasjonære datamaskiner hver for seg. Dette er nyttig hvis du vil bruke forskjellige mods på forskjellige enheter, eller hvis du vil forenkle mobildesignet ved å eliminere visse elementer fra siden.
[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=”flat” custom_background=”#18b69d” custom_hover_background=”#118d7a” custom_color=”#ffffff” custom_hover_color=”#ffffff” icon_right=”fa fa-download”]LAST 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”]LAST NED DEN MALER DIVI[/vcex_button][/vc_column][/vc_row]
Andre divisjoner
- 5 nettsteder for restaurant bruk Divi tema
- Slik legger du til tekst på et Divi WooCommerce-produkt
- Slik endrer du menyfargen mellom Divi-sider
- Hvordan tilpasse rutenettene til en blogg med Divi
- Hvordan bruke rollen Divi editor på WordPress
- Hvordan lage en Divi-glidebryter på fullskjerm
- Hvordan endre farge på menyer mellom Divi-sider
- Funksjoner du sannsynligvis ikke kjenner til Divi
- Slik bruker du Divi Builder på WordPress
- Slik bruker du Divi video-rullemodulen
- Slik bruker du Divi Builder Flip-modulen
- Hvordan legge til en attestmodul på Divi Builder
- Slik bruker du Divi-tekstmodulen
- Hvordan lage en glidebryter på Divi
- Hvordan redigere en Divi-brukerrolle
- Slik bruker du Divi Social Media-modulen
- Hvordan bruke butikkmodulen på temaet WordPress Divi
- Slik bruker du Divi sidebar-modulen
- Slik bruker du Divi Price Table Module
- Slik bruker du tittelmodulen til Divi-publikasjoner
- Hvordan legge til en videomodul av Divi
- Slik bruker du artikkelen navigasjonsmodulen
- Slik bruker du Divi-søkemodulen
- Slik bruker du Divi-lommebokmodulen
- Slik bruker du personmodulen på Divi Builder
- Slik bruker du lommebokmodulen med Divi filter
- Slik bruker du skyvemodulen med full bredde
- Slik bruker du Divi Builder Image Module
- Slik bruker du navigasjonsmodulen med full bredde på Divi Builder
- Slik bruker du bildegalleriemodulen
- Slik bruker du Divi Builder Full-Width Card Module
- Slik bruker du Divi Full Width Portfolio Module
- Hvordan bruke Divi-modulen i full bredde
- Slik bruker du Divi-tellermodulen
- Slik bruker du glidebryteren for artikler på Divi Builder
- Slik bruker du Divi Email Optin-modulen
Hallo
I motsetning til deg prøver jeg å fjerne sidefeltet på bloggsidene mine, og jeg vet ikke hvordan jeg skal gjøre det på den nye Divi 4-versjonen.
Har du et tips?
merci
Aurélie
Hei og takk for disse opplæringene.
I dette eksemplet startet du med en side med full bredde eller med en mal med et originalt sidefelt?
Hei Cess, jeg husker det egentlig ikke.