Divi-tutorial: Hur man använder modulen Post Titel

Divis jobbtitelmodul visar titeln på ditt nuvarande inlägg och, om tillämpligt, inläggsbilden och metadata på ett elegant sätt. Detta gör att du kan skapa fler unika inlägg när du skapar dina inlägg med Divi Builder.

Så här lägger du till en posttitelmodul på din sida

Innan du kan lägga till en titelmodul 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 har angett 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.

Leta reda på artikeltitelmodulen 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 in ordet "inläggstitel" och sedan klicka på enter för att automatiskt hitta och lägga till inläggstitelmodulen! När modulen har lagts till hälsas du av listan över modulalternativ. Dessa alternativ är uppdelade i tre huvudgrupper: Innehåll , Conception et advanced .

Exempel på användningsfall: formatera en postmodul för ett blogginlägg

I det här exemplet ska jag visa hur lätt det är att anpassa en publikationstitel för ett blogginlägg.

Det första du behöver göra är att gå till sidan "Redigera artikel" på WordPress-instrumentpanelen. I Divi Post-inställningsområdet längst upp till höger, ställ in layouten på Full bredd och dölj artikelns titel.

Använd Visual Builder för att lägga till Regular Section med en rad med full bredd (1 kolumn). Lägg sedan till modulen Posttitel på raden.

Uppdatera inställningarna för meddelandetitel enligt följande:

Innehållsalternativ

Visa postkategorier: NEJ Visa kommentarnummer: NEJ Visad bild: YES Bild på plats: Titel / Meta Bakgrundsbild

Designalternativ

Orientering av text: centrum Textfärg: Ljus färg på bakgrundstext: JA Text Bakgrundsfärg: rgba (0,0,0,0.35) Titel Teckensnitt: Roboto (fetstil) Titel Teckenstorlek: 50px Titel Brevavstånd: 2px titel Linjehöjd: 1em Meta Font: Raleway Light Meta Fontstorlek: 24px Meta Font Color: # e0ba67

Spara inställningar

Det är allt. Nu behöver du aldrig nöja dig med en annan tråkig jobbtitel igen!

Innehållsalternativ för publikationstiteln

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 hittas alltid på den här fliken.

Visa titel

Här kan du välja att visa artikelns titel eller inte.

Visa Meta

Här kan du välja om Post Meta ska visas eller inte.

Visa författare

Här kan du välja om författarens namn ska visas i Post Meta eller inte.

Visa datum

Här kan du välja om datumet ska visas eller inte.

Datumformat

Här kan du ställa in datumformatet i Post Meta. Standard är 'M j, Y'

Visa artikelkategorier

Här kan du välja om kategorierna ska visas i Post Meta eller inte. Obs! Det här alternativet fungerar inte med anpassade inläggstyper.

Visa kommentarer

Här kan du välja om antalet kommentarer ska visas i Post Meta eller inte.

Visa utvald bild

Här kan du välja om den valda bilden ska visas eller inte.

Utvalda bildplacering

Här kan du välja var den valda bilden ska placeras.

Bakgrundsfärg

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

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.

Posttitel designalternativ

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.

Använd Parallax-effekten

Om positioneringen för den valda bilden är inställd på "title / Meta Background Image" kan du välja om du vill använda parallaxeffekten för den valda bilden eller inte.

Parallaxmetod

Här kan du välja vilken parallaxmetod som ska användas för den valda bilden - CSS eller True Parallax.

Textorientering

Här kan du välja orientering för titeln / metateksten.

Textfärg

Här kan du välja färg för texten Titel / Meta.

Använd bakgrundsfärgen på texten

Här kan du välja om du vill använda bakgrundsfärgen för titeln / meta-texten.

Text bakgrundsfärg

Om bakgrundsfärgen är på, välj önskad bakgrundsfärg här.

Titel typsnitt

Du kan ändra typsnittet i titeltexten 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 understrykningsalternativ.

Titel teckenstorlek

Här kan du justera storleken på din titeltext. Du kan dra avståndsreglaget för att öka eller minska storleken på din text eller 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å ditt storleksvärde för att ändra enhetstyp.

Titeltextfärg

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

Spacing av titelbokstäver

Bokstavsavstånd påverkar utrymmet mellan varje bokstav. Om du vill öka utrymmet mellan varje bokstav i titeltexten, 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 enhetstyp.

Höjd på titellinjen

Radhöjd påverkar utrymmet mellan varje rad i titeltexten. 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 enhetstyp.

Metas teckensnitt

Du kan ändra typsnittet för din metatekst genom att välja önskat typsnitt från 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 understrykningsalternativ.

Metas teckenstorlek

Här kan du justera storleken på din metatekst. Du kan dra avståndsreglaget för att öka eller minska storleken på din text eller 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å ditt storleksvärde för att ändra enhetstyp.

Textfärg på metadata

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

Avstånd mellan metadata bokstäver

Bokstavsavstånd påverkar utrymmet mellan varje bokstav. Om du vill öka utrymmet mellan varje bokstav i din metatekst, 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 enhetstyp.

Metas linje höjd

Linjehöjd påverkar utrymmet mellan varje rad i din metatekst. 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 enhetstyp.

Använd gränsen

Om du aktiverar det här alternativet placeras en kant 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. Anpassade måttenheter stöds, vilket innebär att du kan ändra standardenheten från "px" till något annat som em, vh, vw etc.

Gränsstil

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

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. Ta bort den anpassade marginalen genom att 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

Infill är utrymmet som läggs till i din modul, mellan modulens kant och dess interna element. Du kan lägga till anpassade utfyllnadsvärden till någon av modulens fyra sidor. Ta bort den anpassade marginalen genom att 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.

Visa avancerade titelalternativ

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-klasser som ska användas för denna modul. 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-barntema eller i den anpassade CSS-stilmall som du lägger till på din sida eller webbplats. webbplats med Divi-temaalternativ eller Divi Builder sidinställningar.

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 ta bort 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]

Divi Tutorial: Hur man använder jobtitelmodulen