Toolbox

Auf dieser Seite befinden sich CSS Codes, die der Fehlerbehebung von Elementen dienen. Primär aber auch der Aufwertung von Standard-Inhalten.

Wichtige Hinweise zur richtigen Nutzung Grundvoraussetzung ist Elementor PRO

Bitte dieses Einführungs-Video anschauen zur richtigen Nutzung, klicke HIER.

Videofehler beheben: Schwarzer Balken

CSS Klasse: acf-bg-container

CSS Code:

				
					.acf-bg-container {
  height: 70vh;               /* maximale Höhe: 70% der Viewporthöhe */
  width: calc(70vh * 9 / 16); /* Breite automatisch aus 9:16 */
  max-width: 100%;
  margin: 0 auto;             /* zentrieren */
  overflow: hidden;
  position: relative;
}

/* Hintergrundvideo vollständig abdecken */
.acf-bg-container iframe,
.acf-bg-container video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: none;
}

Farbverlauf in einem Satz – über die Gesamte Breite des Textes

Die Farben können per Chat GPT geändert werden mit diesem Prompt:

„Ändere die Farben in diesem Code auf Blau (HEX: #0000FF) ; Grün (HEX: #184B44) und Pink (HEX: #F70080). Die anderen Einstellungen sollen unberührt bleiben.“

				
					selector {
  font-weight: bold;
  background: linear-gradient(
    90deg,
    #33cc88 0%,       /* Hellgrün */
    #33cc88 33.33%,
    white 33.33%,
    white 66.66%,
    #ff6666 66.66%,   /* Hellrot */
    #ff6666 100%
  );
  background-size: 100% 100%;
  background-repeat: no-repeat;

  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

Das Logo verkleinert sich beim Scrollen der Seite

CSS Klasse: logo-shrink

CSS Code:

				
					selector img {
    transition: all 0.6s ease-in-out;
}

.elementor-sticky--effects img {
    max-width: 55%; /* Passe die gewünschte Größe an */
}

Galerie läuft automatisch

CSS Klasse: .swiper-wrapper

CSS Code:

				
					selector .swiper-wrapper {
      -webkit-transition-timing-function: linear !important;
      -moz-transition-timing-function: linear !important;
      -o-transition-timing-function: linear !important;
      transition-timing-function: linear !important; 
}

selector .swiper-wrapper img {
    height: 300px; /* gewünschte Höhe eintragen */
    width: auto;
    object-fit: cover; /* schneidet zu, damit nichts verzerrt */
}