Einer unserer lieben Kunden fragte, wie wäre es, wenn wir eine Salon-Website entwerfen würden? Nun, hier sind wir. In diesem Blog geht es um unsere typische Salon-Website namens 'Gesellschaftsraum‘.
Es gibt so viele Arten von Salon-Websites im Internet. Da wir Schönheit von ganzem Herzen schätzen, haben wir uns für ein Schönheitssalon-Thema entschieden. Daher ist unsere entworfene Website ein Schönheitssalon Website.
Fangen wir an!
Gestaltung einer Salon-Website mit Elementor und Element Pack
Zunächst möchten wir Ihnen die Instrumente vorstellen, die wir verwenden werden.
Wir alle kennen Elementor, den großartigen Page Builder, den jeder im Jahr 2021 liebt. Es ist ein großartiges Tool, für das Sie keine Programmierkenntnisse benötigen. Sie können eine Website nur mit Ihrer eigenen Fantasie erstellen.
Und das Element Pack Pro ist ein Werkzeugpaket, das speziell für Elementor entwickelt wurde und über 150 wichtige Widgets enthält. Es wird Ihr nächstes Lieblingswerkzeug für die Gestaltung schöner Webseiten sein.
Weitere Informationen finden Sie auf deren Websites. Lassen Sie uns nun unsere neue Salon-Website gestalten.
Los geht's!
Vergewissern Sie sich zunächst, dass Sie beides haben Elementor und Element Pack auf Ihrem Armaturenbrett installiert.
Gehen Sie dazu auf Dashboard> Plugins> Neu hinzufügen> und verwenden Sie das Suchfeld.
Gehen Sie dann zu Seiten> Neu hinzufügen>
Geben Sie Ihrer Seite einen neuen Titel und klicken Sie auf "Mit Elementor bearbeiten". Jetzt sind Sie bereit, die Segel zu setzen.
Helden-Sektion
Der Heldenbereich ist das erste, was Sie sehen, wenn Sie eine Website öffnen. Deshalb ist es notwendig, sich mehr auf diesen Teil zu konzentrieren. Bei der Gestaltung nicht nur von Salon, sondern von jeder Website ist es unerlässlich, diesem Bereich maximale Aufmerksamkeit zu widmen.
Kopfzeile
Stufe 1
Erstellen Sie einen 3-spaltigen Abschnitt und setzen Sie die Navigationsleiste Widget von Element Pack. Dies wird die Hauptmenüleiste der Website sein.
Stufe-2
Fügen Sie die Bild Widget von Elementor und platzieren Sie das Logo in der oberen linken Position.
Stufe-3
Setzen Sie nun die Vorwärts-Taste Widget mit der Bezeichnung 'Jetzt einkaufen' in der oberen rechten Position und ändern Sie die Farbe so, dass sie Ihrem Logo entspricht. Natürlich fügen Sie der Schaltfläche den Link zur Preisseite hinzu.
Stufe 4
Ändern Sie die Farbe des gesamten Bereichs, indem Sie auf das Symbol des Bereichs klicken. Denken Sie daran, dass Sie auf der gesamten Website ein einheitliches Farbmuster verwenden müssen. Dies dient der Perfektion des Designs einer Salon-Website.
Blog für SieBeliebteste Blogs
Erfahren Sie mehr über WordPress
Körper
Stufe 1
Der Hauptteil der Hero-Sektion einer Salon-Website muss minimalistisch sein, ins Auge fallen und die Essenz der angebotenen Dienstleistung/des angebotenen Produkts darstellen.
Wählen Sie also den gleichen Hintergrund wie für die Kopfzeile und passen Sie beide an. Setzen Sie das Widget für die erweiterte Überschrift in die Mitte des Abschnitts und geben Sie ihm den gleichen Namen wie Ihrer Website. Ergänzen Sie es mit einer einfachen Text-Editor Widget unten.
Stufe-2
Um die Funktionen mit Symbolen einzublenden, setzen Sie die Icon-Liste Widget von Elementor.
Stufe-3
Durch das Hinzufügen weiterer Grafiken wird die Attraktivität der Website noch weiter gesteigert. Fügen wir also den Parallax-Effekt zu dem Abschnitt hinzu, indem wir in den Bereich Abschnitt Einstellungen> Bildparallaxe. Wählen Sie geeignete Bilder für diesen Teil.
Abschnitt Eigenschaften
Nach dem Abschnitt über die Helden folgt der Abschnitt über die Merkmale. In diesem Teil werden wir ein wenig mehr Details über die Qualität unserer Dienstleistungen preisgeben. Dies geschieht hauptsächlich, um die Besucher langsam in ein Gespräch zu verwickeln.
Dies ist eine gute Übung, wenn Sie eine Salon-Website entwerfen wollen. Also, los geht's!
Beginnen Sie, wie üblich, mit der Überschrift. Setzen Sie die Erweiterte Überschrift Widget oben auf dem Abschnitt und fügen Sie Text ein.
Legen wir eine Erweiterter Teiler Widget unterhalb der Überschrift. Dieses Widget hat eine Menge cooler Trennlinien-Skins. Wählen Sie einfach die, die Ihnen gefällt.
Für die Feature-Informationen platzieren Sie die Erweiterte Icon-Box Widget von Element Pack. Hier können Sie mit nur einem Werkzeug Emoji, eine Schaltfläche MEHR LESEN und Text platzieren.
Bereich Service
Jetzt werden wir den angebotenen Dienst/das angebotene Paket in einem völlig neuen Abschnitt anzeigen.
Ähnlich wie bei der vorigen Version besteht das grundlegende Erscheinungsbild aus einem Titel, einem Untertitel und einer Trennlinie.
Für den Rest haben wir die Benutzerdefinierte Galerie Widget und zeigte die Dienstleistungen an, die wir im Allgemeinen anbieten. Auf der Registerkarte "Stil" können Sie durch einfaches Ändern des Randradius für den oberen rechten Teil eine schöne parabolische Form erhalten.
Video Abschnitt
Jede Website, auch eine Salon-Website, gewinnt an Charme, wenn sie mit einem entsprechenden Video versehen wird. Anstelle von reinen Texten zeigt ein Video einen tiefer gehenden Inhalt. Es hat einen großen Einfluss auf die Gewinnung von mehr Besuchern.
Fügen wir einen Abschnitt mit einem unscharfen Hintergrundbild ein.
Hinzufügen einer Leuchtkasten Widget von Element Pack und fügen Sie den Videoinhalt ein, den Sie hier zeigen möchten. Wählen Sie genau wie beim Bild ein passendes Logo, um die Ansicht zu erleichtern.
Sie können auf das Video hinweisen, indem Sie auf beiden Seiten Titel einfügen.
Sektion Personal
Lassen Sie uns die Gesichter unserer Kosmetikerinnen auf diesem Teil der gestalteten Salon-Website anzeigen.
Zu diesem Zweck können Sie die Mitglied Widget. Es zeigt ein Porträt Ihres Mitarbeiters, Namen, Kurzinformationen und Links zu sozialen Medien. Halten Sie die Hintergrundfarbe für den Bereich und die Themen gleich.
Zusätzliche Merkmale
Wir sollten eine weitere Rubrik einrichten, um die Aufmerksamkeit der Leser zu gewinnen.
Erstellen Sie einen zweispaltigen Abschnitt und platzieren Sie ein vergrößertes Bild auf der rechten Seite und Texte auf der linken Seite. Vergessen Sie nicht, am Ende eine CTA-Schaltfläche hinzuzufügen.
Menschen lieben Zahlen. Versuchen Sie also, mehr Informationen über Ihre Dienstleistungen zu zeigen, indem Sie die Fortgeschrittener Zähler Widget.
Testimonial der Kunden
Das Zeugnis der Kunden ist eine der wichtigsten Karten, die man ausspielen kann. Sie tragen dazu bei, bei neuen Besuchern ein positives Gefühl zu erzeugen. Und dies ist der perfekte Zeitpunkt, um die Testimonial-Karussell Widget.
Erstellen Sie einfach einen neuen Abschnitt mit einem anständigen Hintergrundbild und platzieren Sie das Widget in der Mitte. Geschafft!
Sofern Sie die Größe des Inhalts nicht anpassen müssen, können Sie die Standardeinstellungen bedenkenlos übernehmen. Fahren Sie fort, wenn Sie mit dem Design zufrieden sind, das gut zur Salon-Website passt.
CTA
Der nächste Schritt ist das Hinzufügen eines Aufrufs im unteren Teil Ihrer Website.
Lassen Sie uns zunächst einen Abschnitt mit Hilfe der grundlegenden Abschnittseinstellungen entwerfen. Klicken Sie auf den Abschnitt Symbol, gehen Sie zu Form-Teiler, und wählen Sie Welle Pinsel von der Typ Option.
Danach platzieren Sie Ihre CTA-Schaltfläche zusammen mit einem passenden Titel und Auszug.
Blog für SieEditor's Pick
Lernen Sie jetzt, hervorragende CTAs zu erstellen!
Fußzeile
Beenden Sie Ihre Seite schließlich mit einer funktionsreichen Fußzeile.
Erstellen Sie einen Abschnitt mit 4 Spalten und einem dunklen Hintergrund. Ändern Sie die Farbe der Spalte nach Belieben und platzieren Sie die Icon-Liste Widget unter einer Überschrift. Fügen Sie hier die Kontaktinformationen des Unternehmens ein.
Erstellen Sie 2 weitere ähnliche Spalten und fügen Sie weitere Details ein. Fügen Sie zum Schluss die Benutzer-Login Widget als CTA.
Schauen Sie sich die von Ihnen gestaltete Seite an.
Schlussfolgerung
Die Gestaltung einer Website macht Spaß, wenn man die richtigen Kenntnisse und die richtige Planung hat. Bleiben Sie bei uns und haben Sie Spaß daran, weitere ähnliche Webseiten zu erstellen.
Danke, dass Sie noch aufgestanden sind.
Mehr WordPress-Blogs lesen
ul > .bdt-post-list-item; delay: 350;">
WordPress White Screen of Death fix (Alle abgedeckt)
April 29, 2019
Uncategorized
WordPress SEO Plugins im Vergleich
4. Dezember 2020
Uncategorized
WordPress Live-Chat-Plugin: Wo finde ich es und wie kann ich es hinzufügen?
April 5, 2021
Uncategorized
WordPress CDN: Was es ist, Vorteile, Nachteile und wann Sie es verwenden sollten
18. August 2019
Uncategorized
Warum Shortcodes wichtig sind - Bonus-Tricks!
9. Dezember 2020
Element Pack-Tipps, Elementor, WordPress
Top WordPress E-Mail-Plugins für die Automatisierung Ihrer E-Mail-Kampagne
31. Januar 2021
Uncategorized
