SiteOrigin Page Builder Gird Layout

Das Ziel ist, eine Seite mit einem Grid-Layout mittels dem Pagebuilder von SiteOrigin zu bauen. Jedes Bild ist ein Link zu einer Unterseite oder einem Beitrag. Soweit so einfach.

Mit ein paar Zeilen CSS lässt sich das Bild gestalterisch als Link zu kennzeichnen. Beim Überfahren mit der Mouse (hover) soll das Bild animiert werden – sich etwas vergößern und / oder abdunkeln. Zudem soll der "Title text" im Bild angezeigt werden, wahlweise erst on hover.

Link zu Seite / Beitrag #1

Link zu Seite / Beitrag #2

Link zu Seite / Beitrag #3

Link zu Seite / Beitrag #4

Link zu Seite / Beitrag #1

Link zu Seite / Beitrag #2

Besonders schön mit quadratischen Bildern

Link zu Seite / Beitrag #3

Link zu Seite / Beitrag #4

Dazu müssen auf der Seite im Widget "SiteOrigin Image" folgende Einstellungen getroffen werden:

  • Widget Styles > Widget Class: tiles
  • Image und Text Alignment: Default
  • Title text: Text eingeben
  • Title position: Above

Zusätzliches CSS:

/* SiteOrigin Page Builder gird layout */
.tiles {
    position: relative;
    background-color: #000;
    overflow: hidden;
}

.tiles a img {
  	position: relative;
    transform: translateZ(0) scale(1);
    transition: all ease-in-out 1s;
  	/* activate for tiles with text on hover */
  	/*z-index: 10;*/
}

.tiles a:hover img {
    opacity: 0.4 !important;
    transform: scale(1.1, 1.1) !important;
    transition: all ease-in-out 0.4s !important;
  	z-index: 0;
}

.tiles h3 {
    position: absolute;
    bottom: 0;
    left: 0;
    color: white;
    margin: 0;
    font-size: 1.5em;
    padding: 8px;
    opacity: 1;
    transition: all ease-in-out 1s;
    cursor: pointer;
  	z-index: 5;
}