Category: CSS

Elementor

Elementor ist einer der beliebtesten WordPress-Seitenersteller, die im Internet verfügbar sind. Es ist ein visueller Drag-and-Drop-Editor, mit dem Sie im Handumdrehen eine Website erstellen können.

Bei Elementor finden Sie über 80 Designelemente, einschließlich Widgets, um mehr Traffic und Leads zu generieren. Sie können jeden Teil Ihrer Site bearbeiten und anpassen, indem Sie einfach direkt darauf klicken.

Ähnlich wie bei anderen Plugins auf dieser Liste enthält es auch gebrauchsfertige Vorlagen. Sie können eine Vorlage importieren, ihren Inhalt schnell anpassen und eine Seite veröffentlichen. Es spart Ihnen viel Zeit.

Elementor ist ein vollständig responsives Plugin, sodass Ihre Website auf jedem Gerätetyp großartig aussieht. Es wird auch mit der neuesten WordPress-Version mit dem Block-Editor aktualisiert.
Preis: $49 für 1 Site (Kostenlose Version ist ebenfalls verfügbar)

Divi Builder

Der Divi Builder ist ein weiterer leistungsstarker WordPress-Drag-and-Drop-Seitenersteller für WordPress. Ähnlich wie Beaver Builder und Visual Composer ist Divi Builder ein echter WYSIWYG-Editor (What you see is what you get), mit dem Sie während des Erstellens eine Vorschau Ihres Designs anzeigen können.

Mit dem Divi Builder-Plugin können Sie alles anpassen, einschließlich Ihrer Schriftarten, Farben, Größen, Abstände usw., und einzigartige Seitenlayouts erstellen. Es gibt 46 einfache, aber flexible Inhaltselemente, die Sie zum Erstellen einer schönen Seite verwenden können. Sie können die Elemente problemlos nach Ihren Wünschen organisieren.

Das Divi Builder-Plugin funktioniert perfekt mit einigen der besten Website-Builder für kleine Unternehmen. Und es enthält über 20 vorgefertigte Layout-Vorlagen, mit denen Sie schnell mit Ihrem Design beginnen können. Außerdem können Sie Ihre eigenen Divi-Layouts erstellen und speichern und Ihre Layouts importieren oder exportieren, um sie auf anderen Divi-Sites zu verwenden.

Das Divi Builder-Plugin ist die Grundlage des beliebten Divi WordPress-Themes. Sie können dieses Plugin jedoch mit jedem anderen Thema verwenden. Der Vorteil des Kaufs dieses Plugins besteht darin, dass Sie Zugriff auf das gesamte Paket an Premium-Produkten des Unternehmens Elegant Themes erhalten.

Preis: $89 für den jährlichen Zugang

Visual Composer Website Builder ist ein leistungsstarker Drag-and-Drop-Website-Builder für WordPress. Es ermöglicht Ihnen, schnell und einfach eine beeindruckende WordPress-Website zu erstellen.

Genau wie Beaver Builder bietet das Visual Composer-Plugin einen Echtzeit-Live-Editor, mit dem Sie jede Änderung, die Sie auf der Seite vornehmen, sofort sehen können. Sie können direkt auf einen beliebigen Bereich auf Ihrer Seite klicken, um den Inhalt zu bearbeiten und anzupassen.

Das Plugin wird mit einem Bündel professioneller Vorlagen geliefert. Es gibt leistungsstarke Designoptionen, um das Aussehen jedes Elements anzupassen. Sie haben die volle Kontrolle über Räume, Ränder, Hintergrund, Parallax-Effekte und mehr.

Obwohl die meisten Funktionen Beaver Builder ähneln, kann Visual Composer noch viel mehr. Sie können auch Kopfzeilen, Fußzeilen, Menüs, Logos, Seitenleisten usw. Ihrer Website bearbeiten.

Visual Composer

Visual Composer ist ein großartiges Werkzeug sowohl für Anfänger als auch für Entwickler. Ein Anfänger kann mit Leichtigkeit schnell eine Website erstellen, während Entwickler ihren Workflow verbessern und benutzerdefinierte Inhaltselemente und leistungsfähigere Themen für ihre Kunden erstellen können.

Preis: 59 USD für eine einzelne Website (kostenlose Version ist ebenfalls verfügbar)

WordPress - Creative Publisher

Ein schöner Effekt auf der Webseite ist: Bilder ein zoomen oder von links oder rechts einblenden zu lassen.
Das führt dazu, dass die Webseite nicht nur als sterile Blättermaschine dient, sondern auch noch attraktiver aussieht. Die Elemente können nachträglich sehr leicht über CSS verändert werden und sind unabhängig vom WordPress-Programmiercode.
Beispiele solcher Animationen sehen Sie unter: https://www.30secondsofcode.org/css/s/zoomin-zoomout-animation

WordPress - Creative Publisher

Use Any Font gibt Ihnen die Freiheit, benutzerdefinierte Schriftarten auf Ihrer Website zu verwenden. Es ist nicht wie bei anderen Schriftarteneinbettungsdiensten, die Ihnen eine zählbare Anzahl von Schriftarten zur Auswahl bieten, weder von denen, die Ihre Schriftarten auf dem Remote-Server speichern. Sie können alle benutzerdefinierten Schriftarten verwenden, wenn Sie das Schriftartformat (ttf, otf, woff) haben, ohne von der Serververfügbarkeit anderer abhängig zu sein. Sie können nur ein Format hochladen und die restlichen Formate, die in allen Browsern benötigt werden, werden automatisch konvertiert, sogar in das komprimierte Woff2-Format für die neuesten Browser und eine schnellere Ladezeit.
https://useanyfont.com/

WordPress - Creative Publisher

Font Awesome bietet skalierbare Vektorsymbole, die sofort angepasst werden können – Größe, Farbe, Schlagschatten und alles, was mit CSS möglich ist.

Der komplette Satz in Font Awesome 4.7.0 umfasst 675 unterschiedliche Icons. Web Application Icons, Hand Icons, Transportation Icons, Gender Icons, File Type Icons, Form Control Icons, Payment Icons, Currency Icons und vieles mehr.

https://fontawesome.com/v4.7/icons/

WordPress - Creative Publisher

CSS letter-spacing und word-spacing vergrößern bzw. verkleinern den Platz zwischen aufeinander folgenden Zeichen oder Wörtern – letter-spacing und word-spacing werden zum normalen Abstand der Zeichen und Wörter addiert oder subtrahiert.

Als Maßeinheit für letter-spacing und word-spacing wirken am besten relative Werte (z.B. die Maßeinheit »em«). Dann wächst der Raum zwischen den Zeichen und Wörtern mit, wenn der Benutzer die Schriftgröße der Seite ändert.

WordPress - Creative Publisher

 

So zeigt man den Button für die Cookie Einstellungen des Complianz Plugin in der Mobile-Version an. Bitte genig Abstand vom Footer zum Ende der Seite lassen.

@media (max-width: 768px) {
#cmplz-manage-consent .cmplz-manage-consent {
display: block;
bottom: -5px!important;
}
}

#cmplz-manage-consent .cmplz-manage-consent {
margin: unset;
}

WordPress - Creative Publisher

Man kann wirklich mittlerweile tolle Buttons mit Icons problemlos in WordPress einfügen. So geht´s:

1. Font Awesome Plugin installieren
2. Schriftzug erstellen
3. Icon auf Font Awesome aussuschen
4. CSS mit Hover Effekt erstellen
5. HTML-Code in Editor einfügen

CSS-Code:

.button{
color: #000;
background-color: #FFFFFF;
text-align: left;
font-size: 16px;
border: 1px solid #000000;
border-radius: 10px;
height: 35px;
text-align: center;
padding-top: 3px;
width: 180px;
transition: all 0.4s;
margin-bottom: 0px;
text-decoration: none!important;
}

.button:hover{
background-color: #7fa500;
border: 1px solid #7fa500;
color: #FFFFFF;
text-decoration: none!important;
}

.button:active{
background-color: #7fa500;
border: 1px solid #7fa500;
color: #FFFFFF;
text-decoration: none!important;
}

In HTML-Code einbetten:
<p class=”button” style=”text-align: center;”><a href=”tel:+491712222222″><i class=”fas fa-phone-alt”></i>

 

Beispiel Buttons:

 0171 2222222

Font Awesome

Newsletter

 

 

 

WordPress - Creative Publisher