Archiv der Kategorie: Webdesign

Eigene Farbpalette für die Webseite

Im Normalfall sind die Farben einer Webseite auf das CD einer Unternehmung abgestimmt. Es ist wünschenswert, dass die Redaktoren einer Seite auch auf der Webseite diese Farben verwenden und nicht einfach wildwuchsmässig Farben nach Wunsch verwenden.

Deshalb macht es Sinn, eine eigene Farbpalette zu definieren.

Dies geschieht in der functions.php:

function mycolors() {
add_theme_support( 'editor-color-palette', array( 
array( 
'name' => __( 'hellblau', 'mycolors' ), 
'slug' => 'hellblau', 
'color' => '#77a5e8', 
),
array( 
'name' => __( 'bghellblau', 'mycolors' ), 
'slug' => 'bghellblau', 
'color' => '#e8f2ff', 
),	
array(
'name' => __( 'gruen', 'mycolors' ), 
'slug' => 'gruen', 
'color' => '#828207', 
), 
array( 
'name' => __( 'orange', 'mycolors' ), 
'slug' => 'orange', 
'color' => '#ff9933', 
), 
array( 
'name' => __( 'Text-Farbe', 'mycolors' ), 
'slug' => 'textcolor', 
'color' => '#555555', 
), 
array( 
'name' => __( 'weiss', 'v' ),
'slug' => 'weiss',
'color' => '#ffffff',
),
array(
'name' => __( 'schwarz', 'mycolors' ),
'slug' => 'schwarz',
'color' => '#000000',
),
) );
}
add_action( 'after_setup_theme', 'mycolors', 20 );

…und führt zum Ergebnis im Block-Editor (Backend):

Time-Line selber manuell erstellen

Oft sehen wir auf WordPress-Webseiten Darstellungen von Events in Form von „Time-Lines“. Die Erstellung solcher geschieht meist mit Plugins, von denen es ganz einfache kostenfreie gibt, aber auch mit ausgeklügelten Tools, welche keine Wünsche offen lassen, aber auch ein wenig ins Geld gehen können.

Warum nicht eine „Time-Line“ selber erstellen – mit den Hausmitteln von WordPress?

Weiterlesen

Schlecht sichtbare verschachtelte Blöcke im Gutenberg-Eidtor

Bei der Anwendung des Gutenberg-Editors seit WP 5 zeigt sich immer wieder, dass die Block-Struktur sehr schlecht sichtbar ist. Wo andere Blockeditoren (Divi, Elementor, etc.) farbige Rahmen um die Blöcke stellen, um die Verschachtelung sichtbar zu machen, tappt man  beim Gutenberg im Dunkeln. Beim Anklicken eines Blocks erscheint zwar ganz unten eine „Situations-Info“; oder man lässt sich die Struktur mittels der Schaltfläche Block-Navigation (oben links) einblenden.

Aber so ganz befriedigend ist das nicht.

Weiterlesen

Schriften – Google Fonts

Verschiedene Schriften auf der Webseite – soviel das Herz begehrt! – Mit Google Fonts ein Kinderspiel! 

Früher – in den Anfängen der Webseiten-Gestaltung – war das eine schwierige Sache. Auf einer Webseite konnten nur Schriften dargestellt werden, welche auf dem Gerät, welches die Webseite gerade anzeigen will, bereits installiert waren. Je nach Gerät – ein PC? ein Mac? dann: ein Tablet? – war die Auswahl der verfügbaren Schriftarten (Fonts) unterschiedlich.

Weiterlesen

Farbschema der Web-Site passend zu einem Bild

Die auf einer Web-Seite / Web-Site verwendeten Farben müssen nicht nur in sich „stimmig“ sein , also zu einander passen, sondern auch zu verwendeten Bildern, Grafiken und speziell Kunden-Logos.

Ein guter Weg zu passenden Farb-Schemas zu kommen sind Farb-Schema-Generatroren, wie z.B.

www.palettefx.com
www.pictaculous.com

und viele andere, welche mit Goolge-Suche „color palette generator using image“ zu finden sind.