Aufgabe: Modernisieren von website-heilpraktiker.de
Die Website wurde im Jahr 2021 mit Avada erstellt und hat 9 aktive Plugins, unter anderem Autoptimize, Imagify, Rankmath und einige mehr. Der Pagespeed war damals ok, dem heutigen Standard allerdings nicht mehr gewachsen.
Vorher: Pagespeed Website-Heilpraktiker.de
Also gehen wir erstmal in das WordPress, löschen alle Plugins, updaten WordPress auf die neueste Version und konfigurieren unsere Farben, Logo, etc.
- Logo, Seitentitel, Metas (30 Sekunden)
- Design Grundeinstellungen (Lightmode, Farben, Roots – 30 Sekunden)
- Startseiteninhalt (Hero ohne Bild, Spalten in Grids, Text und Akkordeons – 20 Minuten, weil ich die Texte noch etwas umschreibe)
- Etwas Custom CSS für coole Bilder, Kästen und Schatten (15 Minuten)
Theme Konfiguration
Speichern. Rebuild der Jsons auslösen, damit alle erstellt werden (Werden ab dann immer automatisch gepflegt, wenn man einen Artikel, Seite, Menu, etc. bearbeitet. Der Rebuild ist nur einmalig, oder wenn man was verzapft hat und versehentlich den halben FTP gelöscht hat).
Da vorher ein ganz altes Avada aktiv war (Version 5.2), musste ich die alten Shortcodes aus den Seiten entfernen und die Inhalte einmal aufhübschen. Da VeloCore WP einige tolle Sachen im Editor integriert, wie CTAs, Buttons, Spalten, Grids, etc. die man im Editor direkt sehen kann, war das einfach und sehr schnell umgesetzt. Das Custom-CSS hat das Styling dann sehr einfach gemacht. Insgesamt wurde folgendes CSS in das Custom CSS eingetragen:
.hero {background: linear-gradient(180deg, var(--color-secondary) -400%, var(--color-background) 100%) !important;}
.site-header {background: linear-gradient(180deg, rgb(255 255 255 / 95%), rgb(255 255 255 / 85%));}
.pb-row {align-items: center;margin-bottom: 100px;gap: 50px;}
.pb-col img{width:100%;height:auto;border-radius: 50% 5%;}
.hero p {color: #494949;}
.pb-col {padding: 0;background: none;border: none;}
.pb-box {background: linear-gradient(45deg, #fafff8, #fff7f1);box-shadow: 2px 4px 6px rgba(0, 0, 0, .1);margin-bottom: 100px;}
.one img {border-radius: 5% 50% 50% 5%;}
.two img {border-radius: 50% 5% 5% 50%;}
.pb-col h2 {margin-top: 0;}
.site-header {padding: 0.5rem 0;}
.logo img {max-height: 62px;filter: none;}
a {color: #714a28;}
.pb-cta{text-align: left;}
.pb-cta .pb-btn {text-decoration: none;}
.offer{align-items: flex-start;}
.pb-card {border: none;margin-bottom: 50px;box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);}
@media (max-width: 1024px) {
.one img, .two img {border-radius: 50% 5%;}
.two {flex-direction: column-reverse;}
}
Ergebnis nach ca. 1 Stunde aktiver Arbeit:
Nachher: Pagespeed Website-Heilpraktiker.de
Quelltext mit allen SEO-Daten (OG, Metas, Canonical, Schema, Twitter Cards, etc.)
Besser geht’s nicht. Speed, Optik, Responsiveness, SEO, Schemas, OG, DSGVO, etc. alles bereits fertig. Keine Plugins aktiv, keine Wartung notwendig.
WordPress darf nun auf Automatische Updates gestellt werden und sorgenfrei geht es in die Zukunft.
Erforderliche Kenntnisse:
- CSS
(Styling der Spalten (kein Schatten mehr), Bilder (Border-radius für coolen Effekt), Logo Hover angepasst und Farbverlauf im Hero, da ich dort kein Bild wollte) - sonst nichts
