So erstellt Ihr Eure Website ohne Code mit dem Power-Builder

Der Aufbau einer eigenen Website kann echt mühselig sein. Vor allem, wenn man in Bereich Web-Entwicklung ein Neuling ist. Heute möchte ich Euch am Beispiel eines unserer Themes, Builderry - WordPress Theme für Baufirmen, zeigen, wie Ihr es leicht an Eure Bedürfnisse anpassen könnt.

Dieses Template wurde sorgfältig von unserem Team der engagierten Designer für unterschiedliche Bauunternehmen entwickelt. Um Euch zu zeigen, wie cool der Anpassungsprozess sein kann, werden wir es in ein Website-Theme für Entwicklungsstudios umwandeln.

Das Großartige an diesem Theme ist, dass es auf Cherry Framework 5 basiert und  den eingebauten Power-Builder hat, um den Anpassungsprozess zu erleichtern.

Power-Builder ist ein sehr nützliches Werkzeug zur Änderung des Erscheinungsbildes Eurer Website ohne eine einzige Codezeile berühren zu müssen.

Ein kurzer Überblick über meine Idee:

Ich möchte eine Website für ein Projekt namens 'Startup Express' aufbauen. Der Grundgedanke meines imaginären Projektes ist es, jungen Entwicklern, Designern und talentierten Menschen die Möglichkeit zu geben, miteinander zu kommunizieren und  ein gemeinsames Projekt starten zu können.

'Startup Express' benötigt eine Website mit einem völlig anderen Look.

U n s e r e  Anpassungsreise beginnt jetzt!

Nach dem Kauf unseres Themes erhalten wir einen Link zur Dokumentationsseite mit allen genauen Anweisungen zur Installation und Aktivierung.

Um auf den Power-Builder zuzugreifen, gehen wir einfach zu 'Seiten'> 'Alle Seiten'. Wir werden die Vorderseite unserer Website bearbeiten, also wählen wir die 'Startseite' aus der Liste.

So sieht der Arbeitsbereich des Builders aus:

Im Grunde können wir alle Elemente auf der Seite entfernen und mit der Drag-and- Drop-Methode hinzufügen. Ganz einfach, nicht wahr?

Zuerst habe ich den Bereich auf unserer Homepage aufgeräumt. Ihr könnt das gleiche tun, entfernt einfach alle Elemente aus dem Arbeitsbereich. Wir erstellen die Seite ganz von vorne, indem wir die Module hinzufügen, die wir tatsächlich brauchen.

Wie wäre es mit einem coolen Bild auf der Oberseite?

Ich säuberte alles meinerseits und ich hoffe, dass ihr es auch tatet. Wenn ja, können wir fortfahren und eine Zeile hinzufügen.

Klickt auf "Modul(e) einfügen" und wählt, was Ihr hinzufügen möchtet. Ich entschied, dass ich ein statisches Bild mit dem Logo auf der Oberseite haben möchte. Also klicke ich auf 'Modul(e) einfügen' und wähle das 'Image' Modul.

Das Modul erscheint auf der Liste und jetzt können wir es anpassen.

Sobald Ihr das Bild ausgewählt habt, das Ihr auf der Oberseite verwenden möchtet, habt Ihr viele Optionen, mit denen Ihr herumspielen könnt. Ihr könnt einen Link in dieses Bild einfügen, die Art und Weise ändern, wie er auf dem Bildschirm erscheinen soll usw.

Ich beschloss, es einfach zu halten, und werde das Bild nicht verlinken,  es wird einfach nur ein niedliches Bild sein, das unser Logo und den Geist unseres Projekts präsentiert. Ich habe auch den Animationsstil "Einblenden" gewählt, ich denke, so sieht es besser aus.

Projektbeschreibung-Block

Was kommt als nächstes? Ich denke, wir sollten dem Besucher erklären, worüber unser Projekt ist und welche Ziele wir im Auge behalten. Um das zu tun, sollten wir die Module 'Text' und 'Button' hinzufügen.

Ich fügte den Text ein und platzierte ihn auf der linken Seite, so dass die Kunden keine Schwierigkeiten beim Lesen des Textes auf dem Bild haben, das ich ausgewählt habe.

Ich möchte eine meiner Lieblingseigenschaften dieses Builders erwähnen. Während wir jedes Modul anpassen, haben wir die Möglichkeit zu entscheiden, ob dieses Modul auf einer der Versionen unserer Webseite angezeigt oder ausgeblendet werden soll.

Jetzt können wir ein Modul in der Tablet-, Telefon- oder Desktop-Version unserer Website mit einem einzigen Klick ausblenden!

Ich möchte auch eine Schaltfläche hinzufügen, die dem Kunden die Möglichkeit gibt, sich sofort mit uns in Verbindung zu setzen und mit uns arbeiten zu können. Die Anpassungstaste ist sehr einfach. Ich habe den Text eingefügt, der auf der Schaltfläche angezeigt wird, die Ausrichtungsoption und den Link ausgewählt, der im neuen Tab mit einem Klick geöffnet werden soll. Fertig, weiter geht's!

Bürolage anzeigen lassen

'Startup Express' hat seinen Hauptsitz in New York und wir können jetzt den Bürostandort mit unseren Website-Besuchern teilen, so dass das nächste Modul auf der Homepage das Google Map-Modul sein wird.

Um die Google Maps-Integration nutzen zu können, müssen wir hier den Google Maps-API-Schlüssel erhalten. Dann gehen wir zum "Power-Builder" im WP-Admin und geben den Schlüssel ein.

Jetzt können wir das Google Maps-Modul hinzufügen und sicher sein, dass alles richtig funktioniert.

Ich fügte die Adresse ein und beschloss, den Zoom durch das Mausrad zu deaktivieren. Es liegt an Euch, ob Ihr diese Option verwenden möchtet, aber ich finde es echt nervig.

Präsentation von Projekten

Es ist an der Zeit, die Projekte zu präsentieren, die auf der 'Startup Express'-Plattform gestartet wurden. Das Modul "Projektlaufzeiten" ist in dieser Situation sehr nützlich. Aber was noch nützlicher ist, ist das 'Text' -Modul, mit dem Ihr Euren Website-Besuchern eine kurze Erklärung geben könnt, was dieser Block Eurer Seite präsentiert.

Alle Projekte auf unserer Website sind in einer der acht Kategorien enthalten. Da es viele Projekte auf der Website aufgeführt sind, wird es viel besser sein, diese acht Kategorien anzuzeigen, damit der Kunde den Überblick bekommen und von hier aus starten kann.

Apropos, Ihr werdet auch in der Lage sein, die Projekte mit bestimmten Tags mit Hilfe des "Projektlaufzeiten" -Moduls zu versehen, so dass die Anzeige der Kategorien nur meine Entscheidung ist.

Ich fügte den Text ein und zentrierte ihn. Dann machte ich ihn fett und definierte die Zeile "Wir sind gestartet" als Überschrift.

Das wär's dann gewesen! Das Power-Builder-Tutorial ist vorbei. War doch easy, oder?

Die Ziellinie ist nah, wir sind fast fertig!

Während Ihr noch in Eurem Admin-Panel angemeldet seid, geht bitte zu Eurer Website und klickt auf "Anpassungstaste".

Hier könnt Ihr das Farbschema ändern, Euren Header- und Footerbereich anpassen. Alle diese kleineren Änderungen machen Euer Theme gut aussehend und durchdacht.

Heute haben wir gelernt, wie Ihr Eure Vorlage mit dem Power Builder anpassen könnt. Wir haben keine Codezeile angefasst, aber wir haben das Erscheinungsbild unserer Website komplett verändert und für unsere Firma "Startup Express" bereit gestellt. Hier ist das Ergebnis unserer Arbeit:

Wie Ihr seht, war die Anpassung Eurer WordPress Website ganz einfach. Und selbst wenn Ihr bereits eine fertige Lösung habt, könnt Ihr die Elemente auf Eurer Webseite herumbewegen, entfernen oder hinzufügen.

Auch wenn es mal passieren sollte, das Ihr nicht weiterkommt, keine Sorge! Unser Service-Center mit den engagierten Experten ist für Euch rund um die Uhr da!

Originalquelle