CSS | WP-support-blog.com https://wp-support-blog.com Hilfestellung, Tipps & Erfahrungen rund um WordPress Thu, 18 Nov 2021 10:11:17 +0000 de hourly 1 https://wordpress.org/?v=6.9.4 https://wp-support-blog.com/wp-content/uploads/2019/08/cropped-WP-Support-Blog-Flavicon-NEW-2-32x32.png CSS | WP-support-blog.com https://wp-support-blog.com 32 32 Elementor PRO Header, Sticky, verkleinere Logo & ändere die Farbe beim Scrollen https://wp-support-blog.com/elementor-header-sticky-verkleinere-logo-aendere-die-farbe-beim-scrollen/?utm_source=rss&utm_medium=rss&utm_campaign=elementor-header-sticky-verkleinere-logo-aendere-die-farbe-beim-scrollen https://wp-support-blog.com/elementor-header-sticky-verkleinere-logo-aendere-die-farbe-beim-scrollen/#respond Mon, 13 Apr 2020 12:01:37 +0000 https://wp-support-blog.com/?p=640 Wir benutzen ein paar CSS Snippets und können so den Header anpassen wie wir es gerne haben möchten.

The post Elementor PRO Header, Sticky, verkleinere Logo & ändere die Farbe beim Scrollen first appeared on WP-support-blog.com.]]>
Wir benutzen ein paar CSS Snippets und können so den Header anpassen wie wir es gerne haben möchten.
  • Problem

Um den Header auf „Sticky Top“ einzustellen gibt es in Elementor eine einfache Einstellung. ABER um den Header beim Scrollen zu verkleinern oder die Farbe zu ändern leider noch nicht. 

  • Lösung

Wir benutzen ein paar CSS Snippets und können so den Header anpassen wie wir es gerne haben möchten.

  • STEP BY STEP

Schritt 1: Header wie gewohnt erstellen

Erstelle wie gewohnt einen Header und stelle Ihn auf Sticky top. Gehe zu –> Erweitert –> Bewegungseffekte –> Sticky –> Oben
Und stelle „Offset Effekte“ auf  1. 
Z-Index auf 9

Schritt 2: Logo & Menü beim Scrollen verkleinern

Wir fangen mit dem Logo an. Wichtig ist, dass Du keine  Breite eingestellt hast. Falls doch, merk dir die Werte und lösche sie alle wie im Bild.

Jetzt gib dem Logo/Bild eine eindeutige CSS Klasse z.B. Logo1

Jetzt füge den Code unter Erweitert –> „Eigene CSS“ ein. 
Falls Du eine andere CSS Klasse genommen hast, dann musst du diese entsprechend im Code ändern. 

/* --- LOGO ---- */
/* Logo sizing before sticky */
.Logo1 img {
width: auto;
max-height: 120px;
transition: all 0.5s ease;
}
/* Logo sizing after sticky */
.elementor-sticky--effects .Logo1 img {
max-height: 65px;
width: auto;
}

Jetzt vergeben wir für das Menü auch eine CSS Klasse und fügen wieder den entsprechenden CSS Code ein. auch hier müssen die Voreinstellungen bei der Schriftgröße gelöscht sein.

/* — Menü —- */
/* menü sizing before sticky */
.menu1 {
font-size: 15px;
transition: all 0.5s ease;
}


.elementor-sticky–effects .menu1 {
font-size: 10px;
}

Schritt 3: Hintergrundfarbe beim Scrollen ändern.

um die Farbe ds gesamten Header zu ändern, füge folgenden Code im CSS ein.
Die Farbe ist hier in RGBA angegeben um eine Transparenz darzustellen. Du kannst aber auch HEX Farbcodes verwenden. 

Ich hoffe, ich konnte Dir mit diesem Post weiterhelfen.
Lass gerne Feedback oder ne Frage da.

/* Background color on sticky */
.elementor-sticky--effects {
background-color:rgba(255,255,255,0.85);
transition: all 0.5s ease;
}
  • Fertig
The post Elementor PRO Header, Sticky, verkleinere Logo & ändere die Farbe beim Scrollen first appeared on WP-support-blog.com.]]> https://wp-support-blog.com/elementor-header-sticky-verkleinere-logo-aendere-die-farbe-beim-scrollen/feed/ 0 Elementor Abschnitt unsichtbar (Fix) https://wp-support-blog.com/elementor-abschnitt-unsichtbar-fix/?utm_source=rss&utm_medium=rss&utm_campaign=elementor-abschnitt-unsichtbar-fix https://wp-support-blog.com/elementor-abschnitt-unsichtbar-fix/#comments Tue, 11 Feb 2020 09:03:25 +0000 https://wp-support-blog.com/?p=563 Es gibt hierfür eine Ursache und zwei Möglichkeiten das Problem zu lösen.

The post Elementor Abschnitt unsichtbar (Fix) first appeared on WP-support-blog.com.]]>
Es gibt hierfür eine Ursache und zwei Möglichkeiten das Problem zu lösen.
  • Problem

Eine Abschnitt ist auf einmal nicht mehr sichtbar. Es gibt auch keine Möglichkeit hier noch etwas einzustellen.

  • Lösung

Es gibt hierfür eine Ursache und zwei Möglichkeiten das Problem zu lösen. Das Problem kommt von den Responsiv-Einstellungen. Wenn man hier an den Schaltern etwas einstellt und wieder zurück, kann es zu diesen Phänomen kommen. Es ist ein bekannter Bug.

  • STEP BY STEP

Lösung 1:

Abschnitt neu anlegen und alle Widget in den neuen Abschnitt ziehen. 

Lösung 2:

Folgende CSS einfügen. Dies kann zusätzlich mit der jeweiligen CSS Klasse ergänzt werden.

.elementor-invisible{
     visibility: visible;
}
  • Fertig

Ich hoffe, ich konnte Dir mit diesem Post weiterhelfen.
Lass gerne Feedback oder ne Frage da.

The post Elementor Abschnitt unsichtbar (Fix) first appeared on WP-support-blog.com.]]> https://wp-support-blog.com/elementor-abschnitt-unsichtbar-fix/feed/ 2 Schriftarten manuell einbinden in WordPress https://wp-support-blog.com/schriftarten-manuell-einbinden/?utm_source=rss&utm_medium=rss&utm_campaign=schriftarten-manuell-einbinden https://wp-support-blog.com/schriftarten-manuell-einbinden/#respond Mon, 16 Sep 2019 00:41:25 +0000 https://wp-support-blog.com/?p=508 Individuelle Schriftarten in WordPress einbinden und benutzen.

The post Schriftarten manuell einbinden in WordPress first appeared on WP-support-blog.com.]]>
Individuelle Schriftarten in WordPress einbinden und benutzen.
  • Problem

Du hast Dir eine schöne Schriftart bei Dafont.com oder Fontspring.com besorgt und möchtest diese Schriftart jetzt in WordPress einbinden und weißt nicht wie.

  • Tipp:

Für alle die kostenlose Schriftarten für die kommerzielle Nutzung suchen.
Auf dem Blog websiteplanet.com gibt es eine Liste mit guten Quellen dafür.

https://www.websiteplanet.com/de/blog/die-besten-schriftarten/

Vielen Dank Andrea für diesen Tipp.

 

  • Lösung

Du kannst die Schriftart mit dem Plugin Custom Fonts einbinden oder sie per Hand via CSS nach dieser Anleitung einbinden und sparst Dir ein Plugin.

  • STEP BY STEP

1. Nachdem Du die Schriftart gedownloadet hast, musst Du diese jetzt wieder  via FTP oder dem Filemanager Plugin auf Deiner Website Uploaden.

Am besten Du erstellst hierfür einen neuen Ordner z.B. „fonts“ im Verzeichnis Deines Child-Themes und lädst die Font Dateien alle dort hinein. In meinem Beispiel benutze ich die Schriftart „Zona Pro“

2. Jetzt muss die Schriftart noch eingebunden werden damit diese in WordPress verfügbar ist. Dafür kannst Du folgenden Code im Customizer benutzen. (Du musst diesen Code für jede Schriftartdatei neu anlegen)

@font-face {
    font-family: Zona Pro; 
    src: url(http://www.example.com/wp-content/themes/your-theme/fonts/Zona-pro.ttf); 
    font-weight: normal; 
}

Danach kannst Du Schriftart den jeweiligen Tags oder CSS ids zuordnen wie in folgendem Beispiel:

.h1 {
font-family: "Zona Pro";
}
 
.p {
font-family: "Zona Pro";
}
 
  • Fertig

Ich hoffe, ich konnte Dir mit diesem Post weiterhelfen.
Lass gerne Feedback oder ne Frage da.

The post Schriftarten manuell einbinden in WordPress first appeared on WP-support-blog.com.]]> https://wp-support-blog.com/schriftarten-manuell-einbinden/feed/ 0 User Agent Style sheet margin 8px reparieren https://wp-support-blog.com/user-agent-style-sheet-8px-elementor/?utm_source=rss&utm_medium=rss&utm_campaign=user-agent-style-sheet-8px-elementor https://wp-support-blog.com/user-agent-style-sheet-8px-elementor/#respond Wed, 21 Aug 2019 10:35:58 +0000 https://wordpress-support-blog.com/?p=58 Auch Ärger mit dem User Agent Style Sheet (Margin 8px) ? Hier erfährst Du, wie Du das ganz einfach wieder reparieren kannst.

The post User Agent Style sheet margin 8px reparieren first appeared on WP-support-blog.com.]]>
Auch Ärger mit dem User Agent Style Sheet (Margin 8px) ? Hier erfährst Du, wie Du das ganz einfach wieder reparieren kannst.
  • Problem

Ich habe mich neulich mit dem User Agent Style Sheet rumgeärgert. Nach der Entfernung von Maleware mit Hilfe von Wordfence, wurde meine komplette Seite plötzlich mit einem Rand (margin 8px) dargestellt.

Nach genauerer Betrachtung fand ich unter dem Body tag folgende Werte:

body { display: block; margin: 8px; }
  • Lösung

Um die Ränder von User Agent Style Sheet zu entfernen, füge einfach folgenden Code Snippet in den zusätzlichen CSS im Customizer ein:

body { margin: 0; }
  • Fertig

Ich hoffe, ich konnte Dir mit diesem Post weiterhelfen.
Lass gerne Feedback oder ne Frage da.

The post User Agent Style sheet margin 8px reparieren first appeared on WP-support-blog.com.]]> https://wp-support-blog.com/user-agent-style-sheet-8px-elementor/feed/ 0