Fertiges Design vs. leere Leinwand mit unbegrenzten Möglichkeiten

Beim Durchstöbern von Themes kann es passieren, dass uns ein Thema aufgrund seines Designs und der Vorstellung, dass wir uns nicht mit Designern beschäftigen müssen, sehr gut gefällt. Vielleicht gefallen uns auch einige seiner Funktionen, weil sie genau das sind, was wir brauchen. Oder weil das Theme kostenlos ist und über einige vorgefertigte Vorlagen verfügt, mit denen wir schnell eine Website einrichten können. Das klingt alles gut, aber jedes Thema hat seine Grenzen. Und mit der Zeit werden sie immer größer und schwieriger zu bewältigen.
Auf der anderen Seite erlaubt uns Elementor mit seiner „Theme Builder“-Funktionalität, zu tun, was wir wollen. Entwerfen Sie benutzerdefinierte Kopf- und Fußzeilen und Widgets. Entscheiden Sie, auf welchen Seiten ein Element erscheinen soll und auf welchen nicht (Benutzerdefinierte Anzeigebedingungen). Erstellen Sie dynamische Inhalte, die für Online-Shops, Listen-Websites und Blogs unerlässlich sind. Und all dies wird durch einen „Drag-and-Drop“-Ersteller erledigt.

Responsive Design leicht gemacht

Im Zeitalter von „Mobile-first everything“ ist die Reaktionsfähigkeit der Schlüssel. Elementor versteht dies und bietet eine intuitive Schnittstelle, die sicherstellt, dass Ihre Website auf jedem Gerät atemberaubend aussieht. Sie haben 100 % Kontrolle darüber, wie Ihre Website auf dem Handy, dem Tablet und dem Desktop aussieht.
Wenn Sie ein Thema verwenden, können Sie auf viele Hindernisse stoßen, wenn Sie Ihre Website mobilfreundlich gestalten. Die meisten Themes sind zwar mobilfreundlich, aber wenn Sie etwas ändern möchten, benötigen Sie mit Sicherheit benutzerdefiniertes CSS. Und das ist schwer, besonders für einen Anfänger.

Maßgeschneiderte Leistung

Viele fortgeschrittene Entwickler werden sagen, dass Elementor einen schweren DOM-Baum (alle HTML-Elemente innerhalb einer Seite – Titel, Text, Bilder usw.) erzeugt, der eine Website verlangsamt. Das stimmt, aber wenn Sie Ihre Seiten verantwortungsbewusst aufbauen, sind die Auswirkungen auf die Geschwindigkeit der Website nicht groß. Mit fast jedem Update führt Elementor neue Leistungsverbesserungen ein, die die Geschwindigkeit Ihrer Website erhöhen.

Wenn Sie ein vorgefertigtes Thema verwenden, nehmen Sie, was Sie bekommen. Wenn das Thema viele Skripte laden muss, um zu funktionieren, können Sie sie nicht stoppen, oder zumindest wird es nicht einfach sein, und Sie müssen einen Fachmann bezahlen, um Ihnen zu helfen.

Zukunftssicherheit für Ihre Website

WordPress-Updates und Kompatibilitätsprobleme bei Themes – kommt Ihnen das bekannt vor? Elementor ist bereits ein großes Unternehmen, das mehr und mehr Dienstleistungen anbietet und ständig an der Verbesserung seiner Produkte arbeitet. Ein wichtiger Indikator ist ihre Facebook-Community (>146k Nutzer) und ihr YouTube-Kanal, der voller Tutorials ist. Ein weiterer Vorteil ist die unendliche Quelle an Informationen von anderen Youtube-Entwicklern, die zeigen, was man damit machen kann.
All dies ermöglicht es Ihnen, Ihre Website ohne großen Aufwand auf dem neuesten Stand zu halten.

Ein Theme hingegen schränkt Sie ein, und wenn Sie zusätzliche Funktionen hinzufügen möchten, müssen Sie weitere Plugins installieren. Wir haben gesehen, wie Kunden Plugins installiert haben, um ein Telefonsymbol in der unteren rechten Ecke der Website zu erhalten. Oder ein Plugin, um eine obere Leiste zu erstellen, die zum Beispiel einen Hinweis auf kostenlosen Versand enthält. Und das ist völlig unnötig.

Zusammenfassung

Während vorgefertigte Themes in den Herzen von Anfängern ihren Platz haben, überlässt Elementor Ihnen die Blaupause des Architekten und lässt Sie Ihre Traum-Website bauen. Also, liebe Entwickler, nutzen Sie die kreative Freiheit, und investieren Sie in das Erlernen der Funktionsweise von Buildern, damit Sie nicht auf Themes von Drittanbietern angewiesen sind.

Eine Fallstudie mit CarHunters.bg

Lassen Sie uns nun über ein Beispiel aus der Praxis sprechen – CarHunters.bg. Als wir mit dem Aufbau der Website begannen, schien ein vorgefertigtes Theme eine gute Wahl zu sein. Es wurde speziell für ein Autohaus entwickelt. Als sich das Unternehmen jedoch weiterentwickelte, stießen wir auf Hindernisse. Die 24-stündige Wartezeit auf den Themensupport und der Umgang mit unnötigem Ballast wurden zur Norm.

Eines Tages bat uns der Kunde, einen neuen Bereich auf der Homepage einzufügen – eine Reihe mit den Logos der CarHunters-Partner. Es hat einfach nicht funktioniert. Und da wurde uns klar, dass ein Wandel unvermeidlich war.

Die Entscheidung, sich zu befreien

Nachdem wir dieses Thema eine Zeit lang ertragen hatten, beschlossen wir, dass es Zeit für eine Veränderung war. Das Warten auf den Support und der Kampf mit unnötigem Theme-Bloat verlangsamten uns, und was noch wichtiger war: Die Zufriedenheit unserer Kunden stand auf dem Spiel. Die Umwandlung wurde mit Elementor, CPT (Custom Post Types) und ACF Pro (Advanced Custom Fields) durchgeführt.

Mit Elementor, CPT und ACF die Freiheit nutzen

Elementor ermöglichte uns ein uneingeschränktes Design, während CPT und ACF uns die Möglichkeit gaben, benutzerdefinierte Post-Typen und Felder zu erstellen, die auf die sich entwickelnden Bedürfnisse von CarHunters.bg zugeschnitten sind.

Vorbei sind die Zeiten, in denen man auf Theme-Support warten oder sich mit unnötigen Funktionen herumschlagen musste. Heute entwickeln und optimieren wir nach Belieben und erfüllen die Bedürfnisse unserer Kunden in Echtzeit. Das Hinzufügen von benutzerdefinierten Beitragstypen wie „Autos zum Verkauf“ und „Auktionsfahrzeuge“, die wöchentlich aktualisiert werden, ist ein Kinderspiel geworden.

Im Wesentlichen hat das Trio Elementor, CPT und ACF unsere Website-Entwicklungserfahrung umgedreht. Wir sind nicht mehr an thematische Beschränkungen gebunden, und unser Kunde wird sich in nächster Zeit nicht nach einem anderen Entwickler umsehen.

Zum Mitnehmen

Wenn Sie lernen, Themes mit Elementor selbst zu erstellen, können Sie Ihre Fähigkeiten ausbauen und mit der Zeit komplexere Websites erstellen. Sowohl in Bezug auf die Funktionalität als auch auf das Design.

Zum Wohl!

Quellen

Dieser Artikel wurde ausschließlich aufgrund der Erfahrungen des Autors erstellt. Ai wurde verwendet, um die Struktur zu erstellen. Die erwähnte Fallstudie ist echt und die überprüfte Website ist live.

In dem Beitrag erwähnte Tools

Elementor – https://elementor.com/
CPT (Custom Post Type) – https://wordpress.org/plugins/custom-post-type-ui/
ACF (Erweiterte benutzerdefinierte Felder) – https://www.advancedcustomfields.com/

The post Warum die Verwendung von Elementor besser ist als die Verwendung eines vorgefertigten Themes appeared first on Simplifix Studio.

Schritt 1: Kaufen Sie eine Domain

Bevor Sie eine Webseite erstellen, müssen Sie eine Domäne erwerben. Sie können dies bei vielen Hosting-Unternehmen wie Superhosting, Siteground oder GoDaddy tun.

Schritt 2: Wählen Sie ein zuverlässiges Hosting

Die Auswahl eines zuverlässigen Hosting-Anbieters ist der erste Schritt zum Aufbau einer erfolgreichen Webseite. Ein wirklich guter Anbieter ist SuperHosting, der eine Reihe von Tarifen anbietet, wobei sich der Tarif „SuperPro“ besonders gut für eine geschäftliche Webseite eignet. Es bietet die Ressourcen und Funktionen, die für eine optimale Leistung Ihrer Webseite erforderlich sind.

Für diejenigen, die wenig oder gar kein technisches Wissen haben, bietet SuperHosting einen wertvollen Service namens „Professional WordPress Maintenance“. Dieser Service kann Ihnen bei Problemen mit Ihrer Webseite viel Zeit ersparen, denn das Expertenteam kümmert sich in Ihrem Namen um technische Aspekte, Aktualisierungen und Fehlerbehebung.

SuperHosting ist bekannt für seinen ausgezeichneten Kundendienst. Die Live-Chat-Funktion ermöglicht schnelle Antworten, in der Regel innerhalb weniger Minuten. Selbst bei komplizierteren Problemen ist das Support-Team dafür bekannt, dass es die Probleme schnell löst, oft innerhalb weniger Stunden. Diese Reaktionsfähigkeit hebt SuperHosting von anderen Hosting-Anbietern ab und sorgt für ein reibungsloses Erlebnis für Webseite-Besitzer.

Schritt 3: WordPress installieren

SuperHosting vereinfacht den WordPress-Installationsprozess mit dem „WordPress Manager by SuperHosting“. Mit nur einem Klick können Sie WordPress auf Ihrer Domain installieren, was den Einrichtungsprozess schnell und effizient macht. Wenn Sie einen praktischen Ansatz bevorzugen, bietet dieses Tool eine intuitive Schnittstelle für die Verwaltung Ihrer WordPress-Installation.

Wenn Sie auf Schwierigkeiten stoßen oder es lieber etwas ruhiger angehen lassen möchten, können Sie sich auch einfach an das Support-Team von SuperHosting wenden. Sie stehen Ihnen jederzeit zur Verfügung und können WordPress für Sie installieren, sodass ein reibungsloser Ablauf gewährleistet ist.

Schritt 4: Installieren Sie das Thema „Hello Elementor“.

Sobald WordPress installiert ist, navigieren Sie zum Abschnitt „Themes“ im WordPress-Dashboard. Installieren und aktivieren Sie das Thema „Hello Elementor“. Sie ist perfekt mit dem Elementor Page Builder kompatibel.

Schritt 5: Installieren Sie den Elementor-Builder

Gehen Sie zum Abschnitt Plugins im Admin-Dashboard von WordPress und installieren Sie das Elementor-Plugin.
Denken Sie daran, dass Sie für erweiterte Funktionen in die Pro-Version von Elementor investieren sollten. Der Elementor Pro Plan kostet $59. Diese Investition kann Ihre kreativen Möglichkeiten erheblich erweitern und ermöglicht eine einzigartige und funktionsreiche Unternehmenswebseite.

Es ist wichtig zu wissen, dass Sie, wenn Sie sich für die Pro-Version entscheiden, sowohl die kostenlosen als auch die Pro-Plugins installieren müssen, damit Elementor richtig funktioniert.

Schritt 6: Planen Sie Struktur und Design Ihrer Webseite

Bevor Sie mit dem Design beginnen, sollten Sie die Struktur Ihrer Unternehmenswebseite planen. Identifizieren Sie wichtige Seiten wie Home, Über uns, Dienstleistungen, Kontakt und rechtliche Seiten wie Allgemeine Geschäftsbedingungen, Datenschutz und Cookie-Richtlinie. Diese Planung wird den Entwicklungsprozess rationalisieren.

Elementor bietet kostenlose Vorlagen, die ein guter Ausgangspunkt für Ihr Design sein können. Für ein individuelleres und professionelleres Aussehen sollten Sie jedoch in Erwägung ziehen, das Design zunächst von einem Designer in Figma erstellen zu lassen. So erhalten Sie einen klaren Plan für Ihre Webseite, der die Arbeit während der Elementor-Designphase erleichtert.

Schritt 7: Erstellen Sie die wesentlichen Seiten mit Elementor

Entwerfen Sie die wichtigsten Seiten für Ihre Unternehmenswebseite, einschließlich:

• Hauptseite: Präsentieren Sie Ihr Unternehmen, Ihre Produkte oder Dienstleistungen.
• Seite „Über uns“: Bieten Sie Informationen über die Geschichte, den Auftrag und die Werte Ihres Unternehmens.
• Seite Dienstleistungen: Heben Sie die von Ihnen angebotenen Produkte oder Dienstleistungen hervor.
• Kontaktseite: Fügen Sie ein Kontaktformular und wichtige Kontaktinformationen ein.
• Juristische Seiten:
  • Allgemeine Geschäftsbedingungen (AGB): Definieren Sie die Regeln und Richtlinien für die Nutzung Ihrer Webseite. Und Impressum.
  • Datenschutzrichtlinien: Geben Sie an, wie Sie mit Nutzerdaten und dem Datenschutz umgehen.
  • Cookie-Richtlinie: Erklären Sie die Verwendung von Cookies auf Ihrer Webseite.

Vergessen Sie nicht, eine Kopfzeile und eine Fußzeile zu erstellen. Sie erscheinen auf jeder Seite der Webseite, es sei denn, das Seitenlayout ist auf „Canvas“ eingestellt; in diesem Fall werden Kopf- und Fußzeile nicht angezeigt.
Installieren Sie außerdem ein Cookie-Hinweis-Plugin, um die Datenschutzbestimmungen einzuhalten. Eine empfohlene Wahl ist „GDPR Cookie Compliance“ von Moove Agency.

Schritt 8: Optimieren Sie für SEO mit Yoast SEO

Steigern Sie die Sichtbarkeit Ihrer Webseite in Suchmaschinen mithilfe von Yoast SEO, einem leistungsstarken SEO-Plugin. Dieses Plugin hilft bei der Optimierung Ihrer Webseite für Suchmaschinen und erhöht damit die Chancen auf eine höhere Platzierung auf den Suchergebnisseiten.

Konzentrieren Sie sich zunächst darauf, aussagekräftige Meta-Titel und -Beschreibungen für jede Seite zu verfassen. Diese können im Abschnitt „Seite bearbeiten“ von WordPress hinzugefügt werden.

Wenn Sie eine umfassende SEO-Optimierung und persönliche Unterstützung wünschen, können Sie sich gerne an uns wenden. Wir sind hier, um Ihnen zu helfen, die besten Ergebnisse für Ihre Unternehmenswebseite zu erzielen.

Schritt 9: Kontaktformulare mit Bestätigungs-E-Mails implementieren

Machen Sie es Ihren Besuchern leicht, mit Ihnen in Kontakt zu treten, indem Sie Kontaktformulare auf Ihrer Webseite einfügen. Elementor bietet ein Formular-Widget, oder Sie können ein spezielles Formular-Plugin wie Contact Form 7 verwenden. Stellen Sie sicher, dass Benutzer nach dem Ausfüllen eines Formulars eine Bestätigungs-E-Mail erhalten, und richten Sie die E-Mail so ein, dass sie von Ihrer Geschäfts-E-Mail gesendet wird. Sie können geschäftliche E-Mails über das C-Panel in SuperHosting erstellen. Ziehen Sie die Installation des Plugins „WP Mail SMTP“ in Betracht, um die Zustellbarkeit von E-Mails zu verbessern, und fragen Sie Ihren Hosting-Anbieter nach der korrekten Einrichtung.

Schritt 10: Die Webseite responsiv gestalten

Mit Elementor kann jeder Abschnitt für verschiedene Geräte angezeigt oder ausgeblendet werden. Das ist großartig, denn so können Sie spezielle Designs für mobile Geräte erstellen, ohne die Desktop-Version zu beeinträchtigen.

Schritt 11: Optimierung der Webseite-Geschwindigkeit mit Plugins und Bildkomprimierung

Sorgen Sie für schnelle Ladezeiten Ihrer Webseite durch die Installation von Optimierungs-Plugins. Gute kostenlose Plugins sind W3 Total Cache und Autoptimize, die in der Regel zusammen installiert werden. Wenn Sie ein Neuling in der Erstellung von Webseiten sind, ist es besser, den Hoster nach der korrekten Einrichtung zu fragen, um mögliche Layout-Probleme zu vermeiden.

Für eine fortschrittlichere und kostenpflichtige Lösung können Sie WP-Rocket verwenden, das $59 pro Jahr kostet. Dieses Plugin beschleunigt Ihre Webseite erheblich und bietet zusätzliche Optimierungsfunktionen. Darüber hinaus ist die Optimierung von Bildern entscheidend für die Leistung einer Webseite. Verwenden Sie Online-Tools wie Image Resizer , um die Größe von Bildern zu ändern, und Image to WebP, um sie in das WebP-Format umzuwandeln. Für eine optimale Leistung sollten Sie eine Bildgröße zwischen 20 und 50 KB anstreben.

Zusammenfassung

Wenn Sie diese elf einfachen Schritte befolgen, können Sie eine professionelle und funktionale Unternehmenswebseite mit WordPress erstellen. Die Wahl des richtigen Hosting-Pakets, die Inanspruchnahme professioneller Wartungsdienste und ein reaktionsschneller Kundensupport tragen zu einer reibungslosen Webseite-Erstellung bei. Der Aufbau einer starken Online-Präsenz ist ein Schlüsselfaktor, wenn es darum geht, Ihre Zielgruppe zu erreichen und Ihr Unternehmen in der digitalen Landschaft auszubauen.

Wenn Sie Fragen haben oder professionelle Hilfe benötigen, können Sie sich gerne an uns wenden. Wir sind hier, um Sie auf Ihrem Weg zu einer erfolgreichen Online-Präsenz zu unterstützen.

Quellen

Die Informationen in diesem Artikel beruhen auf den Erfahrungen des Autors aus dem wirklichen Leben. Viele der Informationen stammen aus stundenlanger Fehlersuche, Gesprächen mit dem Kundensupport von Hostern und Plugin-Autoren und reiner Internetrecherche. Alle oben genannten Punkte wurden auf Live-Websites getestet und umgesetzt. Die künstliche Intelligenz hat dazu beigetragen, die Struktur des Artikels zu erstellen.

Nützliche Ressourcen

https://www.superhosting.bg/ – Offizielle Website von Superhosting
https://elementor.com/ – Elementor Builder
https://wp-rocket.me/ – WP Rocket Optimierungs-Plugin
https://wordpress.org/plugins/autoptimize/ – Autoptimize Optimierungs-Plugin
https://wordpress.org/plugins/w3-total-cache/ – W3 Total Cache Optimierungs-Plugin
https://wordpress.org/plugins/wordpress-seo/ – Yoast SEO Plugin

The post Wie man eine Business-Webseite mit WordPress und Elementor in 11 einfachen Schritten erstellt appeared first on Simplifix Studio.

Entfernen von Elementen mit Ihrem Theme oder Builder

Eine Möglichkeit ist, das unerwünschte Element aus dem Theme zu löschen oder den Builder zu verwenden (Elementor, Divi, WPBakery usw.). Das Problem ist jedoch, dass unerfahrene Entwickler oft nicht wissen, welches Element was erzeugt und daher sind sie nicht in der Lage es zu entfernen. Zum Glück gibt es eine einfache Lösung.

Video

Lernen Sie anhand eines Video-Tutorials Schritt für Schritt, wie Sie ein Element in Ihrer WordPress-Website ausblenden können.

Schritt 1: Prüfen Sie das Element

Als Erstes müssen Sie Ihre Website auf der Seite öffnen, auf der sich das zu unwünschte Element befindet. Markieren Sie dann das Element, klicken Sie mit der rechten Maustaste und klicken Sie auf „Inspizieren“ (für Chrome).

Schritt 2: Identifizieren Sie das Element im Code

Dann sehen Sie, welches Element Sie zur Prüfung ausgewählt haben (es wird hervorgehoben). In unserem Fall ist es

<h2 class="elementor-heading-title elementor-size-default">...</h2>

Schritt 3: Kopieren Sie den entsprechenden Code

Oben rechts sehen Sie die Stile, die das Element beeinflussen (im weißen Rechteck). Das Einzige, was Sie tun sollten, ist, den gesamten Code zu kopieren. In unserem Fall:

.elementor-162795 .elementor-element.elementor-element-41227282 .elementor-heading-title

Schritt 4: Anpassen im WordPress-Admin

Schließen Sie dann das Inspektorfenster und klicken Sie auf die Schaltfläche „Anpassen“ in der oberen Leiste Ihres WordPress-Administrators. Sie müssen als Administrator eingeloggt sein, um sie zu sehen.

Schritt 5: Zusätzliche CSS

Klicken Sie auf „Zusätzliches CSS“.

Schritt 6: Einfügen und Ausblenden

Fügen Sie den Code, den Sie kopiert haben, in den Code-Editor ein. Fügen Sie dann einfach den folgenden Code ein:

{
display:none;
}

Und voilà, das Element ist versteckt!

Wenn Sie Hilfe beim Aufbau Ihrer Website benötigen oder einfach nur einen freundlichen Ratschlag wünschen, zögern Sie nicht, uns zu kontaktieren!

Zum Wohl!

Quellen

Die Quelle für dieses Tutorial sind ausschließlich die Erfahrungen des Autors aus dem wirklichen Leben. Zum besseren Verständnis werden auch Screenshots und ein Screencast erstellt.

Nützliche Ressourcen

https://www.w3schools.com/css/css_display_visibility.asp – CSS-Eigenschaft ‚display‘ erklärt

The post Wie kann ich ein Element auf meiner Website ausblenden? appeared first on Simplifix Studio.