Divi giver dig mulighed for at oprette et ubegrænset antal klar-til-brug områder på farten. Sidebjælker kan derefter tilføjes til enhver side, så du kan oprette unikke sidebjælker til forskellige sektioner af din Websted.
Sådan tilføjes et Zonde widget modul fra Divi
Før du kan tilføje et sidepanelmodul til din side, skal du først hoppe ind i Divi Builder. En gang Divi-tema installeret på din Websted, vil du bemærke en knap Brug Divi Builder over indlægseditoren, når du opretter en ny side. Klik på denne knap for at aktivere Divi Builder og få adgang til alle Divi Builder-modulerne. Klik derefter på knappen Brug Visual Builder for at starte generatoren i visuel tilstand. Du kan også klikke på knappen Brug Visual Builder når du gennemser din Websted i forgrunden, hvis du er logget ind på dit WordPress-dashboard.
Når du bruger Visual Builder, kan du klikke på den grå (+) knap for at tilføje et nyt modul til din side. Nye moduler kan kun tilføjes inden for rækker. Hvis du starter en ny side, skal du huske at føje en række til din side først.
Find sidepanelmodulet på listen over moduler, og klik på det for at tilføje det til din side. Listen over moduler er søgbar, hvilket betyder, at du også kan skrive ordet "sidebar" og derefter klikke på "Enter" for automatisk at finde og tilføje sidebar-modulet! Når modulet er tilføjet, vil du blive mødt af listen over modulindstillinger. Disse muligheder er opdelt i tre hovedgrupper: Indhold , Conception et avanceret .
Eksempel på brugssag: Tilføjelse af et sidebjælke til din blogside
Sidebar-modulet giver dig mulighed for at indsætte en sidebjælke (og alle dens indbyggede widgets) hvor som helst på din side. Faktisk kan du tilføje ethvert widgetområde ved hjælp af sidepanelmodulet. I dette eksempel viser jeg dig, hvordan du indsætter et brugerdefineret sidebjælke til din blogside ved hjælp af det specialiserede afsnit for at vise widgeten Søg og seneste indlæg på WordPress.
Denne blogside har en overskrift i fuld bredde, der viser blogtitlen øverst på siden. Under fuldbreddeoverskriften er der et speciallayout med et blogmodul til venstre og et lodret højre sidebjælkeområde til højre.
Brug af det specialiserede afsnit giver dig mulighed for at tilføje komplekse kolonnevariationer ud for de lodrette sidebjælker uden at tilføje uønskede pauser til siden. Dette er perfekt til en blog med sidebjælke.
Først skal du sørge for, at du har konfigureret widgets på siden Widgets på dit WordPress-dashboard. I dette eksempel tilføjer jeg widgeten Søg og den seneste artikel-widget til widgeten Sidebar.
Indsæt derefter Visual Builder for at redigere blogsiden. Føj et specialafsnit til din side (lige under dit overskrift) med følgende layout:
Når du har tilføjet et specialafsnit til siden, vil du bemærke, at et område (til venstre) har knappen "Tilføj modul". I dette eksempel er dette, hvor Blog-modulet med et gitterlayout er blevet tilføjet for at vise blogindlæg.
Den anden (til højre) har en "Indsæt række" -knap. Området "Indsæt modul" repræsenterer dit lodrette sidebjælke. Det er her, du kommer ind i sidepanelmodulet. Du kan tilføje så mange moduler her i en enkelt række, og de spænder over den lodrette bredde af sektionen ved siden af kolonnestrukturen, du bygger ved siden af den. Faktisk har blogsiden i dette eksempel allerede et Email Optin-modul og et Person-modul i det område af det lodrette sidebjælke i Speciallayoutet.
Tilføj nu sidepanelmodulet øverst på de andre moduler i dit lodrette sidepanelområde.
Opdater følgende i indstillingen Sidepanelmodul:
Fanen Indhold
Widget-område: vælg Sidebar
Design fanen
Orientering: Højre (fordi sidebjælken er til højre)
Slet grænseseparator: JA
Tekstfarve:
Mørk overskrift Fontstørrelse: 26 pixel
Afstand af bogstaver af
header: 3px Overskrift rækkehøjde: 1.1em
Avanceret fane
Under afsnittet Custom CSS skal du føje følgende CSS til tekstfeltet Widget. Dette vil gøre designet af sidepanelwidgetsne matchende designet af webstedet:
baggrund: #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); boksskygge: 0 1px 5px rgba (0, 0, 0, 0.1);
Gem indstillinger
Du kan nu se, at sidepanelmodulet viser elementerne i Sidepanel-widgeten (Søg og nylige artikler) og viser dem i det lodrette sidepanelområde i dit specialsektion.
Indholdsindstillinger til sidebjælken
I fanen indhold finder du alle modulets indholdselementer, såsom tekst, billeder og ikoner. Alt, der styrer det, der vises i dit modul, findes altid på denne fane.
Widget område
Sidebar-modulet bruger widget-oprettelsesfelter, som du kan oprette i fanen Udseende> Widgets. Du kan vælge et af dine tilpassede widgetområder fra denne rullemenu.
Admin Label
Dette vil ændre moduletiketten i konstruktøren for nem identifikation. Når du bruger WireFrame-visningen i Visual Builder, vises disse etiketter i modulblokken i Divi Builder-grænsefladen.
Indstillinger for sidebjæledesign
Under fanen Design finder du alle indstillingerne for modulstyling, såsom skrifttyper, farver, størrelse og afstand. Dette er den fane, du vil bruge til at ændre udseendet på dit modul. Hvert Divi-modul har en lang liste over designindstillinger, som du kan bruge til at ændre alt.
Orientering
Her kan du vælge, hvilken side af siden dit sidebjælke skal vises på. Denne parameter styrer orienteringen af teksten og placeringen af grænsen.
Slet kantseparatoren
Her kan du fjerne den tynde grå kant, der adskiller din sidebjælke fra indholdet på din side.
Tekstfarve
Her kan du vælge, om din tekst skal være lys eller mørk. Hvis du arbejder på en mørk baggrund, skal din tekst være lys. Hvis din baggrund er lys, skal din tekst være mørk.
Header Font
Du kan ændre skrifttypen på din overskriftstekst ved at vælge den ønskede skrifttype i rullemenuen. Divi leveres med snesevis af fantastiske skrifttyper, der drives af Google Fonts. Som standard bruger Divi Open Sans-skrifttypen til al teksten på din side. Du kan også tilpasse stilen på din tekst ved hjælp af fed, kursiv, hovedstad og understregningsmuligheder.
Overskrift skriftstørrelse
Her kan du justere størrelsen på din overskriftstekst. Du kan trække områdeskyderen for at øge eller formindske størrelsen på din tekst eller direkte indtaste den ønskede tekststørrelsesværdi i indtastningsfeltet til højre for skyderen. Indtastningsfelterne understøtter forskellige måleenheder, hvilket betyder at du kan indtaste "px" eller "em" afhængigt af din størrelsesværdi for at ændre enhedstypen.
Sidehovedtekstfarve
Som standard vises alle tekstfarver i Divi i hvid eller mørkegrå. Hvis du vil ændre farven på din overskriftstekst, skal du vælge den ønskede farve fra farvevælgeren ved hjælp af denne mulighed.
Mellemrum i overskrift
Mellemrum mellem bogstaver påvirker afstanden mellem hvert bogstav. Hvis du vil øge mellemrummet mellem hvert bogstav i din overskriftstekst, skal du bruge områdeskyderen til at justere mellemrummet eller indtaste den ønskede afstandsstørrelse i indtastningsfeltet til højre for skyderen. Indtastningsfelterne understøtter forskellige måleenheder, hvilket betyder at du kan indtaste "px" eller "em" afhængigt af din størrelsesværdi for at ændre enhedstypen.
Overskrift rækkehøjde
Linjehøjde påvirker mellemrummet mellem hver linje i din overskriftstekst. Hvis du vil øge mellemrummet mellem hver linje, skal du bruge skyderen til at justere mellemrummet eller indtaste den ønskede afstandsstørrelse i feltet. post placeret til højre for skyderen. Indtastningsfelterne understøtter forskellige måleenheder, hvilket betyder at du kan indtaste "px" eller "em" afhængigt af din størrelsesværdi for at ændre enhedstypen.
Body skrifttype
Du kan ændre din kropsskrifttype ved at vælge den ønskede skrifttype i rullemenuen. Divi leveres med snesevis af fantastiske skrifttyper, der drives af Google Fonts. Som standard bruger Divi Open Sans-skrifttypen til al teksten på din side. Du kan også tilpasse stilen på din tekst ved hjælp af fed, kursiv, hovedstad og understregningsmuligheder.
Krops skrifttypestørrelse
Her kan du justere din kropstekststørrelse. Du kan trække skyderen for at øge eller formindske størrelsen på din tekst eller direkte indtaste værdien for den ønskede tekststørrelse i indtastningsfeltet til højre for skyderen. Indtastningsfelterne understøtter forskellige måleenheder, hvilket betyder at du kan indtaste "px" eller "em" afhængigt af din størrelsesværdi for at ændre enhedstypen.
Krops tekstfarve
Som standard vises alle tekstfarver i Divi i hvid eller mørkegrå. Hvis du vil ændre farven på din tekst, skal du vælge den ønskede farve fra farvevælgeren ved hjælp af denne mulighed.
Afstand mellem kropsbreve
Mellemrum mellem bogstaver påvirker afstanden mellem hvert bogstav. Hvis du vil øge mellemrummet mellem hvert bogstav i din tekst, skal du bruge områdeskyderen til at justere mellemrummet eller indtaste den ønskede afstand i indtastningsfeltet til højre for skyderen. Indtastningsfelterne understøtter forskellige måleenheder, hvilket betyder at du kan indtaste "px" eller "em" afhængigt af din størrelsesværdi for at ændre enhedstypen.
Højde på kropslinjen
Linjehøjde påvirker mellemrummet mellem hver tekstlinje i din krop Hvis du vil øge afstanden mellem hver linje, skal du bruge områdeskyderen til at justere mellemrummet eller indtaste den ønskede afstand i indtastningsfeltet placeret til højre for markøren. Indtastningsfelterne understøtter forskellige måleenheder, hvilket betyder at du kan indtaste "px" eller "em" afhængigt af din størrelsesværdi for at ændre enhedstypen.
Avancerede sidepanelindstillinger
På den avancerede fane finder du muligheder, som mere erfarne webdesignere måske finder nyttige, såsom tilpassede CSS- og HTML-attributter. Her kan du anvende brugerdefineret CSS på ethvert af modulets mange elementer. Du kan også anvende tilpassede CSS-klasser og ID'er til modulet, som kan bruges til at tilpasse modulet i dit barns temas style.css-fil.
CSS ID
Indtast et valgfrit CSS-ID, der skal bruges til dette modul. Et ID kan bruges til at oprette en brugerdefineret CSS-stil eller til at linke til bestemte sektioner på din side.
CSS klasse
Indtast de valgfri CSS-klasser, der skal bruges til dette modul. En CSS-klasse kan bruges til at oprette brugerdefineret CSS-styling. Du kan tilføje flere klasser adskilt af et mellemrum. Disse klasser kan bruges i dit Divi-underordnede tema eller i det brugerdefinerede CSS-stilark, som du føjer til din side eller til dit websted ved hjælp af Divi-temaindstillingerne eller Divi Builder-sideindstillingerne.
Tilpasset CSS
Brugerdefineret CSS kan også anvendes på modulet og ethvert af modulets interner. I sektionen Custom CSS finder du et tekstfelt, hvor du kan tilføje tilpassede CSS-stilark direkte til hvert element. CSS-poster i disse indstillinger er allerede pakket i typografikoder. Så indtast bare CSS-reglerne adskilt af semikolon.
synlighed
Denne mulighed giver dig mulighed for at kontrollere de enheder, som dit modul vises på. Du kan vælge at deaktivere dit modul på tablets, smartphones eller desktops individuelt. Dette er nyttigt, hvis du vil bruge forskellige mods på forskellige enheder, eller hvis du vil forenkle mobildesignet ved at fjerne 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=”flad” custom_background=”#18b69d” custom_hover_background=”#118d7a” custom_color=”#ffffff” custom_hover_color=”#ffffff” icon_right=”fa fa-download”]DOWNLOAD 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”]DOWNLOAD THE TEMPLATES DIVI[/vcex_button][/vc_column][/vc_row]
Andre Divi tutorials
- 5 websteder, der bruger Divi restaurant tema
- Sådan tilføjer du tekst på et Divi WooCommerce-produkt
- Sådan ændres menuen farve mellem Divi sider
- Sådan tilpasses tavlerne på en blog med Divi
- Sådan bruges rolle Divi redaktør på WordPress
- Sådan opretter du en Divi-skyder på fuld skærm
- Sådan ændres menuenes farve mellem Divi-sider
- Funktioner, som du sandsynligvis ikke kender til Divi
- Sådan bruger du Divi Builder på WordPress
- Sådan bruges Divi-video-rullemodulet
- Sådan bruges Divi Builder Flip-modulet
- Sådan tilføjes et vidnesbyrdsmodul om Divi Builder
- Sådan bruges Divi-tekstmodulet
- Sådan opretter du en skyder på Divi
- Sådan redigeres en Divi-brugerrolle
- Sådan bruges Divi Social Media-modulet
- Sådan bruges butikmodulet med temaet WordPress Divi
- Sådan bruges Divi sidebar modul
- Sådan bruges Divi Price Table Module
- Sådan bruges titelmodulet i Divi-publikationer
- Sådan tilføjes et videomodul til Divi
- Sådan bruges artikelnavigationsmodulet
- Sådan bruges Divi-søgemodulet
- Sådan bruges Divi wallet-modulet
- Sådan bruges personmodulet på Divi Builder
- Sådan bruges tegnebogen modulet med Divi filter
- Sådan bruges glidemodulet i fuld bredde
- Sådan bruges Divi Builder Image Module
- Sådan bruger du navigationsmodulet med fuld bredde i Divi Builder
- Sådan bruges billedgallerimodulet
- Sådan bruges Divi Builder Fuldbredde-kortmodul
- Sådan bruges Divi Full Width Portfolio Module
- Sådan bruges Divi-modulet i fuld bredde
- Sådan bruges Divi Counter Module
- Sådan bruges artikelskyderen på Divi Builder
- Sådan bruges Divi Email Optin-modulet
Hej
I modsætning til dig prøver jeg at fjerne sidebjælken på mine blogartikelsider, og jeg ved ikke, hvordan man gør det på den nye Divi 4-version
Har du et tip?
merci
Aurélie
Hej og tak for disse tutorials.
I dette eksempel startede du med en side i fuld bredde eller med en skabelon med en original sidebjælke?
Hej Cess, jeg kan ikke rigtig huske det.