Die Module Portfolio und filterbares Portfolio des Divi-Themes haben einige Einschränkungen: Der Titeltext und der Metatext (Kategorie) befinden sich unter dem Bild. Was aber, wenn Sie das ändern und auf dem Bild platzieren möchten? Dafür gibt es in den Modulen keine Einstellungen. Hier erfahren Sie, wie Sie den Titel- und Metatext über dem Bild im Divi Portfolio-Modul platzieren können.
Unser Ziel ist es, den Text, den Titel und die Metadaten, über dem Bild zu platzieren. Das Problem ist, dass diese beiden Elemente getrennt sind. Um sie richtig über dem Bild zu bewegen und zu positionieren, müssen sie zunächst gruppiert werden.
Ein jQuery-Snippet gruppiert die Elemente einfach zusammen und bildet ein neues Element in der CSS-Klasse «portfolio-overlay». Diese müssen Sie zunächst in den Einstellungen des Portfolio-Moduls eintragen. Klicken Sie hierfür auf den Tag «Erweitert», dann auf «CSS-ID & Klassen». Dort fügen Sie «portfolio-overlay» im Feld «CSS-Klasse» ein.
Nun kopieren Sie das folgende Script und legen es im <head>-Bereich Ihrer Website ab. Alternativ können Sie es auch in ein Code-Modul einfügen, welches Sie auf der Seite mit dem Portfolio-Modul platzieren:
<script>
jQuery(document).ready(function(){
function onImage(){
jQuery(".portfolio-overlay .project").each(function(){
if(jQuery(this).children().length == 3){
jQuery(this).children().not(":first-child").wrapAll("<div class = 'portfolio-inner'></div>");
}
})
}
onImage();
jQuery(document).ajaxComplete(function(){
onImage();
})
})
</script>Nach dem Hinzufügen von jQuery verbleiben der Titel und der Meta-Text weiterhin unter dem Bild. Bis jetzt haben wir diese Elemente gruppiert. Jetzt werden wir sie mit CSS verschieben.
Den folgenden Code kopieren Sie also in das CSS-Stylesheet Ihrer Website – Sie können es im Backend unter Design/Customizer/Zusätzliches CSS bearbeiten:
.portfolio-overlay .project {
position: relative;
}
.portfolio-overlay .portfolio-inner {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 99;
}
.portfolio-overlay .project>a:before {
content: "";
position: absolute;
background-color: #000;
width: 100%;
height: 100%;
z-index: 1;
opacity: .3;
transition: all 0.2s ease-in-out;
}
.portfolio-overlay .project>a:hover:before {
opacity: 0.5;
}Nun müssen Sie noch einige Anpassungen am Overlay vornehmen. Bearbeiten Sie wiederum das Portfolio-Modul, wechseln dort in den Tab «Design», hier wählen Sie unter «Layout» die «Gitter»-Darstellung. Dann wechseln Sie auf «Overlay» (in der deutschen Divi-Version: «Überlagerung»). Setzen Sie dort die Farben des Symbols UND des Overlays auf «transparent».
Die Titel und Meta-Informationen erscheinen nun auf den Bildern des Portfolio-Moduls. Wenn sie schlecht lesbar sind, empfehlen wir Ihnen eine andere Schriftfarbe, die Sie im Portfoliomodul unter Design einstellen können.
Werbung
Werbung
