CSS Ids und Klassen – Video

HTML sorgt für die Struktur. Es sagst also beispielsweise durch das HTML-Tag <h2>Text</h2> das dieses Element eine Überschrift ist.

CSS (Cascading Style Sheets, zu deutsch „Mehrstufige Formatvorlagen“) sorgt für die Gestaltung. Zum Beispiel Schriftgröße, Schriftart, Positionierung, Hintergrundfarbe.

Lies unbedingt die vollständige Erklärung unter dem Video!

1. IDs und Klassen erklärt
2. Praxisbeispiel: HTML und CSS

Du musst eingeloggt sein, um diesen Inhalt zu sehen!

Lukinski SEO Masterclass: Einloggen oder jetzt starten >

CSS und HTML im Detail

Nehmen wir an, du willst das Design deiner Überschriften global (auf allen Seiten) ändern. Wenn du dein Styling direkt im HTML machst (also in jeder einzelnen Seite), müsstest du alle Überschriften, in allen einzelnen Seiten abändern, damit das neue Design auf allen Seiten übernommen wird. Das ist extrem viel Aufwand.

Damit Änderungen an der Gestaltung sofort, überall (also global) übernommen werden, legt man als Webmaster eine CSS Datei an. In dieser (einzelnen) Datei wird die gesamte Gestaltung der Internetseite festgelegt. Die einzelnen HTML Element übernehmen diesen Style, indem sie eine bestimmte Klasse oder ID bekommen (also einen individuellen Namen).

Damit du CSS und HTML verknüpfst bekommen die HTML Tags zusätzlich den Parameter:

• class=””
• oder id=””

So wird aus deiner Überschrift <h2>Text</h2>

• <h2 class=”blaue-ueberschrift”>Text</h2>

Beides (IDs und Klassen) erfüllen für dich denselben Zweck, es verbindet HTML und CSS. Für Textelemente nutzt du immer class=”” als Parameter. Durch diese Klassen kannst du bestimmte Elemente genau identifizieren und stylen.

Du kannst zum Beispiel Links erstellen, die eine besondere Farbe haben, anders als alle anderen Links.

Praxisbeispiel: HTML und CSS verknüpfen

In diesem Beispiel schauen wir uns an, wie du aus einem Standard-Link, eine extra Klasse machst. Diese wird in der CSS Datei hinterlegt.

Immer wenn Links diese Klasse besitzen, werden sie rot und dick.

Einfacher Link:

<a href=“https://website.com“>Linktext</a>

Ergebnis:

Linktext

Schritt 1: CSS Klasse im HTML Element hinzufügen

Schritt 1 – Diesen Link wollen wir nun für besondere Angebot anpassen. Er soll rot und dick geschrieben sein. Dafür fügen wir die von uns benannte Klasse class=“roter-link“ hinzu.

Einfacher Link mit extra CSS Klasse:

<a href=“https://website.com“ class=“roter-link“>Linktext</a>

Schritt 2: CSS stylen

Schritt 2 – In der CSS Datei wird nun die Gestaltung der Klasse hinterlegt. Vor einer Klasse steht ein Punkt. Hier definierst du also einen Link a mit der Klasse .roter-link , daraus entsteht a.roter-link .

Die Einstellungen stehen dann innerhalb der geschweiften Klammern { … } .

Im CSS steht dann:

a.roter-link {
color: #f90303;
font-weight: 900;
}

Ergebnis:

Linktext

The post HTML lernen (5/5): CSS Ids und Klassen appeared first on Online Marketing One.

Video: Theme installieren

Dafür musst du das Theme 1) herunterladen um es 2) anschließend via FTP Tool (FileZilla) auf dein vorhandenen Webspace zu übertragen. Danach kannst du 3) dein Theme aktivieren. Für die Übertragung verwenden wir schon im ersten Teil “WordPress installieren” mit FileZilla als kostenloses FTP Tool.

Das lernst du im Video WordPress Ausbau:

• Theme installieren
• Download (Beispiel: Themeforest.net)
• FTP Übertragung
• Aktivierung im WordPress
• Erste Einstellungen

Design und neue Funktionen durch Themes

Bei einem WordPress Theme geht es nicht nur um das Aussehen, sondern auch um viele Funktionalitäten (Hintergrundvideos, Icons, Kontaktformular, uvm.), die heute bei vielen Themes von Haus aus mitgeliefert werden und fertig integriert sind.

Premium Themes kaufen auf Themeforest.net:

Auf Themeforest findest du die größte Auswahl an WordPress Themes. Diese Premium Themes verschönern dein WordPress System nicht nur wie beschrieben, sie statten es auch mit zusätzlichen, integrierten Funktionen aus. So hast du im Handumdrehen einen eigenen E-Commerce laufen. Die Funktionserweiterung wiederum ermöglichen Plugins. Diese zum Großteil kostenlosen Erweiterungen werden direkt vom Autor in die Themes integriert, dementsprechend sparst du viel Zeit im Aufbau. Design, Funktionalität, alles in einem.

• Themeforest – WordPress Themes kaufen

Wie schwer ist die Einrichtung von Themes?

Wenn du dir ein Themes kaufst, musst du wissen, dass die Einrichtung nicht mit wenigen Klicks gemacht ist. Bis du deinen eigenen Onlineshop aufgebaut und organisiert hast, vergeht eine Weile, je nach deinem individuellen Wissensstand.

Übung macht den Meister. Ich empfehle dir 3, 4 verschiedene Installationen zu machen sowie deren Design und Einrichtung vorzunehmen, so bekommst du nach und nach mehr Übung im Umgang mit den verschiedenen Theme Backends.

Documentation: Anleitung des Entwicklers

Solltest du Fragen haben, findest du in jedem einzelnen Themes eine Dokumentation. In dieser Dokumentation werden in der Regel alle Fragen beantwortet und alle Funktionen im Detail gezeigt. So kannst du dir selbständig Fragen beantworten und dein Theme mehr und mehr individualisieren.

The post WordPress einrichten (3/5): Theme installieren (Upload, Aktivierung) #L051 appeared first on Online Marketing One.