Platz auf Desktop und Mobile unterschiedlich beanspruchen

Auf der Seite pferde.ch kommt das Theme wowsome zum Einsatz. Die rechte Seitenleiste war mir zu tief angesetzt, weshalb ich sie mir mittels CSS hochgezogen habe. Der Nachteil, es wirkte sich auch in der mobilen Darstellung aus und schob das erste Widget ein Stück weit über den Content. Da ich das Problem nicht mit CSS lösen konnte, habe ich mir eine andere Lösung überlegt.

In der Seitenleiste habe ich ein Widget vom Typ HTML angelegt und ganz oben platziert. Das Feld für den Titel bleibt leer. Im HTML-Feld zwei leere Absätze.

<p>&nbsp;</p>
<p>&nbsp;</p>

Der Block beansprucht somit Platz in der Höhe ohne einen sichtbaren Inhalt darzustellen. Alternativ kann man das auch mit einem transparenten Bild umsetzen.

<p><img src="transparent.png" width="100" height="50" alt="spacer"></p>

Der erst Block ist somit unsichtbar und drückt den zweiten Block als ersten sichtbaren Block nach unten. Problem gelöst. Fast jedenfalls, denn auf dem Desktop hat der Block den selben Effekt, genau das was hier nicht sein soll. Das Widget soll also auf dem Mobile angezeigt werden, nicht aber auf dem Desktop. Um das zu steuern gibt es das Plugin Widget-Options.

Das Plugin erlaubt es gezielt zu steuern, auch welchen Geräten und welchen Seite die Anzeige erfolgen soll, oder eben auch nicht. Das erlaubt zusätzliche Gestaltungsmöglichkeiten.

Auf der Seite restaurant-wäspi.ch wird dieses Plugin dazu verwendet um in der Seitenleiste ein zum Inhalt passendes Bild anzuzeigen. Für jede Seite ein Bild-Widget das lediglich auf der einen Seite angezeigt wird.

Schöner Rahmen um das Bild

In der Regel wird ein Bild so wie es ist in die Seite eingefügt. Insbesondere Bilder deren Hintergrund teilweise mit dem Hintergrund der Seite verschmilzt, mag das nicht ganz optimal sein. Dafür erstellen wir im CSS eine neue Klasse.

.bildrahmen{
  padding:5px;
  background:#FFFFFF;
  border:1px solid #9D9D9D;
  box-shadow: 3px 3px 8px #9D9D9D;
  display:inline-block;
}

Die Klasse wird im Blockeditor dem Bild zugewiesen.