Google Fonts bei Astra und Elementor FREE lokal einbinden

Google Fonts bei Astra und Elementor FREE lokal einbinden

Wer den Elementor PRO nutzt, kann Google Fonts relativ einfach über den Page Builder Elementor hochladen und lokal einbinden.

Auch mit der Version Elementor FREE ist es möglich, Google Fonts lokal einzubinden.

Schritt für Schritt:

  • Installieren des Plugins „Custom Fonts“
  • Download der gewünschten Schriften
  • Upload der Schriften zu WordPress und Elementor

 

Installieren und Aktivieren des Plugins

Custom Fonts“ ist eines der besten Plugins, um eine Schriftart in WordPress zu installieren

 

Google Fonts downloaden

Google Fonts aussuchen, herunterladen und entpacken.

Super einfach geht es über die Seite Google Webfonts Helper.

 

Upload der Schriften zu WordPress und Elementor

In WordPress unter Design > Custom Fonts aufrufen

Plugin Custom Fonts

Unter „Add New Font“ Felder ausfüllen:

Name:                  geben Sie hier den Namen der Schrift an

Font Fallback:    Fallback Schriften, mit Komma getrennt angeben (z.B. Arial, Serif)

Font Weight:     Wählen Sie den Schriftstil aus

Nun die Schriften mit den Endungen .woff2, .woff, .ttf, .eot und .svg uploaden

Mit „Add Font Variation“ eventuell zusätzliche Schriftstile hochladen.

Am Ende mit „Add New Font“ alles speichern.

 

Lokale Schriftart in Elementor auswählen:

Seite mit Elementor öffnen

Gewünschten Text auswählen

Stil und Typographie wählen

Unter Schriftfamilie und Costum ist die hochgeladene und lokal eingebundene Schriftart zu finden.

WP Astra und Elementor FREE

 

Nun noch jegliche Verbindungen zu Google Fonts deaktivieren:

a) Unter Elementor:

Elementor > Einstellungen > Erweitert > Google Fonts > Deaktivieren

b) Mittels Plugin

Sollte Variante a) nicht zum Erfolg führen, kann die Verbindung zu Google mit einem Plugin, z.B. Borlab Font Blocker, verhindert werden. Weitere Einstellungen im Plugin sind nicht notwendig.

WordPress Redesign – Entwickeln einer neuen Website

Entwickeln einer neuen Website auf einem anderen Server und anschließendes Einspielen der neuen Website auf der Live-Site.

ALTE WEBSITE

  • Datenbank sichern (PHP MyAdmin)
  • WordPress Dateien sichern (FTP)

TEST WEBSITE

  • Datenbank sichern (PHP MyAdmin)
  • URL‘s in der DB ändern: ‚siteurl‘ und ‚home‘ (z.B. mit Notepad)
  • WordPress Dateien sichern (FTP)

NEUE WEBSITE

  • Neues Verzeichnis am Server anlegen
  • WordPress neueste Version in dieses Verzeichnis uploaden
  • Neue Datenbank anlegen
  • Datenbank-Daten (mit geänderter URL) der TEST WEBSITE importieren
  • Datei wp-config.php mit Verweis auf neue Datenbank uploaden
  • Verzeichnis wp-content löschen
  • Verzeichnis wp-content von TEST WEBSITE uploaden
  • .htaccess uploaden (mit SSL)
  • Einstieg in wp-admin
  • Theme von TEST WEBSITE aktivieren und aktualisieren
  • Plugins aktivieren und aktualisieren
  • Cookie Plugin installieren

Webdesign Browser Test für Entwickler bzw. Developer

Webdesign Browser Test

Als Developer bzw. Entwickler wünscht man sich die Möglichkeit, Webseiten mit diversen Browsern testen zu können. Da es in der Praxis unmöglich ist, die Darstellung mit unterschiedlichen PC, Notebook, Tablet, Smartphone, diversen Betriebssystemen und verschiedenen Browsern zu testen, gibt es im Internet sehr nützliche und kostenlose Tools für diese Zwecke.

Bei diesen Systemen gibt man die Adresse der zu untersuchenden Webseite ein, wählt Betriebssystem und Browser aus. Nach wenigen Minuten erhält man die Browser-Screenshots zum Download.

Einige Beispiele:

Browsershots.org

http://browsershots.org/

Browserstack.com

http://www.browserstack.com/screenshots/

 

WEB-Design Tools

WEB-Design Tools für Webdesigner

Webseiten Perfomance Überprüfung

PageSpeed Insights von Google unterzieht beliebige Webseiten einer Performance Überprüfung:

https://developers.google.com/speed/pagespeed/insights

DSL Speed Test

Upload und Download Test der DSL Übertragungsgeschwindigkeit:

http://dsl-speedtest.computerbild.de/

Server Speed Test

Mit diesem Tool können Sie die Antwortzeit Ihres Servers testen:

http://www.html-world.de/tools/server.php

 

htaccess – die Konfigurationsdatei des Webservers

Einige Tipps zur Verwendung der Datei .htaccess

1. Verhinderung der Auflistung des Webverzeichnisses am Server:

Wird ein Unterverzeichnis einer Webseite aufgerufen und fehlt dort die Datei “index.html”, listet der Apache-Webserver in der Standardeinstellung alle Dateien des Verzeichnisses auf. Um dies zu Verhindern, hilft folgender Eintrag in der .htaccess-Datei:
Options All -Indexes

2. Auflistung des Webverzeichnisses am Server aktivieren:

Wollen Sie, umgekehrt zu Punkt 1, die Auflistung der Dateien im Webverzeichnis erzwingen (z.B.: eine Reihe von Dateien zum Download anbieten), ist folgender Eintrag in die .htaccess-Datei notwendig:
Options All +Indexes

3. Passwortschutz mit htaccess:

Bestimmte Bereiche einer Webseite können mit der Datei .htaccess nur für bestimmte Benutzer zugänglich gemacht werden.
Dazu sind die Dateien .htaccess und .htpasswd erforderlich. Sie lassen sich mit einem einfachen Texteditor als Datei htaccess.txt und htpasswd.txt erstellen und dann am Server entsprechend umbenennen.

.htaccess

hat folgenden Inhalt:
AuthType Basic AuthName “Bitte Zugangsdaten eingeben” 
AuthUserFile /[Pfad].htpasswd require valid-user

Unter Pfad ist der absolute Pfad vom Root-Verzeichnis des Servers anzugeben. Am einfachsten zu ermitteln mit einer selbst erstellten Datei phpinfo.php. Der Inhalt: <?php echo phpinfo(); ?> Diese Datei im Wurzelverzeichnis des Servers abspeichern und im Browser aufrufen. Unter “DOCUMENT_ROOT” wird der Pfad angegeben.

.htpasswd

Die Kennwörter in dieser Datei sind nicht im Klartext vorhanden. Deshalb z.B. mit einem im Web zu findenden Generator erstellen. Z.B.: www.phpbb.de/support/doku/htpasswd.php

Sicherheit Webpage

Sicherheit Webpage

Je beliebter eine Webpage ist, desto wichtiger ist es, die Webpage abzusicherung und gegen Bedrohungen vorzubeugen.

Hier ein Sammlung von Tools, die der Sicherheit von Webpages dienen, und frei im Internet zur Verfügung stehen.

Security Site Check

http://sitecheck.sucuri.net/scanner/   Der Online-Scanner checkt Webpages auf bekannte Malware, Blacklist Status, Website Errors, nicht mehr aktueller Software und vieles mehr.

XML Sitemap für WordPress

XML Sitemap für WordPress

Eine Sitemap ist eine Datei, die für Suchmaschinen (sogenannte Crawler) erstellt wird und vom Besucher der Webseite normalerweise nicht gesehen werden kann. Die Sitemap unterstützt Suchmaschinen beim Auffinden und Indexieren der Seiten eines Webauftritts. Damit sollte auch ein besseres Ranking bei Suchmaschinen einhergehen.

Für WordPress verwende ich das Plugin “Google XML Sitemaps”. Es ist kostenlos, relativ einfach und schnell installiert. Zu finden ist es unter “Einstellungen -> XML-Sitemap”. Am einfachsten ist es, die Standardeinstellungen beizubehalten. Mit “Änderungen speichern” wird die Datei “sitemap.xml” erzeugt.

Eine Überprüfung der erzeugten Sitemap ist sinnvoll und kann mit dem Aufruf der URL www.meinedomain.de/sitemap.xml erfolgen.

Anschließend sollte man seine Seite bei den Google Webmaster Tools anmelden, da Google die derzeit wichtigste Suchmaschine ist.

Google Webmaster Tools

Man meldet sich bei Google Webmaster Tools an oder registriert sich. Auf die entsprechende Webseite klicken oder “Webseite hinzufügen”. Unter Crawling verbirgt sich der Menüpunkt “Sitemaps”. Hier kann die Sitemap hinzugefügt oder getestet werden.

Passwortschutz mit htaccess

Passwortschutz mit htaccess

Bestimmte Bereiche einer Webseite können mit der Datei .htaccess nur für bestimmte Benutzer zugänglich gemacht werden.

Dazu sind die Dateien .htaccess und .htpasswd erforderlich. Sie lassen sich mit einem einfachen Texteditor als Datei htaccess.txt und htpasswd.txt erstellen und dann am Server entsprechend umbenennen.

.htaccess

hat folgenden Inhalt:
AuthType Basic
AuthName “Bitte Zugangsdaten eingeben”
AuthUserFile /[Pfad].htpasswd
require valid-user

Unter Pfad ist der absolute Pfad vom Root-Verzeichnis des Servers anzugeben. Am einfachsten zu ermitteln mit einer selbst erstellten Datei phpinfo.php. Der Inhalt:
<?php echo phpinfo(); ?>
Diese Datei im Wurzelverzeichnis des Servers abspeichern und im Browser aufrufen. Unter “DOCUMENT_ROOT” wird der Pfad angegeben.

.htpasswd

Die Kennwörter in dieser Datei sind nicht im Klartext vorhanden. Deshalb z.B. mit einem im Web zu findenden Generator erstellen. Z.B.: www.phpbb.de/support/doku/htpasswd.php

 

Websites mit verschiedenen Endgeräten testen

Websites mit verschiedenen Auflösungen und Endgeräten testen

Für Entwickler: Möglichkeiten zum Testen neuer Websites für verschiedene Endgeräte und Auflösungen.

Sreenfly – ein Onlinetool zum Test von Websites auf verschiedenen Viewports. Es werden diverse Endgeräte, von Smartphones bis Desktop PC’s  simuliert.

http://quirktools.com/screenfly/

Responsive Design Tester – gleichzeitige, parallete Darstellung von Websites mit verschieden Viewports.

http://mattkersley.com/responsive/

Responsive Test – Onlinetest zur Darstellung auf Desktop, Tablet oder Smartphone

http://responsivetest.net/

Responsive Design Viewer – Test von Internetseiten mit verschiedenen Endgeräten. URL eingeben, Endgerät auswählen und die Webseite wird wie in der Realität angezeigt.

http://www.active-value.de/responsive-design-viewer/