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

lignende gjenstander

3 Kommentarer

Aurélie 22. oktober 2019 ved 16 t 53 min

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
svar
Cess Telo 29. mars 2019 klokka 15 min

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?
svar
- Thierry Bertrand 1. april 2019 kl. 16 og 25 min
  
  Hei Cess, jeg husker det egentlig ikke.
  svar

Svar på Thierry Bertrand Annuler la réponse

Dette nettstedet bruker Akismet for å redusere uønsket. Lær mer om hvordan dine kommentarer data blir brukt.

Divisjonsveiledning: Slik bruker du Zone Widget-modulen

Slik legger du til en Zonde widget modul fra Divi