Addera och linjera knappar i Divi bloggmodul

Publicerad: 11 april, 2021

En fråga som ofta dyker upp i grupper på Facebook är hur man kan göra för att presentera bloggmodulen lite trevligare.

T ex om du använder layouten rutnät så blir ofta texterna i varje inlägg olika höga. Dessutom saknas en knapp för att ”läsa mer” som standard.  Se bilden nedan:

Linjera knappar i Divis bloggmodul

I detta inlägg visar jag dig hur du aktiverar knappar under varje inlägg i Divi bloggmodul. Samt hur du dessutom linjerar inläggen snyggt.

Du kan både följa instruktionerna via text och bild i denna inlägg eller se videoguide nedan hur man gör detta i Divi.

[et_pb_de_nitro_defer_video src=”https://divi.se/wp-content/uploads/2021/04/Bloggmodul.jpg” youtubeid=”Y2Me_8tVEtI” alt=”Divi bloggmodul” _builder_version=”4.9.2″ _module_preset=”default” width=”100%” hover_enabled=”0″ sticky_enabled=”0″][/et_pb_de_nitro_defer_video]

Aktivera knappar i Divi bloggmodul

För att visa knappar under inlägget så behöver du först gå in i bloggmodulens inställningar och under fliken Innehåll och sektionen Element aktivera reglaget Visa knappen Läs mer. Detta gör så att texten ”läs mer” visas under innehållet.

 

Addera och linjera knappar i Divi bloggmodul 1

Gör om texten till knapp med CSS

Om man tittar på länken ”läs mer” i Chromes utvecklingsverktyg kan man se att Divi lägger på klassen more-link

Addera och linjera knappar i Divi bloggmodul 2

Detta ska vi utnyttja och använda CSS till för att konvertera texten till en knapp istället.

Om du klistrar in denna CSS-kod antingen i ditt barn-tema eller under Divi > Tema-anpassare > Extra CSS så kommer vi att få en svart knapp som hoovrar lite då vi för musen över den.

.more-link {
background-color: #000000;
display: inline-block !important;
color: #fff; 
padding: 10px 30px;
margin-top: 20px; 
text-transform: uppercase;
}
.more-link:hover {
background-color: #333333;
}

Vi får då en svart knapp med lite hoovringseffekt.

Addera och linjera knappar i Divi bloggmodul 3

Göra modulen lika höga

Nästa steg är att göra de tre blogginläggen lika höga. För det fungerar inte inställningen under rader ”utjämna höjden i kolumnen”. Vi behöver istället använda CSS för att få till det och en bra CSS-kod som fungerar har Divi Sensei tagit fram. Se originalinlägget här

Öppna rad-inställningar där bloggmodulen ligger och under Avancerat och CSS-ID och Klasser anger du bloggrid i fältet CSS klass.

 

Addera och linjera knappar i Divi bloggmodul 4

Sist av allt klistrar du in följande CSS-kod på under koden för läs-mer knappen (som du gjorde här ovan).

 

.bloggrid .et_pb_salvattore_content {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}

.bloggrid article {
margin-bottom: 20px !important;
-webkit-box-flex: 1;
-ms-flex: 1 0 auto;
flex: 1 0 auto;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}

.bloggrid .post-content {
-webkit-box-flex: 1;
-ms-flex: 1 0 auto;
flex: 1 0 auto;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}

.bloggrid .column {
margin-bottom: 20px !important;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}

Slutresultat

Nu är vi klara och om du gjort korrekt ska slutresultatet se ut enligt nedan. Du kan själv experimentera med både koden för knapp och för bloggrid om du vill förändra marginaler eller färger. 

 

Addera och linjera knappar i Divi bloggmodul 5

Läs även