Der schnelle Weg zur eigenen Website und zum eigenen Blog

Der schnelle Weg zur eigenen

Website und zum eigenen Blog

Mathias Scholz

Copyright 2020 EDV-Beratung Scholz, Mathias Scholz, builderall-power.de

Das Werk einschließlich aller seiner Teile ist urheberrechtlich geschützt. Jede Verwertung,

die nicht ausdrücklich vom Urheberrechtsgesetz zugelassen ist, bedarf der vorherigen

Zustimmung der EDV Beratung Scholz. Das gilt insbesondere für Vervielfältigungen,

Bearbeitungen, Übersetzungen und Mikroverfilmungen.

Die Wiedergabe von Gebrauchsnamen, Handelsnamen, Warenbezeichnungen usw. in

diesem Werk berechtigt auch ohne besondere Kennzeichnung nicht zu der Annahme,

dass solche Namen im Sinne der Warenzeichen- und Markenschutz-Gesetzgebung als

frei zu betrachten wären und daher von jedermann benutzt werden dürfen,

Der Inhalt des Buches hat als Thema das Produkt „Builderall“ der amerikanischen Firma

„eBusiness4us“. Sie ist nicht verantwortlich für den Inhalt dieses Buches.

Der schnelle Weg zur eigenen

Website und zum eigenen

Blog

Mathias Scholz

Vorwort

Wenn Sie als Firma, als Freiberufler oder als Verein auffindbar und ernstgenommen

werden wollen, dann führt heutzutage kein Weg an einer eigenen Online-Präsenz

in Form einer Webseite mehr vorbei. Und auch als „Privatperson“

macht es Sinn, z. B. sein Hobby oder seine speziellen Kenntnisse und Fähigkeiten

über eine Webseite Gleichgesinnten vorzustellen und auf diese Weise Kontakte

zu knüpfen oder Gedanken und Erfahrungen auszutauschen (Stichwort

„Blog“). Auch kann man sich mit Hilfe eines gut geplanten Webauftritts ohne

weiteres und mit überschaubarem Aufwand ein Zweiteinkommen aufbauen, in

dem man über selbst gestaltete Sales Funnel sowie Online-Werbemaßnahmen

(„Facebook“, „Instagram“ und „Pinterest“ sind hier die Stichworte) Affiliate-

Produkte veräußert. Es gibt also viele Gründe, warum man sich eine (oder mehrere)

eigene Webseiten zulegen sollte.

Als Firma oder Freelancer werden Sie ohne hin nicht ohne eigene Webseite

auskommen und deshalb wahrscheinlich ins Auge fassen, für mehr oder weniger

viel Geld eine derartige Webseite von einem Dienstleister erstellen zu lassen,

der dann auch (natürlich wieder gegen Bezahlung) deren Betreuung übernimmt.

Aber ist Ihnen bewusst, dass es heute im Zeitalter der Webbaukästen

keine große Kunst mehr ist, eine eigene, professionellen Ansprüchen genügende

Website selbst – und zwar ohne Informatikstudium oder Programmierkenntnissen

– in kurzer Zeit aufzubauen? Eine Webseite, über die Sie zu 100%

Kontrolle haben und die Sie selbst jederzeit erweitern und aktualisieren können?

Wie das genau geht (und noch Einiges mehr) erfahren Sie in diesem

eBook. Und Sie werden sehen – Webseiten gestalten macht auch Spaß!

Unter der Vielzahl von Webbaukästen, die mittlerweile online über das Internet

verfügbar sind, sticht der Sitebuilder „Cheetah“ (so genannt wegen seiner

Schnelligkeit) der amerikanischen Firma „eBusiness4us“ mit einigen Leistungs-

merkmalen hervor, die gerade diesen Sitebuilder sowohl für den Einsteiger als

auch für den Profi interessant machen:

er ist vorlagenorientiert – d. h. Ihnen steht eine ganze Bibliothek von vorgefertigten

Website-Templates für alle möglichen Anwendungsfälle zur Verfügung,

die nur noch individuell angepasst werden müssen. Vorlagen gibt es

übrigens auch auf Elementebasis und können sogar von Ihnen selbst erstellt

werden.

er ist u. a. „pixelgenau“, d. h. alle Elemente einer Webseite können pixelgenau

(über die Elementeeigenschaften, mit der Maus oder den Kursortasten)

positioniert werden.

er arbeitet mit dem drag’n drop - Prinzip, d. h. es werden einfach vorgefertigte

Elemente wie Texte, Bilder, Boxen etc. auf der Webseite platziert und

deren Eigenschaften angepasst.

er ist mit vielen weiteren Tools und Apps, die Builderall insbesondere in den

Bezahl-Plänen zur Verfügung stellt, verzahnt (z. B. mit dem E-Mail Autoresponder

„Mailingboss“ oder mit der genialen Webinar-Software von

Builderall).

er ist responsiv, d. h. die Webseiten sehen ab initio sowohl auf PC-

Bildschirmen als auch auf Smartphones gleich gut aus, ohne dass große Anpassungen

notwendig werden.

Und er ist Bestandteil einer umfangreichen digitalen Marketingplattform mit

Namen „Builderall“, deren Tools und Dienste man in Form von Paketen jederzeit

„hinzumieten“ kann, um beispielsweise nebenberuflich ein lukratives Online-Geschäft

aufzubauen. Und diese Pakete haben es in sich. Sie sind nicht nur

unter einander abgestimmt, sondern sie decken wirklich alle Themenfelder ab,

die man für ein erfolgreiches Online-Marketing benötigt – und zwar ohne dass

Sie die benötigten Tools (z. B. E-Mail Autoresponder, spezielle Social-Media-

Tools, Gestaltungstools etc. pp.) einzeln bei verschiedenen Anbietern erwerben

oder mieten müssen (was die monatlichen Ausgaben dafür erfahrungsgemäß

schnell in die Höhe treibt). Hier bei Builderall können Sie mit dem FREE-Plan

beginnen und schon auf dessen Grundlage schnell das „Webseitenbauen“ und

alles, was dazu gehört, erlernen. Wenn Sie damit zufrieden sind, dann bleiben

Sie dabei. Andernfalls können Sie jederzeit auf eines der Bezahl-Pakete wechseln

mit der Maßgabe, dass Sie diese bei Bedarf monatlich kündigen oder auf

ein jeweils anderes Paket up- oder downgraden können. Und noch etwas: Um

das Free-Paket dauerhaft zu nutzen, müssen Sie weder Kreditkarten- noch

irgendwelche Bankdaten gegenüber dem Plattformbetreiber offenbaren - Ihre

E-Mailadresse (die über Double OptIn verifiziert werden muss) reicht dazu

völlig aus. Es gibt also wirklich keinen Grund für Sie, sich „Cheetah“ nicht einmal

näher anzusehen und seine Fähigkeiten zu erforschen…

Der Schwerpunkt diese eBooks ist nicht Builderall als „Gesamtkunstwerk“, sondern

lediglich der Sitebuilder (Webbaukasten) „Cheetah“, den Sie schnell lieben

lernen, sobald Sie damit Ihre erste Webseite gebaut und im Netz veröffentlicht

haben. Denn um ihn rankt sich die gesamte Builderall Marketing-Plattform mit

ihren über 30 weiteren Tools und Applikationen. Mit „Cheetah“ erstellen Sie

nicht nur komplette Webseiten, die in Goggle etc. hoch ranken, sondern auch

einladende Landingpages, spezielle Verkaufsseiten, geniale Sales Funnel bis hin

zu umfangreichen Blogs. „Cheetah“ ist dabei auch für den HTML- und JavaScript-Profi

offen, denn über spezielle Techniken kann auch Programmcode

in Form von Skripten und HTML-Inline-Code in „Cheetah“-Webseiten eingebaut

werden, mit denen sich wiederum erstaunliche Effekte oder spezielle Funktionen,

die durch die Gestaltungselemente des Sitebuilders nicht abgedeckt werden,

realisieren lassen. Auch dazu werden Sie Beispiele in diesem eBook finden.

Aber lange Rede kurzer Sinn. Melden Sie sich bei Builderall an und beginnen

Sie noch heute die Webseite Ihrer Träume selbst zu entwickeln. Alles was Sie

dazu wissen müssen, finden Sie in diesem Buch!

Hier geht es zum Builderall FREE PLAN

Inhaltsverzeichnis

Vorwort ............................................................................................................................................ 5

Was ist Builderall? ........................................................................................................................... 1

Ein Blick auf das Dashboard ............................................................................................................ 6

Allgemeines zum Thema „Webseiten“......................................................................................... 10

Grundlegendes zu „Webbaukästen“ ............................................................................................ 15

Welche Arten von Webseiten gibt es? ......................................................................................... 18

Online-Shop .............................................................................................................................. 19

Web App.................................................................................................................................... 19

Blog / Digitale Magazine ........................................................................................................... 20

Landingpage .............................................................................................................................. 20

Microsites .................................................................................................................................. 21

Corporate bzw. informelle Websites ....................................................................................... 22

Sales Funnel (Verkaufstrichter)................................................................................................ 22

Zusatztools, die für die Arbeit mit „Cheetah“ sinnvoll sind ........................................................ 24

Cloudinary ................................................................................................................................. 24

Canva – „Das“ Gestaltungstool ................................................................................................ 24

Seobility – um die Suchmaschinen-Optimierung im Auge zu behalten ................................. 25

Chrome-Erweiterungen ............................................................................................................ 26

Ein erster Blick auf den drag’n drop Sitebuilder „Cheetah“........................................................ 27

Webseiten bauen mit „Cheetah“ ................................................................................................. 63

Webseiten werden in „Cheetah“ aus Banner aufgebaut ............................................................ 67

Allgemeines zur Strukturierung einer Webseite mit Banner ................................................. 71

Bildschirm, Seitenhintergrund und Banner ............................................................................. 74

Wie man ein Banner mit Gestaltungselementen belegt ........................................................ 78

Wie man eigene Elemente- und Bannervorlagen erstellt ...................................................... 83

Wie man temporär Elemente auf der Webseite aus- und wieder einblendet ...................... 83

„Rapid Design“ einer ersten Website ........................................................................................... 85

Bannerstruktur der Homepage zusammenstellen .................................................................. 86

Anpassung der Bannerinhalte an die Aufgabenstellung ........................................................ 86

Impressumseite anlegen und im Footer verlinken ................................................................. 94

Anpassung der mobilen Version .............................................................................................. 97

Letzte Arbeiten und Veröffentlichung der Webseite ............................................................. 99

Texte und die Organisation von Texten auf Webseiten ............................................................ 100

Überschriftenstruktur ............................................................................................................. 101

hn - Schriftattribute festlegen................................................................................................ 104

Eigene Fonts einbinden und verwenden ............................................................................... 106

Animationseffekte bei Texten ................................................................................................ 110

Ein detaillierter Blick auf Banner ................................................................................................ 111

Hintergrund und interner Hintergrund ................................................................................. 114

Parallaxeneffekt ...................................................................................................................... 115

Bannertrenner ........................................................................................................................ 115

Banner als Linkziele (Anker) ................................................................................................... 117

Sticky Header .......................................................................................................................... 118

Die wichtigsten Gestaltungselemente im Überblick ................................................................. 119

Boxen als Gestaltungselement und Elemente-Container .................................................... 119

Schaltflächen (Buttons) .......................................................................................................... 123

Arbeiten mit Bildern und Grafiken......................................................................................... 126

Wie integriert man eine Bildergalerie in eine Webseite? .................................................... 133

Eyecatcher für Ihre Webseite: Rotationsbanner .................................................................. 138

Verlinken und Abspielen von Videos ..................................................................................... 140

Es gibt in „Cheetah“ auch eine Video-Galerie… .................................................................... 143

Gestaltungselemente - Linien, Pfeile, Vektorgrafiken und Icons ......................................... 147

Navigationselemente - Erstellung von Seitenauswahlmenüs .............................................. 151

Das Akkordeon-Element ......................................................................................................... 158

Timers ..................................................................................................................................... 160

Animierte Elemente (Counter, Fortschrittsbalken) .............................................................. 162

Objekte einbetten über das iFrame-Element ....................................................................... 163

HTML-Snippets verwenden .................................................................................................... 178

Einfache Kontaktformulare .................................................................................................... 188

E-Mail-Marketing-Formulare in Verbindung mit Mailingboss ............................................. 191

Globale Elemente ........................................................................................................................ 195

Kopf- und Fußbereiche für eine Website erstellen ............................................................... 195

Popups für eine Webseite erstellen ...................................................................................... 199

DSGVO-Einstellungen .................................................................................................................. 203

Wichtige Einstellungen für die ganze Website .......................................................................... 205

Eigene Domän aufschalten und Subdomäns erstellen ......................................................... 209

Website zu einem anderen Builderall-Nutzer transferieren ................................................ 216

Website veröffentlichen oder Veröffentlichung aufheben .................................................. 217

Wichtige Einstellungen für eine Webseite ................................................................................. 218

Nachdenken über SEO................................................................................................................. 224

OnPage-Optimierung .............................................................................................................. 225

Portale und Apps zur Suchmaschinenoptimierung .............................................................. 226

Was ist bei der Suchmaschinenoptimierung zu beachten? ................................................. 230

Verwendung der SEO On-Page Reports von Builderall......................................................... 232

Kurze Onpage SEO-Checkliste für eine Webseite ................................................................. 234

Anmelden der Website in der Google Search Console ........................................................ 235

Cheetah-Website mit Google Analytics verbinden ............................................................... 240

Spezielle Webseiten und Techniken ........................................................................................... 245

Vorhandene Webseiten mit „Cheetah“ nachbauen ............................................................. 245

Erstellung einer idealen Landingpage ................................................................................... 251

Mitgliederbereiche einrichten ............................................................................................... 254

Erstellung einer Booking-Seite, über die ein Seitenbesucher Termine buchen kann ......... 265

Farben und Webseiten ........................................................................................................... 277

Produkte stilvoll in Szene setzen – Mockups designen ........................................................ 282

Browser Push-Benachrichtigungen (Browser Notification) .................................................. 287

Digitale Produkte verkaufen – der Supercheckout .................................................................... 291

Verkauf eines eBooks mit Zahlungsabwicklung über PayPal ............................................... 292

SuperCheckout mit einem Mitgliederbereich verbinden ..................................................... 302

SuperCheckout und Affiliates ................................................................................................. 307

Einen eigenen Blog erstellen ...................................................................................................... 311

Wo finde ich die Blogfunktion in „Cheetah“? ....................................................................... 311

Anlegen eines neuen Blogs und eines ersten Blogbeitrags .................................................. 312

„Connect“ - Blog mit Website verbinden .............................................................................. 317

Feed-Page gestalten ............................................................................................................... 319

Post-Page gestalten ................................................................................................................ 321

Zusammenfassung Blog .......................................................................................................... 323

Mit „Cheetah“ lukrative Sales Funnel bauen und betreiben .................................................... 324

Ein einfacher Leadmagnet-Funnel ......................................................................................... 326

Sales Funnel für viele Zwecke ................................................................................................ 328

Was bieten die bezahlten Builderall-Pläne an Tools und Funktionen? .................................... 332

Der schnelle Weg zum kostenneutralen PREMIUM-Plan .......................................................... 338

Was ist Builderall?

Bevor wir uns mit dem Sitebuilder „Cheetah“ ausführlich beschäftigen wollen,

zuvor noch ein paar Worte zur digitalen Marketing-Plattform „Builderall“

selbst, deren integraler Bestandteil „Cheetah“ ist. Um es gleich auf den Punkt

zu bringen: Planen Sie den Aufbau einer zusätzliche (oder auch hauptberufliche)

Einkommensquelle über das Internet, dann sollten Sie sich die Builderall-

Plattform unbedingt einmal ganz genau anschauen. Denn auf dieser Plattform

finden Sie wirklich alles was Sie brauchen, um erfolgreich eigene digitale Produkte

zu erstellen (Webinare, eBooks, Magazine, Lernkurse) und zu vermarkten

bzw. Fremdprodukte (z. B. über das Amazon-Partnerprogramm, über

Digistore24 oder – noch besser – über den Marketplace der Builderall-

Plattform selbst) als Affiliate gegen Verkaufsprovisionen über mit „Cheetah“

erstellten Webseiten bzw. Sales Funnel zu veräußern.

Im Jahre 2011 setzte sich Erik Salgado, der Gründer der Firma eBusiness4us und

dessen heutiger CEO das Ziel, den besten alle Webbaukästen zu entwickeln und

mit ihm die Marktführerschaft in der Welt zu erobern. Und die aus dieser Idee

entstandene digitale Marketing-Plattform „Builderall“ ist auf gutem Wege,

durch eine ausgeklügelte Preis- und Vermarktungsstrategie dieses Ziel auch zu

erreichen. Mittlerweile sind beispielsweise schon weit über 10.000 Webshops

auf Builderall gehostet und auf dem „Builderall Market Place“ konnten bereits

für mehrere Millionen Dollar digitale Produkte aller Art umgesetzt werden. Die

Mehrsprachigkeit der Plattform und die sich in den einzelnen Ländern schnell

gebildeten Nutzer-Communities garantieren eine weltweite Verbreitung und

Nutzung – und einen entsprechenden Erfahrungsaustausch. Und Builderall ist

alles andere als ein „statisches“ Gebilde. Monatlich – manchmal sogar wöchentlich

– kommen Updates der einzelnen Tools heraus und auch Sie als Nutzer

können mit neuen Ideen und Vorschlägen direkten Einfluss auf deren Weiterentwicklung

nehmen. Oder anders ausgedrückt: mit Builderall wird Ihr Geschäft

zukunftssicher!

1

Vom technischen Standpunkt her stellt die Builderall-Plattform eine spezielle

Web-Applikation dar, d. h. Sie benötigen zur Nutzung einen möglichst schnellen

Internetzugang sowie einen Webbrowser (bevorzugt „Google Chrome“ oder

Firefox). „Schaltzentrale“ ist ein Dashboard, dessen Funktionsumfang mit jedem

Upgrade auf ein größeres Paket (unter Builderall „Plan“ genannt) anwächst.

Mit gewissen Einschränkungen können Sie es sogar selbst individuell

konfigurieren.

Im FREE-Plan stehen Ihnen folgende Applikationen zur Verfügung:

Sitebuilder „Cheetah“

E-Mail-Autoresponder „Mailingboss“ (leadbegrenzt)

der „alte“ „PixelPerfect“ Sitebuilder (wird nicht mehr weiter entwickelt)

Und im voll ausgestatteten PREMIUM-Plan (inklusive der Bonuspakete):


E-Mail-Autoresponder „Mailingboss“

der „alte“ „PixelPerfect“ Sitebuilder

DNS-Manager (zur Verwaltung der eigenen Domänen)

Canvas Funnel Builder

SEO OnPage Report App

Builderall Unlimited Magazine Builder

Mockup Studio

Fotomanager

Marketplace (um eigene digitale Produkte weltweit zu vermarkten)

Post-Planner

WordPress Site Builder

App-Baukasten (um eigene Smartphone-Apps zu erstellen)

CRM (Customer Relationship Management - System)

Das NEUE eLearning (um digitale Kurse zu erstellen)

2

Schwebende Videos

Website Click Map

Builderall Webinar Builder

Instagram Autoresponder

Telegram (zum Erstellen von Telegram-Funnels)

eCommerce (der Zugang zur weltgrößten eCommerce-Plattform „Magento“)

Builderall Directory Builder

Video Tag Tool

Video Funnel Builder

Präsentationen

Animierte Videos

Browser Benachrichtigungen

Professioneller Messenger Chatbot

Share Locker

eLearning

Der „Neue“ Chatbuilder

Skriptgenerator

Social Proof

Roulette (Coupon-System für Amazon)

Video Wrapper

SMS Messaging

Webinar

VA Zugang

Video-Hosting

E-Mail Verwaltung

Sitebot

3

Checkouts (in „Cheetah“ integriert)

Blogfunktion (in „Cheetah“ integriert)

Browser Notification (in „Cheetah“ integriert)

Sales Funnel Builder (demnächst in „Cheetah“ integriert)

Video Hosting (inklusive in „Cheetah“ integrierbaren Player)

HINWEIS: Eine kurze Beschreibung einiger dieser Tools finden Sie im Kapitel

„Was bieten die bezahlten Builderall-Pläne an Tools und Funktionen“?

Bedenken Sie, diese Aufzählung ist nur eine Zeitaufnahme. Wenn Sie dieses

eBook lesen, können schon wieder weitere Tools und Applikationen hinzugekommen

sein.

Abb.: Blick auf das Dashboard des FREE-Planes mit allen in diesem Plan verfügbaren

Tools

Weitere Informationen zu den hier aufgelisteten Tools und Apps finden Sie auf

der Webseite www.builderall-power.de. In diesen eBook kann nur auf einige

wenige davon näher eingegangen werden, soweit es Überschneidungen zu

„Cheetah“ gibt. Das betrifft in erster Linie den E-Mail - Autoresponder „Mailingboss“

sowie Tools wie das „Mockup Design Studio“ und der „Digitale Magazine

Builder“ sowie noch einige andere. Ansonsten finden Sie weitergehende

4

Informationen – oft zusammen mit erklärenden Videoclips – auf der builderallpower-Webseite.

Wie Sie sehen, ist das „Bauen“ von Webseiten nur ein kleiner Teil des Portfolios,

welches Builderall umfasst. Geht es Ihnen nur darum, eine eigene Webseite

oder eine Webseite für Ihre Unternehmung zu erstellen, dann reicht auf

Dauer sicherlich die Funktionalität, die Ihnen im Dashboard des BUILDER-Plans

(oder vielleicht auch schon des FREE-Plans, wenn Sie mit einer Subdomän für

Ihre Webseite zufrieden sind) zur Verfügung stellt. Wenn Sie aber ernsthaft beabsichtigen,

mit Hilfe Ihrer Webseite im Internet Geld zu verdienen, in dem Sie

beispielsweise Produktnischenseiten erstellen, über die Sie als Affiliate Amazon-Produkte

bewerben und gegen Provision vermitteln, dann sollten Sie mit

dem MARKETER-Plan beginnen und später, wenn das Geschäft angelaufen ist,

über ESSENTIAL zum PREMIUM-Plan upgraden. Wichtig ist nur, dass Sie die

damit verbundenen monatlichen Ausgaben weniger als Kosten, sondern vielmehr

als Investition in die Zukunft sehen.

BUILDERALL ist eine webbasierte digitale Marketingplattform, die quasi alle

Tools, die man zum Betreiben eines lukrativen Online-Business benötigt, unter

einer Oberfläche in einer zur Zahl der angebotenen Leistungen geradezu

symbolischen monatlichen Preis anbietet.

5

Ein Blick auf das Dashboard

Nach dem Sie sich mit Ihrer Mailadresse und Ihrem Passwort über die Builderall-Webseite

eingeloggt haben, gelangen Sie auf das Dashboard der digitalen

Marketingplattform. Welche Funktionen darin freigeschalten sind, hängt im

Einzelnen von dem monatlichen Plan ab, den Sie gebucht haben. Wir gehen

hier – wie im gesamten eBook – davon aus, dass Sie ihr „Abenteuer Builderall“

mit dem kostenlosen FREE-Plan beginnen (Link siehe Vorwort).

Nach dem Einloggen sollte in Ihrem Browser (explizit wird „Google Chrome“

empfohlen, aber es gehen natürlich auch alle anderen) das Builderall-

Dashboard (auch „Backoffice“ genannt) angezeigt werden:

Im zentralen Bereich finden Sie alle Builderall-Tools, die Sie momentan benötigen.

Weitere können Sie über die Schaltfläche „Installierte weitere Apps“ jederzeit

aus dem Fundus der von Ihnen gebuchten Pläne hinzufügen. Im FREE-

Plan stehen Ihnen hier nur noch der E-Mail - Autoresponder „Mailingboss“ sowie

ein weiterer Sitebuilder („PixelPerfect“) zur Auswahl. Wenn Sie eine App

6

nicht mehr auf ihrem Dashboard sehen wollen, können Sie diese App unbesehen

löschen. Sie ist dann natürlich nicht für immer verschwunden, sondern

kann bei Bedarf jederzeit wieder neu im Dashboard installiert werden.

HINWEIS: Der „PixelPerfect“ Sitebuilder ist hier nicht ohne Grund mit „ALT!“

gekennzeichnet. Natürlich können Sie ihn verwenden, um Webseiten zu erstellen.

Er ist ähnlich leistungsfähig wie „Cheetah“, aber doch etwas anders

sowohl in den Leistungsmerkmalen als auch in der Bedienphilosophie. Besonders

die Gestaltung der Smartphone-Varianten gestaltet sich hier bedeutend

aufwändiger – da nicht responsiv - als wie in Cheetah. Wir empfehlen,

diesen Sitebuilder nicht zu verwenden, da er weder weiter entwickelt noch

vom Support unterstützt wird.

Auf der Installationsseite des Dashboard finden Sie alle in ihrem gebuchten

Plan zur Nutzung freigeschalteten Apps fett hervorgehoben. Nur diese können

Sie Ihrem Dashboard hinzufügen.

Ansonsten sind alle weiteren Funktionen - so wie üblich - über das oben rechts

angeordnete Hauptmenü erreichbar. Sie sollten es einmal kurz durchklicken.

Wenn Sie den FREE-Plan verwenden, werden jedoch die meisten der unter

„Apps“ aufgelisteten Programme noch gesperrt sein (Sie können aber natürlich

sofort entsprechend upgraden).

Interessanter ist da schon der Menüpunkt „Trainings“ mit dem z. Z. einzigen

Untermenü „Plattformtraining“. Dahinter verbirgt sich eine Sammlung von Vi-

7

deoclips, die jeweils bestimmten Tools oder bestimmten Themen gewidmet

sind. Beachten Sie aber, dass sie z. Z. noch fast ausnahmslos in englischer Sprache

vorliegen (was aber kein Problem sein sollte).

Der Menüpunkt „Hinweise“ führt Sie auf eine spezielle Seite, in welche Builderall-Mitarbeiter

spezielle Informationen in Form von Nachrichten, die für Sie

bestimmt sind, eintragen. Sie sollten diesen Menüpunkt ab und an einmal checken…

Wichtiger ist der Punkt „Support“. Immer wenn Sie technische Probleme, Probleme

mit der Abrechnung gebuchter Pläne, dem Dashboard oder mit einem im

Dashboard angebotenen Tool / App haben, können Sie hier ein Support-Ticket

einreichen. Versuchen Sie dabei Ihre Anfrage bzw. Ihr Problem möglichst ausführlich

in Englisch zu formulieren, da die Tickets gewöhnlich beim Supportteam

in den USA landen. Wenn Sie in dieser Beziehung Schwierigkeiten haben

sollten, dann nutzen Sie bitte den Online-Translation-Dienst „DeepL“, den Sie

über folgenden Link erreichen. Der Builderall-Support wird sich dann um Ihr

Problem kümmern und ihnen innerhalb der nächsten 24 Stunden antworten.

Der Menüpunkt „Add Ons“ führt zu Programmen oder Dienstleistungen von

Drittanbietern und enthält zum Zeitpunkt der Manuskriptanfertigung erst zwei

Unterpunkte (PREMIUM-Plan). Was Sie sich aber auf jeden Fall einmal etwas

ausführlicher ansehen sollten, ist der Bereich „Deutsche Community“. Was

Builderall betrifft, haben sich mittlerweile schon viele Anwender in Facebook-

Nutzergruppen zusammengefunden (Anmeldemöglichkeiten rechts im Dash-

8

boardbereich), die sich gegenseitig unterstützen und Neuigkeiten austauschen.

Insbesondere werden regelmäßig Frage- und Antwortstunden sowie spezielle

themenbezogene Webinare durchgeführt. Damit auch Sie daran teilnehmen

können und Sie auch nichts verpassen, werden sie im „Veranstaltungskalender“

angekündigt:

Aber auch wenn Sie eine für Sie interessante Veranstaltung verpassen sollten –

als Mitglied der Community haben Sie jederzeit Zugriff auf entsprechende Videoaufzeichnungen.

9

Allgemeines zum Thema „Webseiten“

Technisch gesprochen, ist eine „Webseite“ in unserem Sinn ein Hypertext-

Dokument im HTML-Format, welches über eine eindeutige URL (Uniform Resource

Locator) von einem Webbrowser aufgerufen, interpretiert und auf einem

Bildschirm dargestellt werden kann. „In unserem Sinn“ bedeutet hier, dass

es gemäß der reinen Lehre natürlich auch noch andere Dateiformate gibt (z. B.

„pdf“ oder „xml“), die von Webbrowsern über eine URL aufgerufen und dargestellt

werden können und die man deshalb natürlich auch als „Webseiten“ bezeichnen

kann. In diesem eBook soll jedoch der Begriff „Webseite“ als Synonym

für eine HTML-Seite verwendet werden, während der gesamte Webauftritt unter

einer Domain (z. B. www.builderall-power.de) als „Website“ bezeichnet

wird. Eine „Website“ kann deshalb nicht nur aus einer „Webseite“, sondern aus

beliebig vielen, untereinander verknüpften „Webseiten“ bestehen. Ein „Sitebuilder“

ist dann ein Programm zur interaktiven Erstellung von Webseiten

und deren Verlinkung untereinander. Die erste Seite einer Website wird außerdem

gewöhnlich als „Startseite“ oder „Homepage“ bezeichnet. Kurz gesagt,

eine „Website“ besteht (gewöhnlich) aus einer „Homepage“ und einer beliebigen

Anzahl von Unterseiten, wobei jede Unterseite eine eigene URL-Adresse

besitzt (z. B. https://www.builderall-power.de/business), über die sie in einem

x-beliebigen Webbrowser explizit aufgerufen werden kann.

Webseiten werden in der Programmiersprache HTML (Hypertext Markup Language)

erstellt, was an sich sehr aufwändig ist. Deshalb wurden im Laufe der

Zeit spezielle „HTML-Editoren“ entwickelt, die das Programmieren von Webseiten

immer mehr vereinfachten. Der Höhepunkt dieser Entwicklung sind die sogenannten

„Webbaukästen“, die es einem Nutzer ermöglichen, gänzlich ohne

Kenntnisse der komplexen HTML und CSS-Sprache (CSS – Cascading Style

Sheets) im Dialog mit einem Programm – dem „Sitebuilder“ – Webseiten nach

seinen eigenen Vorstellungen zusammen zu bauen. Und genau solch ein besonders

leistungsfähiger und obendrein noch betont einfach zu bedienender

„Webbaukasten“ ist der drag’n drop Sitebuilder „Cheetah“…

10

Wenn Sie am Computer eine Textverarbeitung und ein Malprogramm bedienen

oder Powerpoint-Folien erstellen können, dann können Sie mit Sicherheit

mit dem Webbaukasten „Cheetah“ auch eigene Webseiten erstellen und im

Internet veröffentlichen!

Etwas allgemeiner gesprochen, ist ein Webbaukasten ein sogenanntes „Content-Management-System“

(CMS), dessen Aufgabe es ist, unterschiedliche Medien

(Texte, Bilder, Videos …) zu einem interaktiven Dokument (was meist eine

Webseite ist, oft aber auch ein pdf-Dokument sein kann) zusammenzuführen.

„Klassische“ CMS-Systeme mit einem sehr hohen Marktanteil unter den Webentwicklern

ist beispielsweise „Joomla“ und „WordPress“, wobei „WordPress“

auch unter Builderall betrieben werden kann (ESSENTIEL-Plan).

Als „responsiv“ wird ein CMS-System bezeichnet, wenn die damit erstellten

Dokumente / Webseiten auf allen möglichen Endgeräten (PC-Bildschirme, Tablet

Computer, Smartphones) ohne Qualitätsverlust (was insbesondere Bilddarstellung

und Bedienung betrifft) ausgegeben werden können.

Abb.: Beispiel für responsives Webdesign

Konkret bedeutet die Forderung nach „Responsiven Webdesign“, dass sich die

Webseiten nahtlos an verschiedene Bildschirmauflösungen anpassen müssen

und auch die Bedienphilosophie dem des entsprechenden Endgerätes entspricht

(Desktop – Maus, Tablett – Touchscreen, Smartphone – Burger-Menüs).

In dieser Hinsicht ist „Cheetah“ beispielhaft. Wenn Sie mit „Cheetah“ auf ihrem

PC eine Website erstellen, dann können Sie sicher sein, dass das Ergebnis

auch ohne großartige explizite Anpassungen auf dem Smartphone (oder Tab-

11

let) von vornherein gut aussieht. Aber natürlich besteht auch die Möglichkeit,

die Smartphone-Variante unabhängig von der PC-Variante optisch wie auch

funktionell anzupassen. „Cheetah“ erlaubt ein „echtes“ responsives Webdesign

(beispielsweise im Gegensatz zum gleichzeitig im Builderall-Paket enthaltenen

„PixelPerfect“ Sitebuilder). Dabei sind mit „Cheetah“ erstellte Webseiten nicht

nur einfach „responsiv“, sondern auch „liquide“. Das bedeutet, dass der im

Browserfenster verfügbare Bereich immer im gleichen prozentualen Verhältnis

genutzt wird. Wenn Sie beispielsweise die Breite des Browserfenster auf dem

Desktop-Bildschirm mit der Maus stufenlos verkleinern, so passt sich dessen

Inhalt „liquide“ dem zur Verfügung stehenden Platz an und bleibt sichtbar. Irgendwann

schlägt dann die Ansicht in die Tablet- bzw. Smartphone-Ansicht um.

Und um all dies brauchen Sie sich als Webentwickler dank „Cheetah“ nicht

mehr selbst zu kümmern!

Wie bereits erwähnt, benötigt eine Webseite immer so etwas wie eine Adresse,

über die sie im World Wide Web auffindbar ist. Diese Adresse wird als „Einheitlicher

Ressourcenzeiger“ – engl. „Uniform Resource Locator“, kurz URL – genannt.

Im allgemeinen Sprachgebrauch spricht man gewöhnlich von der „Internet-

oder Webadresse“ der entsprechenden Webseite. Technisch handelt es

sich dabei um eine sogenannte IP-Adresse, dem über einen Namenserver ein

„Namen-Alias“ zugeordnet ist, den man als „Domain“ bezeichnet. Denn Domainnamen

kann man sich merken (z. B. www.welt.de), die dazugehörige IPv6-

Adresse 2a02:26f0:12d:3a1::120a dagegen nicht. Wenn Sie mit dem FREE-Plan

von Builderall arbeiten, lautet die Domain immer „free.builderall.com“, wobei

es sich hier um eine sogenannte „Subdomain“ handelt. Ihre Seiten erhalten

dann jeweils einen eigenen Namen, dem dieser Subdomain-Name nachgestellt

ist, z. B. „scholz-meine-webseite.free.builderall.com“. In der Namenswahl vor

„free.builderall.com“ sind Sie dagegen weitgehend frei. Möchten Sie dagegen

eine eigene Domain aufschalten, die beispielsweise den Namen Ihrer Firma

oder die aus SEO-Gründen ein ganz spezielles Keyword enthält, dann müssen

Sie 1. recherchieren, ob dieser Wunschname überhaupt noch verfügbar ist und

wenn ja, 2. die Domain bei einem Domänenanbieter buchen (das kann übrigens

auch gleich über die Builderall-Plattform erfolgen), was monatliche Kosten verursacht.

Wenn das geschehen ist, ist das „Aufschalten“ auf Ihre mit „Cheetah“

12

erstellte Webseite wiederum kinderleicht. Bedingung dafür ist aber, dass Sie

eines der Bezahl-Pläne von Builderall gebucht haben. Andernfalls misslingt das.

Im BUILDER-Plan können Sie beispielsweise 3 eigene Domains aufschalten, im

PREMIUM-Plan sogar bis zu 15 unterschiedliche. Übrigens ein guter Grund,

zumindest auf den BUILDER-Plan upzugraden…

Datenschutz spielt heutzutage eine besonders große Rolle, weshalb Sie darauf

achten sollten, die sogenannte DSGVO („Datenschutzgrundverordnung“) einzuhalten.

„Cheetah“ macht es Ihnen da relativ einfach, da die dafür notwendige

Funktionalität bereits vorgegeben ist und für eine Webseite nur aktiviert und

eventuell angepasst werden muss. Worum Sie sich aber selbst kümmern müssen,

ist der entsprechende „Text“, den Sie aber leicht über ein Rechtsanwaltsportal

wie Recht24 automatisch rechtssicher generieren lassen können. Er wird

dann analog wie das obligatorische Impressum in die Website integriert.

In diesem Zusammenhang spielt auch die sogenannte „Datenverschlüsselung“

eine Rolle. Das Schlüsselwort ist hier „SSL“ – was erst einmal nur eine Abkürzung

für „Transport Layer Security“ ist. Man erkennt leicht am Übertragungsprotokoll,

ob eine Webseite SSL-verschlüsselt übertragen wird. Es steht dann in

der Adresszeile „https:“ an Stelle von „http:“. Sollten die Seiten Informationen

sammeln, dann kann das dem Browser veranlassen, eine diesbezügliche Warnung

auszugeben, wenn keine SSL-Verschlüsselung vorliegt. Nach dem heutigen

Stand werden die mit dem FREE-Plan erstellten und veröffentlichten Webseiten

noch mit dem alten Protokoll ausgeliefert. Veröffentlichen Sie Ihre mit

„Cheetah“ erstellte Webseite dagegen in einem der Bezahl-Pläne, dann erfolgt

eine Veröffentlichung generell mit SSL-Verschlüsselung (HINWEIS: Das

kann eine Weile dauern, bis das Protokoll greift. Aber ein, zwei Stunden nach

Veröffentlichung sollte es erledigt sein). Wenn Ihre Webseite also Daten sammelt

(z. B. über Eingabemasken), dann ist es angebracht, über eine SSL-

Verschlüsselung nachzudenken und zumindest den BUILDER-Plan von Builderall

(mit noch vielen anderen Vorteilen!) zu buchen…

Mit „Cheetah“ erstellte Webseiten landen übrigens generell auf Webservern

der Firma Builderall, wobei Sie beim Veröffentlichen den Standort grob selbst

festlegen können (USA, Europa,…). eBusiness4us ist damit zugleich Ihr Provider.

13

Eine Übertragung auf einen anderen Provider (z. B. wenn Sie einmal Builderall

kündigen wollen) ist aus technischen Gründen nicht möglich (wie übrigens bei

den meisten anderen Providern auch).

14

Grundlegendes zu „Webbaukästen“

Wie der Name schon vermuten lässt, verwenden „Webbaukästen“ vorgefertigte

„Bausteine“, mit denen man eine Webseite aufbauen kann. Solche „Bausteine“

sind beispielsweise Banner, die eine Webseite vertikal organisieren, Texte,

geometrische Gestaltungselemente, Buttons, Bilder und eingebettete Videos

bis hin zu komplexen zusammengesetzten Bausteinen wie komplette Eingabemasken

bis hin zu aufwändig gestalteten Webseitentemplates. In „Cheetah“

findet man eine große Anzahl solcher „Bausteine“, die hier „Elemente“ bzw.

Webseitentemplates genannt werden. Jedes dieser „Elemente“ liegt oft in vielen

verschiedenen „Grunddesigns“ vor und werden per „drag’n drop“ aus der

entsprechenden Elementepalette in den Designbereich des Sitebuilders übertragen,

wo sie anschließend positioniert und ihre Eigenschaften (z. B. Größe,

Farbe, Umrandung etc.) explizit eingestellt werden können. Sie erkennen hier

sicherlich unschwer das Paradigma der „Objektorientierung“, wie man es in fast

allen modernen Programmiersprachen kennt, nur dass Sie hier als Webdesigner

vollständig von dem im Hintergrund automatisch aufgebauten Programmcode

abgeschirmt sind. Die „Elemente“ sind „Objekte“, die gewisse, vom Objekttyp

abhängige Eigenschaften haben und denen auch u. U. gewisse „Ereignisse“

(beispielsweise in Form eines Links, der zu einer anderen Webseite führt, sobald

man mit der Maus das Objekt anklickt) zugeordnet werden können. Nehmen

wir als Beispiel einen einfachen „Button“ – gewöhnlich unter Windows

auch als „Schaltfläche“ bezeichnet. Seine Größe wird auf der Webseite durch

die Eigenschaften „Breite“ und „Höhe“ festgelegt, die Sie als Webdesigner neben

der Position auf der Webseite pixelgenau einstellen können ohne auch nur

eine Zeile HTML-Code schreiben zu müssen. Eine weitere Eigenschaft ist die

Beschriftung. Auch diese kann man wieder als separates Objekt mit den Eigenschaften

„Text“, „Schriftfamilie“ (Font), Schriftgröße, Schriftfarbe, Schriftattribute

(z. B. „bold“, „italic“) und Textausrichtung auffassen, die alle von Ihnen im

Designprozess individuell eingestellt werden können. Daraus ergibt sich die

enorme Flexibilität von Elementen in einem Webbaukasten. Und da ein Button

natürlich nicht als Selbstzweck in eine Webseite eingebaut wird, dient er ge-

15

wöhnlich als Auslöser einer Aktion, die in „Cheetah“ als „Weiterleitung“ bezeichnet

wird. Sie wird ausgelöst („Ereignis“), wenn man mit der Maus auf die

entsprechende Schaltfläche klickt. Gewöhnlich ist das die Weiterleitung auf eine

interne oder externe Webseite. Aber auch die Veranlassung des Downloads

einer Datei, das Aufblenden eines Popup-Fensters, das Verzweigen zu einem

„Anker“ oder das Verschicken einer vorkonfigurierten E-Mail kann solch eine

„Weiterleitung“ sein. „Cheetah“ bietet hier viele Möglichkeiten (die natürlich

nicht nur auf „Buttons“ beschränkt sind) an.

Das Paradigma der Objektorientierung erlaubt die Vorfertigung von Komposit-

Elementen, wie ganze Eingabemasken, Bildergalerien oder Elementeboxen.

Damit gewinnt man nicht nur Entwicklungszeit, sondern man kann in „Cheetah“

auch fertig konfigurierte Elemente bis hin zu ganzen mit Elementen bestückten

Banner unter einem eigenen Namen als „Vorlagen“ speichern, um sie später

wiederverwenden zu können. Auf diese Weise ist es ein Einfaches, über verschiedene

Websites sein eigenes Corporate Design zu wahren. Der „Extremfall“

von derartigen „Vorlagen“ sind fertig designte ganze Websites, die man als

„Webseiten-Templates“ bezeichnet. Wenn Sie also beispielsweise einen Frisiersalon

Ihr Eigen nennen und Sie für ihn eine Webseite gestalten möchten,

dann müssen Sie in „Cheetah“ nicht von „Null“ anfangen, sondern Sie können

aus der riesigen Template-Bibliothek von Builderall das Template für einen

„Barber Shop“ auswählen und in den „Cheetah“ Sitebuilder laden. Sie haben

dann eine fertig gestaltete professionelle Webseite vor sich (siehe hier die Vorschau),

deren Elemente Sie nun nach ihren eigenen Gutdünken verändern können,

indem Sie nicht benötigte Elemente löschen, die Eigenschaften (insbesondere

Texte) benötigter Elemente anpassen oder neue Elemente oder ganze Seiten

hinzufügen. Aus der speziellen „Barbershop-Webseitenvorlage“ von Builderall

bauen Sie auf diese Weise in Windeseile Ihre eigene professionelle Webseite

ihrer Unternehmung. Besser und einfacher geht es wirklich nicht!

Die Template-Bibliothek von „Cheetah“ ist mittlerweile so umfangreich, dass

man quasi für jeden denkbaren Zweck darin eine geeignete Websitevorlage

finden sollte. Und diese Bibliothek professionell gestalteter Webseiten wächst

ständig weiter…

16

Abb.: Ausschnitt aus der umfangreichen Template-Bibliothek von Builderall

Manchmal hört man das Argument, dass Webbaukästen gegenüber den „Direktcodern“

zu eingeschränkt seien. Das mag im Grunde stimmen. Aber eben

nicht ganz. In „Cheetah“ lassen sich beispielsweise ohne weiteres Skripte (z. B.

für das Facebook-Pixel oder für Google Analytics) als auch Inline-HTML-Code

mittels eines speziellen Elements einfügen, was es durchaus lohnend macht,

sich neben dem Sitebuilder auch noch etwas mit nativer Webprogrammierung

auf HTML-Basis zu beschäftigen. Insbesondere kann man sich damit die großartigen

Snippet-Sammlungen, die im Netz verfügbar sind, für seine eigenen Webseiten

verfügbar machen. Wenn das nichts ist?

17

Welche Arten von Webseiten gibt es?

Webseite ist nicht gleich Webseite. Wenn man so durch das Web surft, dann

kann man doch vielfältige Unterschiede erkennen die es sinnvoll erscheinen

lassen, Webseiten nach ihrem Zweck, ihrer Komplexität und Aufbau zu klassifizieren.

Dabei kristallisieren sich im Wesentlichen 6 Typen heraus wenn es darum

geht, die typischsten Anwendungsfälle im kommerziellen und privaten Bereich

abzudecken. „Suchmaschinen“, „Datenbanken“, „Softwaresammlungen“

und spezielle Webportale (wie hier „Builderall“) gehören sicherlich nicht dazu.

Solche Websites werden i. d. R. langfristig geplant und dann von einer Vielzahl

professioneller Programmierer und Webdesigner umgesetzt – sie sind also

nichts für den einfachen Webseitenbauer. Hier geht es um die Arten von Webseiten,

die man beispielsweise mit einem Webbaukasten wie „Cheetah“ oder

einem CMS wie WordPress ohne tiefgreifende IT-Kenntnisse ohne weiteres

selbst stemmen kann. Bevor ich etwas näher auf die 6 meiner Meinung nach

wesentlichsten Webseitentypen eingehe, hier ein kleiner „Bestimmungsschlüssel“

für einen ersten Überblick:

1 Möchten Sie Produkte oder Dienstleistungen über das Internet vermarkten? Online-Shop

2 Möchten Sie Ihren Kunden ein Softwaretool (App) anbieten? Web App

3 Möchten Sie regelmäßig redaktionelle Inhalte veröffentlichen? Blog

4 Soll die Webseite vorrangig Ihre Unternehmung repräsentieren? Corporate Website

5 Verfolgen Sie mit der Webseite ein ganz konkretes Ziel (Verkauf, Leadgewinnung)?

5a ja

5b nein, dient nur einer Kurzvorstellung bzw. Bekanntmachungen

Landingpage

Microsite

Builderall bzw. „Cheetah“ ist für die Erstellung, Pflege und Bewerbung von allen

diesen Arten von Webseiten geeignet. Doch schauen wir uns erst einmal diese

Seitentypen und ihre Zweckbestimmung etwas näher an.

18

Online-Shop

Das primäre Ziel eine Onlineshops ist der direkte Verkauf von Produkten und

Dienstleistungen. Ihre Besonderheit besteht darin, dass ein derartiger Shop

seine Produkte nicht nur ansprechend und werbewirksam präsentieren muss.

Es hängt auch ein i. d. R. sehr komplexer Bestell - inklusive Bezahlungsprozess

dahinter, der durch die Webseite rechtssicher und adäquat abgebildet werden

muss. Bieten Sie eigene erstellte digitale Produkte an, dann sollten Sie den

Builderall Marketplace für deren (internationale) Vermarktung in Erwägung

ziehen. Wollen Sie eine sehr große Auswahl von Produkten online Vermarkten,

dann bietet sich dafür die Plattform „Magento“ an, die auch im Builderall-

Portfolio vorhanden ist. Wollen Sie dagegen nur einen ganz speziellen „Minishop“

im Internet eröffnen und darüber in eigener Regie Ihre Produkte vertreiben,

dann können Sie sich mit „Cheetah“ und den darin integrierten „Super-

Checkout“ – Tool ohne Weiteres einen eigenen Online-Shop erstellen.

Web App

Die Programmierung von Softwareanwendungen, die direkt in einem Internetbrowser

laufen, ist keine Domäne von Webbaukästen, denn sie erfordern eine

individuelle Programmierung auf der Grundlage der von Webdiensten zur Verfügung

gestellten API’s. Etwas anderes ist es, wenn Sie beabsichtigen, Apps für

Smartphones zu entwickeln. Hier stellt Ihnen Builderall ab dem ESSENTIAL-Plan

den „Smartphone App Builder“ zur Verfügung. Damit können Sie – z. B. als Restaurantbetreiber

– eine spezielle Smartphone-App entwickeln, die Sie dann Ihren

Kunden zur Verfügung stellen. Die Nutzer dieser App können sich dann regelmäßig

über ihr Speisen- und Getränkeangebot oder über anstehende Veranstaltungen

informieren bzw. Restaurantplätze oder Veranstaltungstickets vorbestellen.

Wenn Sie den ESSENTIELL-Plan von Builderall buchen, sollten Sie auf

jeden Fall einmal einen Blick auf diese nützliche Applikation werfen oder noch

besser, sie einmal selbst ausprobieren. Sie werden von den funktionellen Möglichkeiten

und der Einfachheit des visuellen Designs einer Smartphone-App

überrascht sein und vielleicht sogar Geschmack an deren Entwicklung finden.

19

Blog / Digitale Magazine

Wenn Ihre Stärke im Content-Marketing liegt oder Sie einfach nur Spaß haben,

ihr Wissen mit anderen Gleichgesinnten zu teilen, dann bietet sich dafür ein

Blog oder eine Webseite im „Magazin-Stil“ an. Blogs sind geradezu dafür konzipiert,

regelmäßig neuen Content bereitzustellen, der sogar von mehreren Autoren

verfasst sein kann. Mit Blogs lassen sich schnell große Leserscharen einfangen

– wenn es das Thema hergibt und regelmäßig dazu neue Beiträge eingestellt

werden. Besonders wichtig sind hier auch die Interaktionsmöglichkeiten,

die man dem Blogbesucher zur Verfügung stellt. Die Bereitstellung einer Kommentarfunktion

ist dabei obligatorisch. Und natürlich sollte ein Blogbeitrag

immer auf sozialen Netzwerken teilbar sein, um die Reichweite des Blogs kontinuierlich

auszubauen. Hier wird es Sie vielleicht besonders freuen, dass es mit

„Cheetah“ vergleichsweise einfach ist, eine Website mit einem selbst erstellten

Blog auszustatten (siehe hier). Denn „Cheetah“ stellt alle Bausteine, die man

dazu braucht, als Templates bzw. als separate Elemente in seiner Elementeauswahl

zur Verfügung. Und wenn Sie lieber einen Blog mit WordPress aufsetzen

möchten (denn gerade dafür wurde ja auch einst dieses Content Management

System entwickelt), auch WordPress steht ab dem ESSENTIAL-Plan

jedem Nutzer der Builderall-Plattform zur Verfügung.

Noch ein Wort zu digitalen Magazinen. Im PREMIUM-Plan von Builderall finden

Sie den „Digital Magazine Builder“, mit denen Sie hochwertige PDF-Magazine

auf eine besonders einfache Art und Weise erstellen können. Die PDF’s können

Sie dann auf Ihrer Website zum Download anbieten oder aber auch gleich direkt

in eine Webseite einbetten. Allein schon wegen dieses Tools lohnt sich die

Buchung des PREMIUM-Planes.

Landingpage

Als „Landingpages“ werden Websites bezeichnet, die auf den erfolgreichen Abschluss

von Werbekampagnen spezialisiert sind. Ihre alleinige Aufgabe ist es

darauf hinzuarbeiten, dass der Besucher einen „Call to Action“ – Button (CTA

abgekürzt) drückt und auf diese Weise ein Produkt / Dienstleistung erwirbt,

20

sich in eine Newsletter-Liste einträgt, ein Webinar bucht, Bonusmaterial (z. B.

ein kostenloses eBook) gegen seine E-Mail-Adresse tauscht oder anderweitig

Informationsmaterial anfordert. Kurz gesagt, Landingpages dienen in erster Linie

dem Verkauf sowie der Leadgenerierung. Damit sie ihre Aufgabe optimal

erfüllen können, werden sie oft in sozialen Netzwerken aktiv beworben, um

entsprechenden Traffic möglichst zielgenau darauf zu leiten. Außerdem versucht

man gerade solche Seiten möglichst stark für Suchmaschinen zu optimieren

mit dem Ziel, dass sie bei Google und Co für ein ganz bestimmtes Keyword

möglichst auf den ersten Ergebnisseiten ranken. Aber das ist meist ein eher

langwieriger Prozess.

Die Effektivität einer Landingpage lässt sich übrigens mit diversen Analytik-

Instrumenten ganz elegant überwachen. Genannt sei hier nur Google-Analytics,

welches sich sehr leicht in „Cheetah“ - Webseiten integrieren lässt (siehe hier).

Gerade „Cheetah“ ist für die Entwicklung hoch konvertierbarer Landingpages

geradezu ideal geeignet. So kann man mit minimalem Aufwand verschiedene

Versionen einer Landingpage erstellen und veröffentlichen, um über sogenannte

Splittests dann genau diejenigen herauszufinden, die bei der Zielgruppe am

besten ankommen. Und das die Template-Bibliothek von Builderall auch quasi

fertig ausprogrammierte Landingpages für alle möglichen Zwecke anbietet, soll

an dieser Stelle nicht unerwähnt bleiben.

Microsites

Microsites bestehen (Impressum ausgenommen) meist nur aus einer bis maximal

drei Seiten mit einem meist sehr engen inhaltlichen Fokus. Ihr Thema kann

die Kurzvorstellung einer Firma sein (quasi deren Visitenkarte) oder aber der

kurzen Vorstellung eines innovativen Produktes dienen. Bei einer Microsite

steht die kompakte Information (und nicht etwa der Verkauf) im Vordergrund.

Deshalb werden Mikroseiten oft gern von lokalen Ladengeschäften oder von

Freiberuflern aus dem medizinischen und rechtsanwaltlichen Bereich verwendet,

um ihre Dienstleistungen, Kontaktdaten und Öffnungszeiten im Netz zugänglich

zu machen. Auch solche Seiten können von jedermann mit „Cheetah“

21

selbst in kürzester Zeit und minimalen Aufwand entwickelt werden. Aber auch

hier stellt Builderall selbstverständlich eine große Zahl von anpassbaren Templates

zur Nutzung zur Verfügung.

Corporate bzw. informelle Websites

Dieser Typ von „Website“ kommt dem, was wir gemeinhin als „Webpräsentation“

bezeichnen, wohl am nächsten. Sie repräsentiert gewöhnlich ein Unternehmen,

einen Freiberufler, eine Organisation oder einen Verein im Internet

aber auch einer Stadt, einem Dorf oder einer ganzen Region kann sie als Aushängeschild

dienen. Oft ist eine derartige Website streng themenbezogen und

beschäftigt sich beispielsweise mit Fotografie, Modellbahnbau, wissenschaftlichen

Themen, diversen Hobbies und vieles mehr. Sie kann auf Außenwirkung

(Werbung) oder auf Inhalt ausgelegt sein und besteht häufig aus vielen bis sehr

vielen Unterseiten. Für viele Firmen ist eine solche Website das Aushängeschild

an sich, weshalb oft auch keine Kosten und Mühen gescheut werden, um sie

gestalterisch besonders eindrucksvoll und inhaltlich besonders informativ zu

gestalten. Und wenn sie internationale Zielgruppen ansprechen soll, dann sind

solche Webseiten oft multilingual ausgelegt. Corporate Websites enthalten

häufig auch dynamische Elemente, um schnell auf Änderungen (z. B. im Produkt-Portfolio)

reagieren zu können. Denn dann ist es gerade wichtig, dass solche

Änderungen bzw. das Einpflegen von „News“ vom Webseitenbetreiber jederzeit

selbst problemlos ausgeführt werden können und man nicht auf eine

teure und manchmal auch zeitlich ausgelastete Webagentur zurückgreifen

muss. Gerade für informelle Webseiten ist „Cheetah“ geradezu der ideale Sitebuilder.

Sales Funnel (Verkaufstrichter)

Gewissermaßen ein Zwischending zwischen Landingpage und Corporate Website

stellen die sogenannten „Sales Funnel“ dar, die gerade dann, wenn es darum

geht Produkte und Dienstleistungen zu verkaufen, ihre Wirkung entfalten (siehe

hier). Der Begriff stammt ursprünglich aus dem B2B-Bereich und umfasst

22

verschiedene Schritte, potenzielle Kunden zu akquirieren und dann schrittweise

bis zu einem erfolgreichen Geschäftsabschluss zu selektieren. Das Bild des

„Trichter“ rührt dabei daher, dass man „oben“ eine große Anzahl von „Leads“

einspeist und unten, an dessen Ende“, die Geschäftsabschlüsse nur so herauströpfeln.

Die Funktion eines Funnels ist also, dass in jeder Trichterebene potenzielle

Kunden wegfallen, die kein Interesse am Angebot haben. Dadurch erhält

man am Ende nur noch die Kunden, für die sich abgeschlossene Aufträge

oder Produktverkäufe verzeichnen lassen. Ein „Standard Sales Funnel“ besteht

nach der reinen Lehre aus 5 Schritten, die man kurz folgendermaßen benennen

kann:

1. Aufmerksamkeit gewinnen und Zielgruppe ausselektieren (z. B. durch Werbung

in sozialen Netzwerken)

2. Interesse wecken und Datenaustausch (Zielsetzung einer Landingpage)

3. Erstkontakt und Bedürfnisanalyse (Reaktion auf einen erfolgreichen

Landingpage-Besuch)

4. Angebote und Verhandlungen (per E-Mailsequenz oder klassisch Telefon /

Kundenbesuch)

5. Auftrag und Zusammenarbeit

Alle bzw. die meisten dieser Schritte lassen sich über abgestimmte Webseiten

im Zusammenspiel mit E-Mail-Marketing mehr oder weniger komplex abbilden.

Und gerade dafür sind die in den Builderall-Plänen vorhandenen Tools untereinander

ausgerichtet. So wird der z. Z. noch auf den „PixelPerfect“ Sitebuilder

und dem E-Mail Autoresponder „Mailingboss“ abgestimmte „Canvas Funnel

Builder“ demnächst auch für „Cheetah“ verfügbar sein (wenn er es bei Erscheinen

des eBooks nicht bereits ist).

23

Zusatztools, die für die Arbeit mit

„Cheetah“ sinnvoll sind

Bevor wir in diesem Buch voll in den „Cheetah“ Sitebuilder einsteigen soll noch

auf ein paar Tools bzw. Webplattformen hingewiesen werden, die Sie auf jedem

Fall nutzen sollten und die wir auch explizit in den Beispielen verwenden

werden. Sie sind für unsere Zwecke allesamt in der jeweils kostenlosen Form

geeignet. Auf nützliche Browser-Erweiterungen (Chrome betreffend) wird später

in dem jeweiligen Kontext eingegangen.

Wenn Sie es nicht schon getan haben, dann sollten Sie sich jetzt bei folgenden

Webplattformen anmelden:

Cloudinary

Eine gute Idee ist es, Bilder in eine Webseite direkt einzubetten. Eine bessere

Idee ist es, seine Bilder zentral in einem Cloudspeicher zu halten und in den

Webseiten nur darauf zu verlinken. Ein solcher nahezu idealer Cloudspeicher ist

„Cloudinary“, den Sie als „Cheetah“ – Webdesigner auf jeden Fall nutzen sollten.

LINK: Cloudinary – digitale Medien in der Cloud speichern

https://cloudinary.com/

Canva – „Das“ Gestaltungstool

Auch Canva muss man als Webdesigner einfach nutzen. Dieses Portal stellt kostenlos

großartige Funktionen zur Verfügung, mit denen man alle möglichen Arten

von Grafiken mit und ohne Beschriftung erstellen kann. Man suche einfach

nach den besten Grafiken, Fotos und Schriftarten und verwende dann das

drag‘n drop-Tool von Canva, um daraus ein eigenes, atemberaubendes Design

24

zu erstellen. Da man selbst Vorlagen festlegen kann, kann man es ganz ausgezeichnet

nutzen, um beispielsweise Share-Images für mit „Cheetah“ erstellte

Webseiten mit wenigen Mausklicks zu erzeugen.

LINK: Canva – „die“ Plattform, wenn es um Bildgestaltung geht

https://www.canva.com/

Seobility – um die Suchmaschinen-Optimierung im Auge zu

behalten

Wenn Sie möchten, dass Ihre Website nach Veröffentlichung für ausgewählte

Keywords gut – das heißt möglichst auf der ersten und zweiten Seite einer

Suchmaschine wie Google oder Bing – rankt, sollten Sie bereits bei der Webseitenerstellung

mit „Cheetah“ auf eine entsprechende Optimierung achten. Für

den Anfang reicht da das ab dem BUILDER-Plan verfügbare „SEO On-Page Reports“

– Tool völlig aus. Aber Erwarten Sie damit keine Wunder. SEO ist eine

Wissenschaft für sich (siehe hier). Um hier nicht auf verlorenen Posten zu stehen,

sollten Sie sich mit dem Seobility-Webportal etwas näher beschäftigen. In

der kostenlosen Basisversion können Sie eine von Ihnen festgelegte Domäne

einmal komplett pro Tag crawlen, während Sie Einzelseiten generell immer

analysieren können. Das Tool gibt eine ausführliche Einschätzung von deren

Optimierungsstand bezüglich Technik, Struktur und Inhalt zurück. Kommentare

und Hints gehen dabei ausführlich auf die gefundenen Probleme ein und geben

Tipps, wie man sie vermeidet. Diese Tool ist einfach ein "muss" für jeden Webentwickler!

LINK: Seobility – optimieren Sie Ihre Webseiten für Google und Co

https://www.seobility.net/de/

Weiterhin ist es nützlich, wenn Sie ein leicht zu bedienendes Bildbearbeitungsprogramm

zur Hand haben (beispielsweise IrfanView) sowie ein sogenanntes

„Screen capture tool“, um schnell Screenshots anfertigen zu können. Hier hat

sich u. a. „Techsoft Capture“ ganz gut bewährt.

25

Chrome-Erweiterungen

Wenn Sie den Webbrowser Google Chrome verwenden (der zur Nutzung der

Builderall-Plattform explizit empfohlen wird), dann sollten Sie als „Webentwickler“

auch ein paar Browser-Erweiterungen installiert haben (zu finden über

den Google App Store). Dazu ohne Kommentar nur ein paar Anregungen:

Image Downloader (erlaubt das Herunterladen aller Bilder einer Webseite –

Urheberrechte beachten!)

WhatFont (zum Ermitteln der Schriften (Fonts), die auf Webseiten verwendet

werden – ein „muss“)

Measure Dimensions (erlaubt das „Ausmessen“ von Elementen auf einer Webseite)

ColorPick Eyedropper (Bestimmung der Farbe einer ausgewählten Stelle einer

Webseite – ein „muss“)

Super History & Cache Cleaner (zum schnellen Löschen des Browser-cache)

Code Cola (expliziter Zugriff auf die auf einer Webseite eingebundenen CSS-

Dateien, die sich dann auch temporär ändern lassen – einfach einmal anschauen)

SEO META in 1 CLICK (nützliches Tool zur schnellen Prüfung von Meta-Daten

einer Webseite)

Checkbot (schneller SEO-Test einer Website)

26

Ein erster Blick auf den drag’n drop


Egal, welchen „Builderall-Plan“ Sie auch verwenden – im Dashboard (= “Virtuelles

Büro“) wird „Cheetah“ immer auf der Startseite angezeigt werden (wenn

nicht, dann einfach über die Schaltfläche „Installiere weitere Apps“) „nachinstallieren).

Um den Sitebuilder zu starten, drücken Sie einfach mit der Maus

den Button „Öffnen“. Beachten Sie aber auch die Schaltfläche „Hilfe“. Wenn Sie

darauf klicken, dann wird Ihnen im Bereich darunter der Zugang zu diversen

Videos und (eventuell) pdf-eBooks gewährt, wo Ihnen einzelne Funktionen des

Sitebuilder näher erläutert werden:

Sie können aber auch gerne in das „Ausbildungscenter“ von Builderall wechseln

und sich dort diverse Videos anschauen. Leider sind sie (zumindest zum Zeitpunkt

der Skripterstellung dieses Buches) nur in englischer Sprache verfügbar.

Nach dem „Öffnen“ von „Cheetah“ gelangen Sie in die Website - Übersicht des

Sitebuilders. Am Anfang wird sie noch leer sein. Sobald Sie aber anfangen, ei-

27

gene Webseiten zu bauen, wird sich dieser Bildschirm schnell zu füllen beginnen.

Ab diesem Zeitpunkt werden die über spezielle Schaltflächen verfügbaren

Funktionen „Kategorien“, „Sortierung“, „Tag Gruppen“ und irgendwann auch

„Suche“ ihren eigentlichen Zweck entfalten können. Beachten Sie auch, dass

die Ansicht zweigeteilt ist. Im oberen Bereich finden Sie später alle veröffentlichten

Websites (d. h. diejenigen, die im WWW abrufbar sind) und darunter

noch alle „Unveröffentlichten“, also diejenigen, die Sie nur so zur Übung angefertigt

haben oder die noch nicht den Bearbeitungsstand erreicht haben, bei

dem man eine Veröffentlichung wagen kann. Über die vielfältigen Einstellungen

und die vielen websitebezogenen Funktionen, die sich unter einem „…“ – Menü

verbergen, werden wir zu gegebener Zeit noch im Einzelnen eingehen.

Aber zuvor noch kurz eine Erklärung: Der Begriff „Website“ ist hier erst einmal

nur ein abstrakter Begriff, der als „Überbegriff“ der zu dieser „Website“ zusammengefassten

„Webseiten“ dient. Das kann nur eine Einzige sein, aber eine

Website kann durchaus auch einmal einige Hundert Webseiten umfassen – eine

definitive Obergrenze gibt es hier quasi nicht. Was Sie später mit diesem Sitebuilder

entwickeln werden, sind derartige „Webseiten“, die in ihrer internen

Verlinkung dann die entsprechende „Website“ aufbauen. Die Webseite, die im

Internet über die Domänen-URL als Erstes angezeigt wird, nennt man gewöhnlich

die „Homepage“. Sie stellt gewissermaßen das „Eintrittsportal“ Ihrer Website

dar.

Um eine neue „Website“ im „Cheetah“ Sitebuilder zu erstellen, klicken Sie einfach

auf die Schaltfläche „Neue Website“, worauf sich ein kleines Dialogfenster

öffnet. Dort tragen Sie den Titel Ihrer zukünftigen Website ein sowie eine kleine

Beschreibung des Projektes (die Angaben können später natürlich jederzeit

wieder geändert werden):

28

Und nun müssen Sie sich entscheiden, ob Sie die Website von Grund auf selbst

gestalten wollen („Leere Vorlage“) oder ob Sie aus der umfangreichen Template-Library

von Builderall eine für Ihre Aufgabenstellung geeignete Vorlage verwenden

und entsprechend Ihren Wünschen anpassen möchten. Im Normalfall

werden Sie sicherlich mit einer leeren Vorlage beginnen. Aber wenn es schnell

gehen soll oder Ihnen eine von einem Profi gestaltete Website als Ausgangspunkt

geeignet erscheint, dann drücken Sie auf die zweite Schaltfläche. Die

dritte Schaltfläche erlaubt die Verwendung von sogenannten „Smarten Vorlagen“,

die anhand der Antworten eines Fragekatalogs vorkonfiguriert werden.

Wir wollen an dieser Stelle für unser Beispielprojekt ein Builderall-Template für

einen „Barbershop“ auswählen. Klicken Sie also auf „Wähle eine Vorlage“ und

beginnen Sie etwas in der umfangreichen Template-Bibliothek zu stöbern, bis

Sie die Vorlage „BARBER SHOP“ gefunden haben:

29

Wenn Sie mit der Maus das Vorschaubild berühren, dann erscheint in dessen

Mitte eine Schaltfläche mit der Beschriftung „Vorschau“. Klicken Sie einfach

einmal darauf – und das Template wird als Website in Ihrem Browser aufgeblendet.

Hier können Sie sich erst einmal ruhig mit dessen Design und mit dessen

Funktionsweise (Bedienung) befassen, um sich danach zu entscheiden, ob

dieses Template ein guter Ausgangspunkt für Ihre eigene geplante Website ist.

Dass es sich hier um ein Template handelt, erkennen Sie unter anderem daran,

dass die meisten Texte nur als Platzhalter angelegt sind („Lorem ipsum dolor…“).

Auch fehlen oftmals Verlinkungen (z. B. über Buttons) und auch E-Mail-

Formulare und Mitteilungsboxen sind i. d. R. noch nicht konfiguriert. Bedenken

Sie aber, dass Sie alle die Webseiten ausmachenden Elemente später im Editor

anpassen, Texte und Bilder austauschen und auch alle Elemente in ihrer Position

und Größe ändern bzw. auch Löschen können. Und selbstverständlich können

Sie auch neue Elemente in Ihre zukünftigen Webseiten nach Belieben einfügen.

Wenn Ihnen also die Vorlage zusagt, dann schließen Sie das Vorschaufenster

wieder und drücken auf der Vorlagenauswahlseite auf den Button

„Speichern“. Die Vorlage wird augenblicklich in den Sitebuilder geladen und es

wird Ihnen auch sofort die Seitenübersicht der neuen Website „Friseurladen“

angezeigt:

30

Und wenn Sie oben in der Hauptmenüzeile einmal auf „Home“ klicken (oder

ganz links auf das „Builderall-Logo“), dann gelangen Sie wieder auf die uns

schon bekannte Website-Ansicht, auf der nun unter „Veröffentlicht“ Ihre neue

Website „FRISEURLADEN“ angezeigt wird. Um wieder zurück in die Webseitenansicht

zu gelangen, brauchen Sie hier nur auf die Schaltfläche „SEITE BEARBEI-

TEN“ klicken – was Sie auch gleich einmal tun sollten…

Die Webseitenansicht besteht im Wesentlichen aus drei Bereichen. In der Mitte

finden Sie alle einzelnen Webseiten (hier insgesamt vier), aus der Ihre Website

z. Z. besteht. Das sind die Seiten „HOME“, „ABOUT“, „SERVICES“ und „STORE“

(diese Seitenbezeichner können Sie selbstverständlich jederzeit ändern). Oben

befindet sich das „Hauptmenü“ der Seite mit den Funktionen „NEUE SEITE HIN-

ZUFÜGEN“, „VERÖFFENTLICHUNG AUFHEBEN“ und „REPUBLISH“ sowie die

Möglichkeit, über „Home“ bzw. über einen Klick auf das Builderall-Logo wieder

auf die „Website“ - Ansicht zu wechseln. Außerdem finden Sie hier noch eine

Funktion, mit der Sie die Seitenansicht umsortieren können („Sortieren“) sowie

eine Suchfunktion, die immer dann nützlich ist, wenn Ihre Website aus sehr vielen

Einzelseiten besteht. Mit jedem Buchstaben, den Sie dort eingeben, wird

die Ansicht entsprechend dem Seitennamen gefiltert und es werden nur noch

die Webseiten angezeigt, die dem Suchkriterien genügen (ausprobieren!).

Die Schaltfläche „Memberbereich erstellen“ dient dazu, der Website einen sogenannten

„Mitgliederbereich“ hinzuzufügen, auf dem nur bestimmte Personengruppen

(die Sie natürlich festlegen können) Zugriff haben (siehe hier). Solche

„Mitgliederbereiche“ sind Ihnen sicherlich schon auf vielen Homepages

aufgefallen, die dafür im Menübereich häufig eine Schaltfläche mit dem Bezeichner

„LogIn“ zur Verfügung stellen. Unser „Friseurladen-Template“ enthält

keinen solchen Memberbereich. Denn wenn einer vorhanden wäre, dann wäre

die entsprechende Seite – wie folgender Screenshot zeigt“ – im Bereich „Memberbereiche“

der Webseitenansicht gelistet:

31

Ein sehr umfangreiches Menüfeld ist am linken Bildschirmrand angeordnet.

Dieses können Sie aber über die äußerst linke Schaltfläche des Hauptmenüs

ein- bzw. ausklappen. Mit den darin angebotenen Funktionen werden wir uns

später noch ausführlich beschäftigen. Zuvor wollen wir aber eine Seite der

Website „Friseurladen“ in den eigentlichen Editor laden um zu schauen, wie sie

uns dort dargestellt wird und was man dort im Prinzip so alles damit machen

kann. Klicken Sie dazu auf der Seite „HOME“ auf die Schaltfläche „SEITE BEAR-

BEITEN“:

32

Und so sieht er aus, der „Cheetah“ drag’n drop responsive Sitebuilder mit der

im Editiermodus geladenen Homepage unseres Barbershop-Templates!

TIPP: Wenn Sie diese Seite zum ersten Mal aufblenden, dann sollten Sie kurz

die angebotene „Tour“ einmal durchlaufen, in der Ihnen die wichtigsten Bereiche

und Funktionen des Sitebuilders kurz vorgestellt werden.

In der Mitte sehen Sie in seiner ganzen Pracht die Homepage des Barbershop-

Templates. Das ist der Bereich, den man als „Editorfenster“ bezeichnet, weil

darin das „Zusammenbauen“ und „Gestalten“ der Webseite erfolgt. Darüber

befindet sich das Hauptmenü des Editors und rechts (bei kleinen Bildschirmen

ein- und ausklappbar) das sogenannte Randmenü mit der Banner- und Elementepalette.

In diesem Bereich werden außerdem alle „Eigenschaften“ eines im

Editor markierten (= „fokussierten“) Elements angezeigt, so dass Sie sie dort

bequem geändert werden können.

HINWEIS: Das Randmenü ist bei bestimmten Bildschirmgrößen „einklappbar“.

Es ist dann bis auf eine kleine runde Schaltfläche (die dem Aufklappen dient)

unsichtbar. Wenn Sie in diesem Zustand im Kopfmenü eines Elements auf das

Stift-Icon klicken, dann wird nicht das Randmenü aufgeklappt, sondern die

Eigenschaften des Elements in einem separaten, frei positionierbaren Fenster

angezeigt.

Bevor wir das gleich einmal ausprobieren, wollen wir aber zuvor einmal kurz

einen Blick auf die Hauptmenüzeile werfen. Der linke Funktionsblock dient

einmal dazu, wieder zurück in die Webseitenansicht zu wechseln („Häuschen“ –

eventuell werden Sie dabei aufgefordert, zuvor die Webseite zu speichern) und

zum anderen (die nächsten drei Schaltflächen rechts davon), um die Webseite

einmal im Desktop-Modus, im Tablett-Modus und im Smartphone-Modus im

Editor darzustellen. Da „Cheetah“-Websites durchgängig responsiv sind, unterscheiden

sich die Editorfunktionen im Tablett- und Smartphone-Modus nur

marginal, während die Unterschiede zum Desktop-Modus sehr stark sind.

33

Abb.: Editor im Smartphone-Modus

Abb.: Editor im Tablett-Modus

Designt wird eine Webseite generell im Desktop-Modus. Dabei wird im Hintergrund

simultan die Smartphone-Variante mit erzeugt. Sie ist in der Regel sofort

34

ohne weitere Änderungen „brauchbar“, sollte aber im Smartphone-Modus

noch etwas nachbearbeitet werden, um sie designmäßig „aufzuhübschen“ und

vielleicht auch in der Funktionalität noch etwas anzupassen.

Wenn Sie einen „Blick“ auf das Aussehen der Webseite noch während des Designprozesses

werfen möchten, dann können Sie jederzeit über den entsprechenden

Button im Hauptmenü in den „Preview-Modus“ des „Cheetah“-Editors

schalten. Auch hier haben Sie die Möglichkeit, von der Desktop-Ansicht auf die

Smartphone- und Tablett-Ansicht zu wechseln.

HINWEIS: Bevor Sie wieder in den Editor-Modus wechseln können, müssen

Sie die Desktop-Preview aktiviert haben. Nur dann ist rechts im Hauptmenü

der Button „Zurück zum Editor“ sichtbar.

Dem Editor-Modus schließt sich rechts eine Klappbox an, über die Sie bequem

zu einer anderen Seite Ihrer Website wechseln können. Die Auswahl erfolgt

dabei über den Webseitennamen. Schon allein deshalb macht es Sinn, jeder

Webseite einen kurzen, prägnanten (beschreibenden) Namen zu geben (und

nicht etwa irgendetwas „Kryptisches“).

Als nächstes folgt ein „funktioneller“ Menübereich, der u. a. die globalen Schrifteinstellungen

der Webseite sowie das sehr nützliche Randmenü enthält. Die

Schaltflächen wirken dabei wie Schalter, welche die entsprechende Funktion

„aufblenden“ oder wieder „verschwinden“ lassen.

Als Letztes sei noch auf die äußerst wichtige Schaltfläche „Speichern“ hingewiesen.

Diesen Button sollten Sie während des Designprozesses möglichst oft

bemühen, um den erreichten Bearbeitungsstand in der Builderall-Cloud zu

speichern. Dabei können Sie entscheiden, ob die gemachten Änderungen zugleich

auch veröffentlicht werden sollen (d. h. sie sind quasi sofort im World

Wide Web sichtbar) oder erst später.

Schauen wir uns nun die Vorlage etwas genauer an. Sie besteht offensichtlich

aus einem Menübereich ganz oben („Header“), einen Themenbereich in der

Mitte und einem Fußbereich („Footer“) ganz unten. Alle diese Bereiche bestehen

aus einzelnen Elementen wie Texte, Boxen, Slider, Bilder etc., die man mit

der Maus anklicken und damit „fokussieren“ kann. Klicken Sie dazu einmal auf

35

den nicht zu übersehenden Text „BARBERSHOP IS A LIFESTYLE“. Sie sehen, es

wird im Editor ein Rahmen um das Element gezeichnet, welcher links oben ein

sogenannten „Kopfmenü“ mit einzelnen Schaltflächen unterschiedlicher Bedeutung

besitzt. Zugleich werden im Randmenü die einzelnen Eigenschaftskategorien

des Textelements aufgeblendet, die Sie wiederum mit einem Mausklick

darauf öffnen können. Sie verbergen die jeweils spezifischen Elementeeigenschaften.

Sollte das Randmenü die Eigenschaften des fokussierten Elements

gerade nicht anzeigen (z. B. weil eben die Vorlagen-Seite aufgeblendet ist),

dann reicht es aus, im Kopfmenü des Elements auf das Stift-Symbol zu klicken:

Ein Textelement besitzt aber noch eine wichtige Funktion, denn Sie möchten ja

auch gerne selbst Texte eingeben oder vorhandene Texte bzw. Texttemplate

(„Lorem ipsum dolor…“) ändern oder explizit formatieren. Diese Funktion blendet

einen kleinen, aber leistungsfähigen Texteditor auf – und zwar immer dann,

wenn Sie auf ein Textelement einen Doppelklick ausführen:

36

In diesem Modus können Sie – wie Sie es bei einem Texteditor gewohnt sind –

einen Text eingeben, verändern oder anderweitig editieren:

HINWEIS: Der Editor wird geschlossen, sobald Sie in einen Bereich außerhalb

des Textelements klicken.

Wie Sie an diesem Beispiel sehen, ist der neue Text zu lang. Um ihn optimal auf

der Webseite anzuordnen, müsste die Schriftgröße etwas verkleinert werden.

Das lässt sich im Editor erst einmal leicht über die Klappbox „Size“ realisieren.

Da es sich hier aber um eine Header-Überschrift der 1. Hierarchiestufe handelt,

bietet sich hier eine andere Möglichkeit an, nämlich das Heading 1 – Format

generell (d. h. für alle h1-Überschriften der Website) zu ändern. Dazu klicken

Sie im Hauptmenü des Editors auf die mit „A“ beschriftete Schaltfläche und

verringern mit dem Schieberegler der h1-Überschrift die Fontgröße solange, bis

der Schriftzug nur noch eine Zeile auf der Webseite einnimmt. Das dürfte bei

einer Schriftgröße von 80 Pixeln der Fall sein. Wenn Sie möchten können Sie

hier gleich noch global die Schriftgröße für die Smartphone-Variante, die

Schriftart und die Schriftfarbe ändern. Und das geht natürlich separat für jedes

Heading 1 bis 6 sowie für die Absatz-Schriftart (ausprobieren!).

37

Zur Übung können Sie auf diese Weise nun auch alle anderen Texte durch eigene

Texte und eigene Textformatierungen ersetzen.

Nun könnte es sein, dass Sie die Position eines fokussierten Elements auf der

Webseite ändern möchten. Am Einfachsten ist es, das fokussierte Element mit

der Maus an genau den gewünschten Ort der Webseite zu verschieben. Dazu

müssen Sie nur die Maus mit gedrückter linker Maustaste bewegen (Achtung –

die Kursorform ändert sich) und auf diese Weise das Element zum neuen Ort

verschieben. Feintuning machen Sie dann mit den Kursortasten, mit deren Hilfe

sich das fokussierte Element pixelgenau verschieben lässt. Die Größe eines

Elements (bei Texten das umschriebene Rechteck) lässt sich übrigens genauso

mit der Maus (und oftmals über die Eigenschaften „Höhe“ und „Breite“ im

Randmenü) ändern. Nur hier ist der „Angriffspunkt“ der kleine blaue Kreis in

der rechten unteren Ecke, den Sie mit dem Mauszeiger fassen (auch hier ändert

sich spezifisch dessen Form) und mit gedrückter linker Maustaste hin – und her

bewegen können, wodurch sich gleichzeitig die Größe des Elements ändert

(„Feintuning“ bei vielen Elementen über deren Eigenschaftskategorie „Größe“

möglich – Randmenü).

38

Weiterhin finden Sie bei fast allen Elementen (z. B. Box, Bild etc.) am linken unteren

Rand einen blauen Kreis mit einem weißen Dreieck. Wenn Sie dort die

Maus ansetzen, dann können Sie damit das Element nur noch vertikal verschieben,

d. h. die x-Koordinate bleibt so wie sie ist. Und alle Elemente, die sich je

nach Bewegungsrichtung unterhalb oder oberhalb des Elements befinden und

in dieser Richtung mit diesem überlappen, werden mit verschoben. Auf diese

Weise kann man leicht Platz für neue Elemente auf der Webseite schaffen, was

ansonsten bei längeren Webseiten schnell in Arbeit ausarten könnte…

Wenden wir uns jetzt dem Logo zu. Es ist offensichtlich auch nur ein Template

und muss deshalb durch ein Eigenes ersetzt werden. Hier ist es sinnvoll, dass

man sich mit Hilfe eines Malprogramms schon vorher eine passende Bilddatei

zurecht gemacht hat. Da wie hier einen transparenten Hintergrund benötigen,

ist das png-Bildformat dafür am besten geeignet (übrigens, der „Fotomanager“

von Builderall ist das ideale Tool, um Bilder mit einem transparenten Hintergrund

zu versehen). An dieser Stelle gehen wir jetzt einmal davon aus, dass eine

derartige Datei in der richtigen Größe (ungefähr, denn die Bildgröße ist im

Sitebuilder natürlich stufenlos änderbar) bereits in einem für diese Zwecke vorgesehenen

Ordner auf Ihrem Computer liegt. Also klicken wir erst einmal das

Logo im Webeditor an und fokussieren es auf diese Weise (ein blauer Rahmen

und das Kopfmenü wird sichtbar). Im rechten Randmenü sind jetzt alle Elementeeigenschaften

des „Bild-Elements“ sichtbar und können bei Bedarf geändert

werden. Was wir machen möchten, ist erst einmal das Bild tauschen. Dazu gehen

wir im Randmenü auf den Bereich „Allgemeine Einstellungen“ und dort zu

„Bild ändern“ (wobei wir auf genau diese blaue Schaltfläche klicken). Es öffnet

sich jetzt das „Builderall Image Repository“. Das ist die Stelle, in die Sie ihre eigenen

Bilder hochladen bzw. auch die Stelle, in der Builderall umfangreiche Bil-

39

dersammlungen (Images, Icons, Buttons und gif’s) zur Nutzung anbietet. Bevor

wir hier weitermachen, sollten Sie ein wenig in diesem Fenster herumklicken,

um einen kleinen Überblick darüber zu erhalten.

HINWEIS: Sie sollten sich von vornherein angewöhnen, im linken Bereich unter

„User files“ themen- oder webseitenbezogene Ordner anzulegen, um darin

Ihre Bilder zu organisieren. So macht es beispielsweise Sinn, hier einen

Order „Friseursalon“ anzulegen, in der Sie alle Bilder ablegen, die Sie für ihre

„Friseur-Website“ verwenden.

Das „Hochladen“ eines Bildes ist denkbar einfach – Schaltfläche „Datei wählen“

anklicken und über den Dateiauswahldialog Bild (bzw. Bilder, Mehrfachauswahl

möglich) auswählen. Anschließend wird das oder werden die ausgewählten Bilder

im Repository angezeigt. Die Bilder müssen dabei im jpg, png oder gif-

Format vorliegen und dürfen nicht größer als 4 MB sein.

Wenn Sie jetzt den Mauszeiger über ein Bild bewegen, dann werden Ihnen innerhalb

des Bildes vier Icons angezeigt, die verschiedene Funktionen repräsentieren:

Dateinamen editieren – Bild in ein kleines Malprogramm laden – Bild

groß anzeigen – Bild löschen.

Auch diese Funktionen sollten Sie allesamt einmal kurz ausprobieren.

Das jeweils ausgewählte Bild erkennen Sie im Repository-Fenster an dessen

blauer Umrandung. Wenn Sie jetzt rechts unten die Schaltfläche „Speichern“

klicken, wird das ausgewählte Bild in den Image-Container Ihrer Webseite geladen

und auch sogleich im Editor sichtbar:

Sie können jetzt an dieser Stelle das Logo in seiner Größe ändern oder auch

drehen (Ankerpunkte), die Position verändern (automatisch aufgeblendete

Ausrichtungslinien beachten) oder auch weitere Eigenschaften des Bildes über

40

das Randmenü einstellen (probieren Sie doch einmal einen roten Rand mit der

Breite 5 Pixel und abgerundeten Ecken um das Logo-Image zu zeichnen).

41

Wenn Sie bis hierhergekommen sind, dann haben Sie bereits das Prinzip begriffen,

wie man in „Cheetah“ Webseitentemplates anpasst, um letztendlich ohne

großen Aufwand zu einer eigenen Webseite zu gelangen. Natürlich müssen Sie

sich etwas mit den die Webseite aufbauenden Elementen und deren Eigenschaften

auseinander setzen (wir kommen noch ausführlich darauf zurück).

Aber schwierig ist es sicherlich nicht, mit „Cheetah“ aus einem Webseitentemplate

eine eigene, unverwechselbare Webseite zu bauen.

TIPP: Vergessen Sie keinesfalls zwischendurch öfters einmal die Webseite zu

speichern!

Gut, machen wir weiter. Den Slider lassen wir erst einmal so wie er ist (um zu

sehen, wie er funktioniert, brauchen Sie übrigens nur in die Webseitenvorschau

zu wechseln. Den Button dafür finden Sie oben rechts in der Hauptmenüzeile

des Editors). Wir wenden uns vielmehr erst einmal den aus jeweils drei nebeneinander

liegenden Boxen aufgebauten Bereich darunter zu. Sie liegen genauso

wie die Elemente in der durch eine blaue Linie im Editor abgegrenzten blauen

Linie darüber auf einem sogenannten „Banner“. Um das zu erkennen klicken

Sie mit der Maus auf die linke Box („Professional Barber Kit“) und ziehen sie mit

gedrückter linker Maustaste etwas nach unten, bis der weiße Untergrund zu

sehen ist. Wenn Sie jetzt mit der Maus in diesen weißen Untergrundbereich

klicken, wird genau dieser Banner fokussiert und dessen Kopfmenü wird aufgeblendet.

Banner sind das grundlegende Aufbauelement von Webseiten in „Cheetah“

überhaupt. Banner sind dabei erst einmal nur in ihrer Höhe einstellbare Bereiche,

auf die die einzelnen, die Webseite ausmachenden Elemente gelegt werden.

Diese Elemente werden dann quasi „Eigentum“ des Banners, auf dem sie

liegen.

Ein bestimmtes Element kann immer nur zu einem Banner gehören (dessen

„Eigner“), weshalb Sie Überlappungen vermeiden sollten.

Weiterhin können Banner samt ihrem Inhalt vertikal verschoben werden, was

ein „Umsortieren“ der Funktionsbereiche einer Webseite zu einer einfachen

Übung macht. Auch lassen sich jederzeit neue Banner zu einer Webseite hinzu-

42

fügen und an genau die Stelle positionieren, wo man sie hinhaben möchte. Die

entsprechende Einstellmöglichkeit finden Sie in den Panel-Eigenschaften in der

Kategorie „Order Panels“ (ausprobieren!).

Auch ein Banner an sich besitzt eine Menge Eigenschaften, wie Sie am umfangreichen

Randmenü unschwer erkenn können. Die bei weitem wichtigste Eigenschaft

ist dabei die „Größe“, über den Sie pixelgenau per Tastatureingabe oder

ganz schnell über den Schieberegler die Höhe des Banners einstellen können.

Und das ist genial. Denn wenn Sie beispielsweise später einmal einen Text auf

Ihrer Webseite durch einen längeren ersetzen möchten, der Platz dafür aber

nicht ausreicht, denn vergrößern Sie einfach die Höhe des darunter liegenden

Banners, und schon haben Sie wieder genug Platz, um Texte zu erweitern oder

neue Elemente wie Bilder, Boxen etc. einzufügen. Und, das sei schon vorweg

genommen, Sie können ganze „ausgestaltete“ Banner als private Templates

speichern und dann auf anderen Websites wieder verwenden...

In unserem Fall lassen wir jedoch das Banner so wie er ist und ziehen das linke

Box-Element wieder an seine angestammte Position. Beim Verschieben werden

Sie sicherlich bemerkt haben, dass auch die auf der Box liegende Schrift und die

darunter liegende Schaltfläche mit verschoben wurden. Denn hier gilt das Gleiche

wie bei einem Banner: Alle Elemente, die auf einer Box liegen, gehören

quasi der Box – oder anders ausgedrückt, die Box ist deren Eigner. Und auch

das ist genauso genial. Denn in „Cheetah“ können Sie natürlich auch fertig mit

den verschiedensten Elementen ausgestattete Boxen als private Templates

speichern und so in anderen Webprojekten wieder verwenden. Damit wird es

zu einer leichten Übung, ohne großem Aufwand über alle seine Webseiten ein

einheitliches „Corporate Design“ zu gewährleisten, was gerade bei Firmenwebsites

wichtig ist.

Schauen Sie sich kurz einmal die Eigenschaften eines Box-Elements an und

ändern Sie anschließen auf allen drei Boxen des Banners die Texte. Beachten

Sie insbesondere, dass eine Box über die Eigenschaften der Kategorie „Allgemeine

Farben“ auch explizit mit einem Hintergrundbild ausgestattet werden

kann. Man muss in diesem Fall also nicht unbedingt ein separates Image-

Element dafür verwenden.

43

Die Boxen auf diesem Template enthalten nicht nur Texte, sondern auch

„Schaltflächen“ – oder synonym „Buttons“ genannt. Sie haben u. a. die Fähigkeit,

bei Betätigen mit der Maus bestimmte Ereignisse auszulösen, wie beispielsweise

eine Verzweigung (Link) auf eine andere Webseite, das Aufpoppen

eines Popup-Menüs oder den Download einer Datei, um nur ein paar wenige

Beispiele zu nennen. Elemente, die diese Fähigkeit besitzen, erkennen Sie übrigens

leicht an dem Link-Symbol in deren Kopfmenüs. Image-Elemente gehören

übrigens auch dazu.

Um die Beschriftung eines solchen Buttons zu ändern, fokussieren Sie ihn einfach

und wechseln im Randmenü in den Bereich „Überschrift“ bzw. 2. Überschrift“,

wenn Sie noch einen zweiten, vielleicht unterschiedlich formatierten

Text der Schaltfläche hinzufügen möchten.

44

Neben dem eigentlichen Text können Sie hier auch noch Schriftart, Schriftgröße

und diverse Schriftattribute ändern, die Textausrichtung auf dem Button festlegen

und noch einiges Weiteres (z. B. die Auswahl eines speziellen Icons aus der

Icon-Library von Cheetah). Übrigens, Sie können die jeweiligen Anpassungen

quasi in Echtzeit im Editor verfolgen!

Auf den mittleren Boxen des gerade in Bearbeitung befindlichen Banners liegen

explizit Produktbilder (d. h. die Bilder sind separat und keine Hintergrundbilder

der Box). Wenn Sie eines davon fokussieren, können Sie im Kopfmenü „Bild“

lesen. Dieses Bild müssen Sie natürlich auch wieder durch ein eigenes Bild austauschen,

welches Sie zuvor vorbereiten und dann in das Image Repository

hochladen müssen – genauso, wie wir es bereits mit dem „Logo“ getan haben.

Also probieren Sie es aus! Sie sehen, es ist kinderleicht.

Kommen wir jetzt zum nächsten Banner. Wir möchten hier davon ausgehen,

dass wir dieses Banner auf unserer Webseite nicht benötigen. Wir werden es

also mit all seinen Elementen darauf mit einem Schlag löschen. Dazu müssen

wir es erst einmal fokussieren. Das geht hier aber nicht so ohne weiteres, da es

vollständig mit Boxen abgedeckt ist. Aber das ist natürlich kein echtes Problem.

Klicken Sie einfach auf den oberen Bereich der linken Box (um nicht das darauf

liegende Bild zu fokussieren) und schieben es dann mit der Maus ein klein wenig

nach unten und nach rechts (was Sie übrigens auch mit den Kursortasten

tun können). Anschließend klicken Sie in den freigegebenen Bereich und das

Kopfmenü „Banner“ erscheint. Dort finden Sie ganz rechts und in Signalrot den

„Papierkorb“. Und genau dort hinein können Sie jetzt das gesamte Banner mit

all seinen darauf angeordneten Elementen versenken. Ein Klick darauf und

nach der Beantwortung einer Sicherheitsabfrage ist er auch sogleich verschwunden.

Solch einen „Papierkorb“ finden Sie übrigens im Kopfmenü aller

Elemente. Und nun wissen Sie auch, für was er gut ist. Aber bedenken Sie –

weg ist weg.

Es gibt aber in „Cheetah“ noch eine andere Möglichkeit, einen Banner, eine Box

oder ein beliebiges andere Element zum Verschwinden zu bringen, ohne das es

unwiederbringlich verloren ist. Diese Funktion heißt „Verstecken“ und wird

ikonografisch durch ein durchgestrichenes Auge dargestellt. Und wir wollen

45

diese Funktion hier auch gleich einmal ausprobieren. Dazu fokussieren wir den

Folgebanner, der ein Mitteilungsformular enthält, und klicken anschließend auf

das „durchgestrichene Auge“ im Kopfmenü. Erwartungsgemäß verhält sich das

Banner wie ein gelöschtes Banner – es verschwindet. Aber nicht ganz. Denn

schauen Sie einmal in die obere Hauptmenüzeile des Editors. Dort finden Sie

auch ein „Auge“. Sobald Sie darauf klicken, öffnet sich eine Liste mit allen verborgenen

Elementen der im Editor angezeigten Webseite. Und wenn Sie darin

einen Eintrag mit der Maus berühren, dann wird das entsprechende Element

(in unserem Fall das komplette Banner) wieder im Editor angezeigt. Um ihn

aber wieder vollständig zum Leben zu erwecken, müssen Sie in der Auswahl

wiederum das „Auge“, welches Sie rechts neben dem Elementebezeichner in

der Liste sehen, anklicken. Und schon ist das entsprechende Element wieder

auf der Webseite sichtbar.

Achtung: Ab und zu Speichern nicht vergessen!

Der Banner, bei dem wir eben das „Verstecken“ geübt haben, enthält nur einen

kurzen Text (bitte auf „TERMIN VEREINBAREN“ abändern!) sowie ein komplettes

Kontaktformular. Wie Sie sehen, brauchen Sie in „Cheetah“ selbst keine

Kontaktformulare mehr mühselig Feld um Feld zusammen zu basteln. In

„Cheetah“ brauchen Sie nur noch ein bereits als Element zur Verfügung gestell-

46

te Kontaktformulare nach Ihren Wünschen anzupassen. Und genau das wollen

wir jetzt tun.

Sobald Sie das Kontaktformular fokussiert haben, können Sie erst einmal dessen

allgemeine Gestaltung durch Änderung der entsprechenden Eigenschaften

über das rechte Randmenü vornehmen (betrifft hier in erster Linie die Überschrift

des „Sende-Buttons“ – „MITTEILUNG ABSCHICKEN“). Das wollen wir bis

auf die Schaltflächenbeschriftung hier im Einzelnen nicht tun, sondern gleich

einen Blick auf das Kopfmenü des Elements werfen. Denn hier finden Sie jetzt

u. a. ein blaues Zahnradsymbol. Es kennzeichnet bei einem Element, dass es

explizit auch funktionell konfiguriert werden kann. Im Fall des Kontaktformulars

öffnet sich nämlich bei einem Klick darauf folgender Einstell-Dialog:

Er besteht aus drei Seiten. Auf der ersten Seite („E-Mail“) legen Sie u. a. fest, an

wem die Webseite mit welchen „Betreff“ versendet werden soll. Gewöhnlich

ist hier die E-Mailadresse diejenige des Friseursalons. Als „Betreff“ könnte man

vielleicht „Terminvereinbarung“ wählen. Die restlichen Felder lassen wir dagegen

erst einmal leer.

47

Auf der zweiten Seite legen Sie die Felder der Kontaktmaske fest. In diesem Fall

sind bereits insgesamt vier verschiedene davon im Template angelegt worden,

deren Bezeichner („Label“) – da in Englisch – wir nur noch in die deutsche Sprache

übersetzen müssen. Selbstverständlich können Sie hier auch Felder löschen

(„Papierkorb“) oder neue Felder hinzufügen („+“ – Button). Über die „Pfeiltasten“

können Sie zusätzlich noch die Positionen der Felder im Kontaktformular

umsortieren.

Um die Feldbezeichner zu ändern (und um auch festzulegen, ob es sich um

Pflichtfelder handelt oder nicht), müssen Sie auf das Stift-Symbol klicken. Probieren

Sie auch einmal aus, einem Label ein Icon zuzuweisen.

Die Seite „Action“ lassen wir hier erst einmal außer Acht, da wir diese Funktion

hier nicht benötigen.

HINWEIS: Bevor Sie Ihre Webseite endgültig freigeben, testen Sie zuvor alle

verwendeten Kontaktformulare auf ihre Funktion! Das ist im Vorschau-

Modus nicht möglich, weshalb Sie die komplette Webseite zuvor veröffentlichen

und auf der veröffentlichten Seite Ihre Tests vornehmen müssen.

48

Damit ist das Kontaktformular erst einmal erledigt und wir können uns dem

nächsten Banner widmen, der lediglich drei „Logos“ enthält. Aus Gründen, die

gleich einsichtig werden und mehr didaktischer Natur sind, sollten Sie erst einmal

die beiden rechten Template-Logos von der Webseite löschen. Anschließend

tauschen Sie das Bild des verbliebenen Logos mit dem entsprechenden

Logo, welches wir bereits in das Image-Repository hochgeladen haben auf gewohnte

Weise aus. Damit es sich etwas besser vom Untergrund abhebt, können

wir hier auch gleich die Farbe des Banners entsprechend anpassen. Also

Banner fokussieren und im rechten Randmenü den Bereich „Allgemeine Farbe“

öffnen. Dort klicken Sie in das Feld links neben dem „Farbtropfen“, wodurch

sich darunter der Farbeinstellungsdialog (der bei allen Elementen in „Cheetah“

gleich aufgebaut ist) öffnet. Dort wählen wir mit der Maus auf dem Farbstreifen

eine Grundfarbe aus (z. B. Blau) und bewegen dann im Farbfeld darüber mit der

Maus den Auswahlpunkt solange hin und her, bis uns die Bannerfärbung im

Zusammenspiel mit dem Logo gefällt (die Farbänderung im Editor erfolgt simultan

mit der Mausbewegung). Und das war es auch schon. Jetzt brauchen wir

noch zwei Kopien des Logos, um die ursprüngliche Gestaltung des Templates

wieder herzustellen. Und jetzt kommt eine weitere Funktion ins Spiel, die Sie

schnell lieben lernen: Sie können nämlich ausnahmslos jedes Element im Editor

„klonen“. Und das geht so. Sie fokussieren mit der Maus wie gewohnt das Element

und klicken dann im Kopfmenü auf das Klone-Icon – und siehe da,

„Cheetah“ erzeugt augenblicklich von dem fokussierten Element (und zwar mit

allen Elementen darauf, wenn es sich um ein Banner oder um eine Box handelt)

eine 1:1 – Kopie, welches Sie nur noch mit der Maus „anfassen“ und an ihre

neue Position verschieben müssen. Und es geht übrigens noch schneller mit

49

der bewährten Tastenkombination <Strg><C> („Kopieren“) und <Strg><V>

(„Einfügen“).

HINWEIS: Was das Klonen eines Banners betrifft, gibt es einen kleinen Unterschied.

Die Kopie eines Banners wird generell ganz unten auf die Webseite

gesetzt (quasi als „Schlussbanner“) und muss dann über die Funktion „Order

Panels“ in den Panel- Eigenschaften in die gewünschte Position auf der Webseite

verschoben werden.

Das „Klonen“ von Elementen im „Cheetah“ Sitebuilder ist übrigens eine Funktion,

welche die Webseitenentwicklung enorm beschleunigen kann. Nichts geht

schneller als ein bereits auf der Webseite vorhandenes Element zu klonen (beispielsweise

eine Textbox), es dann mit der Maus an ihre neue Position zu verschieben

und schließlich dessen Eigenschaften über das Randmenü (bzw. dem

Einstellungsdialog) – wenn nötig – anzupassen.

Kommen wir jetzt noch zu zwei speziellen Bereichen einer Webseite, dem

„Header“ (quasi der erste Banner einer Webseite, welches in der Regel das

„Hauptmenü“ beherbergt) und dem „Footer“, der oft einer Kontaktmöglichkeit

(hier Kontaktadresse, Social Media und Newsletter-Bestellung) und dem Impressum

/ Datenschutzerklärung vorbehalten ist. Bei sehr großen Webseiten

empfiehlt sich an der Stelle des „Footers“ auch eine einfache Menüstruktur zu

integrieren, damit der Besucher nicht erst wieder bis nach oben scrollen muss,

nur um eine Folgeseite besuchen zu können.

Um Kopf- und Fußbereiche in eine Webseite zu integrieren, bieten sich mit

„Cheetah“ zwei verschiedene Strategien an, die hier erst einmal nur kurz Erwähnung

finden sollen. Die einfachste Möglichkeit ist dafür auf der Webseite

jeweils ein eigenes Banner zur Verfügung zu stellen. In diesem Template ist das

für den „Footer“ geschehen, während man das Hauptmenü zwar auch auf den

ersten Banner angeordnet hat, welcher aber nicht als separater „Header“ designt

wurde. Das kann man so machen, wenn man will. Was ist aber, wenn eine

Website, sagen wir mal aus 20 verschiedenen Unterseiten besteht, deren Header

und Footer aufgrund des Corporate Designs immer gleich aussehen soll? Im

Prinzip ist das erst einmal kein Problem, denn man kann ja in „Cheetah“ auch

jede Seite klonen. Problematisch wird es erst dann, wenn man nachträglich Än-

50

derungen am Header oder Footer vornehmen muss. Und das bedeutet in diesem

Fall, dass die Änderungen auf jeder Seite einzeln durchzuführen sind (Arbeitsaufwand!).

Gut, man kann sich damit behelfen, dass man sich eine jeweilige

Bannervorlage bastelt und diese dann auf jeder Seite im Block austauscht.

Aber die ideale Lösung ist das auch nicht. Besser ist es, man nutzt die Lösung,

die „Cheetah“ nativ anbietet, nämlich dass man spezielle Header- bzw. Footer

designt und diese dann explizit Webseiten zuweist. Sie sind dann zwar nicht

mehr im Webseiteneditor im Bearbeitungsmodus zu sehen (brauchen sie ja

auch nicht), aber später (und in der Vorschau) auf der Webseite. Diese elegante

und entwicklungszeitsparende Technik wird später in diesem Buch noch im Einzelnen

erläutert werden. Das Webseiten-Template, welches wir hier gerade

anpassen, verwendet jedoch diese Technologie noch nicht. Hier müssen wir die

entsprechenden Banner anpassen.

Beginnen wir mit dem Footer, bei dem wir ja gerade angekommen sind. Als erstes

tauschen wir die Texte aus, was schnell erledigt ist.

Das erste interessante Element auf dem Footer-Band ist das kleine Menü am

linken Rand. Dessen Kopfmenü besitzt ein Zahnrad-Icon, über welches wir den

Einstellungsdialog öffnen können, welches verblüffend dem ähnelt, welches wir

bereits beim Kontaktformular kennengelernt haben:

51

Die Bedienung ist analog. Zuerst ändern wir die Label-Bezeichner (Stift-Icon).

Danach müssen wir die Verlinkung einrichten, denn ein Klick auf einen der Menüpunkte

soll ja einen Wechsel auf eine entsprechende Webseite veranlassen.

Dazu dient die Schaltfläche mit dem Link-Symbol. Wenn Sie darauf klicken,

dann öffnet sich der Dialog „Weiterleitungen konfigurieren“. Und siehe da, die

Seitenverlinkungen sind im Template bereits korrekt eingetragen:

52

Wir brauchen hier also nichts weiter tun. Was noch offen ist, ist das auf ein Feld

reduzierte Kontaktformular, in welches der Webseitenbesucher seine E-Mail-

Adresse eintragen soll, wenn er Interesse am Newsletter haben sollte. Wie Sie

sich erinnern werden, öffnet sich dessen Einstellungsdialog sobald Sie auf das

Zahnradsymbol des entsprechenden Kopfmenüs klicken.

Bleibt nur noch das Menü im Header-Bereich zu übersetzen. Hier müssen Sie

lediglich das Menü-Element etwas nach unten schieben, damit dessen Kopfmenü

sichtbar wird. Und den Rest kennen Sie ja schon…

Wenn Sie jetzt noch links das Bild „YOURLOGOHERE“ ersetzen (oder Löschen),

dann ist die erste Seite unserer Website schon fertig. Mit etwas Vorbereitung

und ohne diese Erklärungen hier hätte das in der Summe kaum mehr als 5 Minuten

gedauert…

HINWEIS: Speichern nicht vergessen!

Bleiben also nur noch die Seiten 2, 3 und 4 der Website anzupassen. Um sich

erst einmal einen kleinen Überblick über deren Inhalt zu verschaffen, wählen

wir sie nach und nach aus der links oben angeordneten Klappbox aus und scrollen

ein bisschen hin und her. Was auffällt ist, dass der Footer auf allen Webseiten

gleich ist. Und da wir den Footer auf der Homepage bereits angepasst haben,

können wir eine weitere geniale Funktionalität des „Cheetah“ Sitebuilders

zur Anwendung bringen, nämlich die Verwendung eigener Vorlagen. Also

wechseln Sie über die genannte Klappbox zur Startseite und dort in den Footer.

Hier fokussieren wir auf den Footer-Banner und klicken im Kopfmenü auf das

erste Icon – dem Diskettensymbol (Sie finden es übrigens bei allen Elementen,

die „Cheetah“ zum Webdesign anbietet). Es öffnet sich ein kleines Fenster, in

der Sie dem Element einen Namen geben können.

Es ist übrigens eine gute Idee, mit ein, zwei Buchstaben den Elemententyp

abzukürzen (z. B. „B“ für Banner, „BO“ für Box etc.) und danach eine eindeutigen

Namen für die entsprechende Vorlage zu vergeben.

53

Sobald Sie das getan haben, wechseln Sie über die Seitenauswahlklappbox auf

die Seite „About“ und dort wiederum im rechten Randmenü auf die Seite „Vorlagen“.

Wenn Sie jetzt die Kategorie „Banner“ öffnen, dann finden Sie darin den

eben auf der Homepage als Vorlage gespeicherten Banner „B Footer Friseursite“.

Und jetzt einfach auf „+“ klicken – und der Banner wird an das Ende der

aktuellen Webseite kopiert. Und Sie ahnen es sicherlich bereits. Jetzt braucht

nur noch der darüber liegende „Originalbanner“ über dessen Kopfmenü gelöscht

zu werden. Und genau dasselbe machen Sie jetzt gleich noch mit den

restlichen zwei Seiten (Speichern nicht vergessen!).

54

Übrigens, wenn Sie die Vorlage nicht mehr benötigen (auch in Zukunft nicht),

dann können Sie diese selbstverständlich wieder löschen. Sie war dann halt

nur eine „temporäre Vorlage“…

Wenn Sie möchten, können Sie als Übung auch einmal das Menü-Einzelelement

der Startseite als temporäre Vorlage speichern und anschließend nach der gleichen

Methode auf den drei anderen Webseiten austauschen. Nur hier müssen

Sie (zum ersten Mal) die drag’n drop – Methode, die dem „Cheetah“ Sitebuilder

seinen Namen gab, verwenden.

Also speichern Sie das bereits angepasste Hauptmenü als „M Hauptmenü Friseursite“

und wechseln Sie anschließend wieder auf die „About“ – Webseite.

Dort können Sie erst einmal das Hauptmenü im Header löschen. Anschließend

öffnen Sie im rechten Randmenü die Seite „Vorlagen“ und darin die Kategorie

„Elemente“ hier finden Sie das eben gespeicherte „Menü-Element“ wieder, nur

dass das „+“ zur Auswahl fehlt.

Und jetzt kommt das „drag’n drop“ ins Spiel, d. h. Sie „greifen“ es sich mit der

Maus, in dem Sie den Mauszeiger darauf halten und dann mit gedrückter linker

Maustaste auf die ungefähre Position der Webseite ziehen, wo Sie es schließlich

ablegen wollen (Maustaste loslassen). Dabei werden Ihnen etwaige Containerelemente

– beispielsweise Bannern und Boxen – mit einer hellblauen Be-

55

grenzung hervorgehoben, damit Sie auf diese Weise besser erkennen können,

wo genau Sie das Element ablegen.

Genau auf diese Weise werden übrigens alle Elemente (mit Ausnahme von

Bannern) von der Elementepalette des Randmenüs auf die Webseite im Designer

übertragen. Diese Methode ist für den „Cheetah“ Sitebuilder fundamental.

Sie sollten jetzt als Übung die Friseur-Website nach dem eben ausführlich beschriebenen

Methoden Seite für Seite fertigstellen. Schauen Sie sich auch ab

und an die Vorschau an, um zu sehen, wie später einmal die Webseiten im Netz

ausschauen werden.

Wenn man mit der Desktop-Variante der Website fertig ist, gilt es nun nur

noch die Smartphone-Variante auf Vordermann zu bringen. Selbst wenn man

darauf verzichtet (was man nicht tun sollte), so sieht sie in der Vorschau doch

schon recht passabel aus. Selbst die Animationseffekte des Templates funktionieren

genau wie gewollt…

Um in den „Smartphone“-Modus zu gelangen, klicken Sie im Editiermodus oben

links auf das Smartphone-Symbol. Jetzt sehen Sie im Editor die (schmale)

Smartphone-Variante, die aus der Desktop-Variante von „Cheetah“ automatisch

abgeleitet wurde. Diese können Sie jetzt bearbeiten, wobei alle Änderungen,

die Sie hier vornehmen, (meistens) keinen Einfluss auf die Desktopvariante

haben (umgekehrt schon).

Klicken wir ein bisschen herum. Genauso wie in der Desktopvariante können

Sie auch hier einzelne Elemente fokussieren, wobei das Randmenü nur dessen,

nun smartphonerelevanten Eigenschaften, anzeigt. Um einen Banner auszuwählen,

müssen Sie auf den linken Rand der Ansicht achten, der, wenn die

Maus die Smartphone-Ansicht berührt, in Bannerlänge durch ein schmales

Randrechteck ausgezeichnet wird. Wenn Sie in dieses Rechteck klicken, erscheint

das Kopfmenü des entsprechenden Banners.

56

Wenn Sie auf die beschriebene Weise ein Element auswählen, dann beachten

Sie, dass Sie immer erst das Stiftsymbol im Kopfmenü des selektierten Elements

drücken müssen, um die Seite „Einstellungen“ im Randmenü zu aktualisieren.

Von allen dort angezeigten Kategorien ist die Kategorie „Erweitert (und Mobil)

die bei weitem wichtigste. Um das zu erkennen, fokussieren Sie beispielsweise

einmal auf den „Salvador Dali – Spruch“, drücken dort im Kopfmenü auf das

Stift-Icon und beobachten was passiert, wenn Sie in der Kategorie „Erweitert

(und Mobil) die einzelnen Schieberegler betätigen. Ich glaube, man muss dann

nicht mehr viel dazu sagen…

Wenn Sie dagegen die Schriftgröße in der Smartphone-Ansicht ändern möchten,

dann können Sie das über die „Globalen Schrifteinstellungen“ tun. Jede

„hn“-Überschrift (und natürlich auch die Absatzschriftart) besitzt einen Schieberegler

„Schriftgröße Mobil“, über den Sie stufenlos die Größe aller mit der

entsprechenden Überschrift formatierten Texte global (!) ändern können. Das

bedeutet, dass diese Schriftgrößenänderung ALLE Webseiten der in aktuell in

Bearbeitung befindlichen Website betrifft (also auch die Seiten „ABOUT“,

„STORE“ usw.).

57

HINWEIS: Vermeiden Sie es tunlichst, die anderen Schrifteigenschaften zu ändern.

Denn diese Änderungen (z. B. Schriftart und Zeilenabstand) haben auch

Auswirkungen auf die Desktopvariante!

Weiterhin kann es nützlich sein, einzelne Elemente, die für die Desktop-

Variante relevant sind, beim Smartphone nicht anzuzeigen. Wie Sie aber sicherlich

bereits beobachtet haben, fehlt hier allen Elementen der „Papierkorb“. Löschen

ist also offensichtlich nicht möglich. Sie können aber stattdessen ein ausgewähltes

Element immer „verbergen“ – das „durchgestrichene Auge“, wie Sie

bereits wissen… In diesem Fall wird das Element zwar nicht mehr in der mobilen

Ansicht dargestellt, in der Desktopansicht aber schon (es sei denn, Sie haben

es auch dort unsichtbar gemacht).

Wenn Sie in der Smartphone-Ansicht bestimmte Elemente anzeigen möchten,

in der Desktopvariante jedoch nicht, dann legen Sie diese Elemente in der

Desktopvariante an und verbergen sie dort. In der mobilen Ansicht sind sie

dann trotzdem sichtbar.

In unserem Beispiel macht es beispielsweise Sinn, das gesamte vorletzte Banner

mit den drei Logos auszublenden. Und das sollten Sie jetzt auch gleich einmal

tun…

Weiterhin kommt es vor, dass man die einzelnen Elemente in der Smartphone-

Variante in einer anderen Reihenfolge innerhalb ihres Containers (d. h. gewöhnlich

dem Banner, auf dem sie liegen) anordnen möchten. Auch das ist

leicht über die Umsortierungsfunktion (Kategorie „Order Panels“ in den Banner-Eigenschaften)

möglich. Das „Umsortieren“ hat dabei natürlich nur Auswirkungen

auf die mobile Ansicht. Wenn Sie jedoch ganze Banner verschieben, so

geschieht das simultan zugleich auch in der Desktopvariante. Das müssen Sie

auf jeden Fall beachten, um nicht irgendwelche Überraschungen zu erleben

(deshalb ist es ja auch so wichtig, ab und an einmal die Vorschau zu bemühen).

In „Cheetah“ kommt es oft vor, dass sich Elemente überdecken. Das ist auch

ganz normal. Man muss sich das wie einen Kartenstapel vorstellen, in der die

„Karten“ in Art einer z-Reihenfolge von „unten“ nach „oben“ angeordnet sind.

Diese Reihenfolge dieser „Layer“ wird vom Editor i. d. R. automatisch festgelegt

58

und Sie brauchen sich nicht darum zu kümmern. Aber dabei kann es passieren

(gerade bei transparenten Elementen), dass Sie ein Element niederer Hierarchiestufe

mit der Maus nicht mehr fokussieren können, da gerade ein anderes

Element auf einem Layer „darüber“ liegt. Besonders ärgerlich – besonders in

der mobilen Editoransicht – ist es, wenn sich das Kopfmenü unter ein anderes

Element schiebt. Es bleibt zwar vollständig sichtbar, aber die einzelnen Buttons

darauf lassen sich u. U. nicht mehr anklicken. Aber auch für solch einen Fall gibt

es natürlich Abhilfe. Und diese finden Sie im Randmenü „Einstellungen“ in der

Kategorie „Erweitert (und Mobil“). Dort können Sie nämlich über die Schaltflächen

„Niedrig“ und „Oben“ die Layer-Position des ausgewählten Elements explizit

festlegen. Es ist dabei so, als ob sie eine Karte in den Kartenstapel auf eine

neue Position verschieben.

Wie Sie sehen, ist es keine große Schwierigkeit, mittels der von Builderall

vorgegebenen Templates mit etwas Übung und in rekordverdächtiger Zeit

eine quasi professionelle Webseite aufzubauen.

Was noch zu tun bleibt (wir nehmen hier mal an, Sie haben auf die gleiche Weise

auch die restlichen 3 Seiten bearbeitet und sind mit dem Ergebnis sowohl

der Desktop- als auch der mobilen Variante ganz zufrieden), sind noch ein paar

Einstellungen vorzunehmen und die Webseite endgültig zu veröffentlichen. Dazu

klicken Sie ganz links oben im „Cheetah“-Editor auf das „Häuschen“, worauf

Sie in die Seitenansicht Ihrer Website gelangen.

59

Jede durch ein Rechteck dargestellte Seite besitzt an ihrem rechten unteren

Rand ein kleines, durch drei übereinanderliegende Punkte gekennzeichnetes

Menü, welches folgende Eintragungen enthält:

Einstellungen

Diese Seite aufrufen

Kopieren

Löschen

An dieser Stelle soll uns nur die Seite „Einstellungen“ interessieren. Wie dessen

Name schon sagt, werden hier einige generelle Einstellungen vorgenommen,

auf die später noch im Einzelnen eingegangen werden wird. Schauen wir uns

dazu kurz einmal die Eingabemaske an. Sie besteht aus den Kategorien „Allgemeine

Einstellungen“, „Seo-Einstellungen“, „Popup-Einstellungen“, „Header

Settings„ und „Footer Settings“. In diesem „Ersten Blick“ auf „Cheetah“ soll uns

davon erst einmal nur die Kategorie „Allgemeine Einstellungen“ interessieren.

Hier können Sie explizit festlegen, wie diese konkrete Webseite heißt, ob sie als

„Startseite“ fungieren soll und unter welcher URL sie nach Veröffentlichung erreichbar

ist (natürlich mit dem Domänenname der Website als Präfix). Zwar

sind Sie hier in Ihrer Wahl völlig frei, aber wenn Sie möchten, dass Ihre neue

Webseite auch in Suchmaschinen wie Google oder Bing gut rankt, ist hier

durchaus einiges zu beachten. So ist es ganz wichtig, das Feld „Beschreibung“

möglichst SEO-konform auszufüllen. Denn genau der Inhalt dieses Feldes erscheint

neben dem Titel in dem Ergebniseintrag einer Suchmaschine. Was Sie

also als nächstes tun sollten, ist JEDER Seite Ihrer Website eine die jeweilige

Webseite optimal charakterisierende Beschreibung und Seitentitel zuzuweisen.

„Name“ und „Adress-URL“ halten Sie erst einmal bei. Vergessen Sie dabei aber

keineswegs das Speichern (der Speicher-Button befindet sich rechts unten –

also hin scrollen…).

Als nächstes müssen Sie noch die DSGVO-Einstellungen aktivieren. Aber das ist

ganz einfach. im linken Randmenü finden Sie dafür den Punkt „DSGVO-

Settings“. Es öffnet eine Seite, wo Sie nur noch die entsprechende Checkbox

markieren müssen.

60

Außerdem können Sie hier noch eine ganze Anzahl von Anpassungen vornehmen,

deren „Erforschung“ wir Ihnen überlassen möchten.

Wenn alles erledigt ist, können Sie nun Ihre Webseite veröffentlichen. Dafür

dient die Schaltfläche „VERÖFFENTLICHEN“, die nach erfolgreicher Veröffentlichung

übrigens ihre Farbe in „rot“ und ihre Beschriftung in „UNPUBLISH“ ändert.

Doch unter welcher Internet-Adresse ist sie nun für jedermann aufrufbar? Das

erfahren Sie beispielsweise, wenn Sie wieder in die Webseitenansicht Ihrer

Website zurückgehen und dort bei der Homepage aus dem 3-Punkte-Menü

„Diese Seite aufrufen“ anklicken. Dann wird Ihnen diese Seite mit der aktuellen

URL in einem neuen Browserseite angezeigt. Wenn Sie aber möchten (was

sinnvoll ist), dass die Website unter einer eigenen, von Ihnen erworbenen Domain

im Internet sichtbar ist, müssen Sie explizit eine Domain aufschalten oder

die Website als Subdomän einer Ihnen bereits gehörenden Domain veröffentlichen.

Die entsprechende Funktion finden Sie auf der Websiteübersicht des

„Cheetah“ Sitebuilders (im Hauptmenü entweder „Home“ oder das Builderall-

Logo ganz links anklicken) im „3-Punkte-Menü“ Ihrer Website „FRISEURLADEN“

unter dem Menüpunkt „Domain aufschalten“. Beachten sie aber, dass er nur in

einem der bezahlten Builderall-Pläne funktioniert und dort auch nur dann,

wenn Sie ihr Kontingent an eigenen Domains planabhängig noch nicht ausgeschöpft

haben. Andernfalls müssen Sie mit einer Builderall-Subdomän oder mit

der Subdomain einer ihrer eigenen Domains vorlieb nehmen.

61

HINWEIS: Die Verwendung einer eigenen Domain (die Sie für wenig Geld

gleich bei Builderall erwerben können) ist ein guter Grund, wenigstens auf

den BUILDER-Plan upzugraden.

62

Webseiten bauen mit „Cheetah“

Nachdem wir gesehen haben, wie schnell man aus einer geeigneten Vorlage

aus der Template-Bibliothek von Builderall eine eigene Website erstellen kann,

die durchaus professionellen Ansprüchen genügt, wollen wir jetzt einen weitaus

detaillierteren Blick auf den „Cheetah drag’n drop Sitebuilder“ werfen. Neben

notwendigen Hintergrundinformationen zum Aufbau von Webseiten, zu

SEO und anderen verwandten Themen soll es dabei in erster Linie darum gehen,

dass Sie schnell die Funktionsweise des Webbaukastens verinnerlichen

und darüber hinaus animiert werden, mit dem Webseiteneditor „etwas zu spielen“.

Denn sobald Ihnen dessen Grundfunktionen vertraut sind, werden Sie

mit diesem großartigen Werkzeug weitgehend intuitiv zurechtkommen –

auch wenn Sie bis dato überhaupt nichts mit Webseiten erstellen am Hut hatten.

Es wird dann für Sie auch kein Problem mehr sein, beispielsweise die Bedeutung

der Eigenschaften der einzelnen Gestaltungselemente selbst zu erkunden

und sie dann so anzupassen, dass sie in ihrem Aussehen auf der Webseite

genau Ihren Vorstellungen entsprechen. Und Sie werden auch erkennen,

dass eine Beschreibung der vielen Templates in der Bannerpalette bzw. der Eigenschaften

der Elemente in der Elementepalette viel schwieriger und aufwändiger

ist als deren praktische Anwendung...

Das Credo der Firma eBusiness4us ist es, den „Cheetah“ Sitebuilder stetig zu

verbessern und mit neuen nützlichen Funktionen auszustatten. Damit Sie

immer auf dem laufenden sind, was realisierte Bugfixes und Verbesserungen

/ Erweiterungen betreffen, so achten Sie bitte auf den kleinen roten, leicht

wackelnden Kreis in der Hauptmenüzeile des Sitebuilders. Wenn er angezeigt

wird, ist ein neues Release des Sitebuilders online. In dem Sie auf diesen kleinen

roten Kreis klicken, öffnet sich am rechten Rand ein Infofenster, in dem

die Bugfixes und Neuerungen kurz erklärt sind.

63

Ausschnitt aus einer Release-Beschreibung

Last Updates

Release 1.18

New 1 week ago

Resources

Implementation of Browser Notification on the side menu of SiteSideBar

to send notification to users and to Enable/Disable

sending. (https://recordit.co/KsA6AwPCie)

Animation disabled alert, the editor identifies that the OS

has animations disabled and notifies the user that it will not

be possible to view the animation.

(https://recordit.co/Re4K8e1Y7E)

Improvements

Implementation of the ‘x’ icon to close images from the gallery

when they’re expanded. (https://recordit.co/7tF5vcPiKW)

Add the rel attribute to external links.

Fixes

The editor's sidebar menu does not appear in the Safari browser.

On IOS mobile, the translation of the members' login popup

appears in pt_PT even though it is configured pt_BR

Insert web link in the menu element in link settings.

Add the email option in the text element in the link settings.

…

Der große Vorteil eines Webbaukastens wie „Cheetah“ liegt darein, dass Sie als

Nutzer (fast) vollständig von dem Vorgang des „Programmierens“ einer Webseite

ferngehalten werden. Natürlich wird weiterhin im Hintergrund mit jedem

64

Arbeitsschritt HTML- und CSS- Code erstellt. Aber Sie müssen sich nicht mehr in

HTML und CSS auskennen, um eine Website bauen zu können. Das was früher

nur ein egalitärer Kreis von Webdesigner ausführen konnte, kann heute mit

„Cheetah“ wirklich jeder, der auch mit einem einfachen Malprogramm, mit

Powerpoint oder einer Textverarbeitung klar kommt. Nicht Details des Programmcodes,

sondern Kreativität in Bezug auf Design, Aussehen und Funktionalität

stehen bei einem Webbaukasten im Vordergrund. Natürlich gibt es auch

Einschränkungen und Anforderungen, die ein Webbaukastensystem nicht erfüllen

kann. Gerade wenn es um Anbindungen an Datenbanken geht, ist weiterhin

„Coden“ angesagt. Aber Webapplikationen, die beispielsweise gerade solche

Anforderungen als Schwerpunkt haben, bilden auch nicht gerade die Zielgruppe

von „Cheetah“ (aber vielleicht in der Zukunft? Wer weiß?). Aber natürlich können

Sie auch in „Cheetah“ HTML-Code – z. B. in Form sogenannter „Snippets“ –

eingeben und damit verblüffende Effekte erzielen. Das „iFrame / HTML“- Element“

stellt dafür die technischen Voraussetzungen zur Verfügung.

„Cheetah“ arbeitet mit zwei grundsätzlichen Konzepten: Webseiten werden

„streifenweise“ aus Bannern aufgebaut, die in ihrer Position auf einer Webseite

beliebig vertikal verschoben werden können und auch deren Höhe sich jederzeit

stufenlos ändern lässt. Und ein solches Banner kann beliebig mit „Elementen“

belegt werden, für die das entsprechende Banner quasi als „Container“

dient. Aber auch gewisse Elemente selbst – wie beispielsweise Boxen – können

als Container fungieren, auf denen wiederum „Elemente“ wie Texte, Bilder, Videos,

ganze Eingabemasken etc. angeordnet werden können. Wenn man ein

Containerobjekt verschiebt, dann nimmt es alle „Elemente“ mit, die ihm zugeordnet

sind. Dieses Konzept bietet große Vorteile, denn es können Containerelemente

quasi funktionell und gestalterisch vorbereitet werden (beispielsweise

spezielle Banner für „Frequently Asked Question“ oder für Newsletter-

Bestellungen), die dann nur noch als Ganzes in die Webseite integriert zu werden

brauchen. Und natürlich können Sie dort die Eigenschaften jedes einzelnen

Elements individuell anpassen. Diese Technik, bei der sich sowohl die Eigenschaften

eines Elements (Synonym für ein „Objekt“) als auch dessen Verhalten

(beispielsweise, wenn man darauf klickt) individuell konfigurieren lässt, ist eine

Grundcharakteristik für „Objektorientiertes Programmieren“. Diese Paradigma

65

wird in „Cheetah“ vorbildlich umgesetzt und macht auf diese Weise die Erstellung

von Webseiten besonders einfach. Sie brauchen sich hier nicht mehr um

Einzelheiten der HTML-und CSS-Programmierung zu kümmern, sondern können

sich voll auf den eigentlichen Designvorgang konzentrieren.

Abb.: Beispiele für Bannervorlagen

66

Webseiten werden in „Cheetah“ aus

Banner aufgebaut

Um folgende Ausführungen nachvollziehen zu können, legen Sie bitte zuerst eine

neue Website „Übung 1“ aus einer LEEREN VORLAGE an und öffnen Sie dessen

automatisch generierte Homepage im „Cheetah“ Webseiteneditor.

Wie eben bereits erläutert, besteht jede mit dem Webbaukasten von

„Cheetah“ erstellte Webseite aus einer entsprechenden Anzahl untereinander

angeordneter Bandbereiche, die man als "Banner" bezeichnet. Der große Vorteil

besteht dabei darin, dass „Cheetah“ bereits eine sehr große Anzahl professionell

designter Banner zur Auswahl anbietet, deren jedes einzelne Element

(Bild, Video, Text, Button, Strukturelemente etc.) von Ihnen individuell angepasst

werden kann. Das betrifft nicht nur deren Größe und Position, sondern

prinzipiell alle Eigenschaften, die mit dem entsprechenden Element Sinn machen.

Und natürlich können die Elemente dupliziert oder das Banner durch

neue Elemente, die in ihrer ursprünglichen Fassung noch nicht vorhanden waren,

ergänzt werden.

Derartige Banner können dabei nativ bereits sehr aufwändig gestaltet sein. Und

wie gesagt, so wie wir es bereits bei der Arbeit mit Webseiten-Templates gesehen

haben, jedes Element auf der Bannervorlage kann beliebig verschoben, in

seiner Größe und seinen Eigenschaften verändert und natürlich auch gelöscht

werden. Und Sie können natürlich auch selbst weitere Elemente aus der Elementeauswahl

des rechten Randmenüs dem Banner jederzeit hinzufügen. Und

der Einsatz von Bannern macht natürlich auch Sinn, weil sich damit sehr schnell

eine Webseite strukturieren lässt: Eine Kopfzeile mit Hauptmenü, ein Vorstellungsbereich

mit einer aussagekräftigen Headline, dann verschiedene inhaltliche

Bereiche, dann einen Kontaktbereich mit Kontaktformular und zuletzt vielleicht

noch eine Fußzeile mit Impressum und mit Zugriff auf soziale Netzwerke.

Ob Sie dabei mit leeren Bannern beginnen oder aus der Bannerauswahl entsprechende

Banner auswählen, bleibt dabei natürlich Ihnen überlassen. Und

67

Sie können selbstverständlich auch eigene, von Ihnen in ihrem ganz spezifischen

Corporate Design erstellte Banner als „Vorlage“ abspeichern und dann

im gleichen oder in anderen Webprojekten immer wieder verwenden, was ggf.

eine enorme Arbeitserleichterung und Zeitersparnis darstellen kann.

Wie Sie sicherlich bereits bemerkt haben, sind die Bannervorlagen im Randmenü

funktionell organisiert. Hier finden Sie Kategorien wie “1st Fold”, “Business

Banners”, “Call to Action”, “Contacts”, “Header”, “Footer”, “Content”, “Pricing

Tables” etc. pp. Gehen Sie diese Kategorien einfach einmal durch und laden Sie

das Eine oder Andere Banner per Click in die Editor-Arbeitsfläche. Dazu brauchen

Sie es nur im Randmenü mit der Maus anzuklicken, und schon wird es am

Ende Ihrer Webseite angefügt.

Genau wie jedes andere Element im „Cheetah“-Webbaukasten auch, besitzen

Banner ein kleines Kopfmenü, welches sichtbar wird, sobald Sie es im Editor

fokussieren (einfach anklicken – Sie dürfen dabei aber kein auf dem Banner liegendes

Element erwischen). Mit dem "Papierkorb-Symbol" können Sie jederzeit

das komplette Banner wieder löschen und über das „Clone-Symbol“ beliebig

vervielfältigen.

HINWEIS: Das "Kopfmenü" eines Banners oder eines Elements wird dann

sichtbar, sobald der Banner bzw. das entsprechende Element im Editor "fokussiert"

(d. h. angeklickt) wird.

Wenn Sie genau hinschauen, dann sehen Sie am unteren Rand genau in der

Mitte einen kleinen blauen Kreis. Wenn Sie ihn mit der Maus „anfassen“ und

die linke Maustaste gedrückt halten, dann können Sie ganz bequem und stufenlos

die Höhe des Banners ändern. Wenn Sie es dagegen pixelgenau haben

möchten, dann finden Sie im Einstellbereich für die Bannereigenschaften die

Kategorie „Größe“ (eventuell zuvor „Stift-Symbol“ im Kopfmenü des Banners

anklicken). Hier können Sie die Bannerhöhe in Pixel direkt eintragen, den

Schieberegler bemühen oder, ganz bequem zum Feintuning, die „up and down“

– Tasten des Eingabeelements verwenden.

Dadurch, dass Sie jederzeit die Höhe eines Banners ändern können, ist es beispielsweise

kein Problem mehr, nachträglich neuen Text einzugeben oder

68

weitere Elemente einzufügen. Wenn hierzu der Platz nicht mehr ausreicht –

einfach die Bannerhöhe vergrößern. Früher hätte das u. U. das Verschieben

aller unter dem Text liegenden Elemente auf der Webseite erforderlich gemacht,

was bei langen Webseiten schnell zu einer Sisyphos-Arbeit ausarten

konnte. In „Cheetah“ werden die darunter liegenden Banner einfach mit nach

unten verschoben. Und das war es auch schon.

Angenommen, Sie möchte eine Webseite erstellen, die aus einem werbewirksamen

„Vorstellungsbereich“ = „Business-Banner“, einem „Call-to-Action“ –

Bereich, einem Bereich, wo sich Ihr Team vorstellt, und einem Footer besteht.

Dann sieht „rapid webdesign a la‘ Cheetah“ wie folgt aus: Sie suchen Sich in der

Bannerauswahl ein passendes „1st Fold“ oder „Business Banner“ aus, dann aus

der Kategorie „Call to Action“ ein dazu passendes Design, dann das Gleiche aus

der Kategorie „Team“ und schließlich noch einen passenden Footer, wobei Sie

das jeweils ausgewählte Banner per Mausklick sofort in den Designer übertragen.

Und nun können Sie beginnen – so wie Sie es bereits bei der Verwendung

eines kompletten Website-Templates gesehen haben – die Banner und die darauf

liegenden Elemente nach Ihren Vorstellungen anzupassen.

Wenn Sie also ganz schnell eine einfache Webseite - z. B. für ein Restaurant -

erstellen möchten mit der Möglichkeit, dass sich potentielle Gäste immer über

die Tagesangebote per Newsletter informieren lassen können, dann wählen Sie

einfach unter "Business Banners" das Banner "Restaurant Banner 3" und anschließend

den Footer-Banner "Express Footer" aus. Und siehe da, das Ergebnis

sieht schon ganz manierlich aus:

69

Und wenn Sie sich jetzt noch in der Vorschau die Smartphone-Ansicht anschauen

- wirklich fast perfekt!

Hier erkennen Sie bereits einen entscheidenden Vorteil von „Cheetah“. Selbst

wenn Sie ihre Webseite nur für den PC-Bildschirm designen, wird die Smartphone-Ansicht

sofort zumindest brauchbar sein. Selbstverständlich können Sie

auf diese Ansicht noch Einfluss nehmen und auch hier spezielle Anpassungen

vornehmen. Sie müssen dazu nur den Editor in den Smartphone-Modus schalten.

Die entsprechende Schaltfläche finden Sie links oben im Hauptmenü.

70

Natürlich ist die auf diese Weise in weniger als einer halben Minute zusammengeklickte

Webseite noch nicht verwendbar, geschweige denn fertig. Sie

müssen zumindest noch die Vorlagentexte durch eigene Texte ersetzen, eventuell

das Hintergrundbild ändern oder auch die Positionen der einzelnen Elemente

Ihren Vorstellungen entsprechend anpassen. Ihnen sind hierbei keine

Grenzen gesetzt. Auch reicht eine Seite nicht aus, denn es fehlt ja noch das obligatorische

Impressum und die Datenschutzerklärung. Beides wird man vernünftigerweise

auf eine neue Seite auslagern (schon wegen der ausufernden

Rechtstexte!) und dann sinnvollerweise mit einem entsprechenden Texthinweis

im Footer- oder Header-Bereich der Webseite verlinken. Aber dazu später

mehr.

Allgemeines zur Strukturierung einer Webseite mit Banner

Die Arbeit mit Bannern unterstützt den Umstand, dass Webseiten immer eine

gewisse Struktur haben sollten. Dabei gilt es, den eigentlichen Inhalt der Webseite

nach logischen Gesichtspunkten sowie thematisch passend zu gruppieren

und sinnvoll miteinander zu verknüpfen. Das verbessert sowohl die Nutzerorientierung

(gemessen an seiner Verweildauer auf der Webseite) als auch die

Sichtbarkeit für Suchmaschinen. Ordentlich strukturierte Webseiteninhalte und

zur Webpräsentation verknüpfte Unterseiten führen nämlich dazu, dass der

Crawler die Seite besser versteht und einordnen kann mit dem Ergebnis eines

besseren Rankings in einer Suchmaschine. An dieser Stelle soll es erst einmal

um die generelle Struktur einer Einzelseite einer Website gehen, die man sich

ganz allgemein aus verschiedenen Bereichen aufgebaut vorstellen kann:

Kopfbereich (Header)

Der Header einer Webseite ist meist ein mehr oder weniger breiter Streifen

ganz oben auf der Webseite und enthält meistens ein Logo, eine Überschrift

und manchmal auch eine Menüstruktur zur Navigation zu den entsprechenden

Unterseiten. Er ist in der gleichen Form oftmals auch auf allen Unterseiten der

Website vorhanden und dabei häufig so konfiguriert, dass er beim Scrollen

über den Inhalt der Webseite seine Position nicht ändert. „Cheetah“ stellt übri-

71

gens mit sogenannten „Header-Vorlagen“, die man separat designen und dann

über ihren Namen beliebig anderen Unterseiten explizit zuordnen kann, eine

besonders elegante Möglichkeit, Webseiten mit einheitlichen Kopfbereichen

auszustatten, zur Verfügung (gilt übrigens analog auch für „Footer“).

Navigation

Webseiten mit mehreren Unterseiten erfordern eine Navigationsmöglichkeit

die so gestaltet sein sollte, dass der Nutzer mit möglichst wenigen Klicks alle

Informationen, die ihm interessieren, erreichen kann. Die Navigation kann über

eine klassische Menüstruktur, über Buttons, über einfache Links (Impressum)

oder auch Tabs realisiert werden. Häufig wird die Hauptnavigation in den Kopfbereich

eingebaut, was in den meisten Fällen auch die sinnvollste Möglichkeit

darstellt. Aber auch vertikale Menüstrukturen zur internen Verlinkung der einzelnen

Unterseiten einer Website sind oftmals sehr gute Alternativen. Und bedenken

Sie auch: Suchmaschinen mögen eine gute, logisch strukturierte interne

Verlinkung und belohnen Sie mit ein paar Rankingpositionen „nach oben“ in

ihren Suchergebnissen.

Hauptinhalt (Content)

Der größte Teil im Zentrum der Webseite ist der Content-Bereich, der gemäß

seinem Inhalt natürlich auch strukturiert sein sollte. Er enthält Texte, Bilder,

Videos etc. pp. und wird auf jeder Unterseite andere Inhalte haben. Trotzdem

sollte man hier ein gewisses "Corporate Identity" erkennen können, da genau

so etwas das Nutzerverhalten positiv beeinflusst. Wenn es das Thema Ihrer

Webseite zu lässt und Sie für ausgewählte Keywords gleichsam hoch in den

Suchmaschinenergebnissen ranken möchten, dann sollten Sie möglichst viel

„Inhalt“ in Form von Texten in ihre Webseite einbauen. Das signalisiert dem

Crawler nämlich eine gewisse Relevanz der Webseite. Als Faustregel sollte man

sich dabei merken, dass der Gesamttext auf der Webseite rund 500 Wörter

(und mehr) betragen sollte, um vom Crawler als „besonders relevant“ eingeschätzt

zu werden.

72

Sidebar

Zusätzliche Informationen in Form von Links, von Zitaten oder von Werbung

wird man nicht im Hauptfenster darstellen, sondern in eine rechts oder links

angeordnete Sidebar auslagern. Man kann diese Vorgehensweise besonders oft

auf Zeitungs-Webseiten beobachten. Manchmal findet man auf Sidebars auch

Informationen und Navigationsmenüs, die auf allen Unterseiten gleich sind.

Man beachte aber, dass eine derartige Anzeige in der mobilen Ansicht nicht

möglich ist. Hier muss man u. U. auf andere Gestaltungsmittel zurückgreifen,

die ein analoges Ergebnis zeigen.

Fußbereich (Footer)

Hierbei handelt es sich um einen Streifen am Ende der Webseite, der meist in

kleiner Schrift Informationen zum Herausgeber der Webseite, Links auf Impressum.

Datenschutzerklärung und Haftungsausschluss und manchmal auch eine

Maske für die Bestellung eines Newsletters enthält. Er kann zwar auch unten

fixiert werden. Meist wird man ihn aber nur dann erreichen, wenn man bis an

das Ende der Webseite scrollt. In „Cheetah“ lassen sich Footer genauso wie

Header separat designen und dann über ihren Namen den anderen Unterseiten

explizit zuweisen.

73

Bildschirm, Seitenhintergrund und Banner

Desktop-Bildschirme können unterschiedliche Größen und Auflösungen besitzen.

Webseiten, die sich diesem Umstand anpassen, nennt man „responsiv“.

Bei mit „Cheetah“ erstellten Webseiten kann man dieses Verhalten sehr gut

beobachten, sobald man das Browserfenster stufenlos verkleinert. Der Inhalt

passt sich dem an und schlägt irgendwann in die mobile Ansicht um. Oder anders

ausgedrückt: Das responsive Verhalten von mit „Cheetah“ erzeugten

Webseiten ist diesen Webseiten inhärent und braucht von Ihnen als Designer

nicht weiter beachtet zu werden.

Aber es gibt noch ein „Element“, welches wir noch nicht behandelt werden. Es

ist der Seitenhintergrund selbst, auf dem wiederum die einzelnen Banner angeordnet

sind. Standardmäßig ist er weiß und kann auch meist so belassen

werden. Er lässt sich aber auch farbig gestalten oder mit einem Bild oder einem

Kachelfeld von Bildern ausstatten, was im Zusammenspiel mit mehr oder weniger

transparenten Bannern interessante optische Effekte erlaubt.

74

Den „Seitenhintergrund“ an sich finden Sie nicht in der Banner- oder Elementepalette

des rechten Randmenüs, sondern unter einem eigenen Icon am Anfang

der Werkzeugleiste des Editors. Hier können Sie explizit eine Hintergrundfarbe

festlegen, ein Hintergrundbild aus dem Builderall-Repository zuweisen

und dessen Anordnung, Position und Skalierung festlegen. Was hier die einzelnen

Auswahlmöglichkeiten bedeuten, erschließt sich aus dem dazugehörigen

Hint und dem damit einhergehenden Verhalten.

Sie werden jetzt vielleicht fragen – „Was soll das? Der Seitenhintergrund wird

doch durch die darüber liegenden Banner abgedeckt und damit unsichtbar“.

Das stimmt auch. Aber ein Banner selbst kann – wie bereits kurz erwähnt –

durchaus transparent geschaltet werden. Dazu legen Sie ein Banner auf eine

Seite mit einem zuvor zugewiesenen Hintergrundbild und wechseln in den

Bannereigenschaften in die Kategorie „Allgemeine Farben“. Unterhalb der „Regenbogenpalette“

finden Sie eine Art „Schiebeschalter“, über den Sie die

Transparenz des Banners stufenlos von „völlig durchsichtig“ bis „völlig undurchsichtig“

einstellen können.

75

In diesem Zusammenhang sei gleich auf noch eine weitere wichtige Eigenschaft

eines Banners hingewiesen. Er besteht nämlich aus einem „äußeren Hintergrund“

und einem „internen Hintergrund“. Sie sehen das, wenn Sie in den Bannereigenschaften

in die Kategorie „Interner Hintergrund“ wechseln und dort

etwas an dem Transparenzregler spielen. Gewöhnlich wird man jedoch einem

Banner jeweils eine „Allgemeine Farbe“ und eine „Interne Farbe“ zuweisen o-

der beide Farben gleich lassen. Der „interne Bereich“ wird übrigens explizit

durch eine dünne blaue Linie angezeigt, wenn die Maus ein Banner berührt o-

der durch ein dick umrahmtes hellblaues Rechteck begrenzt, sobald Sie mit der

Maus ein Element aus der Elementepalette des rechten Randmenüs in diesen

Bereich ziehen. Denn dieser „interne Bereich“ hat eine durchaus wichtige Bedeutung

und in „Cheetah“ auch eine feste Breite – 1140 Pixel

(=“Seiteninhaltsbreite“ im Desktop-Modus). Deshalb sollten Sie hier auf jeden

Fall darauf achten, dass Sie Texte, Bilder, Videos, iFrames etc. möglichst immer

innerhalb dieses „internen Bereichs“ anordnen um von vornherein sicher zu

stellen, dass sie später auch in allen Bildschirmauflösungen vollständig angezeigt

werden.

76

Unabhängig von der Transparenz können Sie einem Banner sowohl insgesamt

als auch nur dessen internen Bereich eine individuelle Farbe geben. Ja selbst

die Zuordnung eines Hintergrundbildes oder eines Videos ist problemlos möglich,

woraus sich übrigens eine Menge interessanter Gestaltungsmöglichkeiten

ergeben…

In der Tablett- und mobilen Ansicht werden alle Seitenbereiche außerhalb

des internen Hintergrundes abgeschnitten (gilt nicht für den Editier- und Vorschaumodus).

Auch der Übergang von einem Banner zu einem anderen kann in die Webseitengestaltung

mit einbezogen werden. Die Kategorie „Banner Trenner“ stellt

eine große Anzahl farblich konfigurierbarer und mit verschiedenen Animationseffekten

ausgestattete „Trenner“ zur Verfügung, die jeweils am unteren Ende

eines Banners ihre Wirkung entfalten:

Auch hier sollten Sie die einzelnen Trenner und deren Konfigurationsmöglichkeiten

einmal selbst in Ruhe ausprobieren, um sich so einen Überblick über die

damit zu realisierenden optischen Effekte zu verschaffen.

77

Wie man ein Banner mit Gestaltungselementen belegt

Im „Cheetah“ Sitebuilder stehen Ihnen eine riesige Anzahl nativer und auch bereits

zu Funktionseinheiten zusammengebauter Gestaltungselemente zur Verfügung,

die Sie in sinnvolle Kategorien geordnet alle im Randmenü unter „Neu“

– „Elemente“ finden. Klicken Sie dazu einfach auf eine der Kategorien (beispielsweise

„Bild“), und es werden Ihnen untereinander alle unter dieser Kategorie

verfügbaren Elemente aufgelistet:

78

Jetzt brauchen Sie nur noch eines davon auswählen und per drag’n drop auf

das gewünschte Banner legen. Anschließend können Sie mit der Maus oder den

Eigenschaften-Einstellungen (zuvor im Kopfmenü das Stiftsymbol anklicken) die

Position, sowie Größe und Drehwinkel (wenn es bei dem Element Sinn macht)

festlegen und dessen Eigenschaften wie Farbe, Umrandung, Animationseffekte

etc. pp. so ändern, dass Sie ihren Vorstellungen entsprechen.

Diese Vorgehensweise ist bei allen Elementen gleich und wird Ihnen ganz

schnell in Fleisch und Blut übergehen.

Um die Eigenschaften eines fokussierten Elements zu ändern, muss nicht unbedingt

das rechte Randmenü eingeblendet sein. Es reicht in diesem Fall aus,

wenn Sie die rechte Maustaste klicken. Als Reaktion darauf öffnet sich dann

ein frei positionierbares Einstellungsfenster, in dem Sie genauso wie im

Randmenü die Elementeeigenschaften anpassen können.

79

Oft kommt es vor, dass Sie ein Element noch einmal benötigen. Dann verwenden

Sie doch einfach die Funktion „Clone element“ im Kopfmenü des entsprechenden

Elements. Wie der Name schon sagt, erzeugt diese Funktion von genau

diesem Element eine exakte Kopie, die Sie schließlich nur noch neu positionieren

müssen. Bei Elemente-Containern (also insbesondere Boxen) wird übrigens

deren Inhalt immer mit geklont.

Das Nützliche am „Elemente klonen“ liegt insbesondere auch darin, dass alle

gegenüber dem Original geänderten Eigenschaften 1:1 mit übernommen werden.

Andernfalls hätten man diese nämlich jeweils wieder neu einstellen müssen

– eine Arbeit, die man sich also auf diese Weise ersparen kann…

Selbstverständlich lassen sich auch ganze Banner klonen. Nur werden diese sofort

ans Ende der Webseite angehangen, von wo Sie sie dann nur noch über

„Order Panels“ in den Bannereigenschaften an die gewünschte vertikale Position

verschieben müssen.

HINWEIS: Sie können ein fokussiertes Element auch mit <Strg><C> komplett

in die Zwischenablage kopieren und dann an anderer Stelle mit <Strg><V>

wieder in die Webseite einfügen.

Wenn es darum geht, solch ein Element auf der Webseite exakt auszurichten,

dann stehen dafür verschiedene Techniken zur Verfügung. Beginnen wir mit

dem Kopfmenü. Dort finden Sie das Symbol für „Zentrieren“. Wenn Sie darauf

klicken, wird das entsprechende Element genau in seinem „Container“

80

zentriert. Das kann das Banner sein, aber z. B. auch eine Box, auf die Sie das

ausgewählte Element gelegt haben.

Um das gleich einmal selbst auszuprobieren, sollte Sie als nächstes eine „Box

Ihrer Wahl“ auf das Banner legen und auf die Box anschließend ein „Button Ihrer

Wahl“:

Wenn Sie jetzt zuerst den Button zentrieren, dann wird er innerhalb der Box

zentriert, denn die Box fungiert hier als Container für den Button. Wenn Sie dagegen

die Box zentrieren, dann wird die Box samt ihrem Inhalt auf dem Banner

zentriert.

Eine weitere schnelle Methode, Elemente zu positionieren bzw. auszurichten

sind die Positionslinien, die aufgeblendet werden, sobald Sie das Element mit

der Maus anfassen und mit gedrückter linker Maustaste im Editor bewegen.

Diese in grün dargestellten Positionslinien orientieren sich am Bannerrand, an

dessen Zentrum und auch an den „Rändern“ anderer, bereits auf dem Band

81

positionierter Elemente. Damit gelingt eine optimale Ausrichtung eines Gestaltungselements

auf der Webseite meist ganz schnell. Zum „Feintuning“ können

Sie schließlich noch die Kursortasten verwenden, mit deren Hilfe Sie das fokussierte

Element in jede Richtung pixelweise verschieben können.

Mit den Kursortasten können Sie ein fokussiertes Element im Editor pixelweise

in alle Richtungen verschieben.

Kommen wir jetzt zum „Lineal“, welches Sie über die entsprechende Schaltfläche

im Hauptmenü des Editors ein- und auch wieder ausblenden können. Eingeblendet

stellt es sich als eine oben horizontale und als eine links vertikale Pixelskala

dar, deren Nullpunkt mit der linken oberen Ecke des internen Bannerbereichs

des ganz oben liegenden Banners festgelegt ist. Das Wesentliche aber

ist, dass Sie über dieses Lineal horizontale und vertikale Hilfslinien anlegen

können, an die sich wiederum ihre Gestaltungselemente aufgrund von deren

„magnetischer“ Wirkung andocken lassen.

Um eine neue Hilfslinie anzulegen, klicken Sie einfach bei der gewünschten Position

mit dem Mauszeiger in das entsprechende Lineal. Die Hilfslinie wird dann

an dieser Position sofort über die gesamte Editorfläche gezeichnet und der

Mauskursor ändert sich in ein Kreuz. Wenn Sie jetzt wieder die linke Maustaste

gedrückt halten, können Sie die Hilfslinie genau dorthin positionieren, wo Sie

sie haben möchten. Im Fall einer vertikalen Hilfslinie wird Ihnen dabei als Hint

noch die absolute y-Position in Pixel angezeigt.

Die auf dem Lineal liegenden Enden der Hilfslinie werden übrigens mit einem

blauen „Knubbel“ versehen. Wenn Sie diese mit dem Mauszeiger berühren,

erscheint daran das „Löschkreuz“, d. h., wenn Sie jetzt darauf klicken, dann

wird die Hilfslinie aus dem Editor gelöscht.

Was die Arbeit mit Hilfslinien so angenehm macht, ist ihre bereits erwähnte

„magnetische“ Wirkung. Wenn Sie also mit einem Element in die unmittelbare

Nähe einer solchen Hilfslinie oder dem Schnittpunkt zweier Hilfslinien

kommen, dann schnippt das Element ganz automatisch in die entsprechende

Position.

82

Wie man eigene Elemente- und Bannervorlagen erstellt

Gut designte Elemente-Container und Banner bieten sich geradezu an, auch auf

anderen Webseiten wiederverwendet zu werden. Genau um solch eine Wiederverwendbarkeit

zu ermöglichen, lässt sich in „Cheetah“ eine eigene webseitenübergreifende

Bibliothek aus eigenen Vorlagen aufbauen. Das ist insbesondere

dann nützlich, wenn man beabsichtigt, bei allen seinen Webseiten ein

einheitliches Corporate Design durchzuhalten.

Eine eigene Elemente- oder Bannervorlage zu erstellen ist übrigens genauso

einfach, wie diese zu klonen: Element oder Banner fokussieren und dann im

Kopfmenü auf das Disketten-Icon klicken. Es öffnet sich dann ein Fenster, in

dem Sie aufgefordert werden, der Vorlage einen eindeutigen Namen zu geben.

Sobald Sie das getan und die Vorlage gespeichert haben, finden Sie diese im

Randmenü im Bereich „Vorlagen“ entweder unter „Banner“ oder „Elemente“

(natürlich wieder entsprechend kategorisiert) wieder. Ihre Verwendung gestaltet

sich analog der aller anderen Banner und Elemente in „Cheetah“ („drag’n

drop“, Positionieren, Eigenschaften anpassen etc.).

TIPP: Überlegen Sie sich eine Namenskonvention für Ihre eigenen Vorlagen.

Denn sie werden im Gegensatz zu den in „Cheetah“ standardmäßig enthaltenen

Banner und Elementen nicht grafisch in der Vorlagenbibliothek angezeigt,

sondern lediglich die von Ihnen vergebenen Bezeichner.

Wie man temporär Elemente auf der Webseite aus- und wieder

einblendet

Sie können jederzeit ganze Banner, Elemente-Container oder Einzelelemente

auf Ihrer Webseite verbergen und bei Bedarf wieder einblenden. Dazu dient die

Funktion „Hide element“ im Kopfmenü eines entsprechenden Banners bzw.

Elements. Sobald sie darauf klicken, verschwindet es. Aber im Gegensatz zum

Löschen (Papierkorb-Symbol) ist es nicht weg. Sie können es bei Bedarf wieder

einblenden. Dazu brauchen Sie nur in der Hauptmenüzeile des Editors die

Schaltfläche mit dem Auge-Icon („Versteckte Elemente“) anklicken, worauf sich

83

eine Liste mit allen versteckten Elementen öffnet. Sobald Sie einen Bezeichner

darin mit der Maus berühren, wird das dazugehörige Element auf der Webseite

wieder angezeigt. Wenn Sie es dagegen dauerhaft wiederherstellen möchten,

dann klicken Sie auf das „Auge“ rechts daneben. Der Eintrag in der Auflistung

verschwindet und das Element ist wieder auf der Webseite sichtbar.

Diese Funktion ist insbesondere dann von Nutzen, wenn man beispielsweise

ein Banner separat für die Desktopansicht und die Smartphone-Ansicht entwerfen

möchte. Denn beides muss man im Desktopmodus des Editors tun. Der

Trick besteht nun einfach darin, dass man das fertige Band der mobilen Ansicht

in der Desktopansicht und das fertige Band der Desktopansicht in der mobilen

Ansicht wechselseitig verbirgt.

Aber auch wenn man – z. B. bei einer Landingpage – verschiedene Varianten

für einen AB-Split-Test vorbereiten möchte um zu sehen, welche Gestaltungsvariante

öfters im Netz angeklickt wird, kann diese Funktion sehr von Nutzen

sein.

84

„Rapid Design“ einer ersten Website

Kommen wir jetzt zu einer ersten kleinen Beispielwebseite, die quasi „blitzschnell“

mit „Cheetah“ entwickelt werden soll (ein Webdesigner, der schon etwas

mit dem „Cheetah“ Sitebuilder vertraut ist und auch ein paar Vorbereitungsarbeiten

erledigt hat, sollte dafür kaum mehr als eine halbe Stunde benötigen

– deshalb „Rapid Design“).

Das Ziel der Übung soll sein, eine kleine Landingpage zum Thema "Cuba-

Zigarren" zu entwickeln, welche aus einem Header, einem Content-Band und

einem Footer mit Kontaktformular besteht. Um uns die Arbeit zu vereinfachen,

bauen wir die Inhalts-Struktur aus vorgefertigten Banner-Templates auf, die wir

anschließend anpassen. Natürlich hätte man auch (was der häufigere Fall sein

dürfte) mit völlig leeren Bändern beginnen können.

Was die erwähnten „Vorbereitungsarbeiten“ betrifft, so bestehen Sie hier in

erster Linie aus einer Vorauswahl von lizenzfreien Bildern und eventuell in der

Bereitstellung von Textbausteinen, die Verwendung finden sollen. Und natürlich

sollte man sich schon gewisse Vorstellungen über den Aufbau und die

Funktionsweise der Website gemacht haben (beispielsweise in Form einer einfachen

Skizze).

In diesem Beispiel soll die Website lediglich aus einer Homepage und einer separaten

Impressum-Seite bestehen, die im Seitenfooter verlinkt ist.

Legen Sie im „Cheetah“ Sitebuilder eine neue Website mit dem Namen „Cuba-

Zigarren“ an und öffnen Sie anschließend in der Seitenansicht die Seite „Home“

im Editor. Über alle Einstellungen, die über die Standardeinstellungen hinausgehen,

kümmern wir uns später.

85

Bannerstruktur der Homepage zusammenstellen

Die Homepage soll aus drei Bannern bestehen: dem Header, einem 1st Fold-

Banner und einem Footer. Wir wählen dazu aus den Banner-Vorlagen zuerst

den Banner „Express Header“ (Kategorie „Header“), dann den 1st Fold – Banner

„1st Fold – 08“ und dem Footer „Express Footer“. Das Ergebnis sieht dann

im Editor so aus:

Anpassung der Bannerinhalte an die Aufgabenstellung

Jetzt können wir beginnen, unsere Webseite anhand der in den Editor geladenen

Template-Banner zu gestalten. Hier macht es sich bezahlt, wenn man bereits

im Vorfeld einige Vorbereitungen getroffen hat. Das betrifft u. a. die Bereitstellung

der einzubauenden Bilder in einem separaten Ordner zusammen

mit ein paar vorformulierten Texten, die unformatiert in einer einfachen Textdatei

vorliegen sollten. Letztere kann man dann mit einem Editor oder mit

86

WordPad öffnen und ganz oder stückchenweise über die Zwischenablage in die

entsprechenden Textfelder der Webseite übertragen.

Was das Bildmaterial betrifft, so sollte es entweder im png- oder jpg-Format

vorliegen, möglichst die Größe in Pixel haben, wie sie auch auf dem Desktop

erscheinen und - aus SEO-Gründen - einen Dateinamen besitzen, der zusammen

mit einem Schlüsselwort möglichst beschreibt, was auf dem jeweiligen

Bild zu sehen ist.

HINWEIS: Zur Vorbereitung der Bilder eignen sich diverse Programme wie

beispielsweise IrfanView oder der Fotomanager von Builderall, um nur zwei

zu nennen. Bringen Sie damit ihre Bilder ungefähr auf die gleiche Größe, wie

sie auch die Bilder im Template haben, welche Sie ersetzen möchten. Dieser

Schritt ist zwar nicht unbedingt notwendig, da Sie innerhalb des Editors die

Bildgröße bei gleichbleibendem Seitenverhältnis stufenlos anpassen können.

Aber man sollte sich daran gewöhnen, es doch zu tun, da übergroße Bilddateien

sich immer negativ auf das Ladeverhalten einer Webseite auswirken.

In unserem Fall tauschen wir das Hintergrundbild des Content-Banners durch

ein werbewirksames Bild, welches zu unserem Thema passt, aus. Es liegt in einem

Ordner der Festplatte bereits fertig bearbeitet vor und zeigt eine Schachtel

edler Cuba-Zigarren...

Nachdem wir im Editor den mittleren Content-Banner fokussiert haben, suchen

wir im rechten Randmenü (bzw. dem Eigenschaften-Dialogfenster) nach der

Kategorie „Allgemeine Farben“. Denn hier kann man dem gesamten Banner ein

Hintergrundbild zuordnen. Wie Sie am Vorschaubild sehen, ist das im Template

auch geschehen. Da wir aber nur ein Bild im internen Bereich verwenden wollen,

werden wir es hier auch gleich löschen. Anschließend wechseln wir in die

Kategorie „Interner Hintergrund“. Auch hier finden Sie die Einstellung „Bild ändern“

und ein Klick darauf führt uns in das Builderall Repository, in das wir nun

das gewünschte Hintergrundbild hochladen.

87

Sobald der Ladevorgang abgeschlossen ist, erscheint das Bild im Ordner und

kann mit der Maus explizit markiert werden (d. h. es wird "umrahmt"). Jetzt

nur noch "Speichern" klicken, und das ehemalige Hintergrundbild wird im Webseiteneditor

durch das eben ausgewählte ersetzt. Außerdem wird es nun auch

im Einstellungsbereich des Banners als „Background Image“ angezeigt.

88

Nun sollten Sie im Eigenschaftenbereich noch die weiteren, durch "Radio

Groups" gekennzeichneten Eigenschaften "Origin", "Size" und "Repeat" durchprobieren

und beobachten, was dabei im Editor mit dem Bild passiert.

Auf dem Content-Banner befindet sich oben noch eine blaue Box mit einem

Texttemplate, welche den oberen Teil des Bildes abdeckt. Diese Box sollten Sie

als Nächstes über die Papierkorb-Funktion des dazugehörigen Kopfmenüs löschen.

Nun werfen wir schnell noch einen Blick auf den Header. Da wir weder Logo

noch Menü benötigen, löschen wir beide Elemente auf die gleiche Weise wie

eben die Box. Das verbleibende Header-Banner wollen wir stattdessen mit einem

hübschen Werbespruch versehen: "Der Luxus an einer Zigarre ist nicht deren

Preis, sondern die Zeit, die man mit ihr verbringt". Und auch das ist schnell

geschehen. Dazu wechseln wir in der Elementeauswahl in die Kategorie „Text“

und ziehen von dort eine h6-Überschrift auf das Banner und richten das umschriebene

Rechteck linksbündig etwas auf dem Banner aus. Anschließend

wechseln wir mit einem Doppelklick darauf in den Texteditor, wo wir als erstes

den darin enthaltenen Text durch den Werbespruch ersetzen (kann auch in der

üblichen Weise über die Zwischenablage aus einer Textdatei heraus erfolgen).

Nun muss nur noch die Fontfarbe auf „weiß“ und die Textausrichtung auf

„linksbündig“ gestellt werden. Auch sollte man die Grundformatierung in der

entsprechenden Klappbox von „h6“ auf „Neutral Paragraph“ stellen, um einen

Suchmaschinen-Crawler nicht unnötig zu verwirren… Als Fontgröße ist hier 28

Pixel angebracht, weil dann der gesamte Schriftzug ungefähr den Seiteninhaltsbereich

ausfüllt (Text vorher mit der Maus vollständig markieren! Ansonsten

zeigt die Änderung der Fontgröße (Size) keine Wirkung):

89

Nach der gleichen Methode können Sie jetzt auch den Text auf der Banderole

austauschen und eventuell umformatieren. Zuvor sollten Sie noch den Aktion-

Button löschen und die blaue Hintergrundfarbe der Banderolen-Box durch ein

passendes Braun ersetzen (Farbcode HEX „3C3427“).

HINWEIS: In der einheitlichen Farbauswahl der „Cheetah“-Elemente können

Sie explizit immer auch einen Farbcode entweder im HEX- oder RGB-Format

eingeben. Solche Farbcodes kann man leicht aus FLAT UI – Farbpaletten oder

mittels eines „Color-Pickers“ direkt aus Webseiten entnehmen. In diesem Zusammenhang

sollten Sie die Chrome-Erweiterung „ColorPick Eyedropper“ o-

der ein analoges Tool installieren und einmal ausprobieren. Sie werden es

irgendwann nicht mehr missen wollen.

Am Ende könnte der Content-Banner dann folgendermaßen aussehen (Boxlänge

auf 570 Pixel kürzen, rechte Ecken gerundet mit Radius 10 darstellen):

90

Damit ist das „Content-Banner“ erst einmal fertig und wir können uns dem

Footer widmen. Die Texte sind schnell ausgetauscht:

Sie haben sicherlich bemerkt, dass die Texte auf vollkommen durchsichtigen

Boxen liegen. Auf diese Weise lassen sie sich quasi im Ganzen neu positionieren

(oder als Vorlage speichern etc.), in dem man einfach die ganze Containerbox

und nicht jeden einzelnen Text separat an den gewünschten Ort verschiebt.

Bleibt noch das Bestellformular für den Newsletter. Nach der Beschriftung des

Kopfmenüs handelt es sich hier um ein spezielles „Mailingboss-Formular“, was

übrigens auch Sinn machte, denn mit dieser Website wollen wir ja u. a. die E-

Mailadressen von Zigarrenliebhabern einsammeln, um sie später gezielt im

Rahmen von E-Mail-Marketingaktionen ansprechen zu können. Konkret bedeu-

91

tet das, dass – sobald jemand über dieses Formular einen Newsletter bestellt –

dessen E-Mail-Adresse in einer speziellen Liste im E-Mail-Autoresponder „Mailingboss“

von Builderall landet. Eine solche Liste können Sie entweder separat

in Mailingboss anlegen, eine dort bereits vorhandene mit dem Eingabeformular

verbinden oder eine Liste direkt über das Eingabeformular anlegen. Dazu müssen

Sie in dessen Kopfmenü die Schaltfläche mit dem Zahnradsymbol anklicken,

worauf sich ein kleines Dialogfenster öffnet.

In diesem Fall werden die bereits zuvor in Mailingboss angelegten Listen „cigar

lover“ und „E-Mail Marketing“ zur Auswahl angeboten. Sie können aber auch

speziell für diese Website eine neue Liste aus dem Dialogfenster heraus erstellen.

Bedingung dafür ist aber, dass Sie bereits die Anmeldeprozedur von Mailingboss

durchlaufen und ihre E-Mailadresse, die als Absender dient, von Mailingboss

haben verifizieren lassen.

Wir wählen hier die zuvor in Mailingboss erstelle Liste „cigar lover“ aus und

verlängern anschließend etwas das Footer-Band, damit das Eingabeformular

auch ordentlich darauf angezeigt wird.

Welche Eingabefelder im Formular angezeigt werden und ob zusätzlich dazu

auch eine DSGVO-konforme Datenschutzbestätigung in Form einer Checkbox

ins Formular integriert wird, legt man nicht explizit im Eingabeformular selbst

fest, sondern im Zuge der Listenkonfiguration direkt in Mailingboss.

92

Auf Weiterleitungen und den Einsatz eines reCaptchas verzichten wir erst einmal

und wenden uns den eigentlichen optischen Gestaltungsmöglichkeiten zu.

Sie werden, wie Sie bereits wissen, wie bei jedem anderen Element auch, im

Eigenschaften-Bereich des Mailingboss-Formulars in Kategorien unterteilt

übersichtlich aufgelistet. Hier sollten Sie jetzt ein wenig „herumspielen“ und

dabei die einzelnen Einstellmöglichkeiten erforschen. Zum Schluss könnte der

Footer dann in etwa so aussehen:

Aber auch dann ist die Webseite noch nicht fertig, denn es fehlt noch das eigentliche

Impressum und die Datenschutzerklärung. Und genau für diese benötigen

wir eine weitere Webseite, die wir nach Erstellung mit dem Impressumslabel

des Footer verlinken werden.

Zum Abschluss dieses Kapitels noch ein paar Worte zur Funktion "Speichern",

die im Editor in zwei Modi - "Nicht jetzt" und "Alles klar" zur Auswahl angeboten

wird. Standardmäßig sollten Sie immer "Nicht jetzt" auswählen, so lange

ihre Webseite noch nicht fertig ist, eine bereits Veröffentlichte nicht sofort aktualisiert

werden soll (was u. U. bei einem Besucher Irritationen auslösen könnte)

oder wenn Sie die Website noch nicht in ihrer vollen Funktionalität ausprobieren

möchten. Denn wenn Sie "Alles klar" auswählen, dann wird Ihre Webseite

veröffentlicht und ist weltweit über die von Builderall automatisch zugeordnete

Subdomän (bzw. Ihrer Domän, sollten Sie diese bereits aufgeschaltet haben)

innerhalb weniger Sekunden sichtbar. Unter welcher Domän / Subdomän

dann die Webseite erreichbar ist, wird Ihnen in einem Dialogfenster angezeigt.

93

Dort finden Sie auch eine Schaltfläche, über den Sie die veröffentlichte Webseite

in ihrem Browser unter einem neuen Tab öffnen können. Sie können an dieser

Stelle aber auch eine eigene Domän aufschalten, die Sie bereits erworben

haben oder die Sie direkt über Builderall erwerben können.

Impressumseite anlegen und im Footer verlinken

Eine Webpräsentation besteht gewöhnlich nicht nur aus einer Homepage, sondern

aus einer Vielzahl (manchmal "Hunderte") von Unterseiten, die nach bestimmten

Gesichtspunkten miteinander verlinkt sind. Auch in „Cheetah“ können

Sie selbstverständlich zusätzlich zu Ihrer Homepage noch beliebig viele

weitere Unterseiten anlegen - beispielsweise für Impressum und Datenschutzerklärung.

Und das wollen wir jetzt tun.

Um eine neue Unterseite einzurichten, müssen Sie im „Cheetah“-

Webseiteneditor auf "Meine Webseite" (Exzellente Cuba-Zigarren) wechseln.

Dort können Sie dann über die Schaltfläche "Neue Seite hinzufügen" eine neue

Unterseite anlegen. In dem daraufhin aufgeblendeten Dialog geben Sie der Unterseite

einen Namen und einen Titel und eine suchmaschinenrelevante Beschreibung

(das können Sie natürlich auch später nachholen). In unserem Fall

nennen wir die Seite "Impressum und Datenschutz" und den Titel "Impressum".

Nach dem Speichern wird Ihnen dann in der Webseitenansicht eine neue Seite

angezeigt. Bevor wir aber die Seite bearbeiten, rufen wir noch einmal über das

94

Drei-Punkte-Menü die Seiteneinstellungen auf und editieren das Feld "URL" ->

"impressum".

Jetzt können Sie die Einstellungen speichern und auf "Seite bearbeiten" klicken.

Anschließend fügen Sie in den noch leeren Editor ein leeres Band ein, welches

dann den Impressumstext und die Datenschutzerklärung aufnehmen soll. Der

Rest ist einfach (beim "Impressum" muss man ja nicht unbedingt auf Schönheit

achten). Sie ziehen aus dem rechten Randmenü passende Texttemplates auf

den Banner, fügen dort die Überschrift und den Impressumstext ein. Danach

brauchen Sie ihn mittels des Texteditors nur noch entsprechend formatieren

und mit der Maus gefällig auf dem Banner anordnen. Das Gleiche gilt auch für

die Datenschutzerklärung, die man aber zuvor bereits geschrieben oder von

einem entsprechenden "Generator" im Netz hat erstellen lassen (z. B. Recht24).

Hier erfolgt dann das Einfügen im Editor über die Zwischenablage. Am Ende

könnte die Seite beispielsweise so aussehen:

An dieser Stelle noch ein Hinweis bzw. ein Tipp. Immer wenn Sie in

„Cheetah“ eine neue Webseite in Ihre Website einfügen, müssen Sie nicht –

so wie hier - unbedingt mit einer leeren Webseite beginnen. Scrollen Sie einfach

einmal im Dialog „Neue Seite hinzufügen“ ganz nach unten. Dort finden

Sie den Abschnitt „Page template“. Hier können Sie entweder eine leere Seite

(Standardeinstellung), irgendeine andere Seite aus irgendeiner (!) anderen,

von Ihnen mit „Cheetah“ erstellten Website („Meine Webseite“) oder ein Seitentemplate

aus der umfangreichen Template-Bibliothek von Builderall aus-

95

wählen. Wenn Sie also bereits in einer eigenen Website eine Impressum-Seite

haben, dann nehmen Sie doch einfach diese als Template. Dann haben Sie gar

keine Arbeit mehr…

Nachdem Sie die Seite gespeichert und in der Vorschau geprüft haben, wechseln

Sie wieder in die Homepage im „Cheetah“-Webseiteneditor. Dort müssen

wir jetzt noch das Impressum auf dem Footer verlinken. Und das geht so:

Schalten Sie den Text "Impressum und Datenschutz" in den Editiermodus

(Doppelklick) und markieren Sie ihn dann mit der Maus.

Klicken Sie im Editor auf das Link-Symbol, um den Verlinkungseditor zu öffnen.

Dort wählen Sie anschließend die „Page“ aus, welche das Impressum

enthält. Nun können Sie noch festlegen, ab die Impressumseite unter dem

aktuellen Tab oder einem neuen Tab (günstiger) im Browser geöffnet werden

soll.

Nach dem „Speichern“ der Einstellungen ist der Impressums-Link im Webseiten-Footer

voll funktionsfähig.

96

Anpassung der mobilen Version

„Cheetah“ erstellt im Hintergrund während des Webseitendesigns automatisch

auch gleich eine mobile Variante, die bereits nativ in den meisten Fällen ohne

große Anpassungen brauchbar ist.

97

In der Regel reichen kleinere Änderungen wie die Veränderung der Breite von

Textcontainern, das Umsortieren von Elementen auf den Bändern und das

Ausblenden von in der mobilen Variante nicht notwendigen Elementen aus, um

das Bild gefälliger zu machen. Dabei kommen hauptsächlich neben dem Kopfmenü

der Elemente (vertikal verschieben, verstecken) die Kategorie „Erweitert

(und mobil)“ zum Einsatz (ausprobieren!).

HINWEIS: Die Tablet-Version der Webseite ist im Grunde genommen nur eine

Vorschau auf die mobile Version. Alle hier vorgenommenen Änderungen

werden deshalb auch eins zu eins in die mobile Version übernommen.

98

Letzte Arbeiten und Veröffentlichung der Webseite

Bevor Sie die Webseite endgültig im World Wide Web veröffentlichen, sollten

Sie noch einen Blick auf die individuellen Einstellungen der einzelnen Webseiten

sowie auf die Grundeinstellungen der gesamten Website richten. Sind die

Webseitenbezeichner zum Thema schlüssig? Hat jede Seite eine möglichst SEOkonforme

Beschreibung (sie wird ja als Text in den Suchergebnissen von Suchmaschinen

angezeigt)? Und ist bei deutschen Seiten die Spracheinstellung auf

„deutsch“ gesetzt? Wenn das alles der Fall ist, kann die Webseite endgültig im

Internet veröffentlicht und u. a. über soziale Medien beworben werden. Haben

Sie einen bezahlten Plan von Builderall abonniert, dann können Sie auch noch

die Seite unter einer eigenen Domän oder einer eigenen Subdomän veröffentlichen.

Beachten Sie, dass die in den bezahlten Plänen obligatorische SSL-

Verschlüsselung nicht sofort greift. Es kann durchaus mehrere Stunden dauern,

bis das https-Protokoll für die Webseite freigeschaltet ist. Also etwas Geduld…

99

Texte und die Organisation von Texten

auf Webseiten

Webseiten sind von ihrem Wesen her Informationsträger, und Informationen

vermittelt man am besten in einer wohl überlegten hierarchischen Textstruktur.

Webseiten, die sich daran halten, werden von Suchmaschinen gerne durch

ein besseres Ranking belohnt, denn gut strukturierte Textanordnungen helfen

dem Crawler bei der Einschätzung der Bedeutsamkeit einer Webseite. Auch die

Menge an Text spielt dabei durchaus eine gewisse Rolle, da Suchmaschinen viel

Text eher mögen als beispielsweise viele Bilder… Oder anders ausgedrückt, unter

verschiedenen Webseiten, die für ein gleiches Keyword optimiert sind, ranken

i. d. R. diejenigen besser in Suchmaschinen, die mehr (sinnvollen) Text zum

Thema bereitstellen. Eine Faustregel sagt, dass 500 Wörter und mehr pro Webseite

von Suchmaschinen als optimal angesehen werden.

Es kommt aber auch darauf an, wie Text auf einer Webseite präsentiert wird.

Unter diesem Gesichtspunkt erlangen Layout und Schriftstil eine große Bedeutung.

So sollten die verwendeten Schriftarten immer zum Thema der Webseite

passen und darüber hinaus auf den entsprechenden Endgeräten natürlich auch

gut lesbar sein. Es macht also durchaus Sinn, sich als Webdesigner etwas mit

Typografie zu beschäftigen.

Im „Cheetah“ Sitebuilder ist bereits eine große Zahl verschiedener Schriftarten

vorhanden. Aber es gibt hier auch die Möglichkeit, beliebig viele eigene Schriftarten

zu installieren, die man sich entweder als lizenzfreie Fonts kostenlos oder

in Form von speziellen Fonts käuflich auf entsprechenden Webseiten besorgen

kann (wir gehen darauf noch ausführlich ein).

100

Überschriftenstruktur

Sowohl für die Lesbarkeit als auch für SEO ist eine gute und sinnvolle Strukturierung

des Inhaltes von Webseiten von großer Bedeutung. Dafür stellt die

Sprache HTML nativ spezielle Formatierungen zur Verfügung, die als „h1“ bis

„h6“ bezeichnet werden („h“ = „header“ (Überschrift), „1“ bs „6“ Hierarchiestufe).

Nur darüber sollten Sie unter strikter Einhaltung der Hierarchiereihenfolge

die Texte auf ihrer Webseite strukturieren:

Ich bin eine Hauptüberschrift (h1)

Ich bin eine Zwischenüberschrift (h2)

Ich bin ein Absatz. Ich bin ein Absatz. Ich bin ein Absatz. Ich bin ein Absatz. Ich

bin ein Absatz. Ich bin ein Absatz. Ich bin ein Absatz. Ich bin ein Absatz. Ich bin

ein Absatz. Ich bin ein Absatz. Ich bin ein Absatz. Ich bin ein Absatz. Ich bin ein

Absatz. Ich bin ein Absatz. Ich bin ein Absatz. Ich bin ein Absatz. Ich bin ein Absatz.

Ich bin ein Absatz.




ein Absatz. Ich bin ein Absatz. Ich bin ein Absatz. Ich bin ein Absatz.



bin ein Absatz. Ich bin ein Absatz. Ich bin ein Absatz.




ein Absatz. Ich bin ein Absatz. Ich bin ein Absatz.

101

Eine unter logischen und SEO-Gesichtspunkten falsche Verwendung von Überschriften

zeigt folgendes Beispiel:

Ich bin eine Hauptüberschrift (h1)




ein Absatz. Ich bin ein Absatz. Ich bin ein Absatz. Ich bin ein Absatz. Ich bin ein

Absatz. Ich bin ein Absatz. Ich bin ein Absatz. Ich bin ein Absatz. Ich bin ein Absatz.

Ich bin ein Absatz.




ein Absatz. Ich bin ein Absatz. Ich bin ein Absatz. Ich bin ein Absatz.



bin ein Absatz. Ich bin ein Absatz. Ich bin ein Absatz.




ein Absatz. Ich bin ein Absatz. Ich bin ein Absatz.

Wenn Sie bei der Erstellung einer größeren Website nicht von vornherein auf

die richtige Verwendung der „hn“-Überschriften achten, dann fällt Ihnen diese

Nachlässigkeit spätestens bei der Optimierung der Website für Suchmaschinen

auf die Füße.

TIPP: Installieren Sie die Chrome-Erweiterung „SEO META in 1 CLICK“. Damit

können Sie sich „mit einem Click“ die Header-Struktur ihrer Webseite anzeigen

lassen und damit diesbezügliche Fehler vermeiden.

102

Weiterhin ist in Hinsicht auf SEO wichtig, dass Sie pro Webseite nur eine „h1“-

Überschrift verwenden und die Anzahl der hierarchisch darunter liegenden Seiten

einer logischen Struktur folgt. Alles andere könnte ein Crawler als Mangel

auffassen (wenn auch mit vergleichsweise wenig Einfluss auf die Seitenbewertung

in Vergleich zu anderen Kriterien).

Wenn Sie beabsichtigen, Ihre Webseite auf bestimmte Keywords zu optimieren,

dann sollten Sie bei der Textplanung in Betracht ziehen, diese Keywords

auch in den Überschriften zu verwenden. Aber bedenken Sie dabei: In erster

Linie sind Überschriften für die Leser der Webseite da und nicht für Suchmaschinen.

Also bitte nicht auf Biegen und Brechen Überschriften immer wieder

mit den gleichen Keywords zumüllen. Das ist dann eher kontraproduktiv.

Abschnittstexte sollten dagegen immer einheitlich mit der Abschnittsformatierung

„P“ formatiert werden.

Optisch machen erst die den „hn“ – Überschriften zugeordneten Textattribute

diese Überschriften für den Leser zu „Überschriften“. Das bedeutet, die einzelnen

„hn“-Überschriften sollten sich deutlich in ihren Schriftattributen (insbesondere

Größe) unterscheiden. Auch gibt es natürlich einen Unterschied, ob

die Texte auf einem Desktop oder auf dem kleinen Display eines mobilen Ausgabegeräts

angezeigt werden.

103

hn - Schriftattribute festlegen

Den Einstellbereich für die Header-Schriften (und der Abschnittsschriftart) finden

Sie im Hauptmenü des Webseiteneditors unter der Schaltfläche „A“ in dessen

Werkzeugleiste:

Hier können die Header-Attribute h1 bis h6 sowie der Standard-Abschnittstext

(p = Text-Absatz) sowohl für die Desktop-Variante als auch für die Smartphone-

Variante konfiguriert werden. Jede Änderung, die Sie hier vornehmen, wird übrigens

simultan auch auf der Webseite im Editor angezeigt (ausprobieren!).

Jede Art von Überschrift besitzt im Einstellungsdialog einen eigenen Block, welcher

mit einer Schriftprobe (entspricht bezüglich der Schriftgröße der Desktop-

Variante) beginnt und darunter Einstellmöglichkeiten für Schriftart, Schriftgröße

(Desktop, Smartphone) sowie Schriftfarbe bietet.

104

Nachdem Sie sich Gedanken gemacht haben, welche Schriftarten am besten zu

Ihrer geplanten Webseite passen, sollten Sie in dem hier vorgestellten Dialog

die Überschriften entsprechend konfigurieren. Wenn Sie beim Formatieren der

Webtexte später der Versuchung widerstehen, die im Texteditor angebotenen

Formatierungsbefehle aktiv zu nutzen - oder anders ausgedrückt - nur die nativen

h1 bis h6 - Überschriften und das p-Attribut verwenden, dann haben Änderungen

– wie bereits erwähnt – in diesem Dialog instantan Auswirkungen auf

die Texte der gesamten Webseite. Das bedeutet, Sie können später einfach

durch Änderung der Schriftattribute in diesem Dialog die direkte Auswirkung

auf das Aussehen der Webseite begutachten.

Das Handling der Übernahme von Schriften auf die Webseite im Editor ist letztendlich

wieder ganz einfach. Sie wechseln im Randmenü in den Bereich "Neu"

und "Elemente" und öffnen dort die Kategorie "Text". Es werden Ihnen dann

alle Header-Vorlagen sowie die Textabschnittsvorlage in der von Ihnen zuvor

eingestellten Form aufgelistet und Sie können dann, wie gewohnt, einfach mit

der Maus eine der Vorlagen auswählen und anschließend per drag'n drop in die

Webseite ziehen. Und jetzt brauchen Sie nur noch den Vorgabetext durch ihren

eigenen zu ersetzen.

TIPP: Bereiten Sie längere Texte zuvor in einem Texteditor (z. B. Wordpad)

vor und fügen ihn dann über die Zwischenablage ein. Sie können aber auch in

der Designphase erst einmal Platzhaltertexte verwenden, die Sie dann später

austauschen. Für diesen Zweck gibt es einige dafür gut geeignete Chrome-

Browsererweiterungen wie beispielsweise den „Lorem ipsum Generator“…

105

Eigene Fonts einbinden und verwenden

Der „Cheetah“ Webseiteneditor stellt bereits eine größere Zahl von lizenzfreien

Schriftarten zur Verfügung. Aber oftmals benötigt man - z. B. um das Corporate

Design einer Webseite zu gewährleisten - Schriftarten, die standardmäßig nicht

vorhanden sind. In solch einem Fall gibt es aber die Möglichkeit, extern erworbene

Fonts zu installieren. Wie das genau in „Cheetah“ funktioniert, soll im Folgenden

kurz erläutert werden.

Die erste Frage, welche auftaucht, wenn man auf einer Webseite einen Schriftzug

in einer Schriftart sieht, die man gern selbst verwenden möchte, ist "Um

was für eine Schrift handelt es sich dabei? Wie ist ihr Name?". Denn diese Informationen

benötigt man, wenn man im Netz nach bestimmten Fonts suchen

möchte, um sie selbst zu verwenden. Ähnliches gilt natürlich auch, wenn ein

Kunde ganz bestimmte Schriftarten für seine Webseite verlangt, aber in fast

allen Fällen nicht sagen kann, was deren Namen sind. Aber es gibt Abhilfe. Mit

der Chrome-Erweiterung "What Font?" kann man ganz einfach die auf einer

Webseite eingesetzte Fontnamen sowie dessen Attribute ermitteln. Die genannte

Erweiterung finden Sie im Google Chrome App Store – und Sie sollten

sie auch gleich in ihrem Chrome-Browser installieren.

Die Handhabung dieser Browser-Extension ist einfach und intuitiv. Wechseln

Sie dazu auf die Webseite, deren Fonts Sie ermitteln möchten. Dann klicken Sie

auf der Extension-Liste im Chrome-Browser das "WhatFont"-Icon an und wenn

Sie jetzt mit der Maus auf der Webseite einen Schriftzug berühren, wird Ihnen

als Hint der Name der Schriftart angezeigt. Aber das ist noch nicht alles. Wenn

Sie jetzt einen Mausklick ausführen, öffnet sich ein kleines Fenster mit detaillierten

Angaben zum Font (hier "Proxima-Nova"):

106

TIPP: Sie können die Sie interessierenden Informationen in dem kleinen Fenster

mit der Maus markieren und anschließend in die Zwischenablage kopieren.

Das macht sich besonders gut, wenn Sie beispielsweise die Schriftfarbe

übernehmen möchten.

Beim Einsatz von - insbesondere extravaganten - Schriften auf einer Webseite

sollte man unbedingt beachten, dass viele Schriftarten kostenpflichtig zu lizenzieren

sind. Ansonsten kann man schnell -ähnlich wie bei urheberrechtlich geschützten

Fotos - Probleme bekommen. Aber auch in Bezug auf Fonts gibt es

genügend Lizenzfreie, die man kostenlos auf entsprechenden Web-Portalen

herunterladen kann.

Ein guter Ausgangspunkt sind in dieser Beziehung folgende Seiten:

dafont.com

107

schriftarten-fonts.de

Und hier kann man Fonts käuflich erwerben:

fontshop.com

Auf allen diesen Seiten lässt sich auch gut stöbern, da die Fonts nicht nur über

ihren Namen sondern auch visuell über kategorisierte Schriftproben ausgewählt

werden können.

Hat man eine für sein Webprojekt passende Schriftart gefunden, dann muss

man diese nur noch auf seinen Rechner herunterladen. Dabei ist es erst einmal

eine gute Idee, auf dem Computer einen neuen Ordner anzulegen, in welche

die heruntergeladenen Fontdateien abgelegt werden können. Gewöhnlich (z. B.

bei "dafont.com") wird nicht die eigentliche Font-Datei (kenntlich an der Extension

".ttf"), sondern eine zip-Datei, welche die Fontdatei enthält, ausgeliefert.

Der Inhalt diese zip-Datei ist in diesem Fall in den Font-Ordner zu entpacken.

Als Beispiel soll hier der Font "Black Hold" dienen, der für den privaten Gebrauch

kostenlos ist:

Nachdem Sie den Font heruntergeladen und die zip-Datei entpackt haben,

können Sie die Schriftart im „Cheetah“ Sitebuilder installieren. Dazu öffnen Sie

im Hauptmenü des Editors wieder die Schrifteinstellungen und betätigen dort

die Schaltfläche „Eigene Schrift hochladen“. Es öffnet sich dann ein weitgehend

108

selbst erklärender Dialog, in dem Sie lediglich der Schriftart einen Namen geben

(hier "Black Hold") und anschließend über einen Dialog die dazugehörige

Fontdatei laden müssen. Die Installation erfolgt, sobald Sie die Schaltfläche

"Save as Personal Font" anklicken. Das ist schon alles.

Wenn alles richtig funktioniert hat, steht Ihnen ab jetzt der neu installierte Font

in den entsprechenden Auswahlfeldern zur Verfügung. "Persönliche Fonts“

werden dabei immer am Ende der Auswahlliste gelistet:

109

Animationseffekte bei Texten

Texte lassen sich mit einer Vielzahl von Animationen ausstatten, mit denen sich

erstaunliche Effekte auf einer Webseite erzielen lassen. Die Einstellungen dazu

finden Sie inklusive einer Vorschau in der Kategorie „Animation“ in der Eigenschaftenliste

des Textelements:

Hier können Sie im Detail festlegen, unter welchen Umständen die Animation

starten soll (z. B. nach Zeit (in Sekunden), bei Klick etc.), was für ein Animationseffekt

auszuführen ist (Klappbox – unbedingt ausprobieren!) und wie

schnell die Animation auszuführen ist. Im Bereich unter diesen Einstellungen

wird übrigens immer eine Vorschau des gewählten Effekts angezeigt, damit Sie

auch sehen können wie er wirkt, bevor Sie ihren Text damit ausstatten.

110

Ein detaillierter Blick auf Banner

Die Besonderheit, die „Cheetah“ für das „Rapid Design“ so geeignet macht, sind

die Vielzahl vorgefertigter Banner, die in der Bannerauswahl in verschiedenen

Kategorien angeboten werden. Es ist ohne Zweifel bei weitem weniger zeitaufwendig,

daraus für seinen Zweck geeignete Banner auszusuchen und sie anschließend

im Editor der eigenen Problemstellung anzupassen als mit leeren

Bannern zu beginnen und diese dann aufwändig selbst zu gestalten. Es ist deshalb

eine recht gute Idee - zumindest stichprobenartig - sich einige der vorgefertigten

Banner im Editor im Detail anzuschauen um daraus etwas über ihren

Aufbau und ihr Design zu lernen.

111

Die „wesentlichste“ Eigenschaft eines Banners ist dessen Höhe, die Sie stufenlos

mit der Maus (kleiner blauer Kreis unten mittig) oder über die Eigenschaft

„Höhe“ pixelgenau einstellen können. Dazu gleich ein HINWEIS: Beim Strukturieren

einer Webseite ist es eine durchaus gute Idee, sie relativ kleinteilig über

Banner zu organisieren, wenn nicht andere Gründe dagegen sprechen (beispielsweise

eine längere Menüstruktur am linken oder rechten Bannerbereich).

Denn das bringt viele Vorteile mit sich, wenn es später einmal darum geht, die

Webseite zu erweitern. Man braucht dann nur das entsprechende Banner etwas

in seiner Höhe zu vergrößern und gewinnt auf diese Weise sofort Platz für

112

neue Elemente oder auch für mehr Text. Alle darunter liegenden Banner verschieben

sich, ohne dass Änderungen notwendig werden, nach unten.

Oftmals muss man in ihrer Art analoge Strukturelemente streifenweise auf einer

Webseite anordnen, wie folgendes Beispiel aus der builderall-power -

Webseite zeigt:

In solch einem Fall sollten Sie das erste Banner sorgfältig (und endgültig) designen

und anschließend die Klone-Funktion von dessen Kopfmenü verwenden,

um daraus eine Kopie zu erstellen. Sie wird dann am unteren Ende der Webseite

1:1 zum Original erstellt und kann dann mittels der „Order Panels“ in den

Banner-Eigenschaften an ihre richtige Position verschoben werden. Jetzt brauchen

Sie nur noch Texte und eventuell Bilder / Videos auszutauschen, ohne

113

dass Sie alle diese Elemente wieder separat auf einem neuen leeren Banner

legen und anordnen müssen.

Hintergrund und interner Hintergrund

Jedes Banner besitzt einen speziellen Bereich, den man „internen Hintergrund“

nennt. Er wird im Designer durch zwei vertikale blaue Hilfslinien begrenzt, die

immer dann sichtbar werden, sobald die Maus den Bannerbereich berührt. In

diesem „inneren Bereich“ sollten Sie alle Elemente positionieren, die in allen

Desktopauflösungen und in der mobilen Ansicht sichtbar sein sollen. Er hat eine

Breite von 1140 Pixeln, die in „Cheetah“ auch als „Seiteninhaltsbreite“ bezeichnet

wird.

Der Bannerbereich kann über die ganze Fläche über die Kategorie „Allgemeine

Farbe“ mit einer Farbe oder einem Farbverlauf bzw. mit einem eigenen Hintergrundbild

ausgestattet werden. Sie können aber auch den „internen Hintergrund“

in der gleichen Weise einfärben bzw. mit einem Bild versehen, welches

in diesem Fall aber nur die Seiteninhaltsbreite ausfüllt. Über den Schiebeschalter

unter der Regenbogenfarbauswahl lässt sich zusätzlich noch die Transparenz

stufenlos einstellen. Im Fall der „Allgemeinen Farbe“ leuchtet dann je nach

Transparenzgrad das Seitenhintergrundbild der Webseite mehr oder weniger

stark hindurch (vorausgesetzt, dem Banner wurde ein Bild zugewiesen) und im

Fall des internen Hintergrundes das Bild, welches dem gesamten Banner zugeordnet

ist. Ansonsten überlagern sich die Farben.

114

Parallaxeneffekt

Allein schon mit diesen Mitteln lassen sich durch die Konfiguration eines Banners

vielfältige Gestaltungsvariationen mit minimalem Aufwand erzielen. Aber

die Eigenschaftenpalette eines Banners bietet noch weitaus mehr. So sollten

Sie einmal den „Parallaxeneffekt“ ausprobieren. Weisen Sie dazu einem Banner

komplett ein Bild zu und aktivieren Sie anschließend den Parallaxeneffekt. Außerdem

müssen Sie mindestens noch ein weiteres Banner darunter anordnen,

der wiederum so hoch sein muss, dass Sie den „Bildbanner“ vertikal über den

Bildschirm herausscrollen können:

Nun können Sie die einzelnen Effekte mit unterschiedlichen Geschwindigkeitseinstellungen

ausprobieren. Vielleicht gefällt Ihnen der eine oder andere dieser

„Parallaxeneffekte“ so gut, dass sie ihn auf einer ihrer eigenen Webseiten verwenden

möchten…

Bannertrenner

Sie können aber auch den Übergang von einem Banner zum folgenden Banner

speziell gestalten. Dazu dient die Eigenschaft „Banner Trenner“, die – wenn aktiviert

– eine große Anzahl verschiedenster Übergangsanimationen in einer

Klappbox zur Auswahl anbietet.

115

Je nachdem, welche Übergangsanimation ausgewählt wird, kann sie (z. B. hinsichtlich

Farbe und Gestalt) weiter konfiguriert werden.

Auch hier sollten Sie sich die einzelnen Bannertrenner einmal im Detail ansehen,

um einen Überblick über deren Design zu erhalten.

116

Banner als Linkziele (Anker)

Banner können in „Cheetah“ auch als Link-Ziele verwendet werden, d. h. es besteht

die Möglichkeit, auf einzelne Banner zu verlinken. Das Stichwort dafür ist

„Anker“ (Anchor). In der Kategorie „Erweitert (und mobil)“ können Sie einen

solchen „Anker“ festlegen, in dem Sie dort die entsprechende Checkbox markieren.

Anschließend müssen Sie dem „Anker“ nur noch einen für die Webseite

eindeutigen Namen geben, und er ist einsatzbereit.

Eine typische Anwendung für solch einen Anker findet man oft auf Webseiten,

die inhärent sehr lang sind. Dann ist es eine gute Idee, dem Besucher die Möglichkeit

zu geben, an bestimmten Stellen (meistens vom Footer aus) per einfachen

Mausklick auf einen entsprechenden Button wieder zum Seitenanfang zu

gelangen (ansonsten müsste er ja u.U. „mühselig“ hochscrollen). Dazu sind folgende

Schritte notwendig:

1. Sie definieren im obersten Banner Ihrer Webseite einen Anker, z. B. mit dem

Namen „Oben“

2. Am unteren Ende des letzten Banners Ihrer Webseite (das kann selbstverständlich

auch der Footer sein) positionieren Sie eine Schaltfläche (Button

mit beispielsweise einem „Pfeil oben“ – Icon) und verlinken dort den Anker

„Oben“ (Kopfmenü Linksymbol):

Wenn jetzt der Webseitenbesucher auf diese Schaltfläche klickt, dann wird die

Webseite auf dem Bildschirm so ausgerichtet, dass das erste Banner wieder

sichtbar ist.

117

Diese Methodik wird auch gerne verwendet, wenn man verschiedene Bereiche

einer Webseite (die als Banner angelegt wurden) über eine Menüstruktur zugänglich

machen möchte. Grundsätzlich kann jedes Element in „Cheetah“, welches

eine Linkfunktion in seinem Kopfmenü anbietet, auch auf Anker verlinken,

wobei diese auch auf anderen Seiten der Website liegen können. Aber auch

direkte Verlinkungen im Text auf mit einem Anker versehene Banner sind natürlich

möglich.

Sticky Header

Das oberste Banner einer Webseite kann weiterhin so konfiguriert werden,

dass es seine Position beim Scrollen der Webseite nicht verändert, also generell

immer an seiner Position „haftend“ bleibt. Solch ein Banner wird als „Sticky

Header“ bezeichnet. Die entsprechende Einstellmöglichkeit finden Sie auch hier

in der Kategorie „Erweitert (und mobil)“ – vorausgesetzt, das oberste Banner

ist fokussiert:

Diese Eigenschaft kann übrigens für Desktop- und mobile Webseitenvariante

jeweils separat eingestellt werden.

118

Die wichtigsten Gestaltungselemente

im Überblick

„Cheetah“ ist für das „schnelle Webseitendesign“ ausgelegt. Es stellt deshalb

nicht nur „native“ Elemente wie beispielsweise jeweils ein Element für „Linien“,

ein Element, um Bilder einzufügen und ein Element zur Gestaltung einer Schaltfläche

(Button) zur Verfügung, sondern oftmals gleich mehrere, vorkonfigurierte

Varianten davon. Außerdem werden auch Verbund-Elemente wie komplette

Mailingboss-Formulare, diverse Kontaktformulare, Blog-Bestandteile oder Bildergalerien

zum drag’n drop angeboten. Und man kann davon ausgehen, dass

mit (fast) jedem neuen Release des Sitebuilders die Anzahl derartiger vorkonfigurierter

Elemente weiter ansteigen wird. Und, was das eigentlich revolutionäre

ist, Sie können auch eigene Verbundelemente (bis hin zum komplett ausgestatteten

Banner) erstellen und in einer eigenen Elementebibliothek dauerhaft

speichern.

Boxen als Gestaltungselement und Elemente-Container

Der Elementtyp "Box" des „Cheetah“ Sitebuilders dient sowohl als natives Gestaltungselement

als auch als Container für andere Elemente. Das bedeutet,

wenn man andere Elemente (Text, Buttons, Bilder etc.) innerhalb oder überschneidend

mit einer Box anordnet, dann bilden sie dergestalt eine Einheit,

dass sie sich mit der Box als Ganzes neu positionieren lassen und auch gelöscht

werden, sobald man die Box - d. h. ihren Container - löscht. Auch lassen sich

funktionell gestaltete Boxen sehr gut als individuelle Vorlagen speichern und

damit für andere Webseiten verfügbar machen.

Der umfangreiche Satz an Eigenschaften einer Box lässt vielfältige Gestaltungsmöglichkeiten

zu:

119

Sie können u. a. die Größe einer Box pixelgenau einstellen, eine Box beliebig

einfärben (auch Farbverläufe sind möglich), sie mit einem Bild ausstatten, einen

Rahmen mit und ohne Schatten hinzufügen, die Ecken der Box mit einstellbaren

Radien abrunden und auch Boxen mit diversen Parallaxen- und Animationseffekten

ausstatten. Wir empfehlen, die einzelnen Möglichkeiten, die sich

damit ergeben, einmal selbst auszuprobieren.

Wenn Sie sich das Kopfmenü einer Box anschauen, dann finden Sie darin die

Funktion „Pin“. Wie der Name schon andeutet, können Sie damit eine Box samt

ihrem Inhalt irgendwo auf dem Bildschirm „anpinnen“, d. h. sie bleibt dann

beim Scrollen der Webseite fest an dieser einmal festgelegten Position (der Bezugsrahmen

ist dabei immer der auf dem Bildschirm sichtbare Teil der Webseite).

Klicken Sie auf die Pin-Funktion im Kopfmenü, dann öffnet sich folgender

kleine Einstelldialog, über den Sie die Position mit einem Klick in das entsprechende

Kästchen festlegen können:

120

Wenn Sie jedoch die Position der „sticky Box“ manuell festlegen wollen, dann

müssen Sie hier stattdessen die Schaltfläche „Manual Stick“ anklicken. Am besten,

Sie probieren das gleich einmal selbst aus. Die Verwendung von „Sticky

Boxen“ ist übrigens immer dann angebracht, wenn Sie beispielsweise Werbung

auf einer Webseite anzeigen lassen wollen, die beim Scrollen der Seite immer

auf der Seite an der gleichen Bildschirmposition sichtbar bleibt.

Boxen als Elemente-Container

Boxen sind in erster Linie dazu da, um verschiedene Elemente zu einem neuen

Objekt zusammenzufassen (d. h. sie dienen als Elemente-Container). Dazu

muss man lediglich verschiedene Elemente auf einer Box (die durchaus völlig

"durchsichtig" sein kann - eine Vorlage dafür findet man im Box-Bereich des

rechten Randmenüs) anordnen. Wenn man jetzt mit der Maus die Box verschiebt,

dann erkennt man, dass alle auf der Box befindliche Elemente ihre relative

Lage zur Box beibehalten und mitverschoben werden. Löscht man die

121

Box, dann werden auch alle darauf liegenden Elemente mitgelöscht. Auf diese

Weise lassen sich kinderleicht Compound-Objekte erstellen, die sich auch als

eigene Vorlagen speichern lassen (viele Elemente in der Elementeauswahl von

„Cheetah“ sind übrigens solche Compound-Objekte).

Das folgende Bild zeigt eine einfache Call to Action - Vorlage auf der Grundlage

einer völlig durchsichtigen Box:

HINWEIS: Die Zentrierfunktion im Kopfmenü der meisten Elemente zentriert

das entsprechende Element immer relativ zur rechten und linken Begrenzung

seines Containers (also entweder zum Banner oder zur Box).

Weiterhin ist es noch wichtig zu wissen, dass man über die Eigenschaft „Layer“

die z-Position in Bezug auf andere, überlappende Boxen festlegen kann.

TIPP: Wenn Sie sich angewöhnen, logisch zusammengehörige Elemente immer

auf (durchsichtige) Boxen zu legen, so können sie diese leichter mit der

Box als Ganzes verschieben und brauchen sie damit nicht immer einzeln neu

zu positionieren.

122

Schaltflächen (Buttons)

„Buttons“ oder Schaltflächen sind häufig genutzte Elemente auf Webseiten, da

sie einer Verlinkung auf andere Webseiten, einen Download von Dateien, das

Speichern von Informationen (beispielsweise eines Kontaktformulars) oder das

Öffnen eines Popup-Fensters ermöglichen (um nur einige Anwendungsfälle zu

nennen). Prinzipiell ähneln sie Boxen mit dem Unterschied, dass Buttons nicht

als Elemente-Container fungieren und auch nicht als „sticky element“ irgendwo

auf der Webseite fest angepinnt werden können.

Die Auswahl an vorgefertigten Buttons ist in „Cheetah“ sehr groß, wie ein Blick

auf die Elementeauswahl zeigt:

Die wichtigsten Eigenschaften, die Sie einstellen können, betreffen die farbliche

Gestaltung (inklusive Farbverläufe und Hover-Effekt), Rahmen und Ecken (Abrundung,

Schatten), die Beschriftung (eine Haupt- und eine Nebenüberschrift,

Icons) sowie eine große Anzahl von Animationseffekten. Gerade letztere sollte

man immer dann einsetzen, wenn man einen Webseitenbesucher noch einmal

extra animieren möchte, z. B. mit einem Klick auf einen Button eine spezielle

Call-to-Action – Aktion auszulösen. Das kann beispielsweise durch ein leichtes

„wackeln“ der Schaltfläche geschehen, sobald der Mauszeiger die Schaltfläche

berührt:

123

Aber auch eine Vielzahl „exotischer“ Animationseffekte (wie beispielsweise

„rotateOut“) laden dazu ein, die Kategorie „Animation“ der Button-

Einstellungen einmal systematisch durchzuprobieren. Es stehen übrigens über

60 derartige Animationseffekte zur Auswahl…

Die wesentliche Eigenschaft einer Schaltfläche finden Sie in dessen Kopfmenü,

das Link-Symbol. Wenn Sie darauf klicken, erscheint das Einstellfenster „Weiterleitungen

konfigurieren“, dass Sie auch schon von anderen Elementen her

kennen:

124

Auf der linken Seite wählen Sie die Art der „Weiterleitung“ aus und im rechten

Bereich können Sie diese dann entsprechend konfigurieren. In diesem Fall würde

der Klick auf die Schaltfläche bewirken, dass im Browser unter einem neuen

Tab die Webseite zum Thema „Cheetah Sitebuilder“ der Domän „builderallpower“

aufgeblendet wird. Aber wie Sie allein an den Auswahlmöglichkeiten

dieses Fensters sehen können, gibt es sehr viele Möglichkeiten, ein Button mit

einer bestimmten Aktion zu belegen. Auch hier lohnt es sich, die einzelnen Kategorien

einmal selbst auszuprobieren.

TIPP: Oftmals muss man mehrere Schaltflächen (oder ganz allgemein, „Elemente“)

horizontal oder vertikal ausrichten. Hierfür gibt es in „Cheetah“ eine

spezielle Ausrichtfunktion, die folgendermaßen funktioniert: Sie klicken als

Erstes mit gedrückter <Shift>-Taste das Referenzobjekt und danach – und

zwar ohne die <Shift>-Taste loszulassen – die anderen Elemente an, die Sie

relativ dazu ausrichten möchten. Wesentlich ist hier wieder das Kopfmenü

des zuletzt angeklickten Elements. Es besteht aus jeweils einem Icon zur vertikalen

und einem Icon zur horizontalen Ausrichtung. Klicken sie jetzt auf das

„Gewünschte“, und schon werden die eben ausgewählten Elemente entsprechend

dem Referenzobjekt neu ausgerichtet.

125

Arbeiten mit Bildern und Grafiken

Auf jeder modernen Webseite sind grafische Elemente und Bilder als wesentliche

Gestaltungsobjekte enthalten. Wie man mit diesen Gestaltungsobjekten in

„Cheetah“ arbeitet und in eigene Webseiten integriert, soll Gegenstand dieses

Kapitels sein.

Bilder und Grafiken haben gegenüber reinen Texten auf Webseiten gleich mehrere

Vorteile: Sie dienen einmal als Eyecatcher, d. h., wenn ein Betrachter sich

eine Internetseite anschaut, wird ihm immer zuerst eine darauf vorhandene

Abbildung ins Auge fallen. Texte dagegen sind eine spezielle Form codierter Informationsträger,

die vom Betrachter explizit entschlüsselt werden müssen,

was aber nicht immer gelingt (weil beispielsweise der Betrachter die Textsprache

nicht versteht). Die Informationsaufnahme über Bilder und Grafiken erfolgt

hingegen deutlich intuitiver und fast wie von selbst, denn ein Betrachter versteht

bzw. interpretiert visuellen Medien i. d. R schneller und einfacher als ein

reiner Text. Außerdem können Abbildungen Emotionen und Neugierde wecken

und damit verhindern, dass der Nutzer die an gesurfte Webseite sofort wieder

verlässt. Aus diesem Grund ist die Verwendung von Abbildungen quasi ein Wesensmerkmal

moderner Webseitengestaltung.

Bilder und Grafiken auf Webseiten erfüllen verschiedene Funktionen wie beispielsweise

als Hintergrunddekoration und Eyecatcher (Hintergrundbild von Bannern)

als Informationsträger (Werbebilder, Geschäftsgrafiken etc.)

zur Unterstreichung des Contents ("Ein Bild sagt mehr als tausend Worte")

als Werbeträger (Vorstellung des Unternehmens)

zur Suchmaschinenoptimierung (Bildersuche, Verwendung Bildbeschreibung

und Tag)

Builderall im Allgemeinen und der „Cheetah“ Webseiteneditor im Besonderen

stellen eine Vielzahl von Tools und Workarounds zum Management von Bildern

zur Verfügung. Hierbei sei explizit nur auf das „3D Mockup-Studio“ und das

spezielle „3D Photo Editor Studio“ (beide im Bonuspaket I enthalten) hingewiesen.

126

Allgemeines zum Thema „Bildern auf Webseiten“

Der „Cheetah“ Webseiteneditor unterstützt eine Vielzahl von Pixel- und Vektorformaten.

Im Einzelnen sind das Bilddateien in den Formaten .PNG, .JPG, . SVG,

.GIF, .JFIF, .PJPEG, .PIP, .WEBP und .SVGZ. In der Praxis werden dabei in den

meisten Fällen nur die Formate .PNG und .JPG für Pixelgrafiken bzw. Fotos und

.SVG für Vektorgrafiken eingesetzt. Das .GIF-Format erlaubt die Einbindung

spezieller animierter Bilder, von denen bereits eine Anzahl im Image Repository

von Builderall zur Nutzung angeboten wird.

Bei der Verwendung von Bildern auf Webseiten gibt es ein paar allgemeine Regeln

zu beachten. Die Wichtigste dabei ist - Verwenden Sie hochwertiges

Bildmaterial. Nichts ist schlimmer für einen ersten Eindruck als wie verpixelte,

unscharfe oder farblich nicht stimmige Bilder. Deshalb sollte ein leistungsfähiges

Bildbearbeitungsprogramm immer zur Hand sein (zumindest IrfanView,

besser Gimp, wenn es Freeware sein soll). Weiterhin sollten Sie - schon aus

SEO-Gründen - auf eine optimale Größe bei Bitmaps achten, denn davon

hängt die Ladegeschwindigkeit auf einem Endgerät ab. Im Idealfall sollte die

Bildgröße auf der Webseite mit der Bildgröße (jeweils in Pixeln) der Bitmap

übereinstimmen oder nur wenig abweichen. Auch kann eine explizite Kompression

bei manchen Bildern oder Fotos noch einige kBytes bringen. Dazu ist im

Web eine Vielzahl von Online-Tools verfügbar, aber auch die meisten Bildbearbeitungsprogramme

bieten dazu eine entsprechende Funktion an.

LINK: JPEG Dateien online komprimieren

https://compressjpeg.com/de/

Weiterhin ist es empfehlenswert (aber kein muss), ein externes Repository für

Bilddateien zu verwenden. In dieser Hinsicht ist die Webplattform "Cloudinary"

die erste Wahl. Hier können Sie die auf Ihren Webseiten eingefügten Bilder bequem

und übersichtlich in Ordnern organisieren. Die Verknüpfung mit den

Bildcontainern auf der Webseite erfolgt über entsprechende externe Links, die

sich in Cloudinary ganz leicht per Mausklick erstellen lassen.

127

TIPP: Verwenden Sie – wenn möglich – „Cloudinary“ als externes Repository

für Ihre Bilddateien. Es ist in der kostenlosen Version vollkommen ausreichend

und hilft auch den Überblick über das eigene Bildmaterial zu behalten.

Um eventuelle rechtliche Probleme zu umgehen, achten Sie immer darauf, dass

Sie auch die Urheberrechte an dem verwendeten Bildmaterial besitzen oder die

Bilder rechtlich einwandfrei erworben haben bzw. es sich um frei verfügbares,

lizenzfreies Material handelt.

LINK: Medien-Ressourcen (Grafiken, Bilder, Videos…)

https://builderall-power.de/builderall-res-medien

Das Bild-Element

Um ein Bild in eine Webseite einzufügen, müssen Sie nur aus der Elementeliste

im rechten Randmenü in den Bereich "Bild" wechseln und dort eine der angebotenen

Bildelemente per drag'n drop in den Editor ziehen.

128

Wenn das geschehen ist, müssen Sie als nächsten Schritt das Beispielbild der

Vorlage durch ihr eigenes Bild austauschen. Und hier gibt es mehrere Möglichkeiten.

1. Sie laden ihr Bild in das Builderall Image-Repository hoch und wählen es

dann dort aus oder

2. Sie speichern ihr Bild in „cloudinary“ und verlinken es im Bild-Elemente

3. Sie verlinken irgendein Bild, dessen Bild-URL Ihnen bekannt ist (derartige

Verlinkungen sind rechtlich immer möglich)

Zu Punkt 1. Öffnen Sie das Eigenschaften-Fenster (bzw. Randmenü „Einstellungen“)

des Bildelements und wählen Sie dort die Kategorie „Allgemeine Einstellungen“

aus. Dort finden Sie unter „Image“ die Schaltfläche „Bild ändern“.

Wenn Sie darauf klicken, öffnet sich das Builderall Image Repository:

129

Hier können Sie jetzt über die Schaltfläche „Datei wählen“ ihr Bild hochladen

oder ein bereits im Repository Vorhandenes auswählen.

Das Repository besteht aus fünf Bereichen, von denen vier (Images, Icons, Buttons,

gif‘s) eine große Zahl lizenzfreier Bilder und Grafiken enthalten, die Sie auf

Ihren Webseiten uneingeschränkt verwenden können. Der Bereich "User files"

ist dagegen Ihr privates Repository, in welches Sie nach Belieben in der beschriebenen

Art und Weise eigene Bilddateien hochladen können, soweit deren

Dateigröße 4 MByte nicht übersteigt. An dieser Stelle macht es übrigens Sinn,

sich kurz ein paar Gedanken über eine sinnvolle Ordnerstruktur zu machen,

denn Sie können im User-File-Bereich in einer Ebene beliebig viele eigene Ordner

anlegen.

Nach dem Hochladen wird Ihnen das Bild im Ordner angezeigt. Wenn Sie es

dort mit der Maus berühren, erscheinen vier Icons. Das Erste ("Stift") dient dazu,

den Bildnamen zu editieren. Hier ist es sinnvoll und wichtig, der Bilddatei

einen aussagekräftigen Namen zu geben, mit dem es auch später einmal über

die Suchleiste am oberen Rand des Fensters leicht aufgefunden werden kann.

Das zweite Icon öffnet den Image-Editor, mit dessen Hilfe Sie u. a. das Bild zuschneiden

oder auch drehen können. Aber der Editor kann natürlich noch viel

mehr – also schauen Sie sich ihn einmal in Ruhe an. Das dritte Icon ("Lupe")

öffnet schließlich die interne Bildvorschau und das vierte Icon ("Papierkorb")

dient dem Löschen des Bildes aus dem Builderall-Repository.

Sobald Sie nun ein Bild ausgewählt haben, wird es durch einen blauen Rand

markiert und die Schaltfläche „Speichern“ wird freigeschalten. Wenn Sie jetzt

darauf klicken, wird das Repository geschlossen und das Bild im Bildcontainer

im Webseiteneditor durch das eben Ausgewählte ausgetauscht. Und das ist

schon alles.

HINWEIS: Selbst wenn Sie anschließend das Bild im Repository wieder löschen,

bleibt es auf der Webseite sichtbar.

Nun zu Punkt 2. Loggen Sie sich dazu in „cloudinary“ ein und wechseln Sie dort

in die „Media Library“. Dort können Sie bekanntlich verschiedene Ordner anlegen.

Das kann man z. B. themenbezogen oder webseitenbezogen machen und

130

sei Ihnen überlassen. In solch einen Ordner legen Sie nun die Bilddatei ab (am

besten per drag’n drop), die Sie auf Ihrer Webseite verwenden möchten. Ist das

geschehen (oder Sie haben ein bereits Vorhandenes ausgewählt), dann markieren

Sie das Bild mit der Maus, worauf sich links oben das Link-Symbol zeigt:

Wenn Sie darauf klicken, dann wird die Bild-URL automatisch in die Zwischenablage

übernommen. Jetzt wechseln Sie wieder in den „Cheetah“ Webseiteneditor

und kopieren die Bildadresse mit <Strg><V> in das Feld „Externe Grafik“

der Bildeigenschaften. Jetzt nur noch mit „OK“ bestätigen, und das Bild wird

sowohl in der Vorschau darüber als auch im Bildobjekt angezeigt.

HINWEIS: Selbst wenn Sie anschließend das Bild in „cloudinary“ löschen,

bleibt es auf der Webseite sichtbar.

Und jetzt die 3. Möglichkeit. Gehen Sie dazu auf eine x-beliebige Webseite, die

Bilder enthält und bewegen Sie den Mauszeiger darauf. Anschließend öffnen

Sie das Kontextmenü der rechten Maustaste und wählen dort die Funktion

„Bildadresse kopieren“. Hier passiert im Prinzip das Gleiche wie in „cloudinary“

– die Bild-URL wird in die Zwischenablage kopiert. Wenn Sie diese nun analog

dazu in das Eigenschaften-Feld „Externe Grafik“ kopieren, erscheint dann wie

erwartet das verlinkte Bild im Bildcontainer auf Ihrer Webseite.

HINWEIS: Diese Vorgehensweise birgt aber eine Gefahr. Wenn der Webseitenbetreiber

das ausgewählte Bild von seiner Webseite entfernt oder durch

ein anderes austauscht, dann hat das natürlich auch sofort Auswirkungen auf

Ihre Webseite.

131

Jetzt können Sie daran gehen, das Bild zu positionieren, seine Größe zu ändern,

zu drehen oder anderweitig zu formatieren. Sie können es beispielsweise mit

einem Rand und einem Schatten versehen, es mit verschiedenen Animationseffekten

ausstatten und – über das Kopfmenü – dem Bild sogar einen Link zuordnen,

zu dem verzweigt wird, sobald man mit der Maus darauf klickt.

HINWEIS: In der Palette der "Bild-Elemente" findet sich auch ein Image 3D -

Bildobjekt, welches sich durch einen überraschenden Animationseffekt auszeichnet.

Sie sollten es auf jedem Fall einmal ausprobieren…

132

Wie integriert man eine Bildergalerie in eine Webseite?

Diashows und Bildergalerien machen sich auf einer Webseite immer gut, da sie

Aufmerksamkeit erzeugen und damit zum Verweilen einladen. „Cheetah“ stellt

für diesen Zweck einige „Galerien“ – Elemente zur Verfügung. Dabei handelt es

sich erst einmal um nichts anderes als um spezielle Bildcontainer, die in der Lage

sind, die in ihnen enthaltenen Bilder in Form einer „Slide show“ oder in

Form einer rechteckigen Anordnung anzuzeigen.

133

Slider-Element

Möchte man selbst eine kleine Diashow mit ein paar Bildern zur Gestaltung in

die eigene Webseite einbauen, dann ist das "Slider" - Element wie geschaffen

dafür. Die Verwendung ist zwar kinderleicht, aber man sollte sich trotzdem im

Vorfeld ein paar Gedanken über dessen Einsatz machen. Der Bildcontainer

kann zwar ohne weiteres mit Bildern unterschiedlicher Größe und unterschiedlicher

Größenverhältnisse arbeiten. Besser ist es aber, wenn alle Bilder der Slide

show möglichst die gleichen Ausmaße, also jeweils die gleiche Höhe und Breite,

haben (am besten genau die Größe, welches auch das Slider-Element hat – siehe

dessen Einstellungen in der Kategorie „Größe“).

TIPP: Verwenden Sie die Onlineplattform canva.com, um die Bilder ihrer Slideshow

in die genau richtige Größe zu bringen. Dort können Sie pixelgenau

eine eigene Vorlage definieren. In diese ziehen Sie dann aus Ihren Bilderordner

eine entsprechende Bilddatei, skalieren sie anschließend, wobei die über-

134

stehenden Ränder über der Vorlage abgeschnitten werden, sobald Sie mit der

Maus einen Bereich außerhalb des Bildes anklicken. Anschließend speichern

Sie das Bild, löschen es wieder aus der Vorlage und ziehen die nächste Bilddatei

darauf und wiederholen das Ganze... Natürlich können Sie an dieser Stelle

auch eine eventuelle Beschriftung Ihrer "Dias" mit dem Textwerkzeug von

Canva vornehmen...

Wenn Sie nun auf diese Weise alle Ihre Bilder vorbereitet und in einen Ordner

gespeichert haben, können Sie daran gehen, sie dem Bildcontainer (den Sie zuvor

in genau der Bildgröße auf Ihre Webseite positioniert haben) des "Slider" -

Elements zuzuweisen. Dazu klicken Sie in dessen Kopfmenü auf das "+" – Icon

(„Add Image“), worauf sich sofort der Bildcontainer mit den darin als Beispiel

enthaltenen Vorschaubildern öffnet:

Das Löschsymbol für die Bilder ("Papierkorb") sehen Sie, sobald Sie mit der

Maus ein Bild berühren - jetzt nur noch ein Klick darauf, und das Bild ist ver-

135

schwunden. Sie können nun auf diese Weise alle überflüssigen Bilder bis auf

Eins erst einmal aus dem Container löschen. Um neue Bilder einzufügen, klicken

Sie auf die entsprechende Schaltfläche oben rechts („Add Image“), wobei

sich das Ihnen bereits bekannte Builderall Image-Repository öffnet. Dort laden

Sie zuerst alle ihre vorbereiteten Bilder (in diesem Beispiel sind das Schmetterlingsfotos)

hoch um sie dann anschließend einzeln durch Markieren und Drücken

des Speicher-Buttons in den Bildcontainer zu übertragen.

HINWEIS: Achten Sie beim Laden der Bilder in das Slider-Element auf die Reihenfolge,

denn ein nachträgliches Umsortieren der einzelnen Bilder ist (noch)

nicht möglich.

136

Nach dem Schließen des Containerfensters ist Ihr Slider bereits voll funktionsfähig.

Sie sollten sich jetzt noch etwas Zeit nehmen, um explizit die Eigenschaften

des Sliders anzupassen. Das betrifft im Einzelnen "Autoplay Time" (wie lange

das Bild angezeigt wird bis es wechselt), den "Autoplay-Modus" (automatischer

Bildwechsel ja oder nein) und / oder ob Sie am rechten und linken Bildrand

Navigationsbuttons einblenden möchten oder nicht (zu finden in der Kategorie

„Allgemeine Einstellungen“).

Bildergalerie-Element

Die Bildergalerie-Elemente in der Elementeauswahl „Galerien“ dienen dazu,

mehrere Bilder in einer rechteckigen Anordnung auf einer Webseite darzustellen

mit dem Effekt, dass man, wenn ein Bild anklickt, automatisch das entsprechende

Bild „in groß“ angezeigt bekommt. Wenn Sie also beispielsweise planen,

eine eigene Fotowebseite aufzubauen, dann sind diese Elemente die Elemente

Ihrer Wahl.

137

Die Bildzuordnung ist analog zu der des eben beschriebenen Sliders, nur dass

Sie hier das Zahnrad-Icon im Kopfmenü bemühen müssen, um in das Bild-

Zuordnungsfenster zu gelangen. Wie viele Bilder in wie vielen Spalten angeordnet

werden sollen, können Sie in der Kategorie „Allgemeine Einstellungen“ zusammen

mit den Bildabständen bequem einstellen. Weiterhin können Sie ein

Bildergalerie-Element selbstverständlich mit Navigationsmöglichkeiten, Rändern

und sogar diversen Animationseffekten ausstatten und damit perfekt dem

Stil Ihrer Webseite anpassen.

Eyecatcher für Ihre Webseite: Rotationsbanner

Rotationsbanner auf Webseiten sind schon seit längerer Zeit ein probates Mittel

um Werbebotschaften visuell ansprechend an den Mann / die Frau zu bringen.

Aber man kann das Prinzip - zeitgesteuert Bilder und Botschaften aufzublenden

- auch als allgemeines Gestaltungsmittel verwenden, um Besucher zu

beeindrucken und damit deren Verweilzeit auf der Webseite zu erhöhen.

Mit „Cheetah“ ist es sehr einfach, derartige Rotationsbanner auch ohne Verwendung

von JavaScript in eine Webseite zu integrieren, denn der Sitebuilder

stellt in seiner Elementepalette explizit derartige Elemente im Bereich "Rotation

Banner" zur Verfügung. Sie brauchen dort nur ein für Ihre Zwecke geeignetes

auswählen und auf ihre Webseite platzieren. Beachten Sie aber, dass es sich

bei diesem Element um ein zusammengesetztes Element handelt, welches aus

dem "eigentlichen" Rotationsbanner und einer von Ihnen festlegbaren Anzahl

von "Inhalten" in Form von Bildern besteht, auf denen weitere Elemente (z. B.

Boxen und Texte) angeordnet sein können.

138

HINWEIS: Um ein Rotationsbanner zu fokussieren, müssen Sie mit der Maus

genau auf dem oberen schmalen Randbereich zielen. Gelingt das, dann erkennen

Sie den Erfolgt an dessen speziellen Kopfmenü:

Mit dem "+" - Button fügen Sie weitere Bilder dem Slider hinzu und mit den

Pfeiltasten können Sie zwischen den bereits vorhandenen Bildern navigieren.

Ein Klick auf das Bild fokussiert das gerade sichtbare Bild und im rechten

Randmenü (bzw. Einstellungsdialog) können Sie die "Slider Page" individuell auf

vielfältige Art und Weise konfigurieren. Hier gilt das Augenmerk hauptsächlich

dem Bereich "Hintergrund", in dem Sie explizit der Page ein Bild zuweisen und

dessen Position im Banner festlegen (ausprobieren!).

Im Rotationsbanner - Element selbst können Sie die spezielle Art des Bildwechsels

(Non, Slider, Fade in / Fade out) sowie die Zeitskala dafür festlegen. Außerdem

lässt sich an dieser Stelle festlegen, ob der Bildwechsel automatisch ("Au-

139

toplay") oder erst per Klick auf separat eingeblendete "Pfeiltasten" erfolgen

soll.

HINWEIS: nur im Preview und später auf der Webseite sichtbar.

Weiterhin können Sie auf eine „Slider Page“ ("Bild") weitere Elemente legen.

Das können beispielsweise Boxen, Schaltflächen (Buttons) und natürlich auch

Texte sein. In solch einem Fall dient die Slider Page jeweils als ein Elemente-

Container.

Verlinken und Abspielen von Videos

Gerade Landingpages und Verkaufsseiten nutzen immer mehr die Möglichkeit,

mittels eines Videos den Webseitenbesucher direkt anzusprechen. Videos können

aber auch als reine Gestaltungselemente zur optischen Aufwertung einer

Webseite eingesetzt werden. Am häufigsten werden zur Einbindung in Webseiten

Youtube - Videos verwendet, die man entweder selbst produzieren und

dann bei Youtube hochladen kann oder man verlinkt gleich x-beliebige, auf Y-

outube zum Teilen freigegebene Videos - was rechtlich bedenkenlos für legal

auf Youtube hochgeladene Videos gemacht werden darf.

140

LINK: Darf man Youtube-Videos einbetten?

https://www.youtube.com/watch?v=7v0wLlzEoG0

Für das Einbetten von Videos stellt der „Cheetah“ Sitebuilder zurzeit vier verschiedene

Elemente im Bereich "Video" zur Verfügung, die auch vier verschiedenen

Video-Plattformen im Netz entsprechen:

LINK: Youtube -> https://www.youtube.com/

Vimeo -> https://vimeo.com/

WISTIA -> https://wistia.com/

VIDELLO -> https://vidello.com/

Das Einbetten eines Videos in eine mit „Cheetah“ erstellte Webseite ist genauso

einfach wie das Einbinden von beispielsweise Bildern. Nachdem Sie aus dem

Randmenü des Sitebuilders unter „Video“ das passende Video-Element auf Ihre

Webseite gezogen haben, wechseln Sie über dessen Kopfmenü in den Editiermodus.

Wesentlich sind hier nur die unter "Allgemeine Einstellungen" aufgelisteten

Eigenschaften. In das Link-Feld tragen Sie die aus dem Browser kopierte

URL des entsprechenden Videos ein. Anschließen können Sie noch festlegen, ab

welcher Stelle das Video beginnen soll (Zeitangabe), ob es sofort beim Aufblenden

der Webseite gestartet werden soll ("Autoplay"-Funktion) und ob es als

141

Endlosschleife gezeigt werden soll ("Loop"). Weiterhin können Sie noch festlegen,

ob die Player-Bedienelemente angezeigt werden oder nicht. Das ist schon

alles. Nie war es so einfach, Videos in eine Webseite einzubetten...

Übrigens, Sie können ein Video auch als „Sticky Video“ auf ihrer Webseite anordnen,

d. h. es bleibt (gewöhnlich – es gibt Ausnahmen) auch dann sichtbar,

wenn man die Webseite scrollt. Den entsprechenden Einstelldialog erreichen

Sie über das Kopfmenü, wo ein spezielles Icon auf diese Funktion hinweist.

Auch hier empfehlen wir, diese Funktion einmal selbst auszuprobieren. Vielleicht

haben Sie eine coole Anwendungsmöglichkeit dafür.

142

Es gibt in „Cheetah“ auch eine Video-Galerie…

Dieses geniale Element stellt quasi ein Alleinstellungsmerkmal von „Cheetah“

dar. Es erlaubt – mit vielen individuellen Einstellungsmöglichkeiten – eine größere

Anzahl von Videos zusammen mit Beschreibungen und Call-to-Action-

Buttons – in Form einer Galerie auf einer Webseite anzuzeigen. Es handelt sich

dabei um ein Compound-Objekt, deren Elemente Sie beliebig tauschen (oder

löschen) und dem Sie natürlich auch weitere Elemente hinzufügen können. Es

funktioniert so, dass Sie im oberen Bereich – eingeteilt in verschiedene Kategorien

– Thumbnails, die mit Links auf Youtube-Videos ausgestattet sind, wie in

einer Bildergalerie anzeigen lassen können. Wenn Sie dann mit der Maus auf

eines der Thumbnails klicken, öffnet sich unter der „Galerie“ ein Bereich, in der

dann das entsprechende Video (meist zusammen mit weiteren Informationen

dazu) angezeigt und abgespielt wird.

Bevor Sie dieses Element konfigurieren, sollten Sie aber ein paar wenige Vorarbeiten

erledigen. Überlegen Sie sich z. B., wie viele Videos Sie anzeigen möchten

und stellen Sie in einem Texteditor eine Liste mit den entsprechenden (Youtube-)

Links zusammen. Weiterhin benötigen Sie für jedes Video ein Thumb-

143

nail, dessen ideale Größe 320x180 Pixel ist (verwenden Sie zu deren Erstellung

am besten „Canva“ oder „IrfanView“). Sie werden später in der Video-

Auswahlleiste angezeigt.

Beispiel:

Pilze im März

https://www.youtube.com/watch?v=nqeMGxofu1Q

Schmetterlingstramete

Pilze im April

https://www.youtube.com/watch?v=DMJlTXG8X2w

Speisemorchel

Pilze im Mai

https://www.youtube.com/watch?v=XNULXhedBnk

Maipilz

Pilze im Juni

https://www.youtube.com/watch?v=ejfjiYWt4Qs

Sommersteinpilz

Für jeden in der Liste genannten Pilz wurde ein Thumbnail der Größe 320x180

Pixel erzeugt und in einem Ordner bereitgestellt.

Die Konfiguration der Videogalerie erfolgt über das „Zahnradsymbol“ des

Kopfmenüs. Wenn Sie darauf klicken, können Sie erst einmal verschiedene Kategorien

festlegen. Wir überschreiben hier nur die einzige vorhandene Kategorie

mit dem Bezeichner „Pilzwelten“. Danach klicken wir auf das Stift-Icon und

gelangen so in einen Dialog, in dem die einzelnen Video-Label und die dazugehörigen

Videos konfiguriert werden. Auch hier wählen wir nicht „Add Video“,

sondern editieren die bereits im Element vorhandenen Einträge (wiederum

Stift-Icon). In das Dialogfenster übertragen wir jetzt per Zwischenablage die von

uns zuvor in der Textdatei gesammelten Informationen (d. h. Label und Video-

URL) und ordnen das vorbereitete Thumbnail dem Eintrag zu:

144

Wenn das für alle vier Videos geschehen ist, speichern wir die Änderungen und

schauen uns das Ergebnis im Editor erst einmal an.

Das Gesamterscheinungsbild der Video-Galerie können Sie auch hier über den

Einstellungsdialog des Elements frei gestalten.

HINWEIS: Der Video-Anzeigebereich besitzt eine eigene kleine Schaltfläche,

über den Sie in dessen Einstellungsbereich gelangen.

145

Was noch fehlt, ist die Anpassung des Info-Bereichs rechts vom eigentlichen

Video. Aber auch das geht ganz einfach. Zuerst löschen wir bei jedem Videoeintrag

die überflüssigen Texte, das Builderall-Logo und den Call-to-Action – Button,

denn die benötigen wir nicht. Und dann ersetzen wir den Haupttext durch

den Namen des Pilzes, welches das Thumbnail zeigt. Anschließend kann dann

auch noch der Haupttext durch einen passenden Text ersetzt werden.

Wie Sie sehen, können Sie mit diesem speziellen Element Ihre Webseite quasi

mit einem „Mini-Youtube“ ausstatten. Ein denkbares Einsatzgebiet sind hier

Webseiten, über die Sie beispielsweise Online-Kurse anbieten, die Sie in einzelne

Lektionen (Videos) organisiert haben. Aber auch ein Naturfilmer kann auf

diese Weise seinen Besuchern entsprechende Videoclips direkt auf seiner Webseite

zugänglich machen, der er zuvor in seinen Youtube-Kanal hochgeladen

hat.

146

Gestaltungselemente - Linien, Pfeile, Vektorgrafiken und Icons

Häufig benötigt man horizontale und vertikale Linien als Gestaltungs- bzw.

Trennelemente auf Webseiten. Zu diesem Zweck wurde das auf dem ersten

Blick recht schlichte "Line"-Element in die Elementepalette von „Cheetah“ aufgenommen.

Man findet es hier einmal als horizontale und zum anderen als vertikale

Linie, die Sie wie jedes andere Element im Randmenü auch jederzeit auf

Ihre Webseite ziehen können.

Nativ handelt es sich bei diesem Line-Element erst einmal nur um eine frei positionier-

und skalierbare Linie, die Sie aber in Bezug auf Farbe, Linienstärke und

einigen weiteren Eigenschaften formatieren können. Auch lassen sich deren

Enden individuell mit einem Pfeilsymbol ausstatten.

Über den „Drehanker“ können Sie eine derartige Linie natürlich auch in jede

beliebige Richtung drehen:

147

Sie mögen vielleicht sagen, dass ganz allgemein im Vergleich zu diversen „Malprogrammen“

"Gestaltungselemente" – beispielsweise in Form geometrischer

Objekte - in „Cheetah“ etwas unterrepräsentiert sind. Das macht aber nichts,

da sich solche Elemente leicht mit anderen grafischen Programmen erstellen

und per Bild-Element (oder einem anderen Element, welches einen Bildcontainer

besitzt) in eine Webseite einfügen lassen. Hier empfiehlt es sich besonders

ein Augenmerk auf das Vektorformat .SVG zu werfen. Es hat gegenüber einer

Bitmap den Vorteil, dass es ohne Verlust an Bildqualität beliebig skaliert werden

kann. Das ideale Programm, um hochwertige Vektorgrafiken zu erstellen,

ist dabei die Freeware "InkScape", die Sie über folgende Schaltfläche herunterladen

können:

LINK: Erstellen von Vektorgrafiken mit InkScape

https://inkscape.org/de/release/inkscape-0.92.4/

Dieses Open-Source-Programm ist äußerst umfangreich und leistungsfähig, so

dass Sie schon etwas Einarbeitungsaufwand hineinstecken müssen, um es optimal

nutzen zu können. Aber im Netz gibt es dazu genügend viele Tutorials und

auf „Youtube“ Lern-Videos, so dass dem eigentlich nichts entgegensteht.

148

Und natürlich gibt es auch noch eine große Anzahl von Webseiten, von denen

man kostenlos lizenzfreie Vektorgrafiken zu jedem denkbaren Thema herunterladen

und in eigenen Webprojekten verwenden kann. Beispielhaft soll hier nur

die Plattform "unDraw" vorgestellt werden.

LINK: Lizenzfreie Vektorgrafiken auf der „UnDraw-Plattform“

https://undraw.co/illustrations

149

Wenn Sie die Wahl haben, dann sollte Sie wann immer es möglich ist, Vektorgrafiken

zur Illustrierung Ihrer Webseiten verwenden. Denn sie können nicht

nur ohne Qualitätseinbußen beliebig vergrößert oder verkleinert werden, sondern

sind darüber hinaus auch noch äußerst kompakt und lassen sich deshalb

besonders schnell laden (was übrigens von Suchmaschinen mit „Pluspunkten“

honoriert wird). Weiterhin sollten Sie derartige Grafiken auf der Webseite möglichst

nur verlinken und nicht einbetten (Stichwort „Cloudinary“).

Sehr viele, schon in Kategorien eingeteilte Bilder in Form von Fotos, Icons (kleine

Grafiken wie Pfeile etc.), Schaltflächenbilder und sogar animierte Grafiken

(gif's) finden Sie übersichtlich aufgelistet auch im Builderall Images-Repository.

Es lohnt sich, die hier zur Verfügung gestellten Grafiken einmal kurz durchzusehen,

um zumindest einen kleinen Überblick darüber zu bekommen.

150

TIPP: Sie können sich natürlich in „Cheetah“ eigene „Gestaltungselemente“

konstruieren (beispielsweise auf einem Box-Element als Container), die Sie

dann in Ihrer eigenen Elementepalette speichern.

Navigationselemente - Erstellung von Seitenauswahlmenüs

Spätestens wenn man Webseiten erstellt, die aus einer größeren Zahl von Einzelseiten

bestehen, muss man sich Gedanken zum Thema "Navigation" zwischen

diesen Seiten machen (Stichwort: „interne Verlinkung“). Hier bieten sich

eine Vielzahl von Möglichkeiten an. Am Häufigsten findet man immer noch das

sogenannte "Seitenmenü" in Form einer "Menüzeile" im Header einer Webseite.

Darüber werden alle anderen Seiten (und eventuell Unterseiten) der Webpräsentation

verlinkt.

Solch ein Seitenmenü kann dabei durchaus aufwändig gestaltet sein, wie dieses

Beispiel auf der Webseite von https://www.wissenschaft.de/ zeigt:

Abb.: Ein solches Design ist selbstverständlich auch in „Cheetah“ möglich.

Bevor wir uns aber mit der Erstellung und Konfiguration von derartigen Navigationselementen

näher beschäftigen, noch ein paar Worte zum Thema Webseitennavigation.

Denn sie sorgt für Orientierung und für die unkomplizierte Erreichbarkeit

von Inhalten, die i. d. R. auf verschiedenen Webseiten einer Website

angeordnet sind. Sie hat damit einen großen Einfluss auf das Nutzerverhalten.

Denn je unübersichtlicher eine Menüstruktur gestaltet ist, desto schwieriger

wird es für den Besucher, die ihn interessierenden Inhalte zu finden – und

er ist schnell wieder weg… Damit so etwas nicht passiert, sollte man die Seitenund

Menüstruktur sorgfältig planen. Entsprechende Struktogramme können

151

dabei eine Hilfe sein. Auch gibt es natürlich Seiten, die man nicht unbedingt in

der Hauptnavigation einer Webseite unterbringen muss. Dazu gehören Impressum,

Datenschutzerklärungen, Disclaimer und u. U. auch Kontaktformulare.

Diese werden am besten über einfache Textlinks (z. B. im Footer) dem daran

interessierten Besucher zugänglich gemacht. Auch kann es sinnvoll sein, mehrere

seitenabhängige Menüs zu entwerfen, um das Menü auf der Homepage

nicht zu überlasten. Auch sollten Drop-Down- und Submenüs nur dann eingesetzt

werden, wenn es wirklich Sinn macht. Ansonsten ist eine durchdachte

eindimensionale Menüstruktur oftmals besser als ein Menü, wo man sich erst

einmal durchklicken muss nur um zu erfahren, was sich noch so alles an Seitenlinks

darin verbirgt.

HINWEIS: In „Cheetah“ werden in der mobilen Ansicht automatisch sogenannte

„Burger-Menüs“ verwendet, die aus der Desktopmenüstruktur abgeleitet

werden.

Ein besonderes Augenmerk sollten Sie auf die sinnvolle Beschriftung der einzelnen

Menüpunkte richten. Sie sollte klar auf den Inhalt der darüber verlinkten

Webseite hinweisen.

Die horizontale, in den Headerbereich einer Webseite ausgelagerte Navigation

hat sich im Laufe der Zeit fest etabliert. Aber es gibt natürlich auch andere

Möglichkeiten, um diese Tradition zu durchbrechen. Eine davon ist die auf den

linken (und manchmal auch rechten) Rand ausgelagerte vertikale Navigation.

Diesen Menüansatz, der durchaus Vorteile bietet, findet man auf Webseiten

immer öfters. Indem man als Container Sticky Bars verwendet, kann man sie

auch beim Scrollen einer Seite immer sichtbar halten.

Vertikale Menüs am linken Rand einer Webseite haben noch eine Reihe weiter

Vorteile über den Vorteil hinaus, dass sie etwas ungewöhnlich sind und damit

Aufmerksamkeit erregen. Denn der durchschnittliche Webseitenbesucher

schaut zuerst auf den Seitenanfang und „scannt“ dabei mit seinen Augen den

linken Bereich (die Webdesigner sprechen von einem „F-Muster“). Und warum

sollte man das nicht ausnutzen? Außerdem ist die „Länge“ eines vertikalen

Menüs im Gegensatz zu einem „horizontalen“ Menü (Seitenbreite) nicht wirklich

begrenzt. Scrolling im Bereich der Nutzerführung hat sich ja mittlerweile

152

(auch dank dem „Rad“ auf der Maus) vollständig etabliert. Auch ergeben sich

für vertikale Navigationsstrukturen mehr Designansätze, die über eine reine

textbasierte Navigation hinausgehen. Wie wäre es beispielsweise mit der Verwendung

von Icons statt Texten für die einzelnen Menüpunkte?

MERKE: Navigation will gesehen werden!

Die von „Cheetah“ angebotenen Navigationselemente sind hochgradig konfigurierbar,

so dass man damit sowohl horizontale als auch vertikale Menüs in allen

möglichen Designvarianten zusammen bauen kann.

So finden Sie z. B. einige Templates für komplexe Menüs in der Elementeauswahl

unter „Big menu“:

153

Klassische Navigationsmenüs

Wir wollen uns hier aber erst einmal mit einer betont einfachen Menüstruktur

auseinander setzen, die in verschiedenen vorkonfigurierten Varianten unter

„Navigation“ und „Drip Menü“ in der Elementeauswahl angeboten werden:

Hier gibt es nur wenig zu beachten. Die „optische“ Konfiguration erfolgt wie bei

jedem anderen Element auch über die Elemente-Einstellungen. Hier können Sie

erst einmal festlegen, ob das Navigationselement als horizontales oder vertikales

Menü auf der Webseite angelegt werden soll. Danach können Sie, was Größe,

Färbung, Abstand, Form etc. betrifft, die das Navigationselement aufbauenden

Schaltflächen („Items“) und natürlich den Hintergrund des Gesamtmenüs

nach ihren Wünschen gestalten.

154

Die „Items“ (Menüpunkte) selbst werden dagegen über einen speziellen Editor

angelegt, der über das Zahnrad-Symbol („Config item“) des Kopfmenüs aufgerufen

wird:

Hiermit können Sie neue Menüeinträge hinzufügen ("+ Item"), Einträge löschen

(Papierkorb), Einträge editieren und Untermenüeinträge einfügen („+ Sub

menu"), löschen, bearbeiten und verlinken (Stiftsymbol - neuer Eingabedialog),

den Menüeintrag verlinken (Link-Symbol) sowie die Reihenfolge der Einträge in

der Menüzeile ändern (Verschiebesymbole). Da die Bedienung weitgehend

selbsterklärend ist, braucht hier nicht weiter darauf eingegangen zu werden.

Vergessen Sie aber nach Änderungen das Speichern nicht!

Hier ein Beispiel für eine typische „klassische“ horizontale Navigationsleiste mit

Submenüs:

155

HINWEIS: In der mobilen Ansicht werden klassische Navigationsmenüs in

Form von Burger-Menüs angezeigt. Hier sollten Sie auf jeden Fall Anpassungen

am automatisch erzeugten Design vornehmen.

Big Menus

Mehr Gestaltungsmöglichkeiten bieten sogenannte „Big Menus“, die aus einer

eigentlichen Menüzeile („Big Menu Group“) und einem Seitenbereich („Page“)

bestehen, der für jeden Menüeintrag von Ihnen individuell gestaltet werden

kann. Es handelt sich also um ein zusammengesetztes Element (Compound

Element). Wenn Sie neue Menüpunkte hinzufügen möchten, müssen Sie mit

dem Mauszeiger genau auf den oberen Rand der Menüzeile klicken. Nur dann

erscheint das Kopfmenü mit der „+“-Funktion, über die Sie neue Menüpunkte

(„Items“) hinzufügen können.

Jedes „Items“ selbst (und damit den dazugehörigen Anzeigebereich darunter –

in den Einstellungen „Container“ genannt) können Sie separat anklicken, wobei

jetzt ein anders aufgebautes Kopfmenü erscheint, über das Sie beispielsweise

die Menüpunkte umsortieren (Pfeile) oder jeweils separat konfigurieren (Stift-

Symbol) können. Mit dem Klone-Symbol erzeugen Sie dagegen am Ende der

Menüleiste einen neuen Menüeintrag, der genauso aussieht wie der eben ausgewählte

(übrigens eine sehe nützliche Funktion!).

156

TIPP: Beschäftigen Sie sich etwas mit den Item-Eigenschaften sowie den Eigenschaften

der Big Menu Group, um deren vielen Gestaltungsmöglichkeiten

auszuloten bzw. kennen zu lernen.

Gegenüber einem „klassischen“ Navigationsmenü, wie wir es eben besprochen

haben, besitzen die „Items“ eines „Big menus“ explizit keine Verlinkungsmöglichkeiten.

Diese müssen Sie selbst – wenn es notwendig sein sollte – im Containerbereich

realisieren, in dem Sie beispielsweise dort positionierte Buttons

oder Bilder mit entsprechenden Verlinkungen ausstatten.

HINWEIS: In der mobilen Ansicht werden „Big menus“ in vertikale Menüs

konvertiert. Hier sollten Sie auf jeden Fall Anpassungen am automatisch erzeugten

Design vornehmen.

157

Wenn die Anzeigenbereiche der Menüeinträge strukturell alle gleich aussehen

sollen, dann empfiehlt sich folgende Vorgehensweise:

Löschen Sie alle Menü-Items bis auf das Erste

Jetzt gestalten Sie dessen Anzeigebereich (Container) in Bezug auf Inhalt

und Funktionalität

Anschließend klonen Sie dieses Menü-Item so oft, wie Sie es benötigen

Zum Abschluss führen Sie bei jedem einzelnen Item-Container individuelle

Änderungen durch, in dem Sie beispielsweise Bilder und Texte austauschen

und eventuelle Verlinkungen anpassen

TIPP: Bei großen Websites ist es sehr aufwändig, quasi auf jeder Webseite ein

Navigationsmenü aufzubauen, das zu pflegen i. d. R. noch aufwändiger ist. In

diesem Fall sollten Sie die von „Cheetah“ zur Verfügung gestellte Möglichkeit

nutzen, Header (und auch Footer) separat zu erstellen und diese dann den

einzelnen Webseiten explizit zuzuweisen.

Das Akkordeon-Element

Gerade auf Smartphones sind Container, die Platz sparen helfen, eine große

Hilfe, wenn man möglichst viele Informationen unterbringen möchte. Einen

solchen Container, der natürlich auch auf "normalen" Webseiten eine gute Figur

macht, stellt das Akkordeon-Element dar. Es besteht aus einer vertikalen

Anordnung von Schaltflächen, denen jedes ein eigener Anzeigebereich (Container)

zugeordnet ist, welcher aber erst dann sichtbar wird, wenn man die dazugehörige

Schaltfläche anklickt:

158

Sie finden diese speziellen Objektcontainer im rechten Randmenü in der Elementepalette

unter "Neu" - "Elemente" im Abschnitt "Accordion" in verschiedenen

vorkonfigurierten Formen.

Es wird, wie jedes andere Element auch, einfach mit der Maus auf die Webseite

gezogen. Nur ist hier zu beachten, dass es sich um ein aus mehreren Teilen zusammengesetztes

Element handelt. Sie erkennen das, wenn Sie mit der Maus

ganz oben links den Rahmen anklicken. Wenn Sie dann im Kopfmenü ein "+" -

Button bemerken, dann ist das eigentliche Akkordeon-Element fokussiert. Klicken

Sie dagegen in die Headerzeile, dann öffnet sich das Kopfmenü der Headerzeile.

Um nun den Objektcontainer der jeweiligen Headerzeile zu befüllen, brauchen

Sie ihn nur noch zu öffnen und die gewünschten Elemente wie Bilder, Videos,

159

iFrames oder Textzeilen darauf zu legen und entsprechend anzuordnen – und

natürlich auf gewohnte Art und Weise zu konfigurieren.

HINWEIS: Sie sollten darauf achten, dass das Akkordeon-Element in der z-

Reihenfolge ("Layer-Position“) immer ganz oben liegt, damit die geöffneten

Container über die darunter liegende Elemente (wie hier der Text) beim Öffnen

zu liegen kommt. Die Layer-Position können Sie bei den entsprechenden

Elementen über den Abschnitt "Erweitert" in den Elementeeigenschaften

festlegen. Standardmäßig steht "Layer Level" auf "auto", was Sie in diesem

Fall aber ändern müssen. Dazu dienen die Schaltflächen "Niedrig" und

"Oben".

Timers ...

Es gibt eine Vielzahl von Anwendungsfällen, bei denen eine bestimmte Funktion

erst zu einem vorher festgelegten Zeitpunkt ausgelöst bzw. freigeschaltet

werden soll. Genau zu diesem Zweck dienen sogenannte "Timer".

Vielleicht haben Sie schon einmal auf einer Webseite einen „Countdown-

Zähler“ gesehen, der die Zeit in Stunden, Minuten und Sekunden herunterzählt,

bis ein Livestream zu einem Webinar oder Ähnliches gestartet wird.

In der Elementeauswahl finden Sie eine größere Anzahl derartiger "Timer", die

aber genaugenommen nur verschiedene Designformen einer Grundform sind

(Eigenschaft "Theme"):

160

HINWEIS: Die Größe der Timer kann im Gegensatz zu anderen Elementen nur

eingeschränkt eingestellt werden und ergibt sich in erster Linie aus der gewählten

Schriftgröße.

Je nach Einsatzzweck unterscheidet man Fixed (Countdown) -Timer, Evergreen-

Timer und rekurrierende Timer. Diese Typen lassen sich explizit über die Timer-

Eigenschaft "Typ" einstellen.

Specific Date Time:

Es wird bis zu einem durch Datum und Uhrzeit festgelegten Zeitpunkt herunter

gezählt.

Countdown-Timer:

Ein Countdown-Zähler zählt bis zu einem bestimmten Datum und Uhrzeit sekündlich

herunter (Specific Date Time) oder es wird eine Zahl von Tagen, Stunden,

Minuten und Sekunden vorgegeben, von dem aus bis Null sekündlich heruntergezählt

wird (Countdown).

Evergreen-Timer:

Ein Evergreen-Timer zeigt an, wie lange ein Besucher das Angebot auf der

Webseite noch in Anspruch nehmen kann. Ist der Zeitraum verstrichen, dann

endet auch das Angebot.

Timer neu laden:

Nach Erreichen des Zielzeitpunktes wird der Timer wieder neu initialisiert und

gestartet (rekurrierender Timer).

Welche Aktion ausgelöst wird, sobald der Timer auf null zurückgezählt hat, wird

über das Link-Symbol in dessen Kopfmenü eingestellt. Gewöhnlich wird das eine

Weiterleitung auf eine andere Webseite sein, aber auch das Aufblenden eines

Popups mit weiterführenden Informationen oder das Freischalten eines

Mitgliederbereichs sind möglich.

161

Animierte Elemente (Counter, Fortschrittsbalken)

In der Elementeauswahl des Sitebuilders finden sich auch ein paar ganz einfache

„Animierte Elemente“, mit denen man einen Zähler oder einen Fortschrittsbalken

(„progress bar“) auf eine Webseite zaubern kann. Der Nutzwert

ist aber noch gering, da es sich um autonome Elemente handelt. Sie können

lediglich eine Ziffernanzeige hochzählen (z. B. von 0 bis 1000) oder einen Fortschrittsbalken

als optisches Showelement zeichnen (und zwar ohne Anbindung

an einen parallel dazu laufenden Vorgang wie z. B. der Download einer Datei).

Die Elemente können auf die übliche Art und Weise in Bezug auf Rahmen und

Farbe frei gestaltet werden. Wesentlich ist hier ansonsten nur die Kategorie

„Text counter“. Hier legen Sie einen zahlenmäßigen Anfangswert und einen

Endwert fest, bis zu dem in Schritten zu jeweils 1 hochgezählt wird. Wie schnell

das geschieht, hängt vom Eintrag „Timer“ ab. 1000 bedeutet dabei eine Sekunde.

Ein Wert darunter erhöht und ein Wert darüber erniedrigt die Zählrate.

Weiterhin können Sie hier bei einem Counter-Element noch die Schriftart und

die Schriftgröße festlegen, mit der die Ziffern im Zähler dargestellt werden sollen.

162

Objekte einbetten über das iFrame-Element

Oftmals möchte man Inhalte von Plattformen wie Youtube (Videos), Google

(Maps), Blogger (Blogartikel) oder Yumpu (pdf's) in seine eigene Webseite einbetten.

Die genannten Plattformen stellen dafür einen sogenannten "Einbettungscode"

zur Verfügung, der in den Webseitencode an der entsprechenden

Stelle einzufügen ist. Nur leider hat man im Fall des „Cheetah“ Sitebuilders keinen

schreibenden Zugriff auf die eigentliche Webseitencodierung. Aber

„Cheetah“ bietet in seiner Elementeliste ein entsprechendes Element an, mit

dem sich kinderleicht iFrames und Einbettungscodes in eine Webseite integrieren

lassen. Es ist im rechten Randmenü unter "Neu" - "Elemente" - "iFrame /

HTML" zu finden:

163

Es ist zwar auf den ersten Blick einfach strukturiert, aber trotzdem das wahrscheinlich

leistungsfähigste Element in der „Cheetah“-Elementeauswahl.

Einbetten beliebiger Webseiten

Beginnen wir mit dem einfachsten Fall, dem Einbetten einer beliebigen Webseite

in ein iFrame. Dazu benötigen Sie lediglich das iFrame / HTML Element

von „Cheetah“ (auf die Webseite ziehen) sowie eine gültige Webadresse, z. B.

https://wincontact.builderall.net/adressengrabber

Nachdem Sie das iFrame-Element auf Ihrer Webseite positioniert haben, wechseln

Sie auf dessen Einstellungsseite. Dort finden Sie unter „Allgemeine Einstellungen“

das Eingabefeld „Einbettungs URL“. In dieses Feld geben Sie die vollständige

URL der Webseite ein, die Sie auf ihrer Webseite in einem iFrame angezeigt

haben möchten. Anschließend legen Sie noch die Höhe und Breite des

iFrames fest – und das Ergebnis könnte dann in etwa so aussehen:

164

Einfacher geht es wirklich nicht.

HINWEIS: Überprüfen Sie auf jeden Fall auch die mobile Ansicht. Sollte es von

der eingebetteten Website keine mobile Ansicht geben, ist es oftmals die

bessere Idee, auf dem Smartphone ganz auf das iFrame-Fenster zu verzichten.

Einbetten von Google Maps

Manchmal möchte man - meistens auf der Kontaktseite - ein Stück "Stadtplan"

mit einbinden, aus dem ein potentieller Besucher z. B. den genauen Ort der

Firma oder einer Sehenswürdigkeit entnehmen kann. Während man mit

Screenshots aus diversen Stadtplänen leicht mit dem Urheberrecht in Konflikt

gerät, ist das Einbetten von Karten aus Plattformen wie Google Maps völlig unproblematisch,

wenn man den Einbettungscode direkt der Plattform entnimmt.

Und wie das genau geht, soll nun im Einzelnen anhand eines Beispiels schrittweise

erläutert werden.

Angenommen, die Nachlassverwalter des Pharaos "Cheops" möchten auf ihrer

Webseite ein zoombares Satellitenbild bzw. Karte mit dem (leeren) Grabmal

ihres Mandanten integrieren. Welche einzelnen Arbeitsschritte sind dafür notwendig?

Wechseln Sie dazu im Browser auf die Plattform „Google Maps“ und lassen Sie

sich dort den Ort "Cheops-Pyramide, Al Haram, Nazlet El-Semman, Al Giza Desert,

Ägypten" anzeigen. Anschließend wählen Sie mittels der Zoom-Funktion

den gewünschten Kartenausschnitt. Ist das geschehen, muss nur noch das linke

Randmenü von Google Maps geöffnet und dort der Eintrag "Teilen" angeklickt

werden, worauf sich ein neues Fenster öffnet, wo Sie den Tab „Karten einbetten“

finden:

165

Unter dem Tab "Karten einbetten" finden Sie den von Google Maps automatisch

generierten Einbettungscode, den Sie nun mit einem Klick auf den Link

"HTML KOPIEREN" in die Zwischenablage kopieren. Der Rest ist schnell getan.

Sie wechseln wieder zurück in den „Cheetah“ Sitebuilder und ziehen sich dort

aus dem rechten Randmenü ein iFrame /HTML Element auf ihre Webseite. Danach

öffnen Sie dessen Einstellungsfenster. Nun müssen Sie nur noch den Inhalt

der Zwischenablage unter "Allgemeine Einstellungen" in das Feld Einbettungscode"

kopieren und Bestätigen. Und das ist schon alles. Jetzt können Sie,

wenn Sie möchten, den Container noch etwas skalieren, platzieren und forma-

166

tieren - und dann dessen Funktionalität und Aussehen im Vorschau-Modus

überprüfen:

Einbetten von Youtube-Videos

Wie Sie bereits wissen, stellt „Cheetah“ für das Einbetten von Youtube-Videos

in eine Webseite ein eigenes Element in der Elementeauswahl „Videos“ zur

Verfügung. Sie können aber auch das Inline-HTML-Element dafür verwenden,

denn es gibt einige wenige Fälle, bei denen das native Video-Element nicht in

der Lage ist, ein bestimmtes Youtube-Video abzuspielen – das iFrame-Element

dagegen sehr wohl.

Die Vorgehensweise ist wiederum sehr einfach und folgerichtig. Sie suchen sich

auf der Youtube-Seite das gewünschte Video aus und kopieren dessen Einbettungscode

in die Zwischenablage (er ist unter „Teilen“ – „Einbetten“ zu finden):

167

Beachten Sie aber, dass Sie im Fenster, in dem der Einbettungscode bei Youtube

angezeigt wird, noch weitere diverse Einstellungen vorgenommen werden

können. Erst wenn Sie damit fertig sind, drücken Sie die Schaltfläche "Kopieren".

Der Einbettungscode befindet sich jetzt in der Zwischenablage und kann

somit zum iFrame / Inline HTML - Element übertragen werden.

HINWEIS: Um die Größe des Video-Bereichs zu ändern, reicht es nicht, die

Größe des iFrames zu ändern. Sie müssen dazu die im Einbettungscode enthaltenen

Größen „width“ und „height“ explizit anpassen und dabei das Seitenverhältnis

wahren. Übrigens ein guter Anwendungsfall für den Dreisatz.

Einbetten von pdf-Dateien

Es gibt verschiedene Methoden, wie sich pdf-Dokumente in eine Webseite einbetten

lassen. Auf jeden Fall muss eine solche Datei natürlich an einem Ort gespeichert

sein, von wo sie von der Webseite aus auch erreichbar ist. Hier bieten

sich Online-Plattformen wie "Yumpu" oder diverse Cloudspeicher wie "Onedrive"

oder „Backup-Sync“ von Google an. In diesem Beispiel hier soll explizit

"Yumpu" verwendet werden, welches mit geringen Einschränkungen kostenlos

genutzt werden darf und zugleich auch Einbettungscode für die Dokumentenanzeige

auf der Webseite über einen speziellen Wizard zur Verfügung stellt.

LINK: Hier können Sie sich kostenlos bei YUMPU anmelden und dann dort

Ihre pdf-Dokumente hochladen

https://www.yumpu.com/de

168

Nach dem Sie Ihre pdf-Datei auf die Plattform hochgeladen und die entsprechenden

Metadaten in die dafür vorgesehene Maske eingetragen haben, können

Sie über die Funktion "Embed" den Einbettungscode im Dialog erstellen:

Ein Klick auf die im Screenshot gekennzeichnete Schaltfläche eröffnet Ihnen

den Zugang zu einem speziellen Wizard ("Einbettungsoptionen festlegen"), in

dem Sie diverse Einstellungen bezüglich des später auf Ihrer Webseite sichtbaren

pdf - Betrachters vornehmen können. Das betrifft u. a. den Stil, die Größe

und die Seitenzahl der Startseite sowie das Zuschalten diverse Bedienelemente

(einige Funktionen sind jedoch nur in der kostenpflichtigen Variante zugänglich).

Mit jeder Einstellung wird dabei simultan der im oberen Teil des Wizards

angezeigte Einbettungscode modifiziert. Am Ende müssen Sie nur noch diesen

Einbettungscode in die Zwischenablage übernehmen und anschließend dem

Inline / HTML - Element auf Ihrer Webseite zuweisen:

169

Beachten Sie, dass Sie die Größe des Einbettungsbereichs möglichst gleich der

Größe des im Einbettungscode angegebenen Embed-Fensters wählen (hier

940x846 Pixel), welches Sie dann anschließend noch ein klein wenig vergrößern,

bis die Rollbalken verschwinden. Das Ergebnis könnte dann beispielsweise

so aussehen:

170

In der mobilen Ansicht ist es aber meist besser, die pdf-Datei direkt per iFrame

einzubinden. Dazu brauchen Sie in dem hier darunter aufgelisteten Code (welcher

den „Google-Viewer“ explizit verwendet) nur den Zugriffspfad zur pdf-

Datei (rot dargestellt) zu Ihrer pdf-Datei auszutauschen:

<iFrame style="width: 260px; height: 420px;" src=

"https://docs.google.com/gview? url= {URL zur PDF}

&embedded=true" height="240" width="320" frameborder="0">

< /iFrame>

HINWEIS: Die beiden Varianten müssen Sie natürlich wechselseitig verbergen,

so dass die erste Variante nur in der Desktop-Ansicht und die zweite Variante

nur in der Smartphone-Ansicht angezeigt werden.

171

Einbetten von mit dem Digital Magazine Editor erstellten Magazinen

Im PREMIUM-Plan von Builderall ist der "Digital Magazine Editor" enthalten,

mit dem man mit wenig Aufwand hochwertige pdf - Magazine erstellen kann.

Diese Magazine können sowohl als pdf - Dateien gespeichert (und damit natürlich

auch ausgedruckt) als auch in Webseiten eingebettet werden, wobei der

Einbettungscode direkt im Editor erzeugt wird. Auch dazu ein kleines Beispiel:

Sobald das Magazin fertiggestellt ist, kann der Einbettungscode durch Betätigung

der Schaltfläche "Übernehmen" erzeugt werden:

172

Mittels der Schaltfläche "Kopieren" können Sie ihn dann leicht in die Zwischenablage

übernehmen und auf gewohnte Weise in das iFrame / HTML - Element

auf Ihrer Webseite übertragen:

173

Instagram-Post einbetten

Wenn Sie ein öffentlich einsehbares Instagram-Profil haben, dann können Sie

Ihre Instagram-Posts auch in mit „Cheetah“ erstellte Webseiten problemlos

einbetten. Wechseln Sie dazu in ihrem Browser auf Ihre Instagram-Seite und

suchen Sie sich einen dort veröffentlichten Beitrag aus:

Dann klicken Sie auf das entsprechende Bild (hier der „Große Pestwurz-

Rüsselkäfer“), wodurch der Beitrag groß angezeigt wird. Dabei achten Sie bitte

auf die drei Punkte (…) oben links, denn dahinter verbirgt sich ein kleines Menü.

Uns interessiert hier nur der Eintrag „Einbetten“:

174

Und der Rest dürfte klar sein. Einbettungscode kopieren und in das iFrame /

HTML – Element per Zwischenablage übertragen. Und schon ziert das Instagram-Foto

Ihre Webseite:

Twitter-Nachrichten einbetten

Sie können auch Twitter-Nachrichten in Ihre Webseite einbetten. Dazu müssen

Sie lediglich den entsprechenden Tweet in Twitter öffnen und dann rechts oben

auf das kleine Dreieck anklicken. Dann öffnet sich ein Menü, in dem Sie auch

den Punkt „Tweet einbetten“ finden. Ein Klick darauf führt Sie dann augenblick-

175

lich auf die Seite, wo der entsprechende Einbettungscode automatisch generiert

wird.

Wenn Sie ihn in dann in das iFrame / HTML – Element übernommen haben, erscheint

der Tweet auf Ihrer Webseite:

176

Eigenen Embed-Code erzeugen

Es gibt einige Dienste im Internet, die es erlauben, zu einer URL (beispielsweise

eines Journalartikels) einen Einbettungscode zu generieren, der ein gefälliges

Bild auf einer Webseite ergibt. Solch ein Dienst ist beispielsweise embedly.ly,

der auch einen kostenlosen Plan beinhaltet.

LINK: Eigenen Einbettungscode mit „embedly“ generieren

https://embed.ly/code

Um eine sogenannte „card“ zu erstellen, brauchen Sie nur die entsprechende

URL in das dafür vorgesehene Eingabefeld einzutragen. Der Dienst erstellt daraus

automatisch den gewünschten Einbettungscode:

Und auf der eigenen Webseite sieht dann die generierte „card“ dann so aus:

177

HTML-Snippets verwenden

Unter "Snippets" (deutsch: Schnipsel) versteht man kleine funktionelle HTML-

Code-Schnipsel, die inline in eine Codeseite eingefügt werden und die eine gewisse

Funktionalität aufweisen. Unter „Cheetah“ wird hierfür das bereits bekannte

iFrame / HTML – Element verwendet. Hier können Sie nämlich nativen

HTML-Code eingeben, der dann in der Webseite entsprechend ausgeführt wird.

Als einführendes Beispiel soll an dieser Stelle ein kurzes Code-Snippet vorgestellt

werden, welches Google Maps veranlasst, eine Wegbeschreibung zu einem

bestimmten Ort zu generieren, wobei der Ausgangspunkt der Flughafen

Dresden-Klotzsche ist. Die Wegbeschreibung wird nach Betätigung der Schaltfläche

„Blende Karte auf“ in einem neuen Browser-Tab angezeigt:

<form action= "http://maps.google.com/maps" method="get"

target="_blank">

<label for="saddr">Wohin willst Du?

<input type="text" name="saddr" />

<input type="hidden" name="daddr" value="Flughafen

Dresden (DRS), Flughafenstraße,

Klotzsche Dresden" />

<input type="submit" value="Blende Karte auf" />

</form>

Diesen Code müssen Sie in das Feld „EinbettungsCode“ in der Kategorie „Allgemeine

Einstellungen“ des iFrame / HTML – Elements eintragen und zusätzlich

dazu noch das Markierungsfeld „Inline HTML“ ankreuzen. Das iFrame / HTML –

Element ändert daraufhin seinen Inhalt

178

und in der Vorschau können Sie sich anschließend von dessen Funktionalität

überzeugen.

HINWEIS: An dieser Stelle kann jetzt natürlich kein Kurs über HTML-

Programmierung gegeben werden. Wenn Sie also selbst derartige „Snippets“

entwickeln möchten, dann bleibt Ihnen nichts anderes übrig, als sich mit dieser

Markup-Sprache zu beschäftigen. Dafür gibt es in großer Zahl Lehrbücher

sowie darauf spezialisierte Webseiten und Online-Kurse im Netz. Besonders

empfohlen seien in diesem Zusammenhang die folgenden zwei Referenzseiten:

LINK: selfhtml Wiki – die beste deutschsprachige Referenzseite zu HTML etc.

https://wiki.selfhtml.org/

LINK: CSS 4 you – die deutsche Seite für Cascading Stylesheets (CSS)

http://www.css4you.de/

Ein HTML-Snippet besteht i. d. R. aus drei Teilen: Einem HTML-Code, einem Style,

welcher u. a. das optische Erscheinungsbild festlegt und eventuell JavaScript

für die Sicherstellung der Funktionalität.

Angenommen, Sie möchten ein Foto auf ihrer Webseite modal vergrößert aufblenden,

sobald man mit der Maus darauf klickt. Dann sieht der reine HTML-

Code dafür folgendermaßen aus:

<img id="myImg" src="{ Link zum Foto}"

alt="{Bildtitel}"

style="width:100%;max-width:300px">

<div id="myModal" class="modal">

179

<span class="close">×</span>

<img class="modal-content" id="img01">

<div id="caption"></div>

</div>

Dieser Code ist für die Anzeige des Bildes verantwortlich. Jetzt folgen die Inline-

Stylesheets, um die einzelnen benannten Elemente explizit zu konfigurieren.

Als Erstes fügen wir einen Hover-Effekt dem Bild „myImg“ hinzu:

<style>

#myImg {

border-radius: 5px;

cursor: pointer;

transition: 0.3s;

}

#myImg:hover {opacity: 0.7;}

In der Vorschau ist dieser Effekt („Ausgrauen“ des Bildes bei Mausberührung)

bereits zu sehen. Nun folgt die „Formatierung“ des modalen Contents:

.modal-content {

margin: auto;

display: block;

width: 80%;

max-width: 700px;

}

#caption {

margin: auto;

display: block;

width: 80%;

max-width: 700px;

text-align: center;

color: #ccc;

padding: 10px 0;

height: 150px;

}

.modal-content, #caption {

animation-name: zoom;

animation-duration: 0.6s;

}

180

@keyframes zoom {

from {transform:scale(0)} to {transform:scale(1)}

}

.close {

position: absolute;

top: 15px;

right: 35px;

color: #f1f1f1;

font-size: 40px;

font-weight: bold;

transition: 0.3s;

}

.close:hover,

.close:focus {

color: #bbb;

text-decoration: none;

cursor: pointer;

}

@media only screen and (max-width: 700px){

.modal-content {

width: 100%;

}

}

</style>

Hier folgt jetzt der Block mit dem für die Funktion notwendigen JavaScript-

Programm das sicherstellt, dass ein Mausklick auf das Bild auch den gewünschten

Effekt erzielt:

<script>

var modal = document.getElementById("myModal");

var img = document.getElementById("myImg");

var modalImg = document.getElementById("img01");

var captionText = document.getElementById("caption");

img.onclick = function(){

modal.style.display = "block";

modalImg.src = this.src;

captionText.innerHTML = this.alt;

}

181

var span = document.getElementsByClassName("close")[0];

span.onclick = function() {

modal.style.display = "none";

}

</script>

HINWEIS: Sie müssen die Größe des iFrame / HTML – Containers so anpassen,

dass beim Aufblenden des vergrößerten Bildes keine Rollbalken erscheinen

(hier 1000 x 1000 Pixel).

Wie Sie sehen, kann man mittels kleiner HTML-Snippets in „Cheetah“ durchaus

beeindruckende Effekte erzeugen. Das allein sollte schon ein Grund dafür sein,

sich etwas mit HTML, CSS und JavaScript zu beschäftigen. Außerdem können

Sie mit derartigen Snippets eigene Elemente zur Erweiterung der Funktionalität

von „Cheetah“ erzeugen, die Sie dann unter einem eigenen Namen in Ihrer

Vorlagenbibliothek ablegen können. In unserem Beispiel bedeutet das hier,

dass Sie einfach über das Kopfmenü des iFrame / HTML – Elements eine Vorlage

mit dem Namen „Modale Bildanzeige“ erzeugen. Sie finden Sie dann danach

im Bereich „Vorlagen“ des Randmenüs unter „iFrame“:

Um es auf anderen Webseiten zu verwenden, müssen Sie es nur noch auf die

entsprechende Webseite ziehen und im Einbettungscode den Bild-Link ändern.

182

Mit Hilfe des iFrame / HTML – Elements können Sie sich auch externe HTML-

Editoren zu Nutze machen, um beispielsweise Tabellen für Ihre Webseite zu

erzeugen, was mit „Cheetah“ nicht ganz so einfach ist. Auch dazu ein Beispiel.

HINWEIS: Beachten Sie, dass Sie – wenn Sie mit Inline-HTML arbeiten – natürlich

selbst für responsiven Code sorgen müssen, wenn Sie damit auch die mobile

Variante ihrer Webseite ausstatten möchten. Manchmal ist es dabei unumgänglich,

dass Sie jeweils zwei iFrame / HTML – Container verwenden

müssen, von denen der eine Code für die Desktop-Variante und die andere

Code für die mobile Variante enthält und die sie dann wechselseitig verbergen.

Einen relativ einfachen und auch weitgehend intuitiv bedienbaren HTML5-

Editor finden Sie beispielsweise über folgenden

LINK: HTML5-Editor.Net

https://html5-editor.net/

Wir wollen ihn im Folgenden verwenden, um eine Tabelle (Preisliste der Builderall-Pläne)

für die Desktop-Variante einer Webseite zu erstellen.

Builderall-Plan

Free

Monatlicher Preis

kostenlos

Builder 18,90 €

Marketer 26,90 €

Essentiel 44,90 €

Premium 59,90 €

Der HTML-Editor besteht aus zwei Seiten. Links befindet sich der Bereich, in

dem der Quelltext angezeigt wird und der rechte Teil ist der eigentliche Editor,

der vom Leistungsumfang ungefähr einem besseren Texteditor entspricht:

183

Wir wollen ihn nun verwenden, um den HTML-Quelltext für unsere Tabelle zu

erzeugen. Dazu benötigen wir nur den Menüpunkt „Table“ im Editor. Damit ist

das Grundgerüst aus zwei Spalten und sechs Zeilen schnell erstellt:

Hier können wir auch gleich die Daten eintragen:

184

Über „Table“ – „Table Properties“ kann die Tabelle noch explizit formatiert

werden:

Der HTML-Sourcecode können Sie jetzt aus dem linken Sourcecode-Fenster in

die Zwischenablage kopieren und danach in das iFrame / HTML – Element im

„Cheetah“- Editor übertragen:

<table style="height: 146px;

background-color: #ffeaa7;

border-color: #ffffff; width: 325px;" border="4">

<caption> </caption>

<tbody>

<tr>

185

<td style="width: 158px;"><strong>Builderall-

Plan</strong></td>

<td style="width: 151px;"><strong>Monatlicher Preis</strong></td>

</tr><tr>

<td style="width: 158px;">Free</td>

<td style="width: 151px; text-align: center;">kostenlos</td>

</tr><tr>

<td style="width: 158px;">Builder</td>

<td style="width: 151px; text-align: center;">18,90

€</td>

</tr><tr>

<td style="width: 158px;">Marketer</td>


€</td>

</tr><tr>

<td style="width: 158px;">Essentiel</td>


€</td>

</tr><tr>

<td style="width: 158px;">Premium</td>


€</td>

</tr>

</tbody>

</table>

Und das Ergebnis kann sich schon sehen lassen:

186

Snippet-Sammlungen im Internet

Auch bei der Web-Programmierung gilt: Man muss nicht alles selbst erfinden.

Im Internet gibt es eine Vielzahl von Seiten, auf denen man hinsichtlich HTML-

Snippets fündig werden kann. Eine sehr schöne Sammlung finden Sie beispielsweise

auf w3schools.com.

LINK: Code snippets für HTML, CSS und JavaScript

https://www.w3schools.com/howto/default_page6.asp

Die meisten davon kann man mit wenigen individuellen Anpassungen sofort

übernehmen. Besser ist es aber, man nutzt sie als Anregungen und Motivation,

ihre Funktionsweise zu verstehen, um selbst einmal derartige Snippets programmieren

zu können.

Eine weitere sehr umfangreiche Snippet-Sammlung bietet die Webseite webdesignerwall:

LINK: Design elements, playground and code snippets für Bootstrap

HTML/CSS/JS framework

https://webdesignerwall.com/

Sie besitzt eine Suchfunktion und ist auch sehr übersichtlich aufgebaut:

187

Um den Code zu nutzen, kopieren Sie zuerst den HTML-Code in einen Texteditor,

danach (eingerahmt durch die Tags <style> … </style>) den inline –

CSS – Code und schließlich, wenn notwendig, zwischen den Tags <script> …

</script> den dazugehörigen JavaScript. In dem Sie die CSS-Eintragungen

verändern, können sie das Element bequem für Ihre Zwecke gestalterisch anpassen.

Der Rest dürfte klar sein.

TIPP: Speichern Sie das komplette iFrame mit dem Code in Ihren „Cheetah“-

Vorlagen, um das entsprechende Snippet später auch in anderen Webprojekten

verwenden zu können.

Einfache Kontaktformulare

Da es das Ziel vieler Webseiten ist, Geschäftskontakte anzubahnen, gehören

entsprechende Kontaktformulare zu deren Grundausstattung. In diesem Kapitel

soll es um "einfache" Kontaktformulare gehen, für die „Cheetah“ einige Templates

anbietet.

188

Im Unterschied zu den E-Mail-Marketing-Formularen erfolgt hier keine Anbindung

an den E-Mail-Autoresponder „Mailingboss“. Dafür sind die Eingabeformulare

der Kategorie „E-Mail Marketing Formular“ vorgesehen, die im nächsten

Kapitel vorgestellt werden.

In dem hier behandelten Typ von Kontaktformularen werden lediglich Kontaktdaten

und Mitteilungen, die vom Webseitenbesucher explizit in das Formular

eingetragen werden, an eine vorgegebene E-Mailadresse übermittelt. Ein solches

Formular könnte im nativen Zustand folgendermaßen aussehen (Neu -

Kontaktformular):

Dieses Template kann von Ihnen in einer Vielzahl von Parametern angepasst

werden. Was das Aussehen und die farbliche Gestaltung des Formulars betrifft,

so finden Sie die entsprechenden Eigenschaften nach Fokussierung des Elements

im rechten Randbereich des Webseiteneditors (bzw. dem Einstellungsfenster).

Das betrifft in erster Linie Breite und Höhe des Buttons sowie dessen

Farbe (Hintergrund) und Beschriftung, den Stil der Eingabefelder (Farbe, Höhe,

Rand ...) sowie spezielle Animationseffekte, die als Eyecatcher dienen können.

TIPP: Probieren Sie ruhig einmal die angebotenen Animationseffekte aus und

lassen Sie sich davon überraschen (und eventuell später Ihre Webseitenbesucher).

Um die eigentliche Funktionalität der Kontaktmaske anzupassen, muss der entsprechende

Einstellungsdialog im Kopfmenü des Elements geöffnet werden

(Zahnradsymbol, Felder bearbeiten). In diesem Dialogfenster müssen Sie auf

189

jeden Fall die E-Mailadresse des Empfängers eintragen (mit hoher Wahrscheinlichkeit

ihre eigene). Außerdem können Sie einen "Betreff" vorgeben. Weiterhin

gibt es noch die Möglichkeit, den Besucher nach dem erfolgreichen Absenden

der Nachricht auf eine andere Webseite umzuleiten. Dazu ist lediglich die

entsprechende URL in das dafür vorgegebene Feld einzutragen. Darüber hinaus

lassen sich noch spezielle Infotexte vorgeben, die beispielsweise bei einem Fehler

angezeigt werden.

Im unteren Teil des Dialogs können Sie die einzelnen Eingabefelder es Kontaktformulars

individuell konfigurieren bzw. weitere Eingabefelder hinzufügen bzw.

nicht Benötigte wieder löschen sowie deren Reihenfolge ändern:

Insgesamt sind die Konfigurationsmöglichkeiten ausreichend, um in eine Webseite

eine ansprechende Kontaktmaske einzubauen, die auch auf dem Smartphone

gut aussieht.

HINWEIS: Vergessen Sie nicht, vor Veröffentlichung der Webseite das Kontaktformular

auszuprobieren.

190

Und hier sehen Sie noch ein Beispiel für ein horizontal angeordnetes Kontaktformular:

DSGVO Lösung für Kontaktformulare

Folgende Punkte müssen Sie in Bezug auf die Datenschutz-Grundverordnung

bei Kontaktformularen umsetzen:

Die Website muss ein SSL-Zertifikat haben (HTTPS)

Die Website muss die E-Mails über SMPT bzw. TLS versenden

Sie müssen eine Datenschutzerklärung einbinden

Und schreiben Sie eventuell bei Ihren Kontaktformularen dazu, was Sie mit den

Daten zu machen gedenken und wie lange Sie sie speichern - bzw. verweisen

Sie einfach explizit auf Ihre Datenschutzerklärung, wo ja eh alles drinsteht (z. B.

über einen Link in der Kontaktformularbeschreibung)...

E-Mail-Marketing-Formulare in Verbindung mit Mailingboss

Mit Mailingboss enthalten alle Builderall-Pakete einen E-Mail-Autoresponder,

mit dem sich ab dem MARKETER-Plan (5000 Leads) professionelles E-Mail-

Marketing betreiben lässt. Aber auch der FREE- und der BUILDER-Plan bietet

genügend Kapazitäten, um sich zumindest in das E-Mail-Marketing einarbeiten

zu können. In diesem Kapitel wird in erster Linie die "Schnittstelle" Webseite -

Mailingboss behandelt und gezeigt, wie man E-Mail-Marketing-Formulare mit

dem „Cheetah“ Sitebuilder erstellt.

191

In der Elementeauswahl des „Cheetah“ Sitebuilders werden im Abschnitt "E-

Mail Marketing Formular" eine Anzahl von Eingabeformularen angeboten, die

explizit eine Anbindung an Mailingboss ermöglichen.

Sie dienen der Erfassung von E-Mail-Adressen nach dem gesetzlich vorgeschriebenen

Double OptIn - Verfahren, wobei die erfassten und bestätigten E-

Mail-Adressen in speziellen Listen innerhalb von Mailingboss gesammelt werden.

Sie können dann rechtskonform für alle Arten von Marketingmaßnahmen

Verwendung finden.

EMPFEHLUNG: Bitte befassen Sie sich im Vorfeld des Einbindens von E-Mail-

Marketing-Formularen ("Mailingboss-Formulare") in Webseiten etwas ausführlicher

mit dem Autoresponder „Mailingboss“. Auch sollten Sie die benötigten

Mailinglisten zuvor in Mailingboss anlegen und konfigurieren. Diese

Vorgehensweise ist günstiger und transparenter als eine Liste direkt über das

192

Eingabeelement in „Cheetah“ (was natürlich auch geht) zu definieren. In dieser

Anleitung wird deshalb explizit davon ausgegangen, dass die dem Eingabeformular

zuzuordnende Mailingliste bereits in Mailingboss verfügbar ist.

Hier sehen Sie einen Screenshot des Wizards zum Einrichten einer Mailingliste

in Mailingboss:

193

Welche Eingabefelder in dem Formular angezeigt werden, hängt davon ab,

welche Eingabefelder in der ausgewählten E-Mail-Liste zuvor von Ihnen festgelegt

worden sind. Das Aussehen des Formulars können Sie nach eigenem Ermessen

mittels Variation der Elementeeigenschaften im rechten Randbereich

bzw. im Einstellungs-Dialog des Formulars frei gestalten.

Um die dem Formular zugeordnete E-Mail-Liste zu ändern, müssen Sie dagegen

im Kopfmenü das entsprechende Symbol (Zahnrad) anklicken, worauf sich das

dafür vorgesehene Auswahlfenster öffnet.

Welche konkrete Aktion auf einen Eintrag in das Formular erfolgen soll, lässt

sich über das Link-Symbol im Kopfmenü des Mailingboss-Formulars festlegen.

Es öffnet sich dann folgendes Fenster:

Hier können Sie jedem der drei Mailingboss-Ereignisse

Abonnement ausstehen (Subscribe pending)

Abonnement bestätigt (Subscribe confirm)

Abbestellung bestätigt (Unsubscribe confirm)

eine spezielle Aktion zuordnen. Dazu öffnet sich der Standard-

Linkauswahldialog von „Cheetah“, aus dem Sie dann wie gewohnt eine Aktion

(z. B. Wechsel auf eine bestimmte Seite oder URL, Download veranlassen, Popup

aufblenden etc.) auswählen können.

HINWEIS: Mailingboss-Formulare sind Grundbestandteile sogenannter Verkaufstrichter

("Funnels"), wie man sie besonders einfach und effektiv unter

Builderall erstellen kann. Mit Ihrer Hilfe lassen sich u. a. sehr effektiv Verkaufsprozesse

auf Webseiten organisieren oder Leadgewinnungsprozesse zur

Verkaufsanbahnung optimieren.

194

Globale Elemente

Unter „Globalen Elementen“ versteht man in „Cheetah“ Elemente wie Pop-ups

sowie Header- und Footer-Bereiche, die separat erstellt und designt und dann

später explizit Webseiten zugewiesen werden. Insbesondere Kopf- und Fußbereiche

separat und unabhängig von den Webseiten eines Projektes zu entwickeln,

stellt oftmals eine enorme Arbeitserleichterung dar – insbesondere

wenn es um Aktualisierungen gilt (Stichwort „Navigationsmenüs“ im Kopfbereich

von Webseiten).

Kopf- und Fußbereiche für eine Website erstellen

Webseiten bestehen gewöhnlich aus einem Kopfbereich – „Header“ genannt -,

einem Haupt- oder Mittelteil sowie einem "Fuß" („Footer“), der gewöhnlich

Angaben zum Webseiteneigner und Links zu sozialen Medien enthält. Mit

„Cheetah“ und seinem auf "Banner" beruhenden Konstruktionsprinzip von

Webseiten ist es natürlich sehr einfach, entsprechende Kopf- und Fußbereiche

für jede Webseite zu definieren (eventuell als Vorlage speichern!).

Die Sache wird aber dann anstrengend, sobald man ein komplexes Webprojekt

über viele Webseiten hat, von denen alle oder die meisten einen Header mit

einer Navigationsleiste besitzen. Immer dann, wenn die Menüzeile ergänzt

wird, muss dann diese Ergänzung auf allen Webseiten, die diese Menüzeile im

Header besitzen, nachgeführt werden. Spätestens hier erkennt man die Ersparnis,

die „Cheetah“ mit dem Konzept der separaten, zuordbaren Header und

Footer bietet. Es handelt sich dabei, wie bereits erwähnt, um separat erstellbare

Kopf- und Fußbereiche, die in der benötigten Anzahl und Art und Weise im

Webprojekt jeweils einzeln erstellt und mit einem Namen versehen werden.

Über diesen Namen können sie dann den entsprechenden Webseiten explizit

zugewiesen werden, wo sie dann je nach Art entweder als Kopfbereich oben

("Header") oder Fußbereich unten ("Footer") angezeigt werden. Die Anzeige

195

erfolgt dabei nur im Preview-Modus und auf der veröffentlichten Webseite –

nicht im Editor mit der entsprechenden Seite.

Kopf- und Fußbereiche designen

Auf der Projektseite ("Home") Ihres Webprojektes finden Sie im linken Randmenü

im Abschnitt "Global elements" neben "Pop-ups" die Einträge "Headers"

und "Footers".

Über diese Menüpunkte gelangen Sie wieder in den „Cheetah“ Webseiteneditor,

der aber nun so konfiguriert ist, dass Sie nur entweder einen "Header" oder

einen "Footer" designen können. Die Vorgehensweise ist intuitiv. Zuerst klicken

Sie auf die Schaltfläche "Create new Header" (oder "Footer") und vergeben einen

Namen dafür (z. B. "Hauptmenüleiste 1"). Sie können natürlich auch einen

bereits vorhandenen Header oder Footer kopieren oder nachträglich dessen

Namen ändern (3-Punkte-Menü). Anschließend gelangen Sie über die "Bearbeiten"-Schaltfläche

wie gewohnt in den Editiermodus, in dem Sie die entsprechenden

Bereiche erstellen können. Vorkonfigurierte Vorlagen finden Sie im

rechten Randmenü unter "Banner" in den Bereichen "Header" und "Footer".

Sie können natürlich wie gewohnt mit einem leeren Banner oder einem x-

belieben anderen Vorlagebanner beginnen, den Sie dann entsprechend anpassen.

196

Wenn Sie mit ihrem Ergebnis zufrieden sind, speichern Sie das Resultat. Beachten

Sie, dass es in „Cheetah“ möglich ist, einen entsprechenden Bereich auch

speziell für die Smartphone-Ansicht zu erstellen, denn Desktop-Header (bzw.

"Footer") und Smartphone-Header (oder "Footer") lassen sich über ihren Namen

- wie wir gleich sehen werden - separat zuweisen.

Kopf- und Fußbereiche den Webseiten zuweisen

Die Zuweisung erfolgt über das Punkte-Menü "Einstellungen" der entsprechenden

individuellen Webseite. Dort finden Sie im Abschnitt "Header Settings"

bzw. "Footer Settings" den entsprechenden Einstellungsdialog:

Wie bereits erwähnt, können Sie für die Desktop- bzw. Mobil-Version der Webseite

auch unterschiedliche Header bzw. Footer verwenden (oder gar keine).

197

Der Footer als kundenfreundliches Seitenende

Die Fußzeile ist zwar i. d. R. das Letzte, was ein Besucher von der Webseite zu

sehen bekommt, aber trotzdem sehr wichtig. Es gibt immer Besucher, die eine

Webseite sehr schnell nach „unten“ scrollen und so zum Fußbereich gelangen

ohne dem Hauptteil die erwartete Aufmerksamkeit zu widmen. Dort verharren

Sie manchmal eine Weile, um beispielsweise zu erfahren, von wem die Webseite

stammt (Impressum). Schon deshalb sollte man der Gestaltung des Footers

durchaus eine gewisse Aufmerksamkeit widmen.

In die Fußzeile gehören folgende Informationen:

1. Das Copyright

Schützt Ihre Webseite vor Plagiaten

2. Die Datenschutzrichtlinie

Sie erklärt, wie Sie die persönlichen Daten und andere Informationen Ihrer Besucher

verwenden und schützen (Stichwort: DSGVO).

3. Das Impressum

Ein Pflichtfeld. Es verlinkt i. d. R. auf eine entsprechende Seite, die oftmals auch

die Datenschutzrichtlinie und den Haftungsausschluss enthält

4. Die Nutzungsbedingungen

Kann, muss man aber nicht verwenden, um allgemeine Richtlinien für die Nutzung

der Webseite darzulegen.

5. Disclaimer

Wenn benötigt, dann gehört er in die Fußzeile...

Weitere Bestandteile eines Seitenfooters können Menüstrukturen zur vereinfachten

Navigation oder ein einfacher Kontaktbereich zur Kontaktaufnahme

(Telefon, E-Mailadresse, Newsletter-Anmeldung, Kontaktformular) sein. Auch

eine Buttonleiste für soziale Netzwerke macht sich im Footer-Bereich immer

gut.

198

Popups für eine Webseite erstellen

Über den Einsatz von sogenannten Popup-Fenstern auf Webseiten gibt es unter

den Webnutzern eine oftmals geteilte Meinung. Die einen halten sie für nützliche

visuelle Elemente, um Inhalte gezielt zu präsentieren - andere wiederum

einfach nur für nervig... Letzteres muss aber nicht sein, wenn man Popups so

gestaltet, dass sie für den Betrachter einen echten Mehrwert bieten, indem sie

beispielsweise nützliche Informationen bei Bedarf aufblenden. Denn "hilfreich"

ist nicht "nervig"!

Sie können Popups beispielsweise verwenden um

auf neue Features auf einer Webseite hinzuweisen ("Was ist neu")

auf zukünftige Events - z. B. ein Webinar - aufmerksam zu machen

nähere Erläuterungen - z. B. zu einem bestimmten Produkt - zu geben

mit einem Call to Action auf Folgeseiten zu leiten

oder

schlicht ein Kontaktformular aufzublenden.

Popups designen

Auf der Projektseite ("Home") Ihres Webprojektes finden Sie im linken Randmenü

im Abschnitt "Global elements" oberhalb der Einträge "Headers" und

"Footers" den Eintrag "Pop-ups". Über diese Menüpunkte gelangen Sie wieder

in den „Cheetah“ Webseiteneditor, der aber nun so konfiguriert ist, dass Sie

damit ein Popup designen können. Die Vorgehensweise ist auch hier weitgehend

intuitiv. Zuerst klicken Sie auf die Schaltfläche "Create new Popup" und

vergeben einen eindeutigen Namen dafür (z. B. "Kontaktformular 1"). Sie können

selbstverständlich auch ein bereits vorhandenes Popup-Fenster kopieren

oder nachträglich dessen Namen ändern (3-Punkte-Menü). Anschließend gelangen

Sie über die "Bearbeiten" - Schaltfläche wie gewohnt in den Editiermodus,

in dem Sie dann das Popup analog zu einer gewöhnlichen Webseite designen

können. Lediglich dessen Breite ist festgelegt und kann nicht verändert

werden.

199

Der folgende Screenshot zeigt ein als Popup nach einer Bannervorlage in wenigen

Minuten erstelltes Kontaktformular im „Cheetah“ Sitebuilder:

Popups auf Webseiten aufrufen

Es gibt verschiedene Möglichkeiten, Popups auf einer Webseite aufzublenden,

Die einfachste Methode ist die Verwendung einer Verlinkung. Alle „Cheetah“ -

Elemente, die explizit eine Verlinkung zulassen (Link-Symbol im Kopfmenü),

können auch das Aufblenden eines Popups veranlassen:

200

Sie können ein Popup aber auch direkt einer Webseite zuweisen, wodurch sich

weitere Einstellmöglichkeiten ergeben. Dazu wechseln Sie in die Seitenansicht

und wählen dort die Seite Ihres Webprojektes aus, dem Sie das Popup zuweisen

möchten. Die Stelle dafür finden Sie im 3-Punkte-Menü unter "Einstellungen"

im Abschnitt "Popup Einstellungen":

Wie Sie sehen können, lassen sich durchaus unterschiedlich designte Popups

einer Desktop- bzw. Smartphone-Ansicht der entsprechenden Webseite zuordnen.

Weiterhin lässt sich auch noch auf das Aufblendverhalten des Popups Einfluss

nehmen. Dazu werden verschiedene Arten des Popups zur Auswahl in einer

Klappbox angeboten. Sehr häufig dürfte die (aber oft als nervig empfundene)

zeitbasierte Variante zum Einsatz kommen. In diesem Fall geben Sie einfach

die Zeit in Minuten und Sekunden an, wann nach Betreten der Seite durch den

Nutzer das Popup aufpoppen soll.

201

Weitere Varianten sind das Exit-Popup und das scrollbasierte Popup. Ersteres

wird beim Verlassen der Webseite aufgeblendet. Bei der zweiten Variante können

Sie explizit festlegen, wie weit in Prozent der Seitenbesucher die Seite heruntergescrollt

haben muss, bis dann automatisch das Popup erscheint. Am besten

Sie probieren alle diese Varianten einmal selbst aus und überlegen sich

eventuelle Anwendungsgebiete.

202

DSGVO-Einstellungen

Sobald Ihre Webseite Cookies verwendet, die nicht ausschließlich für den technischen

Betrieb einer Website notwendig sind, sondern Werbe- und Marktforschungszwecken

dienen (also Tracking-Cookies, Targeting-Cookies, Analyse-

Cookies sowie Cookies von Social-Media-Websites), muss die entsprechende

DSGVO-Richtlinie beachtet werden. Technisch notwendige Cookies dürfen laut

dieser Richtlinie ohne vorherige Zustimmung durch den Nutzer automatisch

gesetzt werden, jedoch keine Tracking- oder Analytical Cookies. In solchen Fällen

müssen Website-Besucher explizit einwilligen, bevor die Cookies nicht notwendige

Daten speichern. Dazu dient der zumindest beim erstmaligen Besuch

der Webseite aufgeblendetes Cookie-Banner. Damit das ohne Probleme (bzw.

Programmieraufwand) geschieht, bietet „Cheetah“ einen entsprechenden Mechanismus

an. Er muss dazu lediglich aktiviert werden. Das geschieht, sobald

Sie das Markierungsfeld „Aktivieren“ anklicken, welches aufgeblendet wird,

wenn Sie im linken Randmenü ihrer Website „DSGVO Settings“ auswählen:

Damit werden zugleich vier weitere Funktionsbereiche sichtbar, über die Sie

direkt Einfluss auf die Farbe und Position der entsprechenden Anzeige sowie

203

auf die Anzeigetexte nehmen können. Insbesondere Letztere sollte Sie zumindest

ins Deutsche übersetzen, wenn Sie eine deutschsprachige Website damit

ausstatten möchten.

TIPP: Versuchen Sie auch hier einen Stil zu wahren, der Ihrem Corporate Design

entspricht bzw. von der Farbgebung zur Homepage Ihrer Website passt.

Weiterhin können Sie auch ein sogenanntes „Reset Cookies“ – Button aktivieren

und konfigurieren, wenn es für Ihren Anwendungsfall Sinn macht.

204

Wichtige Einstellungen für die ganze

Website

Jede in der Webseitenansicht angezeigte Website bzw. Webseite besitzt ein

kleines 3-Punkte-Menü, über das Sie in einen speziellen Dialog gelangen, in

dem Sie wiederum diverse Einstellungen vornehmen können. Daneben werden

neben „Einstellungen“ noch weitere Menüpunkte angeboten, die aber davon

abhängen, ob Sie eine Website oder eine Einzelseite ausgewählt haben.

Wenn Sie sich in der Website-Auflistung befinden und dort eine Website fokussieren,

dann führt beispielsweise ein Klick auf das 3-Punkte-Menü und dort auf

„Einstellungen“ sofort auf die Seite „Grundeinstellungen“.

Auf diese Seite würden Sie übrigens auch dann gelangen, wenn Sie zuvor in der

Website-Auflistung bei der entsprechenden Website auf „Seite bearbeiten“ geklickt

und dann in der Seitenansicht auf der linken Seite (Randmenü) den Menüpunkt

„Grundeinstellungen“ ausgewählt hätten.

205

Grundeinstellungen (Website)

In den Grundeinstellungen ist es wichtig, dass Sie Ihrer Website einen Namen

geben, eine Adress-URL zuweisen und die Sprache der Website aus der Klappbox

auswählen. Die URL ist dahingehend wichtig, weil sie Bestandteil der Webadresse

(Subdomain) der Website wird. Im Fall des FREE-Planes ist der Domän-

Name immer „cheetah.builderall.com“ und die komplette Webadresse

{anmeldename}-{seiten-url}.cheetah.builderall.com

Wenn Sie dagegen eine eigene Domän aufgeschaltet haben, dann wird diese

explizit im Einstellungsdialog angezeigt.

Eine Beschreibung der Website ist hier nicht obligatorisch. Sie sollten aber

stattdessen jede Seite der Website mit einer sinnvollen, SEO-freundlichen Beschreibung

ausstatten (wir kommen darauf zurück).

Wenn Sie sehr viele Websites erstellen, ist es sinnvoll, diese in Kategorien einzuteilen.

Dafür dient die Klappbox „Kategorien“. Um sie verwenden zu können,

müssen Sie zuvor auf der Home-Seite (wo in „Cheetah“ alle Websites aufgelistet

werden) entsprechende Kategorien anlegen, z. B.

206

Ansonsten lassen Sie die Klappbox einfach leer.

Der nächste Punkt betrifft den „Builderall Affiliate Button“. Sollten Sie sich als

Affiliate-Partner von Builderall angemeldet haben, dann können Sie hier Ihre

Webseite automatisch mit einer kleinen Schaltfläche ausstatten, über die der

Webseitenbesucher auf die offizielle Builderall-Webseite gelangt.

Wenn er darüber einen kostenpflichtigen Plan abonniert, dann erhalten Sie als

registrierter Affiliate eine entsprechende Provision. Im FREE-Plan gibt es zwar

auch diese Einstellungsmöglichkeit. Sie bleibt aber ohne Wirkung.

Mit der nächsten Einstellung können Sie die Webseite im Builderall CRM-

System anmelden. Wenn aktiv, dann sammelt es alle Informationen über Webseitenbesuche

und kann damit eine ausführliche Besucherstatistik generieren,

die im linken Randmenü der Website unter „Website Overview“ jederzeit eingesehen

werden kann.

207

Der Teil „SEO“ der Grundeinstellungen enthält i. d. R. Daten, die für die Suchmaschinenoptimierung

eine gewisse Rolle spielen. Hier können Sie die für Ihre

Website wesentliche Suchbegriffe sowie sogenannte "Metatags" in der Form

<meta name=“….“ eintragen, soweit sie für die ganze Website gelten sollen.

Auch haben Sie hier Zugriff auf die manchmal sehr wichtige Datei robots.txt,

die spezielle Anweisungen für Webseiten-Crawler bereitstellt.

Auf das Thema SEO wird in einem späteren Kapitel noch ausführlicher eingegangen,

so dass diese Ausführungen hier erst einmal reichen müssen.

Bleibt noch der Bereich „Skripteinstellungen“. Das ist der Bereich, wo Sie später

beispielsweise Code für das Facebook-Pixel zum Tracken von Websitebesuchern

oder einen sogenannten „Analytical Script“ (beispielsweise für Google

Analytics oder anderer Systeme ähnlicher Art) eingeben können. Aber es gibt

auch einen Bereich für „Allgemeine Skripte“, die sich zur Eingabe eigener Skripte

verwenden lassen (beispielsweise ein Skript, der für die Nutzung des Facebook

Chatbots notwendig ist).

208

WICHTIG: Tragen Sie Skripte immer genau in den Bereich der SEO-

Einstellungen ein, für den er vorgesehen ist. Das ist für die DSGVO-

Einstellungen relevant, da davon u. a. die Einordnung eventuell damit einhergehender

Cookies in die dort auswählbaren Cookie-Kategorien abhängt.

Die Skripte, die Sie an dieser Stelle eintragen, werden im Headerbereich der

Website gespeichert. Skripte, die sich konkret auf eine bestimmte Webseite

beziehen, werden als „Seitenskripte“ bezeichnet und müssen in die entsprechende

Rubrik der Seiteneinstellungen eingetragen werden.

Unter dem Favicon versteht man das kleine Icon, welches auf dem Browser-Tab

der Webseite angezeigt wird. Es erscheint zusätzlich noch in der Lesezeichenliste

(Favoriten) und beim Speichern einer Seite. Standardmäßig ist das bei mit

„Cheetah“ erstellten Webseiten das hellblaue Builderall-Logo. Sie können es an

dieser Stelle aber leicht durch ein Eigenes Logo austauschen. Es sollte die Ausmaße

32x32 Pixel haben und im png- oder jpg- Format vorliegen.

Eigene Domän aufschalten und Subdomäns erstellen

Sobald Sie einen bezahlten Plan abonnieren, können Sie Ihre Webseiten mit

einer eigenen Domän („Webadresse“) betreiben, die Sie entweder direkt über

Builderall oder über einen anderen Domänenanbieter erwerben. Dabei müssen

Sie folgende Schritte einhalten:

Wunschdomain überlegen

Verfügbarkeit prüfen (https://www.denic.de/webwhois/)

Provider wählen

Domain registrieren

Im Folgenden finden Sie eine kleine Liste von Domänenanbieter, die Sie für die

Suche nach einer noch freien Domäne nutzen können. Beachten Sie dabei, dass

nach einer Domänenregistrierung solange monatliche Kosten anfallen, so lange

die Domäne reserviert bzw. in Nutzung ist:

209

LINK: Auswahl einiger Domänenanbieter (außer Builderall)

https://de.godaddy.com/

https://www.ionos.de/domains/domain-registrieren?

https://zap-hosting.com/de/domain-check/

https://www.df.eu/

HINWEIS: Sie können auch völlig problemlose eine Domäne direkt über Builderall

erwerben. Beim Speichern und Veröffentlichen Ihrer Webseite wird

eine entsprechende Schaltfläche angeboten, über die Sie direkt zur Suche

nach einer noch freien Domäne und zur Domänenregistrierung geführt werden:

WICHTIG: Die Anzahl von aufschaltbaren Top-Level-Domänen ist in Builderall

begrenzt und hängt vom gemieteten Plan ab:

BUILDER

maximal 3 Domains

MARKETER maximal 5 Domains

210

ESSENTIAL

PREMIUM

maximal 10 Domains

maximal 15 Domains

Wenn Ihnen die in Ihrem Paket enthaltenen Domains nicht ausreichen sollten,

können Sie weitere hinzukaufen. Weiterhin können Sie pro Domain beliebig

viele Subdomains ableiten und für eigene Webseiten verwenden.

Sobald Sie eine Domän bei einem entsprechenden Anbieter erworben haben,

können Sie diese Domän (oder eine Subdomän davon) ihrer mit „Cheetah“ erstellten

Webseite zuweisen, damit sie dann später weltweit über diese Webadresse

gefunden und aufgerufen werden kann.

WICHTIG: Bevor Sie Ihre neu erworbene Domain verwenden können, müssen

Sie auf der Seite Ihres Domänenanbieters die Adresse des Namenservers ändern,

und zwar auf

Namenserver 1: ns3.l4dns.com

Namenserver 2: ns4.l4dns.com

Im Fall des Web-Hoster IONOS (ehemals „1und1“) sollte der Eintrag dann so

aussehen:

Nachdem Sie eine Weile gewartet haben, können Sie nun Ihrer Webseite die

Domäne zuweisen. Dazu gehen Sie auf die Website-Ansicht des „Cheetah“ Editors,

suchen sich dort Ihre Webseite aus und klicken auf das 3-Punkte Menü,

211

wo Sie den Eintrag „Domain aufschalten“ finden (Alternativ linkes Randmenü).

Ein Klick darauf öffnet ein kleines Fenster, in dass Sie jetzt entweder ihren Top-

Level-Domain-Namen (ohne „http://“ bzw. „https://“ und auch ohne „www.“)

oder – so wie im Screenshot zu sehen – einen entsprechenden Subdomänenamen

eingeben:

Als Nächstes überprüft und bestätigt (wenn dabei keine Fehler aufgetreten

sind) Builderall den Eintrag (was durchaus eins, zwei Minuten dauern kann). Bis

die Seite im World Wide Web wirklich erreichbar ist, kann auch noch eine gewisse

Zeit in Anspruch nehmen (im allerungünstigsten Fall bis zu 48 Stunden).

HINWEIS: Das https-Protokoll wird automatisch aufgeschaltet. Sie brauchen

dabei selbst nichts zu tun – außer etwas Geduld mitbringen (kann mehrere

Stunden dauern). Überprüfen Sie am besten am Folgetag, ob Ihre Webseite

auch über „https“ erreichbar ist.

Canonical Link

HINWEIS: Builderall verwendet als „Canonical Link“ Ihre Webadresse ohne

www. als Präfix. Wenn Sie also Ihre Webseite im Web bekanntmachen, dann

sollten Sie aus SEO-Gründen immer die Adresse ohne „www.“, also

„https://meine_seite.de“ an Stelle von „https://www.meine_seite.de“ verlinken

bzw. bekanntgeben.

212

Sie können natürlich jederzeit Ihre Website wieder von der aufgeschalteten

Domain trennen. Die entsprechende Funktion finden Sie im 3-Punkte-Menü der

Website bzw. – in deren Seitenansicht – im linken Randmenü unter „Disconnect

Domain“. Anschließend erreichen Sie die Webseite (wenn veröffentlicht) nur

noch über ihren Builderall-Subdomain-Namen.

Verwaltung von Domäns und Subdomäns mit dem Builderall DNS-Manager

In den bezahlten Plänen steht mit dem Builderall DNS – Manager ein spezielles

Verwaltungstool für Ihre First Level Domains zur Verfügung, mit dem Sie deren

Einstellungen im Detail überprüfen und die angemeldeten Domäns u. U. auch

wieder löschen können. Außerdem lassen sich mit diesem Tool zu jeder hier

registrierten und aktiven Domain E-Mail-Adressen anlegen sowie zusätzliche

Verbindungen erwerben, sollten die in dem PREMIUM-Paket enthaltenen (15

Stück) irgendwann nicht mehr ausreichen.

HINWEIS: Damit der DNS-Manager im Dashboard sichtbar ist, muss es zuvor

über die Schaltfläche „Installiere weitere Apps“ installiert werden. Im FREE-

Plan ist dieses Tool nicht verfügbar.

Die Ansicht ist in vier Spalten („Name“, „Verbunden“, „Region“, „Status“), einer

Combobox mit Funktionsauswahl und in drei zusätzliche Schaltflächen geteilt.

Jede Zeile enthält die Daten einer in Builderall angemeldeten Domain. Rechts

oben auf der Anzeigeseite wird angezeigt, wie viele Domains Sie bereits in Nut-

213

zung haben und wie viele Ihnen laut Builderall-Plan insgesamt zur Verfügung

stehen.

Im linken oberen Teil finden Sie eine Suchfunktion sowie eine Combobox „Extras“,

über die Sie zu jeder Domain E-Mailadressen anlegen und neue Domains

(bzw. – wenn erforderlich – neue Verbindungen, die über den PREMIUM-Plan

hinausgehen), käuflich erwerben können.

HINWEIS: Jede zusätzliche Verbindung kostet 9 US $ pro Monat.

Alle relevanten Informationen über eine Domain sowie ihren Aktivierungsstatus

erhalten Sie mit einem Klick auf die Schaltfläche „Details anzeigen“. Insbesondere

können Sie hier überprüfen, welche IP-Adresse ihrer Domain zugeordnet

ist und ob auch die richtigen Namenserver eingetragen sind. „Kreise“ in den

Ampelfarben signalisieren, ob irgendwelche Probleme auftreten. Wenn ja,

werden Ihnen rechts daneben spezielle Schaltflächen zur Problembehebung

angeboten.

Über die Schaltfläche „DNS verwalten“ gelangen Sie in die „Erweiterten Einstellungen“.

WICHTIG: In den „Erweiterten Einstellungen“ des DNS-Managers sollten Sie

nur dann Änderungen vornehmen, wenn Sie genau wissen, was Sie tun. Andernfalls

kann es zu Betriebsunterbrechungen führen, für die Sie dann selbst

verantwortlich sind!

E-Mail-Adressen für eine ausgewählte Domain erstellen

Um E-Mail-Adressen zu einer Domain zu erstellen, rufen Sie über „Extras“ (links

oben im DNS-Manager) die Funktion „Zugriff auf E-Mails“ auf, worauf sich ein

neuer Tab im Browser öffnet, der zur Seite „E-Mail erstellen“ im Builderall-

Dashboard führt:

214

Hier können Sie links eine Domain auswählen und anschließend auf die Schaltfläche

„E-Mail erstellen“ klicken. Damit können Sie jetzt die gewünschte E-Mail-

Adresse anlegen (ein sicheres Passwort ist erforderlich):

Wenn die E-Mail-Adresse erfolgreich angelegt wurde, wird das durch eine spezielle

Meldung bestätigt und anschließend die neue Mailadresse auf der linken

Seite unter dem entsprechenden Domainnamen aufgelistet.

Anschließend brauchen Sie nur noch die neue E-Mail-Adresse in dem E-Mail-

Client Ihrer Wahl (z. B. Thunderbird) anmelden – und schon können Sie darüber

E-Mails versenden und empfangen.

BEISPIEL THUNDERBIRD: Wählen Sie unter „Konten“ - „Konten einrichten“

den Punkt „E-Mail“ aus. In dem daraufhin angezeigten Fenster brauchen Sie

215

jetzt nur noch Ihren Namen (oder einen anderen Bezeichner, der beim Empfänger

angezeigt werden soll), die eben angelegte E-Mail-Adresse sowie das

eben für diese E-Mail-Adresse vergebene Passwort in das entsprechende Feld

eintragen (EMPFEHLUNG: Checkbox „Passwort merken“ am besten ankreuzen).

Dann auf „Weiter“ und kurz danach (wenn keine Probleme aufgetreten

sind) ist die neue E-Mail-Adresse in Thunderbird verfügbar.

Prinzipiell können Sie über den hier vorgestellten Weg so viele E-Mail-Adressen

pro Domain anlegen, wie Sie benötigen.

Website zu einem anderen Builderall-Nutzer transferieren

Gerade wenn man die Erstellung von Webseiten als Dienstleistung anbietet,

steht die Frage im Raum, ob man a) die Webseite unter einem eigenen Account

entwickelt und nach Fertigstellung zum Account des Kunden transferiert oder

ob man b) gleich (natürlich mit Einverständnis des Kunden) auf dessen Account

arbeitet. Beides geht natürlich, aber Punkt a) ist für einen Dienstleister offenbar

der günstigere Weg. Und in „Cheetah“ ist das dazu noch extrem einfach!

Bedingung ist natürlich, dass der Auftraggeber der Website auch einen Builderall-Account

besitzt, der eindeutig durch die bei dessen Anmeldung verwendete

E-Mail-Adresse identifizierbar ist. Diese E-Mail-Adresse muss Ihnen bekannt

sein. Angenommen, Sie haben eine Website im Kundenauftrag fertiggestellt

und wollen Sie ihm zur Verfügung stellen. Dazu wechseln Sie in „Cheetah“

in die Website-Ansicht und öffnen dort das 3-Punkte-Menü. Dort finden Sie den

Menüpunkt „Transfer“, den Sie jetzt anklicken:

216

Hier brauchen Sie jetzt nur noch die E-Mail-Adresse Ihres Kunden (d. h. diejenige,

mit der dieser bei Builderall registriert ist) eintragen und eine der beiden

Transfer-Optionen auswählen. Im ersten Fall („Nur transferieren“) wird die

komplette Website übertragen und anschließend aus Ihrer Website-Ansicht

gelöscht (meistens der ungünstigere Fall, da Sie dann keinen Zugriff mehr darauf

haben). Im Zweiten Fall wird dagegen nur eine aktuelle Kopie der Website

transferiert. Diese Methodik ist auch wunderbar dafür geeignet, um beispielsweise

Ihrem Auftraggeber (oder wem auch immer) einen Zwischenstand Ihrer

Arbeiten zukommen zu lassen.

Website veröffentlichen oder Veröffentlichung aufheben

Erst wenn in „Cheetah“ eine Website explizit veröffentlicht wurde, ist sie überall

auf der Welt über Ihre URL aufrufbar. Eine solche Veröffentlichung ist deshalb

(Testzwecke einmal ausgenommen) i. d. R. erst dann sinnvoll, wenn das

Webprojekt einen gewissen Stand erreicht hat, mit dem man an die Öffentlichkeit

gehen kann. Sie können aber jederzeit an Ihrer Website arbeiten, auch

wenn sie noch nicht öffentlich zugänglich ist.

Die Funktionen für das „Veröffentlichen“ bzw. „Veröffentlichung aufheben“

finden Sie in der Website-Ansicht im 3-Punkte-Menü der Website bzw. in deren

Seitenansicht im Hauptmenü des Editors (Schaltflächen „Veröffentlichen“,

„Veröffentlichung aufheben“ und „Republish“ in Abhängigkeit vom jeweiligen

Kontext).

HINWEIS: Wenn Sie an einer bereits veröffentlichten Website arbeiten (was

gewöhnlich der Fall sein wird), dann haben Sie die Möglichkeit beim Speichern

Ihrer Änderungen zu entscheiden, ob die Änderungen erst einmal nur

gespeichert (also ohne dass die Änderungen Auswirkungen auf die bereits

veröffentlichte Website haben) oder auch gleich veröffentlicht werden sollen.

Gerade um Bugs oder „optische Effekte“ zu vermeiden, die Ihre Webseitenbesucher

eventuell verunsichern könnten, sollten Sie erst dann Ihre Änderungen

auch publizieren, wenn Sie funktionell und optisch fehlerfrei sind (dabei

die mobile Variante nicht vergessen!).

217

Wichtige Einstellungen für eine Webseite

Jede einzelne Webseite einer Website erlaubt individuelle Einstellungen, die in

die Kategorien „Allgemeine Einstellungen“, „SEO-Einstellungen“, „Popup Einstellungen“

sowie „Header Settings“ und „Footer Settings“ eingeteilt sind:

Die letzten drei Kategorien wurden bereits im Abschnitt über die wichtigsten

Gestaltungselemente behandelt. Sie dienen der Zuordnung der außerhalb der

Webseite erstellten Popup-Menüs und Kopf- und Fußbereiche.

Allgemeine Einstellungen

Was Sie aber auf jeden Fall ausfüllen müssen, sind einige Punkte in den „Allgemeinen

Einstellungen“. Obligatorisch sind der Name der Seite sowie dessen

Adress-URL. Der Name sollte kurz und bündig die Seite beschreiben (könnte

eventuell mit etwaigen Hauptmenübezeichnern synchron gehen) und die URL

ist die Adresse, über die die Seite in Verbindung mit der zugeordneten Domain

(oder Subdomain) aufgerufen wird. Hier sollten Sie immer Kleinbuchstaben

218

verwenden und – wenn es Sinn macht – auch ein für die Seite wesentliches

Keyword mit einbauen.

Die folgenden beiden Eingabefelder sind für Suchmaschinen von höchster Priorität,

weil die hier eingetragenen Texte in deren Suchergebnissen erscheinen.

In Google…

Die Überschrift und die Meta-Beschreibung sind essentiell wichtig dafür, dass

die entsprechende Seite von Suchmaschinen optimal eingestuft werden kann.

Deshalb sollten Sie auf jeden Fall einen sogenannten „Snippet Generator“ zu

deren Erstellung verwenden. Er hilft dabei, den zur Verfügung stehenden Platz

optimal auszunutzen. Für einen optimalen Text hinsichtlich dessen Inhalts müssen

Sie jedoch selbst sorgen. Wenn Sie an hohen Klickraten und guten Ranking-

219

positionen der Seite interessiert sind, dann sollten Sie sich gerade hier besonders

viel Mühe geben.

LINK: Empfehlenswerte Snippet-Generatoren

https://app.sistrix.com/de/serp-snippet-generator

http://www.serpsimulator.de/

https://j0e.org/tools/serp-snippet/

HINWEIS: Der Eintrag „Titel“ der eigentlichen Website wird in „Cheetah“ bei

jeder Webseite dessen Titel vorangestellt (im obigen Beispiel ist das „BUIL-

DERALL“). Auch wird der hier festgelegte Titelseparator (im obigen Beispiel

„|“) in jeder Seite der Website verwendet. Nur dann, wenn jede Seite genau

den gleichen Beschreibungstext aufweisen soll (von dem aus SEO-Gründen

abzuraten ist), sollten Sie das Feld „Beschreibung“ in den „Allgemeinen Einstellungen“

der Website ausfüllen und die Beschreibung in den einzelnen Seiten

leer lassen.

Integration Key

Ein sogenannter „Integration Key“ ist nur dann notwendig, wenn Sie Funnels

mit Anbindung an „Mailingboss“ erstellen. Sie finden ihn in „Mailingboss“ im

Bereich „Integration“. Dort können Sie ihn über die Schaltfläche „TOKEN KO-

PIEREN“ in die Zwischenablage überführen und anschließend in die „Allgemeinen

Einstellungen“ der Webseite mit <Ctrl><V> einfügen.

Seiten Skripte

Hier können Sie spezielle, für die Seite relevanten Skripte einfügen, z. B. einen

Pinterest Tag:

220

SEO-Einstellungen

In dieser Einstellungskategorie können Sie, durch Kommas getrennt, für die

Webseite relevante Suchbegriffe eingeben sowie seitenspezifische Metatags

definieren und – wenn eine Notwendigkeit dafür bestehen sollte – eine Weiterleitung

einrichten (dazu muss nur die entsprechende Ziel-URL in das dafür vorgesehene

Feld eingetragen werden).

HINWEIS: Wenn Sie möchten, dass Suchmaschinen Ihre Webseite NICHT indizieren,

können sie in diesem Abschnitt das Markierungsfeld „<noindex> tag“

ankreuzen.

Ein weiteres interessantes Feature, auf das Sie keinesfalls verzichten sollten, ist

die Verwendung sogenannter „Shareimages“. Im Fall von „Cheetah“ sind das

Pixelgrafiken der festen Maße 1200x628 Pixel. Sie werden nach dem Hochladen

individuell einer Webseite zugeordnet. Dass das auch geklappt hat erkennen

Sie daran, dass nach dem Laden eines derartigen Bildes einmal das Bild in den

SEO-Einstellungen angezeigt wird und – und das ist viel wichtiger – dieses Bild

nun auch die Webseite in der Seitenansicht ziert. Aber das ist nicht der Grund,

warum Shareimages wichtig sind. Angenommen, Sie veröffentlichen den Link

einer mit einem Shareimage ausgestatteten Webseite auf Facebook, dann wird

221

dem Besucher dort in der Timeline genau dieses „Shareimage“ angezeigt und

nicht mehr das automatisch erzeugte Linkbild.

TIPP: Statten Sie jede Ihrer Webseiten mit einem Shareimage aus, welches so

gestaltet ist, dass man allein daraus etwas über den Inhalt der entsprechenden

Webseite erfahren kann. Ist es geplant, die Webseite in sozialen Medien

zu verlinken, dann sollten Sie insbesondere den „Werbeeffekt“ gestalterisch

im Auge behalten, denn das „Bild“ soll ja schließlich den Betrachter animieren,

einmal mit der Maus darauf zu klicken…).

Shareimages lassen sich im Übrigen am schnellsten mit einer entsprechenden

Vorlage in Canva.com erstellen. Legen Sie sich dort also eine nutzerdefinierte

Vorlage mit den Maßen 1200x628 Pixel an und nutzen Sie die vielfältigen Gestaltungsmöglichkeiten

dieses dafür geradezu ideal geeigneten Tools.

222

HINWEIS: Um auch der gesamten Website in der Website-Übersicht („Alle

Websites“) ein Shareimage zuzuweisen, klicken Sie im Zentrum der Seitenansicht

auf das Icon „Share Image bearbeiten“:

223

Nachdenken über SEO

Sobald man möchte, dass die mühevoll erstellte Webseite nativ, d. h. auch ohne

zusätzliche bezahlte oder unbezahlte Werbung in sozialen Netzwerken in

Suchmaschinen wie Google oder Bing gefunden wird, kommt man um das

Thema „Suchmaschinenoptimierung“ (SEO) nicht mehr umhin. Und damit betreten

wir ein komplexes und auch hartumkämpftes Feld, denn jeder Webseitenbetreiber

möchte schließlich für bestimmte Suchbegriffe oder Phrasen möglichst

auf der ersten Ergebnisseite von Google landen, um so Traffic für seine

Webseite zu generieren. Denn es ist so:

Eine Webseite, die von potentiellen Interessenten nicht gefunden wird, ist

quasi eine nichtexistente Webseite und alle Mühen, die man in sie hineingesteckt

hat, zahlen sich nicht aus…

Deshalb ist es einer der wichtigsten Prioritäten, die Website bzw. die sie aufbauenden

Webseiten (denn dafür wird im wesentlichen optimiert) so zu gestalten,

dass sie für bestimmte Suchbegriffe („Keywords“ genannt) in den Suchergebnissen

so weit wie nur möglich „vorn“ – am besten in die erste Ergebnisseite

– gelangen. Denn nur eine sehr gute Position sorgt dafür, dass Ihre Webseiten

auch viele, am Suchbegriff interessierte Besucher, erhalten. Und mehr Besucher

bedeutet bei Verkaufsseiten auch mehr Umsatz…

Wie Suchmaschinen funktionieren und nach welchen Algorithmen sie Webseiten

ranken, gehört zu den Betriebsgeheimnissen ihrer Betreiber. Auch haben

sich die Paradigmen, nach denen Sie arbeiten, im Laufe der Zeit verändert.

Heute stehen beispielsweise der Inhalt und der damit verbundene Nutzen einer

Webseite im Vordergrund, wenn es um ihre Bewertung und damit um ihr Ranking

geht.

Kurz gesagt, SEO stellt eine echte Herausforderung dar, der man sich als Webdesigner

stellen muss. Man kann zwar eine Website im Nachhinein immer SEOmäßig

anpassen oder von einer erfahrenen SEO-Agentur gegen eine entsprechende

Bezahlung optimieren lassen. Aber besser ist es, wenn man selbst mit

224

den wichtigsten Grundprinzipien der Suchmaschinenoptimierung vertraut ist,

mit entsprechenden Werkzeugen umgehen kann und bereits in der Entwicklung

der Webseiten immer darauf achtet, die jeweils notwendigen OnPage-

Optimierungen vorzunehmen (und sie nicht immer weiter nach „hinten“ zu

verschieben).

HINWEIS: SEO-Optimierungen wirken sich i. d. R. erst mittel- und langfristig

(d. h. Wochen und Monaten) auf Rankingergebnisse aus. Deshalb ist hier Geduld

angesagt. Auch kommt es sehr stark auf die Schlüsselwörter an, für die

man optimiert. Besitzen sie beispielsweise nur ein geringes Suchvolumen,

dann werden darüber natürlich auch nur wenige Besucher generiert.

In diesem Kapitel können natürlich nur einige Aspekte der Suchmaschinenoptimierung

angeschnitten werden. Wenn Sie sie aber beherzigen, sollte das große

Auswirkungen auf das Ranking Ihrer mit „Cheetah“ erstellten Webseiten haben.

Und wenn es Ihnen mit dem Thema ernst ist, so finden Sie im Internet Anleitungen

und Anregungen in großer Zahl. Aber nutzen Sie bitte nur aktuelle

Anleitungen, denn die Suchmaschinenbetreiber führen häufig Änderungen in

ihren Algorithmen durch, die schon oft einen „Absturz“ einer zuvor hoch gerankten

Webseite zur Folge hatte. Denn Webseitenoptimierung ist kein Geschäft,

das man, wenn man einen guten Platz erreicht hat, einfach sich selbst

überlassen kann. Sie müssen vielmehr ihre Webseite immer wieder überprüfen,

verändern und eventuellen neuen Rankingparadigmen anpassen, wenn Sie

über einen langen Zeitraum Erfolg haben möchten. Und es gibt immer Konkurrenten,

die alles tun, um Ihren Platz in der Ergebnisliste einzunehmen bzw. zu

überflügeln…

OnPage-Optimierung

In diesem Buch kann nur auf die sogenannte „OnPage-Optimierung“ von Webseiten

eingegangen werden. Darunter versteht man gewöhnlich alle Maßnahmen,

die man als Webdesigner selbst ergreifen kann, um Inhalt und die Struktur

einer Webseite so zu optimieren mit dem Ziel, dass die Crawler der Suchmaschinen

die Seiten derart indizieren, dass sie für die gewählten Schlüssel-

225

wörter möglichst weit vorn in den Ergebnislisten erscheinen. Alle diese Maßnahmen

sollte man während des Webdesigns fortwährend im Auge behalten

und mittels spezieller Programme auch regelmäßig überprüfen. Womit wir bei

dem Thema „Hilfsprogramme“ zur Suchmaschinenoptimierung angelangt sind.

Portale und Apps zur Suchmaschinenoptimierung

In diesem Abschnitt können nur ein paar wenige Tools-Anbieter und Chrome-

Erweiterungen vorgestellt werden, die sich für die SEO-Optimierung von Webseiten

als geeignet erwiesen haben. Dazu zählen übrigens auch die ab dem

BUILDER-Plan verfügbaren „SEO On-Page Reports“, die sehr einfach zu handhaben

sind. Außerdem sind alle im Folgenden erwähnten Tools, Apps und Plattformen

(auch) in einer kostenlosen Variante erhältlich. Der Webseiten-Profi

wird sich aber letztendlich doch für ein kostenpflichtiges Paket entscheiden –

insbesondere, wenn das Webdesign zu seinem Geschäftsmodell gehört.

Seobility

Die Seobility-Suite erlaubt in der freien Version (Basis) die Anlage eines Webprojektes,

welches Sie alle 24 Stunden einmal analysieren lassen können (im

Basispaket sind maximal 1000 solcher Analysen möglich). Es liefert umfangreiche

Analysedaten sowie jeweils eine prozentuale Einschätzung in Bezug auf

„Technik & Meta“, „Struktur“ und „Inhalt“. In einem Diagramm können Sie weiterhin

den zeitlichen Optimierungsfortschritt ihrer Website verfolgen.

LINK: Seobility Suite

https://www.seobility.net/de/

TIPP: Wenn Sie mit Seobility arbeiten, sollten Sie einmal am Tag eine Analyse

der kompletten Website durchführen und danach akribisch alle angezeigten

Mängel beheben und den Hinweisen, die Ihnen die Plattform in Hinblick auf

SEO-relevante Optimierungen gibt, nachkommen. Ihr Ziel sollte es sein, mindestens

einen Optimierungsgrad von 80% zu erreichen.

226

Unabhängig davon finden Sie nach Anmeldung in Ihrem Seobility-Dashboard

auch Tools zur Einzelanalyse, für deren Anwendung es keine Einschränkungen

gibt. Hier sei insbesondere auf den SEO-Check hingewiesen, den Sie regelmäßig

für die Webseite, die Sie gerade bearbeiten, ausführen und die Ergebnisse auch

beherzigen sollten. Wertvoll sind auch die ausführlichen Erläuterungen, die im

Seobility-Wiki hinterlegt sind. Hier können Sie nach Stichworten geordnet alles

Wichtige zu SEO-relevanten Themen, aber auch zu Webdesign und Online-

Marketing erfahren. Ein regelmäßiger Blick darauf (und wenn es nur mal zum

„schmökern“ ist) könnte zu einer guten Angewohnheit werden…

LINK: Seobility-Wiki – Ihre Wissensdatenbank zu SEO-relevanten Themen

https://www.seobility.net/de/wiki/Hauptseite

227

SEORCH

Die Plattform "SEORCH" ist eine der beliebtesten SEO-Dienste im Web. Mit

dem Basis SEO-Check erhalten Sie schnell Informationen über die Qualität und

Performance Ihrer Webseite - auch in Bezug auf die gewählten Keywords. Außerdem

erhalten Sie detaillierte Tipps, wie Sie ihre Webseite weiter optimieren

können.

LINK: SEORCH – SEO-Crowler und Keyword-Monitor

https://seorch.de/

Auch SEORCH zeigt Ihnen im Detail, was an Ihrer Webseite noch verbesserungswürdig

ist. Außerdem enthält die Suite eine größere Anzahl spezieller

SEO-Tools wie beispielsweise einen Google Ranking Check, Keyword-Tools,

Website Vergleichstools (wichtig, wenn man mit seiner Website die der Konkurrenz

rankingmäßig überholen möchte) und ein SERP Snippet Tool, um nur

Einige zu nennen.

228

Spezielle Chrome Browser-Erweiterungen

Besonders bequem in der Handhabung sind Browser-Erweiterungen zur Suchmaschinenoptimierung.

Unter der Vielzahl der im Chrome Webstore angebotenen

Tools sollen hier nur zwei kurz vorgestellt werden. Sie sollten aber durchaus

einmal selbst den Webstore durchforsten, denn es gibt dort noch viele weitere,

für den Webdesigner nützliche AddOns zu entdecken.

SEO META in 1 Click

SEO META in 1 CLICK ist ein spezielles Tool, welches alle Meta-Tags und Meta-

Daten der im Chrome-Browser aktuellen Webseite sowie die wichtigsten SEO-

Informationen dazu übersichtlich in einem Fenster darstellt. Weiterhin ist über

ETERNAL TOOLS eine große Anzahl von speziellen Werkzeugen erreichbar, mit

dessen Hilfe die Webseite im Detail nach verschiedensten Gesichtspunkten

analysiert und optimiert werden kann. Dieses Tool ist ideal, um bereits in der

Entwicklungsphase den SEO-Optimierungszustand der Webseite einzuschätzen.

LINK: Chrome-Erweiterung „SEO META in 1 Click“

https://bit.ly/3iJT33V

SEOquake

Beispielhaft für die Vielzahl an SEO-Tools, die mittlerweile als Chrome-AddOns

angeboten werden, soll hier explizit auf SEOquake hingewiesen werden. Mit

dessen Hilfe können sehr schnell alle wichtigen Metriken einer Webseite eingesehen

sowie ein vollständiges SEO-Audit (darunter Kompatibilitätsprüfungen,

Linkberichte, Keyworddichte etc. pp.) veranlasst werden. Mit diesem kleinen,

aber feinen Tool kann man sich als Webdesigner einen schnellen Überblick

über den Optimierungsgrad seines Projektes verschaffen. Und das alles völlig

kostenlos.

LINK: Chrome-Erweiterung „SEOquake“


229

Was ist bei der Suchmaschinenoptimierung zu beachten?

Wenn Sie daran interessieret sind, dass Ihre Website in den Suchergebnissen

von Google und Co. gut rankt, dann sollten Sie sich schon bei der Projektplanung

über einige Punkte Gedanken machen. Das beginnt mit einer Keyword-

Analyse: Für welche Suchbegriffe (oder kurzen Phrasen) soll die Webseite optimiert

werden, damit sie bei Eingabe dieser Suchbegriffe möglichst auf den

ersten Ergebnisseiten gelistet wird? Diese Frage sollten Sie sich für sich nicht

aus dem „Blauen“ heraus beantworten, denn eine richtige Keywordauswahl

setzt erst einmal eine „Keywordanalyse“ voraus. Es nützt nämlich nur wenig,

wenn man seine Webseite für irgendein Keywords optimiert, nach dem entweder

„alle“ suchen (dann ist die Konkurrenz groß) oder welches so exotisch ist,

das kaum jemand danach sucht (dann ist das Suchvolumen zu gering). Um hier

ein Optimum zu erreichen, gibt es im Netz verschiedene (hier kostenlose) Analysetools:

LINK: Google Trends – zeitlicher Verlauf des Suchvolumens von Schlüsselwörtern

https://trends.google.com/trends

LINK: Chrome Erweiterung – Wordtracker Scout – zeigt die wichtigsten

Schlüsselwörter einer Webseite in Form einer Wortwolke an


LINK: KeyWordTools.org – Finde Keyword Ideen mit dem Recherche Tool

https://www.keyword-tools.org/

Die gewählten Keywords sollten organisch in den Texten der Webseiten verwendet

werden, ohne dabei Keyword-Stuffing zu betreiben. Der Text darf also

nicht mit dem für die Seite ausgewählten Keyword überfrachtet werden, weil

das die Suchmaschinen-Crawler nicht gerne sehen. Besser ist es, Schlüsselwörter

in Bild-Tags und Bildbeschreibungen unterzubringen. Auch sollten Sie es

auch einmal mit Synonymen und sinnverwandten Wörtern probieren. Auch die

230

Verwendung Ihres Hauptschlüsselworts als Bestandteil der URL ist eine durchaus

gute Idee und hilft das Ranking zu verbessern.

TIPP: Analysieren Sie die Webseiten ihrer Hauptkonkurrenten in Bezug auf die

Keyword-Nutzung bzw. Optimierung und überlegen Sie sich, was Sie besser

machen können.

Das A und O bei SEO ist aber, dass Sie ganz unabhängig von anderen Maßnahmen

in erster Linie hochwertigen Content liefern müssen, um hoch zu ranken.

Im Fokus der Suchmaschinen steht nämlich mittlerweile der Nutzen, den eine

Webseite für seine Besucher bietet. Wenn Sie also dem Besucher und dessen

Führung (Navigation) durch Ihre Webseite besonders im Auge behalten, dann

wird das auch Google in seinen Suchergebnissen entsprechend honorieren.

Weiterhin sollten Sie auf eine logische Struktur Ihrer Webseite achten, was Sie

unabhängig vom eigentlichen Inhalt durch eine fehlerlose hierarchische Struktur

der verwendeten Überschriften erreichen. So sollte eine Webseite immer

nur eine h0-Überschrift besitzen und alle anderen Überschriften in der jeweils

richtigen Hierarchieebene und ohne Auslassung von Hierarchieebenen eingesetzt

werden. Nutzen Sie beispielsweise die Chrome-Erweiterung „SEO META in

1 Click“, um in dieser Beziehung eventuelle Fehler aufzuspüren.

Für schnelle Ladezeiten (auch ein wichtiger SEO-Faktor!) und für responsives

Design sorgen Builderall und „Cheetah“ (fast) von selbst. „Fast“ bedeutet, dass

natürlich auch für Sie als Webdesigner noch Einiges an Arbeit übrig bleibt.

Nehmen wir die Einbettung von Bildern. Eine gute Regel ist es, Pixelgrafiken in

ihrer Größe zu optimieren, bevor man sie in eine Webseite integriert. Das bedeutet,

dass Sie die entsprechenden Bilder möglichst mit einem externen Tool

(z. B. IrfanView) auf die Länge und Breite bringen, wie sie auch auf der Webseite

angezeigt werden. Es ist einfach eine Ressourcenverschwendung, wenn Sie

ein Bild in einer Auflösung von, sagen wir mal 3840x2160 Pixel, belassen, um es

dann anschließend auf der Webseite auf 640x480 Pixel automatisch zu verkleinern.

Auch kann es Sinn machen, jpeg-Dateien mit Hilfe eines Komprimierungsdienstes

auf eine Größe zu bringen, die ein besonders schnelles Laden

über das Netz ermöglicht.

231

LINK: JPEG-Dateien online komprimieren – „compressjpeg.com“

https://compressjpeg.com/de/

Weiterhin sollten Sie darauf achten, doppelte Inhalte (Duplicate Content) auf

Ihrer Website möglichst zu vermeiden. Diese werden in der Regel von Suchmaschinen

nicht gern gesehen und verschlechtern damit das Ranking. Ein recht

gutes Tool, um „Duplicate Content“ aufzuspüren, ist übrigens „Siteliner“:

LINK: Siteline – Aufspüren von doppelten Inhalten

https://www.siteliner.com/

Verwendung der SEO On-Page Reports von Builderall

Builderall enthält ab dem BUILDER-Plan mit den „SEO On-Page Reports“ ein eigenes

kleines und besonders leicht bedienbares SEO-Tool. Es dient der Überprüfung,

inwieweit Ihre Webseite für ein bestimmtes Schlüsselwort bereits optimiert

ist.

HINWEIS: Bevor Sie dieses Tool verwenden, müssen Sie es in Ihr Builderall-

Dashboard integrieren.

Die Handhabung dieses Tools ist denkbar einfach. Sie geben einmal die URL der

zu analysierenden (Einzel-) Seite ein und zum anderen das Schlüsselwort, für

welches die Seite optimiert werden soll. Als Ergebnis der Analyse erhalten Sie

eine entsprechende Einschätzung "A" = ausgezeichnet, "F" = mangelhaft sowie

eine Liste von Daten, die Ihnen bei der weiteren Optimierung der Webseite

hilft. Eine solche Analyse könnte wie folgt aussehen:

232

Wie Sie sehen, erhält die analysierte Seite die Note "B", d. h. es gibt noch etwas

Optimierungsbedarf. Im Bereich "Übersichtsfaktor" listet das Tools auf, wie viele

Parameter einer der genannten Kategorien erfüllt sind und wie viel nicht. Ist

das Anzeigekästchen "grün", dann haben Sie mit Ihrer Webseite bezüglich des

eingegebenen Schlüsselworts das Optimum erreicht. Andernfalls klicken Sie auf

den entsprechenden Link, um zu den dazugehörigen Einzelheiten der Seitenanalyse

zu gelangen. Wir wollen jetzt in diesem Beispiel in den Bereich "Zusätzliche

Faktoren" wechseln, wo wir nur 3 von 5 möglichen Punkten erfüllt haben:

233

Alle Kriterien, die von der Webseite erfüllt sind, sind in dieser Auflistung "abgehakt".

Alle anderen Punkte sollten dagegen analysiert werden, um die Webseite

so zu optimieren, dass auch diese Punkte erfüllt sind. Hier empfiehlt es sich

immer, auf den Link "Lesen Sie mehr" zu klicken, um detaillierte Informationen

zu dem entsprechenden Punkt zu erhalten:

In diesem Fall hier mokiert beispielsweise das Tool, dass die Metabeschreibung

der Webseite mit 271 Zeichen offensichtlich zu lang ist. Es empfiehlt hier, den

Text auf ungefähre 156 Zeichen zusammen zu kürzen...

Kurze Onpage SEO-Checkliste für eine Webseite

Jede Seite, die von Suchmaschinen indiziert werden soll, sollte separat SEOoptimiert

werden (betrifft auch das Keyword). Wenn Sie folgende Punkte akribisch

einhalten, dann sind Sie immer auf der richtigen Seite:

1. Verwenden Sie eine SEO-freundliche URL (Hauptkeyword verwenden!)

2. Sind Titel und Metabeschreibungen aussagekräftig und von der richtigen

Länge? (im Titel Hauptkeyword verwenden, Snippet-Generator nutzen und

am Text feilen. Er sollte genau auf den Seiteninhalt zugeschnitten und „interessant“

sein)

3. Optimierung der Bilder (Bildgröße der Originalbilddatei sollte in etwa der

Bildgröße entsprechen, wie sie auf der Webseite erscheint; Bilder möglichst

nur verlinken (Cloudinary); den Bilddateien einen sinnvollen, beschreibenden

Namen geben; jedes Bild mit einem Alternativtext und einem Titeltext

234

ausstatten, der das Keyword enthalten sollte (wenn es Sinn macht) und

möglichst ausführlich beschreibt, was mit dem Bild ausgedrückt werden soll.

Beide Texte sollten sich unterscheiden;

4. Google liebt Content (reichern Sie, wann immer es geht, ihre Webseite mit

sinnvollen (!) Text an, denn „Content is King“ – mehr als 200 Wörter pro Seite

sollten es schon sein; Achten Sie auf eine fehlerfreie hierarchische Überschriftenstruktur

und Vermeiden Sie in den Texten Keyword Stuffing; verwenden

Sie hier auch einen Satz von passenden Longtail-Keywords)

5. Setzen Sie, wenn möglich und sinnvoll, Videos und Animationen bei der

Webseitengestaltung ein (audiovisuelle Inhalte werden höher bewertet als

Bilder und pushen damit das Ranking)

6. Sorgen Sie für eine logische und ausgeglichene interne Verlinkung ihrer

Webseiten

7. Reichen Sie nach Fertigstellung der Website eine xml-Sitemap bei Google

ein

Anmelden der Website in der Google Search Console

Die Google Search Console (GSC) gibt Ihnen die Möglichkeit, alle möglichen Daten

wie z. B. den zeitlichen Verlauf von Klickzahlen, die Zahl von Impressionen

oder die Anzahl indizierter Seiten Ihrer Website (und noch vieles, vieles mehr)

zu ermitteln und zu überwachen. Weiterhin liefert die Google Search Console

eine größere Zahl nützlicher Statistiken, sie warnt vor unnatürlichen Backlinks

oder vor Verstößen gegen Google-Richtlinien, weist auf Fehler in der Website

hin und kann Sie auf diese Weise bei der Suchmaschinenoptimierung optimal

unterstützen. Außerdem lässt es sich mit Google Analytics verbinden – einem

Tool, das gerade für Online-Marketer von großer Bedeutung ist, wenn es darum

geht, die Webpräsenz kontinuierlich zu verbessern.

235

HINWEIS: Google benötigt einige Zeit, um relevante Daten zu sammeln und

auszuwerten. Deshalb werden Sie auch erst ein paar Tagen nach der Anmeldung

erste Ergebnisse im Dashboard für die entsprechende URL erwarten

können.

In diesem Abschnitt geht es lediglich darum, welche Schritte notwendig sind,

um eine mit „Cheetah“ erstellte Website in der Google Search Console anzumelden.

LINK: Hilfe zur Google Search Console

https://support.google.com/webmasters/?hl=de#topic=9128571

Sobald das geschehen ist, wird Google alle diese Website betreffenden Aktivitäten

sammeln und im Dashboard übersichtlich zur Verfügung stellen.

Zur Anmeldung einer Website sind folgende Schritte notwendig:

Als erstes muss man sich natürlich in die Google Search Console über sein

Google Konto einloggen. Im Hauptbildschirm erscheint im linken Randmenü

oben links ein Eingabefeld mit (nach Anklicken) der Beschriftung „Property suchen“

und einem Pull-Down-Menü, welches u. U. die URL’s der bereits re-

236

gistrierten Webseiten auflistet. Am unteren Ende findet sich der Menüpunkt „+

Property hinzufügen“, auf dem wir jetzt klicken:

In unserem Fall wählen wir das Eingabefeld im Bereich „URL-Präfix“ aus und

tragen dort die URL unserer Website ein. Anschließend muss bestätigt werden,

dass die eingetragene Website auch wirklich von ihnen stammt. Bei einem

Ersteintrag wird das natürlich noch nicht der Fall sein. In dem nun folgenden

Dialog bietet Google zur notwendigen Verifizierung verschiedene Möglichkeiten

an, bei denen für uns nur die Möglichkeit „HTML-Tag“ infrage kommt:

237

Über die Schaltfläche „KOPIEREN“ kopieren wir jetzt diesen hier von Google

bereitgestellten Meta-Tag in die Zwischenablage und wechseln anschließend in

„Cheetah“ auf die entsprechende Website – und zwar in deren „Grundeinstellungen“.

Dort wechseln wir dann in die Kategorie „SEO-Einstellungen“ und kopieren

den Bestätigungs-Tag aus der Zwischenablage in das Feld „Metatag“ und

speichern natürlich das Ganze:

238

.

WICHTIG: Anschließend müssen Sie die Seite neu veröffentlichen. Verwenden

Sie dazu im „Cheetah“ Sitebuilder die Schaltfläche „REPUBLISH“ im Hauptmenü

oder wechselseitig die Funktion „Veröffentlichung aufheben“ – „Veröffentlichen“

im 3-Punkte-Menü der Website! Als Ergebnis sollte im Quelltext

der veröffentlichten Website (im Chrome-Browser mit <Strg><U> oder über

das Kontextmenü der rechten Maustaste „Seitenquelltext“ aufrufen) der neu

eingetragene Metatag zu finden sein (Suchfunktion <Strg><F> verwenden)

Jetzt gehen wir wieder zurück in die Google Search Console und drücken dort in

dem noch geöffneten Dialogfenster die Schaltfläche „BESTÄTIGEN“. Damit wird

ein Bestätigungslauf angestoßen, der aber nicht immer gleich zum Erfolg führt.

239

Eventuell muss man hier etwas warten und den Bestätigungslauf solange wiederholen,

bis er klappt.

Sobald die Website bestätigt ist, müssen Sie diese zur Indizierung anmelden.

Dazu tragen Sie in das Suchfeld oben in der Console Ihre URL (d. h. diejenige,

die links im Property-Menü steht) ein und klicken danach im linken Randmenü

den Menüpunkt „URL-Prüfung“ an. Jetzt werden alle verfügbaren Daten aus

dem Google-Index abgerufen und die Anmeldung ist erfolgreich abgeschlossen.

HINWEIS: Melden Sie ihre Website in allen vier Varianten an, d. h. mit und

ohne „www“ und mit „http://“ sowie „https://“.

Cheetah-Website mit Google Analytics verbinden

Gerade wenn man Websites für kommerzielle Zwecke nutzt (z. B. als Verkaufs-

Funnel für Affiliate-Produkte) ist es wichtig, die Akzeptanz und das Besucherverhalten

regelmäßig zu analysieren, um entsprechende Optimierungen OnPage

vorzunehmen oder die Nutzung bestimmte Traffic-Quellen auf ihre Effektivität

hin zu überprüfen. Das dafür am häufigsten benutzte Tool ist dabei ohne

Zweifel „Google Analytics“, welches in der Basisversion kostenlos genutzt werden

kann. Dieses außerordentlich mächtige Analysetool gibt ihnen u. a. Aufschluss

über

die Anzahl der Besucher auf Ihrer Seite

die Suchbegriffe, über die Besucher Ihre Webseite gefunden haben

die genaue Verweildauer der Besucher auf Ihrer Webseite

die Inhalte, die sich die Besucher auf Ihrer Seite angesehen haben

die Devices (Desktop, Smartphone ...), die ihre Besucher verwenden

die Browser, welche die Besucher nutzen

die Besucherquellen wie Links, Suchmaschinen etc.

die demografischen Merkmale, wie Sprache und Standort der Besucher

u.v.m.

240

Das Tool arbeitet mittels eines speziellen Tracking-Codes, den Sie in Google

Analytics für genau ihre Website erstellen können um ihn anschließend in ihre

mit „Cheetah“ erstellte Website einzufügen. Wie das genau geht, soll jetzt

Schritt für Schritt gezeigt werden.

Für die Einrichtung benötigen Sie die URL der Startseite ihrer Website, die Sie

am besten aus der Adressleiste ihres Browsers in die Windows-Zwischenablage

kopieren. Anschließend melden Sie sich bei Google Analytics mit ihrem Google

Nutzerprofil an und wechseln dort über das linke Randmenü in den Bereich

„Verwaltung“:

Hier müssen Sie eine neue Property erstellen. Auf der Folgeseite wählen wir

„Web – Website-Analyse“ aus:

241

Mit „Weiter“ gelangt man dann in die eigentliche Property-Einrichtung. Hier

müssen Sie erst einmal der Website einen eindeutigen Namen geben (hier

„WINcontact Telefonmarketing“) und dessen URL (hier

https://www.wincontact.eu/) in das dazugehörige Feld eintragen. Weiterhin

können Sie hier noch eine Branche auswählen und die Zeitzone für Berichte

festlegen (hier „Deutschland“):

Alle diese Einstellungen beenden wir mit einem Klick auf die Schaltfläche „Erstellen“,

worauf automatisch der Tracking-Code erstellt wird:

242

Diesen kopieren wir nun wieder in die Zwischenablage und wechseln in den

„Cheetah“ Editor und dort in die Grundeinstellungen der Website

www.wincontact.eu. In der Kategorie „Skripteinstellungen“ finden Sie den Bereich

„Analytics Scripts“, in das Sie nun den kompletten Tracking-Code aus der

Zwischenablage hinein kopieren (<Strg><V>):

243

Nun nur noch speichern – und das war es auch schon. Nach Neuveröffentlichung

der Website wird Google Analytics die Site permanent im Auge behalten

und die für Sie relevanten statistischen Angaben erheben.

244

Spezielle Webseiten und Techniken

In diesem Kapitel sollen einige spezielle Webseitentechniken, ein paar Tipps

und Tricks sowie einige allgemeine Designregeln vorgestellt werden und wie

man sie am besten mit „Cheetah“ umsetzen kann. Sie sind – mit Ausnahmen –

jedoch nur als Anregungen und vielleicht als eine Art Ideengeber zu betrachten.

Vorhandene Webseiten mit „Cheetah“ nachbauen

Viel öfters als man denkt, stellt sich die Frage, ob man nicht eine bereits vorhandene,

nativ oder mit einem der vielen anderen CMS-Systeme bzw. Webbaukästen

erstellte Webseite nicht irgendwie auf „Cheetah“ portieren könnte.

Diese Frage ist eindeutig mit „Nein“ zu beantworten. Das gilt sogar für Webseiten,

die mit dem Vorgänger von „Cheetah“, dem Builderall „PixelPerfect“ Sitebuilder,

erstellt wurden (es sei denn, es ist ein damit erstellter Blog, denn dafür

besteht eine Konvertierungsmöglichkeit). Aber was man ins Auge fassen kann,

ist ein Nachbau in „Cheetah“, der umso leichter gelingen wird, je weniger

„Schnickschnack“, die auf JavaScript oder / und CSS etc. beruhen, die Ausgangswebsite

enthält. Einfache Landingpages beispielsweise sind mit

„Cheetah“ oftmals genauso schnell nachgebaut wie neu erstellt. Und natürlich

können Sie zusätzlich dazu die Möglichkeiten von „Cheetah“ nutzen, um solch

eine Seite noch besucherfreundlicher zu gestalten.

HINWEIS: Wenn Sie Webseiten nachbauen, die nicht von Ihnen selbst oder

ihrem Auftraggeber stammen, müssen Sie unbedingt das Urheberrecht (und

eventuell Markenrechte) beachten. Das gilt insbesondere für die darin eingebundenen

Medien (nur Verlinkung, nicht kopieren), eventuelle Texte und

spezielle Designmerkmale, die eine gewisse „Schöpfungshöhe“ vermuten lassen.

Im Idealfall verwenden Sie als „Entwicklungsumgebung“ eine Zweibildschirmlösung.

Auf einem blenden Sie die zu reproduzierende Webseite und im anderen

245

den „Cheetah“ Sitebuilder im gleichen Browser auf. Hier beginnen Sie ihre Arbeit

aber nicht mit einer Vorlage, sondern mit einem leeren Template.

Weiterhin benötigen Sie noch ein paar Browser AddOns (wir kommen darauf

gleich zu sprechen), den einfachen Windows-Editor, einen Taschenrechner sowie

einen (echten) Notizblock mit Stift für Notizen.

Beginnen wir mit den Browser-Erweiterungen (wir gehen hier davon aus, Sie

arbeiten mit Google Chrome oder einem Derivat davon). Mit ihrer Hilfe verschaffen

wir uns in erster Linie Informationen über Farbe, Größen und Größenverhältnisse

sowie über die jeweils verwendeten Fonts und ihre Größen und

Attribute. Weiterhin ist ein Tool von Nutzen, mit dem man alle auf einer Webseite

verwendeten Bilder herunterladen kann. Zu jedem im Folgenden vorgeschlagenen

AddOns gibt es natürlich Alternativen. Also schauen sie einmal

selbst in den Google Webstore, um selbst zu sehen, was es noch so gibt.

1. Bilder aus einer Webseite extrahieren

Image Downloader

Mit dieser Chrome-Erweiterung können Sie alle (oder ausgewählte) Bilder der

Webseite im aktiven Tab downloaden.

LINK: Image Downloader von Vlad Sabev

https://bit.ly/2VY2934

Die heruntergeladenen Bilder sollten Sie anschließend, am besten in jeweils

einem eigenen Ordner pro Webseite auf Cloudinary hochladen und – wenn

nicht bereits geschehen – mit einem SEO-freundlichen Dateinamen versehen.

246

2. Abstände auf der Webseite messen

Dimensions

Immer wenn Sie auf einer Webseite Abstände zwischen farblich klar begrenzten

HTML-Elementen messen müssen, dann ist diese leicht zu bedienende

Chrome-Erweiterung das Tool der Wahl.

LINK: Dimensions

https://bit.ly/2Z7c5ZY

3. Farben bestimmen

ColorPick Eyedropper

Beim Nachbau einer Webseite ist es wichtig, auch die Farben der Originalseite

genau wiederzugeben. Dazu benötigt man ein Tool, welches die Farbwerte

(i. d. R. RGB Hexa) eines mit dem Mauszeiger berührten Pixels ermittelt und zu

kopieren erlaubt. Solch ein Chrome AddOn ist der ColorPick Eyedropper, mit

dem es ein Leichtes ist, einen Farbwert in die Farbeinstellungen eines

„Cheetah“ – Elements zu übertragen.

LINK: ColorPick Eyedropper

https://bit.ly/3iKFalE

247

4. Designer Tools

Dieses Chrome AddOn ist unverzichtbar, wenn man die Größe von Elementen

auf einer Webseite (Bilder, Textcontainer etc.) pixelgenau messen möchte. Dazu

braucht man mit der Maus nur das zu untersuchende Element berühren und

es wird sofort ein Rahmen mit Länge- und Breite-Beschriftung angezeigt.

LINK: Designer Tools zum pixelgenauen Ausmessen von Elementen auf Webseiten

https://bit.ly/2Zb6HW0

5. WhatFont – Find Font

Mit diesem Tool erfahren Sie den Namen und alle Attribute der Schrift, die Sie

auf einer Webseite mit der Maus anklicken. Wenn die Schriftart von „Cheetah“

nativ nicht angeboten wird, können Sie diese über den Fontnamen in diversen

Font-Sammlungen suchen, eventuell erwerben (wenn kostenpflichtig), herunterladen

und dann in „Cheetah“ installieren.

Bevor wir mit dem Nachbau einer Webseite beginnen, schauen wir uns erst

einmal das Original an. Hier überlegen wir uns, wie wir sie am besten in Bänder

aufteilen (auch in Hinblick auf spätere Erweiterungsmöglichkeiten, eventuell

eine kleine Skizze anfertigen). Auch überlegen wir uns hier, ob es Sinn macht,

den Kopf- und Fußbereich separat anzulegen. Als nächstes werden wir dann

248

alle Bilder der Website herunterladen und danach in einen entsprechenden

Ordner in Cloudinary (oder dem Builderall Repository) ablegen.

TIPP: Wenn Sie auch Augenmerk auf SEO legen, dann sollten Sie – wenn nötig

– die Bildgrößen der Bilddateien etwa auf die Bildgröße bringen, wie sie auch

in der Webseite angezeigt werden. Auch die Benennung sollten Sie überprüfen.

Im Idealfall sollte der Name der Bilddatei das für die Webseite vorgesehene

Keyword enthalten.

Jetzt können wir beginnen, die Bannerstruktur der Webseite in „Cheetah“ anzulegen.

Die Farben holen wir uns mit dem Color-Picker von der Originalseite

und tragen dann deren Hexcode in das entsprechende Eigenschaftsfeld des

Banners ein.

Anschließend werden wir dann nach und nach die einzelnen Elemente auf die

entsprechenden Banner legen, deren Größe und Positionen wir beispielsweise

mittels der Designertools von der Originalwebseite übernehmen.

Was die Schrift betrifft, sollte man in einem ersten Schritt auf der Originalwebseite

mittels WhatFont die Schriften aller verwendeten hn-Schriftarten ermitteln

und in einer kleinen Tabelle notieren. Sollten einige der verwendeten

Schriftarten in „Cheetah“ nicht verfügbar sein, dann müssen Sie entweder eine

entsprechende Alternativschriftart auswählen oder entsprechende Fonts im

Netz recherchieren. Wenn Sie dabei fündig werden, dann erwerben Sie die

Schriftart (sollte sie kostenpflichtig sein) und installieren Sie anschließend in

„Cheetah“.

Der nächste Schritt ist dann die Anpassung aller verwendeten hn-Schriften in

„Cheetah“ (Hauptmenü, „ct-show-font-group“), wobei Sie dabei die mobile Variante

nicht vergessen sollten.

HINWEIS: Vermeiden Sie, Schriften in einem Schriftcontainer unabhängig von

einer hn - Formatierung nativ zu formatieren. Verwenden Sie immer – wenn

möglich – die explizit eingestellten hn - Schriftarten unter Einhaltung der damit

verbundenen Überschriftenhierarchie (SEO!). Natürlich können Sie nachträglich

beispielsweise direkt im Textcontainer die Schriftattribute ändern,

wenn es unbedingt notwendig ist.

249

Den Text selbst schreiben Sie aber nicht etwas von der Originalwebseite ab,

sondern markieren ihn dort mit der Maus und kopieren ihn dann in die Zwischenablage.

Da dabei auch unerwünschte Formatierungen mit kopiert werden,

fügen Sie den Text danach mit <Strg><V> in den Editor (nicht WordPad)

ein, markieren ihn dort sofort wieder mit <Strg><A> und schneiden ihn anschließend

mit <Strg><X> aus. Jetzt können Sie ihn ohne lästigen Formatierungscode

in das zuvor in „Cheetah“ angelegte hn- oder Paragraph-Textfeld

einfügen. Anschließend brauchen Sie nur noch die Position und Größe des

Textcontainers auf die entsprechenden Koordinaten des Originals bringen (Designertool

verwenden).

Schwieriger wird es, wenn die zu kopierende Webseite spezielle Skripte (z. B.

Javaskripte) oder Datenbankanbindungen (z. B. MySQL) enthält, deren damit

verbundene Funktionalität sich nicht oder nur schwer mit „Cheetah“ nativ

nachbauen lässt. Hier gibt es entweder die Möglichkeit, auf diese spezielle

Funktionalität zu verzichten, selbst zu Coden oder den Seitenquelltext zu

durchforsten, um daraus den gesuchten Code zu extrahieren. Letztes erfordert

natürlich profunde Kenntnisse in der Webprogrammierung und muss deshalb

hier außen vor bleiben.

Mit diesen Tipps sollte es zumindest für nicht zu komplexe Websites gelingen,

auch ohne dass direkte Konvertierungsmöglichkeiten bestehen, diese auf

„Cheetah“ umzustellen.

250

Erstellung einer idealen Landingpage

Wenn es darum geht, digitale Produkte zu verkaufen, Leute in ein Webinar einzuladen

oder einfach nur um Leads – z. B. über ein Freebie Mailadressen für E-

Mail-Marketing – einzusammeln, dann ist eine Landingpage die Webseite der

Wahl. Ihr einziges Ziel ist es, den Besucher zu einer bestimmten Reaktion zu

veranlassen. Das kann der Download eines kostenpflichtigen oder kostenlosen

(oft im Austausch mit der E-Mail-Adresse) eBooks oder eines Lehrvideos sein,

die Einladung zu einem Webinar oder um den Besucher auf eine bestimmte

Webseite oder Webshop (Amazon) zu lenken, damit er dort ein bestimmtes

Produkt kauft und Sie, als Affiliate, etwas Provision dabei kassieren…

Marketing-technisch handelt es sich hierbei um einen sogenannten „Funnel“,

der in diesem Fall besonders einfach aufgebaut ist.

Der wichtigste Punkt ist bei einer Landingpage der Aufmerksamkeitsfaktor.

Wenn ein Besucher eine Landingpage aufruft, auf die er zuvor beispielsweise

über soziale Medien hingewiesen wurde, so hat er ganz konkrete Vorstellungen,

was ihm dort erwarten wird. Er muss deshalb bereits auf dem ersten Blick

erkennen können, was hier konkret angeboten wird. Außerdem müssen ihm

hier – und zwar ohne scrollen zu müssen - die wichtigsten Infos kompakt und

prägnant dargeboten werden, damit er sofort eine Entscheidung treffen kann,

was ihm wiederum durch eine „Call to Action“ zu erleichtern ist. Oder anders

ausgedrückt, eine Landingpage muss beim Besucher geradezu eine Entscheidung

„aus dem Bauchgefühl heraus“ provozieren. Denn die Wahrscheinlichkeit,

dass er später noch einmal auf die Seite zurückkehrt, ist eher gering. Aus diesen

Überlegungen heraus ergibt sich auch die Strukturierung einer Landingpage,

die deshalb aus verschiedenen Bereichen (in „Cheetah“ beispielsweise durch

entsprechende Banner repräsentiert) aufzubauen ist:

Above the Fold –Bereich

Dieser Bereich ist der Bereich der Landingpage, die ohne zu scrollen im Browser

beim Aufblenden sichtbar ist. Er besteht aus einem schmalen Kopfbereich und

einem Inhaltsbereich und wird in „Cheetah“ am besten durch zwei separate

Banner dargestellt.

251

Der Kopfbereich enthält dabei nur zwei Informationen. Einmal links das Firmenlogo

und rechts, auffallend, Telefonnummer und E-Mail-Adresse, über die jederzeit

ein Kontakt möglich wird. Dieser Bereich lässt sich natürlich auch als

sticky header gestalten, der beim Scrollen durch die Landingpage seine Position

am oberen Bildschirmrand beibehält.

Der Inhaltsbereich beginnt immer mit einer aussagekräftigen Headline (h0-

Überschrift), die von einer ergänzenden Subheadline (h1-Überschrift) gefolgt

wird. Diesen beiden Elementen sind sehr wichtig und ihrer Formulierung deshalb

eine besondere Aufmerksamkeit zu widmen. Denn Sie müssen den Seitenbesucher

animieren, die nun folgenden Informationen aufzunehmen. Und diese

„folgenden Informationen“ lassen sich am besten in einem kurzen Video unterbringen,

in dem das Produkt / die Dienstleistung mit Hauptaugenmerk auf

den Nutzen für den Kunden vorgestellt wird. Dieses Video, welches man in der

Desktopvariante am besten links unterhalb des Subheaders unterbringt, sollte

mit einer konkreten Handlungsanweisung enden, welche auf den Bereich

rechts daneben führt. Denn dort ist der beste Ort, um ein OptIn-

Kontaktformular unterzubringen. Es endet auf einem Call-to-action – Button,

über den sich der Besucher dann beispielsweise in eine E-Mail-Liste einträgt

und als Gegenzug dazu beispielsweise ein zum Thema passendes Freebie oder

weitere Informationen erhalten. Man kann diesen Bereich natürlich auch nutzen,

um sofort einen Verkaufsvorgang einzuleiten, an dessen Ende der Interessent

ein digitales Produkt herunterladen kann.

Der unterste Bereich der Inhaltsseite ist eventuell verfügbaren Trust-Elementen

vorbehalten (eventuell auch als eigenes Banner gestalten), welche die Seriosität

des Angebots unterstreichen. Dazu gehören (Auswahl):

Namen und Fotos der Geschäftsführer und der verantwortlichen Ansprechpartner

und evtl. aller Mitarbeiter

Kundenzitate und Kunden-Interviews

Eine Referenzliste

Logos renommierter Kooperationspartner

Pressezitate

Siegel, Zertifikate, Bescheinigungen, Auszeichnungen und ähnliches

252

Für die meisten dieser Punkte bietet übrigens „Cheetah“ entsprechende Bannervorlagen

an, die dann nur noch von Ihnen angepasst werden müssen.

In „Cheetah“ finden Sie Bannervorlagen zu diesem Bereich u. a. in den Kategorien

„Landing Page“, „Lead Magnet Page“, „Daily Deal“, „Product launch“,

„Team“ und „Call to Action“.

Reason why – Bereich

Dieser Bereich wird erst beim Scrollen der Webseite sichtbar. Darin begründen

Sie mehr oder weniger ausführlich, warum es eine gute Idee ist, das offerierte

Produkt oder die offerierte Dienstleistung in Anspruch zu nehmen. Das können

Sie stichwortartig, durch kleine Grafiken, über Vergleiche sowie durch ein „Unique

Selling Proposition“ (USP, „Alleinstellungsmerkmal“) realisieren. Der Seitenbesucher

muss aus diesen Angaben quasi sofort die Vorteile erkennen, die

er bei Nutzung des offerierten Produktes bzw. bei der Inanspruchnahme der

entsprechenden Dienstleistung hat.

An das untere Ende dieses Bereichs gehört wieder eine auffällige Click-to-

Action – Schaltfläche, die den Besucher entweder direkt auf eine Verkaufsseite

bzw. auf ein Kontaktformular führt.

Für diesen Bereich gibt es in „Cheetah“ Bannervorlagen in den Kategorien

„Contents“, „Features“ und „Call to Action“.

Social Proof

Hier gehören Testimonials und Bewertungen von Kunden hinein. Sie sollen Vertrauen

zum Produkt oder der Dienstleistung bzw. der Personen, die dahinter

stehen, aufbauen. Hier können auch (nach Rücksprache) Logos zufriedener

Kunden oder erworbene Gütesiegel aufgelistet werden. Auch dieser Bereich

endet mit einem auffälligen Call-to-Action – Button.

Für Testimonials bietet „Cheetah“ natürlich auch eine größere Zahl von Bannervorlagen

an, die nur noch von Ihnen angepasst werden müssen.

253

Footer

Bei einer Landingpage reicht es aus, im Footer das Impressum und die Datenschutzerklärung

zu verlinken. Wenn notwendig, ist diese Stelle auch ein guter

Platz, um die vollständige Firmierung bekannt zu geben.

HINWEIS: Eine extensive SEO-Optimierung von Landingpages lohnt meistens

nicht, da sie ja im Gegensatz zu „normalen“ Websites i. d. R. mit bezahlten

Traffic (beispielsweise Facebook-Ads, Instagram, Pinterest etc.) versorgt werden.

Mitgliederbereiche einrichten

Oftmals möchte man einer ausgewählten Personengruppe (das können die eigenen

Kunden oder Interessenten sein oder auch Personen, die explizit einen

Newsletter bestellt oder ein eBook heruntergeladen haben, aber beispielsweise

auch Vereinsmitglieder, wenn es sich bei der Website um eine Vereinswebsite

handelt) exklusiv Informationen bzw. Informationsmaterial zur Verfügung stellen,

die nur diesem Personenkreis zugänglich sind. Dazu dienen sogenannte

„Memberbereiche“ (im „Cheetah“-Jargon), die ein Besucher erst nach einer

Authentifizierung „betreten“ kann. Wie man derartige Mitgliederbereiche erstellt

– und wie einfach das in „Cheetah“ ist – soll in diesem Kapitel erklärt

werden.

Wir gehen bei dieser Beschreibung davon aus, dass bereits eine Website besteht

(hier „builderall-power.de“). In dessen Seitenansicht legen wir nun eine

neue Seite an, die den Namen „Startseite Memberbereich“ erhalten soll:

254

Das ist übrigens genau die Seite, auf welche der Besucher gelangt, sobald er

sich einloggt. Sie können diese Seite so gestalten, wie jede andere Webseite in

„Cheetah“ auch. Es gibt da keine Einschränkungen. Wir begnügen uns hier –

zwecks Wiedererkennung – mit einem eigenen Band und einem h0-Header. Sie

können aber auch aus der Banner-Palette ein geeignetes Banner auswählen.

Man findet entsprechende Vorlagen in den Kategorien „Membership Area“.

Wie man sich auch entscheidet, die Webseite ist schnell zusammengeklickt:

Außerdem fügen wir noch eine Schaltfläche „LogOut“ hinzu, über die der Besucher

später den Mitgliederbereich wieder verlassen kann.

255

TIPP: Sollte der Mitgliederbereich aus einer größeren Anzahl von Seiten bestehen,

dann ist es besser, dafür einen eigenen Headerbereich zu definieren

und diese dann den entsprechenden Seiten zuzuweisen. In diesem Fall sollte

man die Log Out – Schaltfläche auf dem Header anordnen (so wie im Folgenden

beschrieben).

Nach dem Speichern wechseln wir in den „Globalen Elementen“ in die Kopfzeile

und Bearbeiten den auf der Website verwendeten Header. „Bearbeiten bedeutet“

hier nur, dass wir hier eine neue Schaltfläche „LogIn“ und eine neue

Schaltfläche „Registrieren“ einfügen:

HINWEIS: Sie müssen eine derartige Schaltfläche natürlich nicht unbedingt im

Header platzieren. Sie können sie selbstverständlich überall auf einer Webseite

(und natürlich auch im Footer) anordnen, also immer dort, wo es im Kontext

der Website Sinn macht.

Als nächstes muss der „Memberbereich“ selbst erstellt und konfiguriert werden.

Die Schaltfläche dafür finden Sie in der Seitenansicht ihrer Website:

Ein Klick darauf öffnet folgendes Einstellungsfenster, welches wir jetzt auch

gleich ausfüllen:

256

Als erstes vergeben wir einen eindeutigen Namen und formulieren eine kurze

Beschreibung für die Seite. Weiterhin nutzen wir gleich noch die Gelegenheit

und wählen für genau diesen Mitgliederbereich eine spezielle „Hervorhebungsfarbe“

aus (oben rechts in den Kreis klicken und aus dem Farbdialog die gewünschte

Farbe – hier rot – auswählen). Diese wird dann später zur Kennzeichnung

der Seiten des Mitgliederbereiches in der Seitenansicht der Website verwendet.

Außerdem lassen sich damit mehrere Mitgliederbereiche in der Seitenübersicht

unterscheiden (ja, Sie können in „Cheetah“ zu einer Website beliebig

viele Mitgliederbereiche erstellen – z. B. einen „Basic“- Bereich, einen

„Premium„- Bereich und vielleicht sogar einen „VIP-Bereich“!).

257

Der nächste Punkt beantwortet die Frage, auf welche Weise der Zugang gewährt

werden soll. Hier gibt es zwei Möglichkeiten:

1. Zugang jedem gewähren, der sich automatisch registriert

2. Zugang manuell bzw. durch Zahlung (SuperCheckout) gewähren

Wir wählen hier den ersten Punkt. In diesem Fall muss sich der Besucher mit

seiner E-Mail-Adresse und einem von ihm selbst bei der Registrierung vergebenen

Passwort identifizieren, wenn er sich in den Mitgliederbereich einloggen

möchte. Der zweite Fall ist dafür vorgesehen, wenn über den Mitgliederbereich

kostenpflichtige Dienste in Anspruch genommen werden sollen oder man darüber

Zugang zu kostenpflichtigen digitalen Produkten erlangen soll. Es gibt aber

auch die Möglichkeit, dass der Webseitenbetreiber explizit entscheidet, ob er

die Person, die sich registriert hat, auch für den Bereich freischaltet oder nicht.

Wir wählen hier den ersten Punkt.

Kommen wir jetzt zu der Art der Authentifizierung. Das kann entweder über ein

klassisches LogIn (der Besucher gibt dazu die bei der Registrierung angegebenen

Daten ein, also E-Mail-Adresse und Passwort) erfolgen oder über einen

speziellen Anmelde-Token, der von der Webseite erzeugt und dann dem Besucher

zur Anmeldung in den Mitgliederbereich zur Verfügung gestellt wird. In

„Cheetah“ lassen sich sogar beide Anmeldemethoden miteinander kombinieren.

258

Zum Schluss muss jetzt nur noch festgelegt werden, welche Seite nach dem erfolgreichen

Einloggen angezeigt werden soll. Das ist in diesem Beispiel offensichtlich

die von uns genau für diesen Zweck angelegte „Startseite Memberbereich“.

Bleibt nur noch die Schaltflächen mit der entsprechenden Weiterleitung auszustatten

und die Funktionalität zu überprüfen.

LogIn – Schaltfläche (Header-Bereich)

Hier wählen Sie im Kopfmenü der Schaltfläche die Link-Funktion aus und in

dem daraufhin aufgeblendeten Einstellungsdialog als Ziel „Memberbereiche“:

Da es sich hier um einen „LogIn“ handelt, muss als Link-Aktion selbstverständlich

auch „LogIn“ ausgewählt werden. Darüber hinaus darf sich jeder einloggen,

der sich registriert hat. Bei Erfolg gelangt er dann sofort auf die „Startseite

Memberbereich“ und kann die dort angebotenen Informationen, Downloads

etc. in Anspruch nehmen.

259

Registrieren

Die Schaltfläche „Registrieren“ wird analog die Aktion „Registrieren“ zugewiesen:

Das Registrierungsformular, welches hier aufgeblendet wird, ist das Standardformular,

so wie es „Cheetah“ nativ zur Verfügung stellt. Sie können dieses

Formular in Grenzen selbstverständlich auch individuell gestalten, in dem Sie

beispielsweise weitere Eingabefelder hinzufügen. Wir kommen darauf noch

zurück, sobald wir uns die Kategorie „Memberbereiche“ in den Website-

Einstellungen etwas näher anschauen.

Bleibt nur noch die „Startseite Memberbereich“. Dort befindet sich die Schaltfläche

„Ausloggen“. Und auch dafür gibt es im Dialog „Weiterleitungen konfigurieren“

für den Memberbereich die entsprechende Funktion. Sie müssen nur

zusätzlich aus der Klappbox noch die Webseite auswählen, die nach dem Ausloggen

aufgeblendet werden soll.

260

Jetzt können Sie die Funktionsweise des neuen Mitgliederbereichs testen, in

dem Sie sich mit ihrer E-Mail-Adresse und einem selbst gewählten Passwort

registrieren. Anschließend sollten Sie sich problemlos einloggen können. Tragen

Sie dazu einfach die entsprechenden Daten in das LogIn-Formular ein:

Bleibt nur noch die Frage zu klären, wo Sie als Webseitenbetreiber die Mitglieder

Ihrer Memberbereiche einsehen und eventuell administrieren können. Und

diese Frage ist leicht zu beantworten – im linken Randmenü der Webseitenansicht.

Dort finden Sie die Kategorie „Memberbereiche“ mit den Unterpunkten

„Mitglieder“, „Memberbereich Anmeldeformular“ und „E-Mail Vorlagen“, sobald

ihre Website einen Mitgliederbereich enthält.

In der „Mitgliederliste“ können Sie einsehen, wer sich alles für welche Mitgliederbereiche

hat registrieren lassen. Aufgelistet werden standardmäßig der

Anmeldenamen, die dazugehörige E-Mail-Adresse sowie der bzw. die Namen

261

der Mitgliederbereiche, in denen die Eintragung / Registrierung erfolgte. An

dieser Stelle können Sie übrigens auch Mitgliedschaften blockieren (löschen).

Der zweite Untermenüpunkt betrifft die Gestaltung des Registrierungsformulars,

welches aufgeblendet wird, sobald ein Besucher die Schaltfläche „Registrieren

anklickt. Wenn Sie hier keine Einstellungen vornehmen, dann wird auf

Ihrer Website das von „Cheetah“ bereitgestellte Standardformular mit den Feldern

„Name“, „E-Mail“ sowie „Passwort“ (2x) unter Verwendung des Standard-

Templates angezeigt. Sie können aber jederzeit zu diesen „Pflichtfeldern“ noch

Eigene hinzufügen. Dazu dient die Schaltfläche „Feld Hinzufügen“. Und da gibt

es – was den Feld-Typ betrifft – eine ganze Auswahl:

In der Kategorie „Formular Template“ können Sie dann noch Einfluss auf das

Aussehen des Registrierungsformulars nehmen, in dem Sie ein entsprechendes

Template auswählen und eventuell noch weitere Einstellungen (beispielsweise

die Farbe des Hintergrundes betreffend) vornehmen. Hier sollten sie einfach

die einzelnen Varianten einmal selbst ausprobieren. Eine Vorschau ist im Einstellungsbereich

vorhanden:

262

Das dritte Untermenü „Senders“ ist notwendig für das simultane Versenden

einer E-Mail im Zuge der Registrierung. Dazu sind drei Schritte notwendig. Als

Erstes müssen Sie hier die Absender-E-Mail-Adresse eintragen, die der Empfänger

in seinem Posteingang sehen wird. Wenn Sie explizit keine Reaktion wünschen,

dann erstellen Sie einfach eine eigene „no-reply“ - Mailadresse oder

verwenden Sie die voreingestellte „no-reply@builderall.com“.

Im zweiten Schritt müssen Sie ein E-Mail-Template erstellen. Dazu wechseln Sie

in das Untermenü „E-Mail Vorlagen“ im linken Randmenü. Hier können Sie jetzt

eine neue E-Mail-Vorlage erstellen. Dazu klappen Sie – nachdem Sie der neuen

Vorlage einen aussagekräftigen Namen gegeben haben – den Texteditor auf

und ändern den Text der Vorlage entsprechend ab. Als Platzhalter können Sie

alle im unteren Bereich angezeigten Tags (auch eventuell selbst angelegte)

verwenden:

263

Und nun müssen Sie nur noch – in einem dritten Schritt – diese E-Mail dem

Memberbereich explizit zuweisen. Das geschieht in den Grundeinstellungen der

Website, wo Sie die Klappbox „E-Mail Vorlage für Memberbereich“ finden, die

nun auch ihre eben erstellte E-Mail-Vorlage mit dem sinnigen Namen „Mitgliederbereich“

zur Auswahl enthält:

264

Erstellung einer Booking-Seite, über die ein Seitenbesucher

Termine buchen kann

Im PREMIUM-Plan von Builderall ist eine spezielle Buchungsapplikation „Booking“

enthalten, mit der sich genial einfach von Webseitenbesuchern gebuchte

Termine (z. B. für Beratungsgespräche oder Veranstaltungen) in einem Kalender

verwalten lassen. Sie wird im Builderall Dashboard administriert und kann

in jede „Cheetah“ – Webseite auf verschiedene Weise integriert werden. In

„Cheetah“ wird dafür sogar eine eigene Elemente-Kategorie „Booking“ angeboten.

Wenn Sie den PREMIUM-Plan gebucht haben, sollten Sie die Booking-App wie

gewohnt im Dashboard installieren.

Nach Klicken auf „Öffnen“ erscheint das sehr übersichtliche Dashboard der Applikation

auf dem Bildschirm. Hier haben Sie Zugriff auf alle angelegten Kalender,

hier können Sie alle ihre Abonnenten und Termine verwalten und noch viel

mehr (einige Funktionen sind zum Zeitpunkt des Abfassens dieses Kapitels noch

in Entwicklung). Bevor es aber genutzt werden kann, müssen Sie zumindest einen

Kalender anlegen. Dazu dient die Schaltfläche „NEUER KALENDER“. Sie öffnet

einen neuen Einstellungsbereich, aus dem Sie als Erstes die „Kalenderart“

über ein Tab auswählen müssen. Diese Tabs sind „BERATUNG“ und „EVENT“.

265

Damit Sie leichter entscheiden können, welche Art von Kalender für Ihre Anwendung

am besten geeignet ist, finden Sie am unteren Ende der Seite ein paar

Stichworte dazu unter „Usage examples“ und „Features“. Für unser Beispiel

wählen wir hier „BERATUNG“ und als Namen des Kalenders „Beratungstermine

BA-Einsatz“. Jetzt gelangen Sie in eine Art „Wizard“, wo weitere Informationen

abgefragt werden. Ein grüner Fortschrittsbalken zeigt ihnen dabei den „Einstellungsverlauf“

an.

Auf der ersten Seite des Wizards – den Grundeinstellungen – können Sie eine

kurze Beschreibung des Kalenders hinterlassen, ein Logo hochladen und die

Hintergrundfarbe des Kalenders über eine Farbauswahl festlegen. Im Bereich

darunter legen Sie die Zeitzone fest, auf die sich die Zeitangaben des Kalenders

beziehen. Hier kommt wohl in den meisten Anwendungsfällen nur „Predefined

timezone“ infrage (d. h. Sie als Webseitenbetreiber legen die Zeitzone fest). In

der Klappbox darunter sind alle möglichen Zeitzonen nach „Kontinenten“ aufgelistet.

Wir wählen hier „Central European“ aus.

266

Im nächsten Bereich legen Sie explizit fest, was passieren soll, nachdem der

Webseitenbesucher einen Termin in den Kalender eingetragen hat. Das kann

entweder eine kurze Erfolgsmeldung sein, die Sie unter „Display sucess message“

selbst formulieren können, oder eine Umleitung auf eine spezielle, von

Ihnen entworfene Dankesseite. In diesem Fall „Redirect to URL“) müssen Sie

die Webadresse der Dankesseite in das entsprechende Feld eintragen. Wir

wählen hier die erste Alternative aus:

HINWEIS: Nutzen Sie die „Dankesseite“, um den Interessenten schon vorab

mit weiteren Informationen zu versorgen. Auch ein kleines Video macht sich

hier immer gut, in dem Sie sich vorstellen sowie einen kleinen Ausblick darüber

geben, was der Interessent bei dem Termin erwarten wird.

Um zur nächsten Wizard-Seite zu gelangen, müssen Sie hier erst einmal alle

Änderungen speichern. Danach werden Sie auf die Wizard-Seite „TERMINPLA-

NUNG“ weiter geleitet. Die hier eingetragenen Informationen sind im Wesentlichen

diejenigen, die der Webseitenbesucher zu Gesicht bekommt. Sie lassen

sich in verschiedene Gruppen (z. B. = verschiedene Themen) aufteilen, wobei

wir hier in diesem Beispiel nur eine Gruppe verwenden möchten. Diese Gruppe

ist bereits als „Gruppe 1“ angelegt. Sie muss noch einen eigenen Namen und

267

eventuell eine kurze Beschreibung bekommen. Als Name wählen wir hier „Kostenlose

Strategieberatung Builderall“.

Unter Umständen kann die Host-Liste wichtig werden. Hier werden alle die Personen

eingetragen, die im Rahmen dieser Gruppe Termine zugeteilt bekommen

sollen. Das können beispielsweise alle Mitarbeiter einer Marketingabteilung

oder die Mitglieder eines Beratungsteams sein. Im Normalfall wählen Sie hier

Ihren eigenen Namen aus, wenn alle Termine für Sie bestimmt sind.

Der nächste Punkt beschäftigt sich mit den wichtigen Punkten „Terminstart“,

„Termindauer“ und dem „Zwischenraum zwischen zwei aufeinander folgenden

Terminen“, der für Vorbereitungsarbeiten u. ä. einzuplanen ist.

Der „Startpunkt“ gibt an, alle wie vieler Minuten jeweils ein neuer Termin beginnt.

Sie können hier aus der Klappbox einen geeigneten Wert (z. B. „Alle 30

Minuten“) auswählen. Als Nächstes legen Sie die Termindauer in Stunden und

Minuten fest (also beispielsweise auch 30 Minuten für eine kostenlose Beratung)

und anschließend die Zeitdauer der Pause, bis der nächste Termin beginnen

kann:

268

In der Kategorie „Verfügbare Termine“ legen Sie konkret fest, an welchen Tagen

und innerhalb welchen Zeitraums an einem Wochentag Termine möglich

sein sollen. Das könnte dann in etwa so aussehen:

In der folgenden Kategorie kann quasi das Gleiche noch für die Tage eines Jahres

festgelegt werden:

Sollte ein Termin auf mehrere Sessions aufgeteilt werden müssen, dann können

Sie deren Zahl in das Feld „Termine“ eintragen und in der Klappbox „Recurrence“

(wenn mehr als 1 Termin) den Eintrag auswählen, der den Folgetermin

definiert (z. B. „In einer Woche wieder“). Bei einem Optiker kann der erste

Termin beispielsweise derjenige sein, an dem eine Sehprüfung stattfindet und

der zweite Termin derjenige, an dem die fertige Brille übergeben wird.

269

Wir wählen hier nur einen Termin aus. Die früheste Buchungsmöglichkeit soll in

zwei Tagen sein (gerechnet von dem Tag an, an dem der Interessent den Termin

einträgt).

Weiterhin können Sie im Kalender auch noch nach Belieben einzelne Tage (z. B.

Ihren Geburtstag, Dienstreise u. ä.) blockieren. Dafür ist die Einstellung „Zeiten

blocken“ zuständig.

Eine weitere wichtige Funktion betrifft die Terminbestätigung. Sie kann entweder

automatisch oder manuell erfolgen. Wir wählen hier „Automatische Bestätigung“:

Der letzte Bereich auf dieser Wizard-Seite nimmt Einfluss auf das Registrierungsformular,

in das sich der Interessent eintragen muss. Hier macht es Sinn,

bei allen drei Feldern „Benötigt“ auszuwählen:

Auch diese Seite bestätigen wir am Ende mit „SPEICHERN UND WEITER“. Anschließend

gelangen wir auf die Wizard-Seite „KOMMUNIKATION“. Hier können

Sie festlegen, ob eine Terminbestätigung explizit erfolgen soll (Bestätigungsmail)

und ob der Interessent vor dem Termineintritt noch einmal per Mail an

den Termin erinnert werden soll.

270

In der Regel wird man selbstverständlich dem Interessenten eine Bestätigungsmail

bzw. eine SMS senden. Er hat dann die Gelegenheit, den Termin

auch wieder stornieren zu können. Wenn Sie hier also „Yes, send confirmation“

auswählen (was Sie immer tun sollten), dann haben Sie sofort Zugriff auf einen

Texteditor, in dem Sie die Bestätigungsmail (oder den Text der SMS) formulieren

können:

Kommen wir jetzt zur Kategorie „Reminders“ (Terminerinnerung). Auch hier

gibt es zwei Möglichkeiten. Entweder Sie erinnern den Interessenten nicht an

den Termin („No, do not send any reminders“ – nicht zu empfehlen) oder Sie

schicken ihm zu festgelegten Zeitpunkten vor dem Termin entsprechende Erin-

271

nerungen per Mail oder SMS. In diesem Fall müssen Sie die Schaltfläche „NEW

REMINDER“ anklicken, um zu den entsprechenden Eingabefeldern zu gelangen.

Das Einstellungsfenster für den Text der E-Mail bzw. der SMS und für den Zeitpunkt

des Verschickens erreichen Sie wie gewohnt über das Stift-Symbol. Wir

wählen hier nur eine Erinnerung zwei Stunden vor dem vereinbarten Termin:

Auch hier dürfen Sie am Ende den obligatorischen Klick auf „SPEICHERN UND

WEITER“ nicht vergessen. Anschließend wird die Seite „AUTOMATION“ geöffnet.

Sie gestattet den automatischen Eintrag des Interessenten in eine oder

mehrere vorbereitete Mailingboss-Listen. Wenn Sie das nicht wollen, belassen

Sie die Einstellung einfach auf „Nichts machen“. Andernfalls (was die bessere

Idee ist) markieren Sie „Subscribe to a list“ und wählen anschließend die entsprechende

bzw. entsprechenden Mailingboss-Liste aus der Klappbox aus:

272

HINWEIS: Über den Link “Liste erstellen“ können Sie direkt in Mailingboss

wechseln und dort eine neue Liste anlegen.

Jetzt noch einmal „SPEICHERN UND WEITER“ und der neue Buchungskalender

wird angelegt. Sie erhalten jetzt Zugriff auf einen Link zum Kalender, den Sie

auch anderweitig (z. B. einem E-Mail) verteilen können (zuvor sollten er aber

über einen URL-Shortener gekürzt werden). Außerdem wird Ihnen an dieser

Stelle der iFrame-Code für „Cheetah“ angeboten, mit dem sich der eben erstellte

Kalender problemlos in die entsprechende Webseite einbinden lässt.

Schauen wir uns einmal die verschiedenen Möglichkeiten im „Cheetah“ Editor

einmal im Detail an.

Verwendung des Booking-Elements

Um das Booking-Element zu verwenden, ziehen wir es einfach per darg’n drop

auf das Panel und füllen anschließend das simultan dazu aufgeblendetes Optionen-Fenster

aus:

273

Und das war es im Wesentlichen auch schon:

Natürlich können Sie jetzt noch die Elemente-Eigenschaften des „Booking

calendar“ wie gewohnt anpassen. Und über das Kopfmenü gelangen Sie wieder

in den Options-Dialog.

Einbetten in die Webseite

Dazu benötigen wir auf einem Band ein iFrame / HTML – Element, in das wir

den vom Wizard erzeugten Inline-Code eintragen. Das Ergebnis sieht dann so

aus:

274

Link verwenden

Sie können natürlich auch die generierte URL verwenden, um den Besucher auf

die explizit von Builderall angelegte Booking – Seite zu leiten. Am Einfachsten

geht das über eine Schaltfläche, der Sie als Link-Ziel die entsprechende URL zuweisen.

Jetzt sollten Sie einmal die Funktionalität des Buchungskalenders im Einzelnen

ausprobieren. Dazu sollten Sie ihn entweder im Vorschau-Modus öffnen oder

aber die veröffentlichte Webseite zum Testen verwenden.

Sobald Sie einen freien Termin ausgewählt haben, öffnet sich folgendes kleine

Fenster, in das der Interessent seine Daten eintragen muss:

275

Nach dem Abschicken des Formulars erhält er gemäß unseren Einstellungen

folgende nette Bestätigungsmeldung:

Wie Sie sehen, war es noch nie so einfach eine solche komplexe Buchungsfunktion

für Termine in eine Webseite mit nur wenigen Klicks in eine Webseite zu

implementieren.

HINWEIS: Wenn derartige Terminvereinbarungen Ihr Thema sind, lohnt es

sich allein schon deshalb den PREMIUM-Plan von Builderall zu buchen.

276

Farben und Webseiten

Farben sind mit die wichtigsten „nicht-verbalen“ Informationsträger einer

Webseite, weshalb man beim Webdesign der Farbgestaltung eine besondere

Aufmerksamkeit widmen sollte. Farben helfen nicht nur bei der Orientierung,

sie haben auch etwas mit dem Charakter einer Webseite zu tun und sie dienen

dazu, Inhalte übersichtlicher darzustellen. Mit Farben lassen sich Akzente setzen,

Marken mit hohem Wiedererkennungswert definieren (man denke nur an

das Telekom – Magenta) und Bedeutungen hervorheben. Farben lösen darüber

hinaus beim Betrachter Emotionen aus, stellen Bezüge zu Erfahrungen her und

vermitteln gewisse Wertgefüge.

Es macht also durchaus Sinn, sich über die Wirkung von Farben und Farbkombinationen

auf Webseiten Gedanken zu machen. Dabei stellt sich insbesondere

die Frage, unter welchem Kontext sollte man welche Farbe bzw. welche Farbkombinationen

wählen. Man kann hier natürlich keine absoluten Empfehlungen

geben, denn die optimale Farbwahl ist letztendlich von vielen Faktoren abhängig.

Aber es gibt durchaus einige Leitlinien, die man beachten sollte.

Farben wirken nicht überall gleich. Es kommt vielmehr auf die jeweils umgebenden

Farben an. So gibt es Farbkombinationen, die harmonisch wirken, während

andere wiederum „gar nicht gehen“, quasi dissonant sind. Viele kräftige

Farben wirken sehr unruhig, während eine fließende „graue“ Tonalität schnell

als langweilig empfunden wird. Rot und Grün nebeneinander kann zu Erkennungsproblemen

bei Rot-Grün-Blinden führen und sollte deshalb vermieden

werden. Manchmal haben auch Schwarz-Weiß-Webseiten ihren eigenen Reiz,

wenn die Farben zum Thema passen.

Die Farbpalette einer Webseite sollte sich auf nicht allzu viele, untereinander

abgestimmte Farben beschränken, wobei eine sogenannte „Akzentfarbe“ die

Palette bestimmt. Eine solche „Akzentfarbe“ sorgt nämlich dafür, dass bestimmte

Elemente einer Webseite besonders hervorstechen und sich vom Rest

abheben (z. B. Überschriften, Schaltflächen, Navigationselemente, Trennlinien

etc.), weshalb sie sich von der Grundfarbe der Webseite deutlich abheben soll-

277

te. Außerdem kann sie ganz wesentlich die Corporate Identity der Website und

damit ihren Wiedererkennungswert steigern.

Webdesigner und Psychologen haben sich im Laufe der Zeit viel Mühe gegeben,

untereinander abgestimmte Farbpaletten zusammenzustellen. Dabei sind u. a.

sogenannte „Flat UI Colors“ – Paletten herausgekommen. „Flat Color“ bedeutet,

dass die Farben keinen „Glanz“ besitzen und es bei ihrer Kombination zu

keinen Überblendungseffekten kommt. Auch sind sie so abgestimmt, dass sie

untereinander einen guten Kontrast aufweisen. Die Paletten repräsentieren

dabei u. a. sogenannte „Erdfarben“ (mehr bräunliche Töne), „Kalte Farben“

(Blautöne), „Pastellfarben“ und „heiße Farben“ (mehr Rottöne). Man findet

entsprechende Zusammenstellungen zusammen mit ihren Farbcodes (meist

RGB Hexa) im Internet. Viele Farben haben auch einen Eigennamen (z. B. „Wet

Asphalt“ für #34495E).

LINK: Zusammenstellung von „Flat UI Colors“ – Paletten

https://flatuicolors.com/

LINK: Weitere Farbpaletten zur Farbauswahl

https://www.materialui.co/flatuicolors

278

TIPP: Wenn Sie sich über den „Charakter“ Ihrer zu erstellenden Website im

Klaren sind, dann suchen Sie sich eine dazu passende Farbpalette aus und

versuchen Sie die darin angebotenen Farben konsequent und einheitlich in

Ihrer ganzen Website anzuwenden (was natürlich nicht bedeutet, dass Sie

auch noch andere, nicht in der Palette enthaltene Farben zum Einsatz bringen

können). Schauen Sie sich in diesem Zusammenhang auch die Farbgestaltung

ihrer Konkurrenzseiten an.

„Farben“ lassen sich zahlenmäßig auf verschiedene Weise darstellen. Man

spricht gewöhnlich von sogenannten „Farbräumen“. Bei Monitorausgaben wird

gewöhnlich zur Farbcodierung der RGB-Farbraum verwendet. Dabei stehen

„RGB“ für die drei Grundfarben Rot, Grün und Blau, aus deren unterschiedlich

hohem Anteil jeweils die Farbe eines Bildpunkts auf dem Monitor „zusammengemischt“

wird. Ein Pixel in Pink hat beispielsweise die Farbzusammensetzung

R=184, G=81 und B=149 (wobei der Maximalanteil jeder Grundfarbe 256 beträgt).

Wenn Sie also der Eigenschaft „Farbe“ eines Elements einen konkreten

Wert zuweisen, sind das die genannten RGB-Werte. Das können Sie für jeden

Farbanteil einzeln tun (Felder „R“, „G“, „B“) oder (meist besser) den Hexa-

Gesamtwert in das Feld „HEX“ eintragen. Dieser Wert ist es nämlich, den Sie

gewöhnlich in die Zwischenablage kopieren, wenn Sie auf einer Webseite mit

Flat UI Paletten eine Farbe auswählen (oder ganz allgemein einen „Color-

Picker“ verwenden). Die Übertragung einer Farbe ist dementsprechend sehr

einfach:

Aus der Palette eine Farbe auswählen

Farbcode in die Zwischenablage kopieren (geht meist automatisch beim

draufklicken, es kann aber auch ein Color-Picker verwendet werden)

Farbcode mit <Strg><V> aus der Zwischenablage in das zuvor geleerte HEX-

Feld der “Cheetah“ – Farbauswahl kopieren

279

HINWEIS: Um die Transparenz einzustellen, verwenden Sie den Schiebebalken

unter der Regenbogenpalette bzw. einem Wert zwischen 0 und 1 im Feld A.

„1“ bedeutet hier „undurchsichtig“ und „0“ „völlig transparent“. Bei einem

Wert irgendwo zwischen 0 und 1 scheint dann der Untergrund mehr oder

weniger deutlich durch die Färbung hindurch, womit sich interessante gestalterische

Effekte erzielen lassen.

Sehr bequem ist es, wenn man für die Farbauswahl von Flat UI – Farben ein

entsprechendes Chrome-AddOn installiert. Dann hat man jederzeit mit wenigen

Mausklicks Zugriff auf die Farbpaletten. Eine solche Chrome-Erweiterung

stellt beispielsweise die kostenlose „Flat UI Colors Palette“ dar, die zu installieren

hiermit empfohlen wird. Sie finden Sie im Google Webstore:

LINK: Flat UI Colors Palette

https://bit.ly/2CatXdJ

280

Die Bedienung ist intuitive und einfach. Nachdem Sie auf irgendeiner Palette

eine Farbe angeklickt haben, steht deren Hex-Code in der Zwischenablage und

kann dann – wie oben beschrieben – in die Farbauswahl von „Cheetah“ übernommen

werden.

LINK: Allgemeines zum Thema Grafik / Farbkonzepte / Farbenlehre

https://wiki.selfhtml.org/wiki/Grafik/Farbkonzept/Farbenlehre

281

Produkte stilvoll in Szene setzen – Mockups designen

In der Welt der Werbung werden Produkte schon lange nicht mehr mittels Fotoshootings

stilvoll in Szene gesetzt, denn das ist gerade für kleine Unternehmen

viel zu teuer und viel zu aufwändig. Vielmehr nutzt man die Möglichkeiten

der modernen Computertechnik, um Produktbilder auf beliebige Hintergründe

zu projizieren. Ein typisches Beispiel ist - wie das Bild zeigt - ein Smartphone,

auf dessen Display irgendein von Ihnen ausgewähltes Motiv (hier das Cover des

Builderall-Power-Magazins) angezeigt wird.

Solche Bilder werden gewöhnlich als Mockups bezeichnet. Zu ihrer Erstellung

stellt Builderall das Mockup-Designstudio zur Verfügung. Sie können es verwenden,

wenn Sie mindestens den BUILDER-PLAN gebucht haben.

In diesem Abschnitt kann nicht auf alle Funktionen des Builderall Mockup Designstudios

eingegangen werden. Es wird lediglich gezeigt, wie man ein einfaches

Mockup erstellt, welche sich dann wie jedes andere Bild auch, in eine

Webseite integrieren lässt.

Einen ersten Eindruck, welche Möglichkeiten Mockups bieten, erhält man

durch Sichtung der im Mockup - Designstudio standardmäßig angebotenen

Vorlagen, die alle übersichtlich auf einer Auswahlseite angeordnet sind. Die

282

hellblauen Flächen sind dabei die Bereiche, die Sie mit eigenen Fotos oder Grafiken

füllen können, wobei die Umrechnung in eine entsprechende perspektivische

Form selbstverständlich das Programm übernimmt.

Natürlich sind Sie nicht nur auf diese hier aufgelisteten "Werbeflächen" angewiesen.

Sie können selbstverständlich auch eigene Fotos mit dem Designstudio

so bearbeiten, dass sich auf deren Grundlage Mockups erstellen lassen. Wie

das genau geht, soll im Folgenden Schritt für Schritt anhand eines einfachen

Beispiels gezeigt werden...

Ausgangspunkt ist eine freigestellte Aufnahme der Rückseite einer Spiegelreflexkamera,

auf dessen Display ein spezielles Foto zu sehen sein soll, welches

explizit die Qualität eines Makroobjektivs hervorhebt.

283

TIPP: Es gibt mittlerweile viele Programme, mit denen man Bilder freistellen

(d. h. deren Hintergrund entfernen) kann. Wenn es schnell gehen soll und Sie

nicht mehr als 50 Bilder im Monat freistellen möchten (genauer sogenannte

„Vorschaubilder“ mit einer geringen Auflösung, z. B. 625x400 Pixel), dann

reicht ein kostenloser Account von remove.bg aus. Andernfalls müssen Sie

entsprechende Credits erwerben.

Dazu müssen wir als Erstes im Designstudio den Menüpunkt "Eigene Vorlagen"

auswählen. Dort wiederum gibt es den Menüpunkt "Vorlage erstellen", über

den wir unsere Mockup-Vorlage in den Editor übertragen, um sie nach Festlegung

der "Werbefläche" in die Builderall-Cloud hochladen zu können.

Die wesentliche Funktion ist hier "Neuen Rand erstellen". Klick man diese Funktion

an, dann wird auf das Bild ein durchscheinendes blaues Viereck aufgeblendet,

dessen Größe, Form und Position sowohl mit der Maus (Ankerkästchen) als

auch über die Einstellungsregler auf der rechten Seite beliebig festgelegt werden

kann. Ziel der Übung ist es, dieses "Viereck" (welches später als Platzhalter

für unser "Werbebild" fungiert) möglichst genau auf das Kameradisplay zu positionieren.

284

Ist der "Platzhalterbereich" ausgewählt, kann die Vorlage gespeichert werden.

Sie wird nun auf der Seite "Eigene Vorlagen" gelistet:

Um anhand dieser Vorlage ein Mockup zu erstellen, brauchen Sie nur einen

Doppelklick auf das Bild auszuführen (das Anklicken des Bleistift-Symbols lädt

dagegen die Vorlage wieder in den Platzhalter-Editor). Sie wird dann in den

Mockup-Editor geladen. Dort können Sie dann per "Upload media" Ihr Werbebild

hochladen, welches den Platzhalter ersetzen soll. Beachten Sie dabei, dass

Ihr Bild die empfohlene Pixelgröße erreicht bzw. in beiden Koordinaten überschreitet.

In unserem Beispiel wählen wir das Bild einer Raubfliege aus, welches

auf das Kameradisplay projiziert werden soll.

Der Teil des Bildes, welches sich in der Vorschau innerhalb des roten Rechtecks

befindet, wird in den Platzhalterbereich übernommen. Sie können nun mit der

Maus das Bild verschieben bzw. über den Regler auf der rechten Seite das Bild

so skalieren, bis es optimal den Platzhalterbereich ausfüllt. Wenn Sie möchten,

können Sie auch noch eine Beschriftung hinzufügen - was hier aber eher nicht

erforderlich ist...

285

Wenn alles OK ist, dann betätigen Sie den Button "Done" und anschließend -

auf der Ausgangsseite - den Button "See Result":

Wenn Sie mit dem Ergebnis zufrieden sind, können Sie nun das fertige Mockup

(z. B. als jpeg-Datei) herunterladen. In der Klappbox müssen Sie zuvor nur noch

die gewünschte Bildgröße auswählen. Und das war schon alles. Jetzt können Sie

es als Bilddatei weitergeben oder in Ihre Webseite bzw. Webshop einbauen.

286

Browser Push-Benachrichtigungen (Browser Notification)

Browser-Push-Benachrichtigungen sind Mitteilungen, die Sie als Webseitenbetreiber

direkt an Ihre Websitebesucher senden, sobald deren Einwilligung vorliegt.

Diese Mitteilungen können sowohl auf Desktop- als auch Mobilgeräten

empfangen werden. Auf dem Desktop werden sie als kleine rechteckige Mitteilungsboxen

in der oberen linken oder rechten Ecke des Bildschirms angezeigt.

Auf Smartphones sehen mobile Push-Benachrichtigungen praktisch genauso

aus wie Push-Benachrichtigungen, die von vielen Apps gesendet werden.

Um derartige Push-Benachrichtigungen zu erhalten, müssen Ihre Webseitenbesucher

diese jedoch explizit auf Ihrer Website abonnieren. Auch dafür gibt es

ein spezielles Anmeldefenster, welches beim Webseitenbesuch aufgeblendet

wird.

Einer der großen Vorteile einer Web-Push-Nachricht besteht des Weiteren darin,

dass man jederzeit Nachrichten an deren Abonnenten schicken kann, auch

wenn sich der Empfänger gerade nicht auf Ihrer Website befindet..

HINWEIS: Browser, die Web-Push-Benachrichtigungen unterstützen, sind

Chrome, Firefox, Safari, Opera und Edge.

In „Cheetah“ müssen die Browser Notification für eine ausgewählte Website im

Prinzip nur „eingeschaltet“ werden. Wenn Sie sich in der Website-Ansicht befinden,

finden Sie die entsprechende Funktion im linken Randmenü:

287

Sie brauchen dann nur noch bestätigen, dass der Browser ein kleines Pop-Up

aufblenden soll, sobald der Besucher ihre Website betritt:

Diese Einstellung führt dazu, dass, sobald der Besucher Ihre Website betritt,

links oben (Chrome) ein kleines Fenster erscheint, wo der Besucher Push-

Nachrichten entweder blockieren oder zulassen kann. Klickt er auf „Zulassen“,

dann können Sie ihm später jederzeit kleine Nachrichten zusenden.

Dazu müssen Sie wieder in das linke Randmenü der entsprechenden Website

wechseln und dort den Unterpunkt „Send Notification“ aufrufen. Dort formulieren

Sie ihre Kurznachricht und fügen einen Weblink der Seite hinzu, die der

Empfänger möglichst besuchen soll:

288

Sobald Sie jetzt am Ende des Formulars die Schaltfläche „Push“ anklicken, erhalten

alle Ihre Abonnenten die entsprechende Nachricht auf ihren Desktop

oder ihr Smartphone:

Administriert werden die Websites, bei denen die Browser Notification freigeschalten

sind, in der Kampagnenliste. Dort können Sie insbesondere jederzeit

einsehen, wie viele Abonnenten sich in der letzten Woche, im letzten Monat

und insgesamt registriert haben.

289

Sobald Sie genügend Abonnenten auf diese Weise eingesammelt haben, können

derartige Browser-Benachrichtigungen durchaus als sinnvolles Marketinginstrument

eingesetzt werden.

290

Digitale Produkte verkaufen – der

Supercheckout

Sie haben ein eBook geschrieben, mit „Builderall eLearning“ (PREMIUM-Plan)

einen eigenen Lernkurs entwickelt oder eine Serie eigener Schulungsvideos

aufgenommen und möchten sie nun im Internet bekanntmachen und verkaufen?

Dann ist Builderall für Sie die ideale Plattform. Denn gerade digitale Produkte

lassen sich a) vergleichsweise leicht selbst erstellen und b) wunderbar

über das Internet vermarkten. Dafür wurden spezielle Marktplätze geschaffen,

von den im deutschsprachigen Raum Digistore24 der wohl Bekannteste ist.

Aber Sie können auch den international agierenden Builderall Marketplace nutzen,

um ihre digitalen Produkte weltweit anzubieten. Die dritte Möglichkeit besteht

darin, dass Sie das Marketing und den Verkaufsprozess vollständig selbst

übernehmen. Und hier kommt „Cheetah“ und das darin integrierte einzigartige

Bezahlsystem „SuperCheckout“ ins Spiel. Damit können Sie auf erstaunlich einfache

Weise Verkaufswebseiten bauen, auf denen Sie ihre Produkte anbieten

und auch gleich verkaufen können ohne einen weiteren Dienstleister (Zahlungsanbieter

wie PayPal einmal ausgenommen) in Anspruch zu nehmen. Und

Sie können damit auch als Vendor selbst Affiliates gewinnen, die gegen eine

Provision ihr digitales Produkt vermarkten. Affiliate-Verwaltung, Provisionsberechnung

und Provisionsausschüttung sind nämlich weitere Schlüsselfunktionalitäten

des SuperCheckouts von Builderall.

HINWEIS: Im Rahmen dieses Buches kann nur auf die Grundfunktionalität

dieses Bezahlsystems anhand eines einfachen, leicht nachvollziehbaren Beispiels

eingegangen werden. Um alle Feinheiten des Builderall SuperCheckouts

ausreizen zu können, ist eine eingehende Beschäftigung mit diesem Tool unumgänglich.

Auch ist es genauso wie „Cheetah“ in stetiger Weiterentwicklung

begriffen und somit in näherer Zukunft weitere Verbesserungen und Funktionen

zu erwarten (wenn sie bei Erscheinen dieses Buches nicht schon realisiert

sind wie beispielsweise die angekündigte automatische Rechnungslegung).

291

Verkauf eines eBooks mit Zahlungsabwicklung über PayPal

In diesem Beispiel soll eine Art Landingpage mit Verkaufsfunktion für ein eBook

Schritt für Schritt entwickelt werden. Dabei lässt sich „eBook“ im Prinzip natürlich

durch jedes downloadbare digitale Produkt ersetzen. Aber natürlich lassen

sich mit SuperCheckout auch physische Produkte über das Internet vermarkten,

wenn Sie dafür selbst (oder ein spezieller Dienstleister) die Lieferlogistik übernehmen.

Die Einschränkung, die noch vorliegt, ist, dass z. Z. pro Website nur

ein Produkt (+ eventuell ein „Bumpsell“) verkauft werden kann. Aber das wird

sich in zukünftigen Versionen wahrscheinlich ändern…

1. Neue Website erstellen

Voraussetzung für die Nutzung von SuperCheckout ist eine mit „Cheetah“ angelegte

Website, was über die Funktion „Neue Website erstellen“ schnell erledigt

ist. Die Homepage dient später als Landingpage („Angebotsseite“) für das e-

Book. Außerdem benötigen wir noch eine zweite Seite, auf die dann der Kunde

nach einem erfolgreichen Kauf umgeleitet wird und wo er dann das erworbene

eBook und eventuell weiteres Bonusmaterial herunterladen kann („Download-„

bzw. „Dankesseite“). Wir gehen hier erst einmal nicht weiter darauf ein. Es

reicht für die nächsten Schritte, dass diese beiden Seiten existieren.

Sobald die Anlage dieser beiden Seiten erledigt ist, finden Sie im linken Randmenü

in der Website-Ansicht das Tool „SuperCheckout“, welches wir jetzt starten

werden.

2. SuperCheckout aufrufen und Business-Infos eintragen

Beim ersten Aufruf werden Sie sofort auf die Seite „Business Information“ umgeleitet.

Denn hier müssen Sie ihre Kontaktinformationen eintragen, d. h. Name

und Anschrift, Firmenname sowie E-Mail-Adresse und Telefonnummer. Alle

Pflichtfelder sind dabei mit einem „*“ gekennzeichnet. Die hier eingegebenen

Daten werden dem Käufer angezeigt, sobald er ihr Produkt kauft. Außerdem

werden sie später (wenn das Modul verfügbar ist) für die Rechnungslegung benötigt:

292

Wenn Sie eine Umsatzsteuer-Identifikationsnummer besitzen, dann tragen Sie

diese bitte in das Feld „VAT Number“ ein. Weiterhin werden wir in diesem Beispiel

den Schalter „Globales Affiliate Programm“ nicht aktivieren, da wir keine

externen Affiliates für die Vermarktung unseres digitalen Projektes werben

möchten.

Nach dem Speichern werden wir auf eine neue Seite geführt, wo uns jetzt nur

der Abschnitt „Jetzt loslegen“ interessiert. Denn hier können wir jetzt unser

digitales Produkt, welches wir über SuperCheckout verkaufen möchten, explizit

anlegen.

293

Dazu klicken wir auf die Schaltfläche „ERSTELLE EIN PRODUKT“. Es öffnet sich

eine recht umfangreiche Seite, die in Form eines Wizard aufgebaut ist und aus

7 Einzelseiten besteht, die wir nun nach und nach durchlaufen und ausfüllen

müssen. Die erste Seite ist die Seite „Produktinfo“. Hier geben wir unserem

Produkt einen Namen (maximal 50 Zeichen), legen die Sprache fest und markieren

das Feld „Adressdaten des Kunden abfragen“, damit er gezwungen wird,

Name und Anschrift preiszugeben. Weiterhin geben wir im Editor einen Text

ein, der unser digitales Produkt näher beschreibt.

HINWEIS: Nutzen Sie dafür auch die verschiedenen Formatierungsmöglichkeiten,

den dieser Editor bietet, um beispielsweise besondere Produktmerkmale

hervorzuheben.

Weiterhin müssen Sie jeweils aus einer Klappbox die Art des Produktes (digital

oder physisch) sowie eine passende Kategorie auswählen. Und vergessen Sie

nicht ein passendes Bild / Mockup hochzuladen. Denn auch das wird ein nicht

unwesentlicher Bestandteil des Bestellformulars:

294

Mit „Weiter“ gelangen wir auf die wichtige Seite „Preise“. Mit [+] legen wir fest,

welche Zahlungsanbieter wir verwenden möchten. Hier kommt für uns erst

einmal nur PayPal (und eventuell Stripe) in Frage. Bedingung ist natürlich erst

einmal das Vorhandensein eines PayPal-Kontos. Wenn Sie also noch keines haben

sollten, dann wechseln Sie auf die PayPal-Webseite und legen dort eines

an. Danach führen Sie folgende Schritte aus:

1. Eine kurze Beschreibung zu dieser Zahlungsart eingeben.

2. Rufe die Seite https://developer.paypal.com/ auf

3. Klicken Sie in der oberen, rechten Ecke auf LogIn und melden Sie sich mit

ihren PayPal -Zugangsdaten an.

4. Klicke im Bereich REST API Apps auf Create App.

295

5. Vergeben Sie einen Namen für ihre App (kann beliebig sein, am besten Firmenname)

und klicken Sie dann auf die Schaltfläche „Create App“.

6. Kopiere Sie jetzt die Client ID und das Secret und trage Sie beide Werte in

die entsprechenden Felder im SuperCheckout ein.

Beachte: Wenn Sie ihr Secret löschen oder deaktivieren, dann wird ihr Checkout

nicht mehr funktionieren. Beachten Sie auch, dass bei Testzahlungen immer

der Sandbox-Modus aktiviert ist!

Jetzt müssen wir nur noch die Währung (€) auswählen und festlegen, welche

Art von Widerrufsrecht wir dem Kunden einräumen möchten. In der nächsten

Klappbox wählen wir natürlich „Einmalzahlung“ aus. Es gibt aber u. a. auch die

Möglichkeit wiederkehrende Zahlungen (quasi ein Dauerauftrag bei PayPal) zu

veranlassen, was beispielsweise bei Mietmodellen Sinn macht.

Und dann muss natürlich noch ein Preis festgelegt werden. Ob er als Bruttooder

Nettopreis zu verstehen ist, hängt davon ab, ob die Checkboxen „Mehrwertsteuer

aktivieren“ und „Mehrwertsteuer inklusive“ angekreuzt sind. Ist das

der Fall, dann können Sie im Bereich darunter erfahren, wie hoch der Mehrwertsteueranteil

in den einzelnen Ländern der EU ist.

296

Die nächste Seite „Affiliation“ überspringen wir, da wie für unser Produkt kein

Affiliate-Programm auflegen möchten.

Nach „Weiter“ gelangen wir auf die Seite „Design“. Hier werden einige Grunddesigns

für die Bezahlmasken angeboten, die man sich über die Schaltfläche

„Preview“ auch gleich einmal näher anschauen kann. Wir wählen im Folgenden

„3 Steps Checkout“ aus. Weiterhin geben wir noch explizit unsere in „Cheetah“

angelegte Verkaufsseite sowie die „Dankesseite“ (Downloadseite) an:

297

Jetzt folgt die Seite „E-Mail Kampagne“. Es ist dabei eine durchaus gute Idee,

den Käufer auch gleich in eine Mailingboss-Liste einzutragen. Dazu müssen Sie

natürlich zuvor in Mailingboss eine entsprechende Liste angelegt haben. Auch

können Sie dort weitere Eingabefelder definieren, die dann direkt in den SuperCheckout

übernommen werden. Weiterhin gibt es an dieser Stelle noch die

Möglichkeit, bestimmte E-Mails zu aktivieren bzw. Standards-E-Mails durch Eigene

zu ersetzen (einfach einmal ausprobieren):

298

Die nächste Seite „Eingeschränkte Bereiche“ werden wir ignorieren, denn er

macht nur Sinn, wenn wir in unserer Website einen Mitgliederbereich eingerichtet

haben, was hier aber nicht der Fall ist. Auch die Seite „Integrationen“

spielt für unserem Anwendungsfall keine Rolle. Aber die Nutzungsbedingungen

müssen wir selbstverständlich akzeptieren. Sobald das geschehen ist, kann das

neue digitale Produkt durch einen Klick auf die Schaltfläche „PRODUKT ERSTEL-

LEN“ in Builderall angelegt werden:

299

Und schon finden Sie unter „Meine Produkte“ ihr erstes digitales Produkt:

Über den Link „Bearbeiten“ auf der Produktkachel gelangen wir wieder zurück

in die Einstellungen und können dort jederzeit Änderungen vornehmen. Über

das Papierkorb-Symbol können wir das Produkt aber auch wieder löschen,

wenn wir es nicht mehr weiter vermarkten möchten. Wichtig für das weitere

Vorgehen ist jedoch die Schaltfläche „Links“:

Der Link „Sales Page“ führt direkt auf die von Ihnen in „Cheetah“ angelegte

Verkaufsseite. Diesen Link (eventuell mit einem URL-Shortener wie „bitly“ gekürzt)

können Sie direkt verteilen (z. B. in E-Mails oder in sozialen Netzwerken).

Der zweite Link führt zur „Dankesseite“, auf die der Käufer automatisch gelenkt

wird, sobald der Kaufvorgang abgeschlossen ist. Dort muss sich in unserem Fall

eine Schaltfläche (Button) befinden, über den der Kunde das eBook herunterladen

kann. Und der dritte Link ist besonders wichtig. Er führt nämlich auf den

SuperCheckout selbst. Diesen Link müssen Sie einer Schaltfläche „Produkt kaufen“

auf der „Sales Page“ zuweisen, denn ansonsten funktioniert die Sache

nicht. Sobald der Kunde darauf klickt, wird hier gemäß unserer Einstellungen

der Kaufvorgang angestoßen, bei dem der Kunde nacheinander folgende drei

Seiten sieht und in die er ggf. Eintragungen vornehmen muss:

300

Und das war es auch schon. Jetzt können Sie alle Abläufe im Detail durchtesten,

denn – da Sie sich im Testmodus befinden – werden zwar Zahlungen simuliert,

aber nicht real veranlasst. Und wenn alles OK ist, dann beenden Sie den Sandbox-Modus

und freuen sich auf die ersten Verkäufe…

301

SuperCheckout mit einem Mitgliederbereich verbinden

Man kann natürlich auch digitale Inhalte über einen Mitgliederbereich monetisieren.

Das ist so etwas wie eine kostenpflichtige Mitgliedschaft, die man entweder

durch eine Einmalzahlung oder einen monatlichen bzw. jährlichen Beitrag

erwerben kann und über die das Mitglied dann Zugriff auf exklusive Inhalte

erhält. Wie das Zusammenspiel zwischen Mitgliederbereich und SuperCheckout

funktioniert, soll das Thema dieses Abschnitts sein.

Ausgangspunkt ist wieder eine normale Website, die eine Homepage und gewöhnlich

noch ein paar weitere Seiten enthält. Auf der Homepage werden wir

den Kauf-Button sowie das LogIn für den noch zu erstellenden Mitgliederbereich

anordnen.

Weiterhin benötigen wir eine „Homepage“ für den Mitgliederbereich (der natürlich

genauso wie die Website selbst wieder aus einer größeren Zahl von

Webseiten bestehen kann), auf den dann das neue Mitglied gelangt, sobald er

302

sich regulär einloggt. Als Beispiel verwenden wir die Webseite eines „City Photo

Clubs“, bei dem man kostenpflichtig Mitglied werden kann.

Mitgliederbereich erstellen

In der Seitenansicht unserer Webseite erstellen wir jetzt als Erstes einen

„Memberbereich“ über die entsprechende Schaltfläche und nennen sie „City

Photo Club“:

303

Die Seite „Mitgliederbereich City Photo Club“ haben wir zuvor in „Cheetah“ erstellt.

Außerdem benötigen wir noch eine Dankeseite, auf die der Kunde nach

dem erfolgreich absolvierten Bezahlvorgang geleitet wird. Ansonsten besteht

die Website aus den Seiten „Photo Club“ (=Homepage), „Dienstleistungen“ und

„Über uns“.

Bei der Einrichtung des Mitgliederbereiches ist es wichtig, dass als Zugang „Zugang

manuell bzw. durch Zahlung (SuperCheckout) gewähren“ ausgewählt

wird. Die Authentifizierung soll über ein einfaches LogIn erfolgen. Außerdem

weisen wir dem Mitgliederbereich noch eine vorbereitete Mailingboss-Liste zu.

304

Produkt im SuperCheckout anlegen

Da es eine neue Webseite ist, müssen Sie als Erstes wieder die „Business Information“

- Seite ausfüllen. Anschließend starten Sie den Wizard, um ein neues

Produkt zu erstellen. Auf der Seite „Produktinfo“ vergeben Sie einen Produktnamen,

wählen die Sprache aus und fügen eine Produktbeschreibung hinzu. Art

des Produktes ist ein digitales Produkt der Kategorie „Services“. Auch sollten

Sie nicht vergessen, ein zum Thema passendes Bild hochzuladen.

Auf der nächsten Seite werden der Zahlungsdienstleister und der Preis festgelegt.

Er soll einmalig Netto 10,00 € betragen. Um die deutsche Umsatzsteuer

einzurechnen, fügen wir bei „Steuer gesamt“ noch deren prozentualen Anteil

hinzu:

In das Preisfeld wird dann der Netto-Betrag eingetragen. Brutto ergibt das einen

Preis von 11,90 €.

Die Seite „Affiliation“ kann wieder übergangen werden und auf der Seite „Design“

wählen wir wieder den „3 Steps Checkout“ aus. Wesentlich ist hier die

Auswahl der Startseite. Das ist die Seite, worauf sich die Schaltfläche für den

Erwerb der kostenpflichtige Mitgliedschaft befindet – in diesem Beispiel also

die Homepage „Photo Club“. Weiterhin müssen wir noch dem Feld darüber

(„Wähle Deine Dankeseite“) unsere in „Cheetah“ erstellte „Dankeseite“ zuweisen.

305

Die nächste Seite im Wizard betrifft die „E-Mail Kampagne“. Hier wählen wir

unsere vorbereitete Mailingboss-Liste aus und nutzen die Standard-Danke-

Mail.

Auf der folgenden Seite „Eingeschränkte Bereiche“ markieren wir nun unseren

Mitgliederbereich „City Photo Club Mitgliederbereich“ und wechseln mit „Weiter“

auf die vorletzte Seite „Integrationen“. Und auch hier gibt es für uns nichts

auszufüllen.

Nach der Bestätigung der Nutzerbedingungen ist unser neues Produkt fertig im

SuperCheckout angelegt und wird als neue Kachel unter „Meine Produkte“ angezeigt.

Über „Bearbeiten“ können wir ab jetzt wieder auf alle Einstellungsseiten

zugreifen und eventuell notwendig werdende Änderungen vornehmen.

Jetzt müssen wir uns die vom SuperCheckout generierten Links anschauen

(„Links“ auf der Produktkachel anklicken). Wir benötigen explizit die „Checkout

URL“, die wir mit einem Klick auf die rechts daneben angeordnete Schaltfläche

in die Windows-Zwischenablage kopieren. Nun müssen wir in „Cheetah“ zur

Homepage unserer Website wechseln und diesen Link der Schaltfläche „Mitgliedschaft

erwerben“ zuweisen, wobei wir als Ziel „In neuen Tab öffnen“ auswählen.

Sie können aber auch im Weiterleitungs-Dialog direkt zum Punkt „SuperCheckout“

wechseln und dort aus der Klappbox den Namen des Mitgliederbereichs

auswählen. Darunter werden dann gleich die wichtigsten Angaben

zum Bezahlplan angezeigt.

Als nächstes müssen wir noch die Schaltfläche „LogIn“ hinter das Hauptmenü

des Kopfbanners einfügen und konfigurieren. Und auch das ist schnell getan:

Link-Aktion –„LogIn“, Mitgliederbereich ankreuzen und Eingangsseite des Mitgliederbereichs

auswählen. Und natürlich Speichern nicht vergessen.

Wenn sich jetzt der Webseitenbesucher für eine Mitgliedschaft entscheidet,

dann wird er auf die Schaltfläche „Mitgliedschaft erwerben“ klicken und danach

den 3-stufigen Kaufprozess durchlaufen. Hier ist insbesondere Schritt 2

wichtig („Zahlungsmethode“), denn hier muss der Kunde Name und Anschrift

hinterlassen und selbst ein Passwort für den Mitgliederbereich festlegen. Denn

mit seiner E-Mail-Adresse und genau diesem Passwort wird er sich nach dem

306

abgeschlossenen Kaufprozess jederzeit in den Mitgliederbereich des „City Photo

Clubs“ einloggen können…

HINWEIS: Vergessen Sie nicht nach einem erfolgreichen Test des Checkouts

den Sandboxmodus wieder aufzuheben, damit potentielle Interessenten auch

wirklich „kaufen“ können…

SuperCheckout und Affiliates

Angenommen, Sie haben einen außergewöhnlichen Videokurs erstellt, den Sie

über das Internet verkaufen. Dann ist es eine gute Marketing-Idee, zu dessen

Vermarktung auch andere Online-Marketer zu animieren in dem Sie ihnen für

jede Vermittlung einen angemessenen Anteil (z. B. 50%) am Verkaufspreis als

Provision auszahlen. Diese Vorgehensweise kann sogar in mehreren Ebenen

sinnvoll sein, in dem ihre Affiliates wiederum Affiliates für ihr Produkt werben

und dabei prozentual auch an deren Verkäufen partizipieren. Dass solch ein

Verkaufsmodell sehr erfolgreich sein kann, zeigt übrigens Builderall selbst. Deshalb

ist es auch nicht wirklich verwunderlich, dass sich mit dem Builderall SuperCheckout

genau solche Verkaufsmodelle erstaunlich einfach realisieren lassen.

Um für ein Produkt ein Affiliate-Programm zu aktivieren, brauchen Sie erst

einmal nur unter „Produkt bearbeiten“ auf der Seite „Affiliation“ die entsprechende

Checkbox markieren. Dann wählen Sie die Webseite aus, auf der Sie Ihr

Affiliate-Programm im Einzelnen vorstellen und wo sich ein Interessent dafür

anmelden kann (s. u.). Des Weiteren benötigen Sie noch eine Mailingboss-Liste

307

für ihre Affiliate-Partner, die Sie aber zuvor natürlich mit allen benötigten Feldern

explizit anlegen müssen.

Unter „Ebenen konfigurieren“ legen Sie fest, wie viel Prozent vom Verkaufspreis

der Affiliate als Provision erhalten soll (maximal 90%), wenn er das Produkt

erfolgreich vermittelt. Wenn es für Sie Sinn macht, können Sie hier auch

noch weitere Ebenen einfügen, so dass der Affiliate einen monetären Anreiz

bekommt, weitere Interessenten zu werben, die auch das Produkt vermitteln.

TIPP: Bei digitalen Produkten ist eine Provision von 50% üblich, d. h. die eine

Hälfte vom Nettopreis geht an Sie als Autor des Produktes und die andere

Hälfte an den Vermittler.

Aber das ist natürlich noch nicht alles. Wir benötigen – wie bereits erwähnt –

noch eine separate Webseite, auf der das Affiliate-Programm verständlich und

werbewirksam vorgestellt wird und worauf sich eine spezielle Schaltfläche befinden

muss, über die sich der Interessent bei Ihnen bewerben kann. Hier wird

die „Affiliate Registrierungs-URL“ hinterlegt, die ihnen über „Link“ auf der Produktkachel

automatisch generiert wird und die den Interessenten auf eine Bewerbungsseite

wie diese hier weiter leiten soll:

308

WICHTIG: Beginnen Sie Ihre Affiliate-Verkaufswebsite erst dann aktiv zu bewerben,

nachdem Sie diese ausführlich getestet und als weitgehend fehlerfrei

und funktionstüchtig erkannt haben.

Sobald sich Affiliates beworben und vielleicht auch schon die ersten Verkäufe

getätigt haben, können Sie über die Funktionen der Kategorie „Affiliates“ im

linken Randmenü des SuperCheckouts bequem administriert werden:

Der SuperCheckout von Builderall wird kontinuierlich weiter entwickelt und

bietet auch jetzt schon mehr Funktionen an, als hier in dieser kurzen Einfüh-

309

rung beschrieben ist. Sie lassen sich aber leicht intuitiv erschließen (beispielsweise

das Thema „Rabattcodes“), sobald man sich näher mit diesem großartigen

Tool beschäftigt, für welches man bei anderen Anbietern u. U. sehr viel

Geld bezahlen muss.

310

Einen eigenen Blog erstellen

Blogs sind eine großartige Sache, wenn es darum geht, mit Gleichgesinnten ins

Gespräch zu kommen, sein Wissen mit anderen zu teilen sowie um Vertrauen

aufzubauen, wenn es darum geht, Marketing für sich und seine Produkte zu

betreiben. Technisch ist ein Blog nichts weiter als ein Online-Journal, das sich

einem bestimmten Thema widmet und das ständig mit neuen Inhalten gefüttert

wird. Am häufigsten werden Blogs von kommerziellen Anbietern in Form

eines „Software-as-a-Service“-Prinzips angeboten, wo man sich als Interessent

(„Webblogger“) anmelden kann und sich dann mit den Vorgaben und Möglichkeiten

des jeweiligen Anbieters (z. B. Blogger.com, Tumblr oder WordPress)

einen eigenen Blog aufbaut und betreibt.

Manchmal möchte man aber auch einen Blog auf seiner eigenen Domän betreiben

– beispielsweise als integraler Bestandteil einer Website. Und hier

kommt „Cheetah“ ins Spiel, denn der Editor erlaubt explizit die Erstellung von

Blogs sowie deren komfortable Gestaltung - und natürlich auch ihre Einbindung

in ihre eigenen Websites, zu deren integralen Bestandteil sie dann werden.

Welche Schritte dazu notwendig sind und was man dabei beachten muss, ist

das Thema der nun folgenden Ausführungen.

Wo finde ich die Blogfunktion in „Cheetah“?

Um die Blogfunktion nutzen zu können, müssen Sie zuvor eine neue Website im

Sitebuilder anlegen. Sobald das geschehen ist, finden Sie im linken Randmenü

den Eintrag „Blog“. Wenn Sie darauf klicken, gelangen Sie in dessen Administrationsbereich.

311

Er ist erst einmal leer, denn es existiert ja auch noch kein Blog, den man auf

irgendeine Art und Weise administrieren könnte. Man muss ihn natürlich erst

einmal anlegen. Und genau dazu gibt es in der Hauptmenüzeile die Schaltfläche

„+ NEW BLOG“.

Anlegen eines neuen Blogs und eines ersten Blogbeitrags

Sobald Sie auf die Schaltfläche „+NEW BLOG“ klicken, erscheint ein kleines Eingabefenster,

in welches Sie einen Namen für Ihren Blog sowie eine kurze Beschreibung

eingeben müssen. Wir wählen für unseren Beispielblog den Namen

„Wunder der Natur“, weil wir darin über Naturfotografie, Naturbeobachtung,

Umweltschutz und verwandte Themen bloggen möchten (in der Blogbeschreibung

vermerken). Weiterhin ist es angebracht, das Builderall-Logo durch einen

eigenen Thumbnail zu ersetzen. Sie müssen dazu ein zum Thema passendes

Bild über die Schaltfläche „Change Thumbnail“ in das Builderall Image Repository

hochladen und dann dort wie gewohnt auswählen.

312

Nach dem Speichern sehen Sie jetzt in der Blogübersicht eine neue Kachel für

den eben angelegten Blog. Ein Klick auf „Bearbeiten“ blendet ein neues linkes

Randmenü und darin sofort den Menüpunkt „Overview“ auf, welches aus folgenden

Kacheln besteht:

313

Hier können Sie jeweils die Gesamtzahl der Posts des Blogs, die Anzahl geplanter

Posts sowie der Posts, die erst nach einer gewissen Zeit veröffentlicht werden

sollen und noch einiges mehr einsehen (beispielsweise wie vielen

„Cheetah“ Websites der Blog zugeordnet ist und wie viele Autoren sich an dem

Blog beteiligen).

Der nächste Menüpunkt der linken Randleiste betrifft sogenannte „Kategorien“.

Das sind Stichpunkte, mit denen man einen Blogpost genauer charakterisieren

kann. In unserem Fall könnten dass Themen wie „Makrofoto“, „Landschaft“,

„Wissenswertes“, „Umweltschutz“ etc. sein. Um diese Kategorien dem

Blog bekanntzumachen, müssen Sie auf die Schaltfläche „+NEW CATEGORY“

klicken und den Bezeichner in das Eingabefenster eintragen.

Der Kategorienname wird später auch Bestandteil („Slug“) der URL des Blogbeitrages

und ist deshalb SEO-relevant.

Der nächste Menüpunkt erlaubt es verschiedene Autoren dem Blog hinzuzufügen.

Hier müssen Sie zumindest sich selbst als Autor eintragen. Sie können aber

auch bestimmte Kollegen und Freunde die Möglichkeit eröffnen, Posts in diesem

Blog abzusetzen…

In den Bereich „About“ tragen Sie Name und E-Mail-Adresse des ausgewählten

Autors ein. Wenn Sie möchten, können Sie auch noch etwas über diese Person

schreiben und ein Avatar-Bildchen hochladen. Außerdem haben Sie im Bereich

„Social media“ die Möglichkeit, Links zu allen sozialen Netzwerken, denen der

Autor beigetreten ist, einzutragen.

314

HINWEIS: Um einen weiteren Autor dem Blog hinzuzufügen, klicken Sie einfach

die Schaltfläche „+NEW AUTHOR“ und wiederholen das Spiel. Über das

3-Punkte Menü der Kachel können Sie später die Angaben editieren oder aber

auch den entsprechenden Autor aus dem Blog löschen.

In der Autorenübersicht sehen Sie übrigens auch, wie viele Artikel die einzelnen

Autoren im Blog veröffentlicht haben.

Den nächsten Punkt „Post template“ übergehen wir erst einmal und wenden

uns direkt dem Eintrag eines ersten eigenen Postings zu. Dazu legen wir unter

„Posts“ mit „+NEW POST“ einen neuen Blogartikel an. Es öffnet sich ein spezieller

Texteditor mit einem rechten Randmenü. Er ist zwar etwas schlicht gehalten,

besitzt aber trotzdem alle Funktionen, die man für das Schreiben und Gestalten

eines Blogbeitrages braucht: Einfügen von Text, Bilder, Videos sowie

von Web-Links; Verwendung verschiedener Fonts, Schriftgrößen und Schriftattribute;

voreingestellte Header-Formatierungen, Aufzählungen etc. pp. Ein

eingefügtes Bild oder Video kann stufenlos in der Größe verändert und in der

Position verschoben werden. Für die Ausrichtung werden spezielle Schaltflächen

am oberen Bildrand angeboten, sobald das Bild im Editor fokussiert ist

(ausprobieren!).

Den Blogtitel geben Sie in das entsprechende Feld im rechten Randmenü ein.

Dort können Sie auch ein Thumbnail für den Blogbeitrag wählen, eine oder

mehrere Kategorien festlegen sowie den Autor zuweisen - und natürlich wann

der Blogbeitrag gepostet werden soll (standardmäßig „sofort“ = „instantaneous“).

Wenn Sie möchten, können Sie noch auf die URL des Beitrags Einfluss

nehmen und ein vordefiniertes Template auf den Blogbeitrag anwenden (na-

315

türlich müssen Sie zuvor ein entsprechendes Template unter „Post template“

angelegt haben).

WICHTIG: Die URL enthält den Titel des Blogbeitrags. Sollte dieser Umlaute

enthalten, dann müssen Sie die automatisch erzeugte URL editieren, d. h. die

Umlaute daraus entfernen oder substituieren (z. B. aus „ä“ „ae“ machen. Sie

können natürlich auch den automatisch generierten Text durch einen eigenen

ersetzen.

Sind alle Eintragungen OK, dann kann der Beitrag über die Schaltfläche „Save“

gespeichert werden. Wenn Sie zuvor den Regler „Draft“ (=“Entwurf“,) noch auf

„off“ gestellt haben (Standardeinstellung), dann wird er auf der Blogseite auch

gleich veröffentlicht. Die „Overview“ – Seite des Blogs sieht nun so aus:

316

Aber es gibt noch ein paar weitere Menüpunkte im linken Randmenü des Blogs:

„Dripping Timeline“ – zeigt die Zeitleiste der Posts an

„Edit Blog“ – hier können Sie Name, Beschreibung und das Thumbnail des

Blogs ändern

„Settings“ – hier können einige Einstellungen – auch SEO-relevante – vorgenommen

werden

„Import Blog“ – dieser Menüpunkt ist nur für diejenigen von Interesse, die

in der Vergangenheit einen Blog mit dem Builderall „PixelPerfect“ Sitebuilder

erstellt haben und ihn nun nach „Cheetah“ übernehmen möchten

„Connect“ – hiermit erfolgt die Verbindung des Blogs mit einer bestimmten

in „Cheetah“ angelegten Website.

„Connect“ - Blog mit Website verbinden

Wenn Sie den Menüpunkt „Connect“ anklicken, werden Ihnen auf der rechten

Seite alle im „Cheetah“ Editor z. Z. verfügbaren Websites angezeigt. Hier können

Sie jetzt explizit die Website auswählen (in unserem Beispiel „Naturwunder“),

die Sie mit dem eben angelegten Blog verbinden möchten. Dazu klicken

Sie auf der entsprechenden Website-Kachel die Schaltfläche „Connect“ an.

HINWEIS: Hierbei wird Ihnen die Auswahl eines Templates angeboten. Wir

wählen hier „als Anfänger“ das vordefinierte (und nicht das Leere) Template

aus.

317

Die Website-Kachel ist jetzt im Bereich „Connected Websites“ der Ansicht (also

oben) zu finden.

Nun müssen Sie wieder in die Website-Ansicht des „Cheetah“-Editors wechseln

und dort (in unserem Beispiel) die Website „Naturwunder“ öffnen. Wie Sie sehen,

wurden jetzt automatisch Ihrer Website zwei neue, mit „Blog“ gekennzeichnete

Seiten hinzugefügt. Die beiden Seiten finden Sie (analog zu „Mitgliederbereiche“)

auch noch einmal im Bereich „Blog Pages“ gelistet:

Die eine Seite nennt man den „Blog-Feed“ und die andere Seite der „Blog-

Post“. Der „Feed“ ist quasi die Überblicksseite des Blogs. Hier werden später

kurz alle Blogbeiträge in ihrer zeitlichen Reihenfolge aufgelistet. Die „Detailansicht“

eines Blogbeitrags stellt dann der „Blog-Post“ dar.

Beide Seiten (die aufgrund dessen, dass wir beim „Konnekten“ ein Template

ausgewählt haben, nicht leer sind) müssen wir nun noch designmäßig und funk-

318

tionell unseren Vorstellungen anpassen. „Cheetah“ stellt dafür eine Anzahl spezieller

Elemente zur Verfügung, die auch explizit aus der Elementeauswahl in

den Editor gezogen werden können.

HINWEIS: Bevor Sie beginnen, die Blog-Webseiten zu designen, sollten Sie zu

Testzwecken noch zwei weitere Blogbeiträge verfassen.

Feed-Page gestalten

Diese Seite dient dazu, Ihre Posts in einer Art „Vorschau“ darzustellen. Der Vorschaubereich

enthält dabei immer eine Schaltfläche „Mehr Lesen…“ („Read

More“), die dann zur ausführlichen Ansicht („Post-Page“) verzweigt. Enthält das

Posting ein Thumbnail, dann führt auch ein Klick darauf auf die damit verlinkte

Post-Page.

Wenn Sie – wie in diesem Beispiel – die Standardvorlage für den Feed verwenden,

dann enthält die Webseite zwei spezifische Blogelemente: Oben ein Element

vom Typ „Blog News Slider“ und darunter ein Band mit einem „Posts“-

Element. Diese Elemente können Sie wie gewohnt nach eigenen Vorstellungen

anpassen, löschen oder (aus der Elementeauswahl – Kategorie „Blog General“

bzw. „Blog FeedNews“) durch andere austauschen.

TIPP: Machen Sie sich erst einmal mit den vielen Einstellmöglichkeiten dieser

beiden Elemente mit Schwerpunkt auf das Post-Element vertraut.

Blogs news slider

Um dieses Element zu konfigurieren, klicken Sie in dessen Kopfmenü auf das

Zahnradsymbol („blog-news-settings“). In dem daraufhin aufgeblendeten Dialogfenster

können Sie nun u. a. festlegen, wie viele News der Slider aufnehmen

soll und ob zusätzlich zum Thumbnail auch noch der Titel des Posts bzw. ein

Teil der Beschreibung angezeigt werden soll oder eher nicht. Wenn Sie „Redirect

Post“ einschalten, dann führt ein Mausklick auf ein Sliderbild dazu, dass

sofort der dazugehörige Artikel in der Post-Ansicht aufgeblendet wird.

319

Posts

Auch dieses Element besitzt in seinem Kopfmenü ein Zahnradsymbol. Hier können

Sie u. a. über die Klappbox „Theme“ eine spezielle Designvariante des

Feeds auswählen. Weiterhin legen Sie hier fest, wie viele News aufgelistet werden

sollen, welche Displayelemente anzuzeigen sind sowie das Datumsformat

und der Text der Schaltfläche. Die eigentliche Gestaltung erfolgt dann über die

vielen Eigenschaften des Elements selbst (Randmenü oder rechte Maustaste).

Weiterhin können Sie – beispielsweise unter dem Slider – noch eine Suchfunktion

einbauen (Volltextsuche). Sie finden solch ein spezielles Element in der

Elemente-Kategorie „Blog General“. Wird später in dieses Suchfeld ein Suchbegriff

oder eine Phrase eingetragen, dann werden anschließend im Feed alle

Postings, die irgendwo im Text diesen Suchbegriff oder Phrase enthalten, aufgelistet.

320

Genauso macht es Sinn, den Blog mit einem RSS Feed auszustatten (Elemente-

Kategorie „Blog General“). Einfach das Element auf der Webseite (z. B. dem

Header) positionieren, eventuell Größe und Erscheinungsbild (Eigenschaft

„Theme“) anpassen – und das war es schon.

Manchmal möchte man am Ende des Blogfensters ganz bestimmte Feeds aufblenden

– z. B. solche, die am häufigsten angeschaut wurden. Dazu gibt es

Post-Elemente, die in der Elemente-Kategorie „Blog Groups“ zur Auswahl angeboten

werden. Sie unterscheiden sich von einem gewöhnlichen Feed-Post-

Element durch spezielle Themenfilter, die über das Kopfmenü (Zahnradsymbol)

zugänglich sind.

Post-Page gestalten

Wenn man im Blog-Feed auf ein Thumbnail oder die Schaltfläche „Mehr Lesen“

klickt, wird man zur Vollansicht des Blogbeitrages geführt. Auch diese Seite

können Sie selbstverständlich frei gestalten. Sie enthält als wesentlichstes Element

ein Post-Element aus der Elemente-Kategorie „Blog Post“. Es wird im Editor

in nativer Form angezeigt. Wenn Sie es mit dem eigenen Inhalt sehen

möchten, müssen Sie die Website kompilieren, dann die Website aufrufen und

über den Blog-Feed einen Artikel auswählen.

Natürlich bietet auch dieses Element eine Vielzahl von Einstellmöglichkeiten.

Das beginnt mit dem Zahnradsymbol in dessen Kopfmenü, über das Sie in einen

Dialog gelangen, in dem Sie explizit festlegen können, was alles auf der Post-

Page angezeigt werden soll:

321

Die konkrete Gestaltung (Farben Titel-Stil etc. pp.) nehmen Sie dann auf die

gewohnte Art und Weise über die Eigenschaften des Objekts vor.

Weiterhin müssen Sie auf die Seite noch eine Schaltfläche (Button) anordnen

die es erlaubt, wieder auf die Feed-Page zurückzukehren.

TIPP: Wenn Sie die Breite des Elements verringern, können Sie den freiwerdenden

Randbereich (meist rechts) nutzen, um dort beispielsweise explizit

Werbung zu platzieren.

322

Zusammenfassung Blog

Wie alle Tools in Builderall befindet sich auch das Blog-Tool in ständiger Weiterentwicklung.

Genaugenommen beruht die hier gegebene Anleitung auf der

erste freigegebene MVP – Version („MVP“ = „Minimum Viable Product“). Sie ist

schon so gut und so stabil, dass man damit unbesehen einen eigenen Blog aufbauen

und betreiben kann, der im Übrigen vom Aufwand her bedeutend

schneller und auch komfortabler aufgesetzt ist als beispielsweise ein klassischer

WordPress-Blog. In naher Zukunft ist eine ganze Anzahl von Erweiterungen geplant,

die sich dann u. a. in der Elementepalette von „Cheetah“ niederschlagen

werden. Schon allein wegen der Blog-Funktionalität lohnt es sich, den

„Cheetah“ Sitebuilder einmal näher anzusehen…

323

Mit „Cheetah“ lukrative Sales Funnel

bauen und betreiben

Viele Websites sind nicht in erster Linie für Präsentationsaufgaben ausgelegt,

sondern dienen direkt kommerziellen Zwecken, d. h. der Lead-Gewinnung und

dem Verkauf von Produkten und Dienstleistungen. Sie folgen also einem vorgegebenen

Zweck und leiten über verschiedene Teilschritte potentielle Kunden zu

einem erfolgreichen Abschluss. Da mit jedem Schritt die Anzahl der potentiellen

Kunden abnimmt (weil sie abspringen) bis am Ende nur noch die „Käufer“

übrig bleiben, spricht man im B2B-Bereich von einem sogenannten „Verkaufstrichter“

(„sales funnel“). In dem man seine Website als einen derartigen „sales

funnel“ gestaltet, kann man mit ihr die Leadgewinnung bis hin zum Verkauf von

Produkten und Dienstleistungen quasi automatisieren.

Ein Sales-Funnel funktioniert derart, dass nach jedem Schritt mehr potenzielle

Kunden wegfallen, die kein Interesse oder kein Budget für ein Angebot haben.

Am Ende sind dann nur noch die Kunden vorhanden, für die sich abgeschlossene

Aufträge oder verkaufte Produkte verzeichnen lassen.

Ein typischer Sales Funnel besteht aus fünf Abschnitten, die jeweils ihre eigene

Funktion erfüllen:

1. Zielgruppe definieren, Aufmerksamkeit wecken

In der Regel ist man bei Verkaufsseiten auf bezahlten Traffic angewiesen, wenn

man nicht extrem viel Aufwand in entsprechende SEO-Maßnahmen stecken

möchte (die dazu auch nur mittel- bis langfristige Wirkung entfalten). Hier ist

die richtige Auswahl der Zielgruppe und wie man sie konkret anspricht (z. B.

Anzeigengestaltung bei Facebook-Ads oder Pinterest) von essentieller Wichtigkeit.

Das Ziel einer solchen Traffic-Kampagne muss es sein, mit vertretbarem

finanziellem Aufwand so viele Mitglieder der ausgewählten Zielgruppe zu gewinnen,

die auch wirklich auf den Link zur Produkt-Landingpage (siehe Schritt

2) klicken.

324

2. Interesse wecken, Adressdaten erfragen

Das ist die Aufgabe einer speziellen „Landingpage“, die einen sogenannten

„Leadmagneten“ enthalten sollte. Darunter versteht man i. d. R. ein kostenloses

digitales Produkt in Form einer Checkliste, eines eBooks, einer Probelektion

(Videokurs) etc., die der Interessent im Austausch gegen seine E-Mail-Adresse

nach dem Double OptIn – Verfahren erhält.

3. Erstkontakt

Sind die Interessenten erst einmal ausgesiebt und liegen beispielsweise in Form

einer E-Mail-Liste vor, dann kann man diese Liste für eine Erstansprache nutzen,

d. h. hier kommt das E-Mail-Marketing zum Zuge. Eine entsprechende Präsentation

der Angebote ist hier von Vorteil, denn bei diesem Schritt fallen

nochmals Kunden weg, die keinen Nutzen für sich in den Produkten / Dienstleistungen

sehen.

4. Angebotsunterbreitung

In diesem Abschnitt des Sales-Funnels geht es um die wirklichen Angebote, die

man seinen gewonnenen Kunden macht. Hier können verschiedene Verkaufsstrategien

zum Einsatz kommen. Kunden für die die Angebote nicht passend

sind, fallen in diesem Schritt aus dem Verkaufsanbahnungsprozess heraus.

5. Auftrag, Zusammenarbeit

Im Letzten Schritt kommt es schließlich zum Verkauf der Produkte bzw. Dienstleistungen.

Durch die 5 Schritte des Sales-Funnels hat man nun die passenden Kunden selektiert

und kann nun davon profitieren. Durch regelmäßige, rechtlich einwandfreie

Kontaktierungen lässt sich nun die Kooperation ausbauen sowie Folgeaufträge

generieren.

Im Detail werden sich natürlich in Form von Websites gestaltete Sales Funnel je

nach Zweck und Komplexität voneinander unterscheiden. Deshalb ist es unumgänglich,

dass man derartige Funnel erst einmal plant bevor man an deren konkrete

Realisierung geht.

325

Ein einfacher Leadmagnet-Funnel

Es ist immer besser, die Kunden kommen zu uns als das wir Kunden mühselig

suchen müssen. Im Zeitalter des Internets erreicht man das mit möglichst unwiderstehlichen

Lockangeboten, sogenannten „Lead Magneten“. Das sind

i. d. R. digitale Produkte, die für den potentiellen Kunden ein oder mehrere Probleme

lösen, und für die er gerne seine E-Mail-Adresse preisgibt, um in ihren

Genuss zu kommen. Dieses Produkt muss dabei so ausgelegt sein, dass es einmal

ihre Zielgruppe anspricht und es etwas Besonderes bietet, was sonst für lau

nirgends zu bekommen ist. Potenzielle Neukunden wollen einen echten Mehrwert

haben und Problemlösungen sehen, die auch zu echten. nachvollziehbaren

Lösungen führen. Kurz gesagt, erfolgreiche Lead Magneten lösen die Probleme

ihrer Zielgruppe. Ein „perfekter Leadmagnet“ ist also etwas, mit dem ihre

Kunden etwas im praktischen Alltag anfangen können. In unserem Fall können

das Checklisten, Handlungsanleitungen in Form von eBooks, Lehrvideos, eine

spezielle App oder eine spezielle Powerpoint-Präsentation sein. Aber denken

Sie daran – es kommt immer auf den Inhalt an! Ist der potentielle Kunde vom

Inhalt enttäuscht, dann können Sie ihn meistens auch als zukünftigen Abnehmer

ihrer weiteren Produkte vergessen…

In einem Lead-Magnet-Funnel stellt der Lead Magnet die erste Stufe dar:

326

Dort muss sich der Interessent in einem Formular ein paar Daten hinterlassen

(Name und E-Mail-Adresse sollten reichen – mehr ist eher kontraproduktiv),

damit er den Lead Magneten (beispielsweise ein kostenloses eBook) herunterladen

kann. Technisch ist in unserem Fall das Formular mit dem E-Mail Autoresponder

Mailingboss verbunden, der die Formulardaten speichert und an den

Adressaten eine Bestätigungsmail sendet. Bestätigt der Interessent diese Mail,

dann erhält er einen Freigabelink auf die Downloadpage (oder wird sofort darauf

geleitet). Dort kann er jetzt das digitale Produkt downloaden und Sie haben

ganz regulär und rechtskonform (da Double OptIn) seine Mailadresse, die

Sie nun für Mailingaktionen nutzen können.

TIPP: Sie können natürlich nach dem erfolgreichen Download den Interessenten

sofort auf eine Verkaufsseite weiterleiten, wo Sie ihm ein weiteres, aber

jetzt nicht mehr kostenloses Angebot mit gewissen Vorteilen (Rabatt) machen.

Wie Sie sicherlich schon vermuten, ist der Aufbau eines solchen Funnels in

„Cheetah“ schnell geschehen. Wir brauchen dazu nur vier Seiten: Eine Landingpage,

eine Hinweisseite für die Bestätigungsmail, eine Dankes- bzw. Downloadseite

und eine Seite für das obligatorische Impressum mit Datenschutzerklärung.

Nachdem wir diese vier Webseiten angelegt haben, müssen wir sie natürlich

noch designen und funktionell verbinden. Am einfachsten ist es dabei, dafür die

vorgefertigten Bannervorlagen zu verwenden.

Für die Startseite = Landingpage bietet sich dafür ein passender Banner aus der

Kategorie „Lead Magnet Page“ geradezu an. Welche Vorlage Sie hier auch wählen,

es kommt dabei auf das Element „Mailingboss Formular“ an, welches Sie

mit einer Mailingboss-Liste verbinden müssen. Dazu dient der Dialog, der sich

hinter dem Zahnradsymbol in dessen Kopfmenü verbirgt.

HINWEIS: Wenn Sie kein Banner-Template verwenden, dann finden Sie eine

Auswahl von Mailingboss-Formularelementen unter „Neu“ – „Elemente“ – „E-

Mail Marketing Formular“. Beachten Sie dabei, dass Sie die Felder, die solch

327

ein Formular enthält, explizit mit der verwendeten Liste in Mailingboss anlegen

müssen.

Als nächstes müssen Sie die Weiterleitung konfigurieren, d. h. festlegen, auf

welche Seite der potentielle Kunde umgeleitet werden soll, wenn er die Registrierung

erfolgreich durchlaufen hat. In unserem Fall ist das für die Aktion

„Nach Eintragung“ die Hinweisseite und „Nach Bestätigung“ die Dankes- bzw.

Downloadseite. Sie gelangen in das Einstellungsfenster über das Link-Symbol

im Kopf-Menü des Mailingboss-Formulars.

Natürlich müssen wir jetzt auch noch die Hinweisseite und die Dankes- bzw.

Downloadseite individuell gestalten. Auch hier bietet sich für das „rapid design“

wieder eine Bannervorlage an, nur hier aus der Kategorie „Confirm Email Page“

und „Download Page“ bzw. „Thank You Page“. Hier müssen Sie dann die entsprechende

Schaltfläche mit dem Produkt (z. B. eBook oder App-Datei), welches

Sie zuvor beispielsweise in das Builderall Repository hochgeladen haben,

verlinken.

Nachdem Sie alle Seiten designmäßig ihren Vorstellungen gemäß gestaltet bzw.

angepasst haben, können Sie schon an das Testen gehen. Wenn alle Links richtig

eingestellt sind, sollte er auf Anhieb positiv verlaufen.

Und das war es auch schon. Sie haben Ihren ersten „Lead Magnet Funnel“ mit

„Cheetah“ aufgesetzt! Auf der Grundlage dieser Website können Sie natürlich

ohne großen Aufwand später weitere Funnel bauen und damit weitere Leads

einsammeln.

Sales Funnel für viele Zwecke

Der eben besprochene „Lead Magnet Funnel“ ist ein betont einfacher Funnel.

Er ist kompakt und geradlinig und erfüllt ideal seinen Zweck. Andere Zwecke

erfordern andere Funnel, die dann auch der Aufgabenstellung entsprechend

komplexer aufgebaut sein können oder müssen. So spricht man in Insider-

Kreisen von „Bridge Funnel“, „Video Sales Letter Funnel“, „Product Launch

Funnel“, „Split Testing Funnel“ etc. pp. Folgendes Ablaufdiagramm zeigt bei-

328

spielsweise einen „Product Launch Funnel“, mit dem ein neues Produkt in den

Markt eingeführt und verkauft werden soll.

Alle Funnel benötigen, damit sie wie geplant funktionieren, einen Input – d. h.

konkret „Traffic“. Dabei unterscheidet man „organischen Traffic“ und „bezahlten

Traffic“ („Paid Traffic“). Der „organische Traffic“ ist dabei der Traffic, der in

erster Linie über Suchmaschinen generiert wird. Der Erfolg hängt hier entscheidend

davon ab, welche Keywords man wählt (Stichwort „Suchvolumen“, „Konkurrenz“)

und wie in punkto SEO der Funnel aufgestellt ist. Gewöhnlich ist es

schwierig – und noch dazu in kurzer Zeit – einen Funnel soweit SEO zu optimieren,

dass er organisch profitabel wird. Es bleibt also am Ende oftmals nichts

weiter übrig, als Traffic einzukaufen. Und dafür gibt es verschiedene Möglichkeiten,

die hier nur kurz aufgezählt werden sollen:

Google AdWords

Facebook Ads

Outbrain Amplify

Twitter Ads

Instagram Ads

Pinterest Ads

LinkedIn Ads

XING Ads

329

Und es gibt natürlich noch eine Vielzahl weitere Anbieter, die versprechen, gegen

Geld an deren Popularität teilzuhaben (beispielsweise über bezahlte Bannerwerbung).

Wichtig ist, wenn man bezahlten Traffic nutzen will, dafür eine Strategie zu

entwickeln. Ansonsten ist die Wahrscheinlichkeit hoch, dass man zwar viel Geld

ausgibt, aber das Ergebnis im Vergleich dazu bescheiden bleibt. Denn gerade

beim Schalten von Anzeigen in sozialen Netzwerken kann man viel falsch machen.

TIPP: Es ist nicht Thema dieses Buches zu erklären, wie man im Internet Werbeanzeigen

schaltet. Nutzen Sie dafür spezielle Video-Kurse oder Schritt-für-

Schritt-Anleitungen, die Ihnen die entsprechende Vorgehensweise im Detail

erklären. Gerade wenn man Newcomer ist, zahlt sich deren Preis schnell aus,

denn sie helfen teure Anfängerfehler zu vermeiden.

Hier ein paar Kurse bzw. Anleitungen, die sich bewährt haben:

Fundamentkurs: Die 7 Prinzipien für erfolgreiche Online-Werbung

Sonderworkshop: YouTube Marketing

Facebook Ads Anleitung 2.0

Facebook-Marketing Mini-Kurs

Premium Komplettkurs Internetmarketing 2.0

…

In diesem Zusammenhang sei auch noch auf die vielen Tools hingewiesen, die

Builderall in seinen bezahlten Plänen zur Verfügung stellt. In Bezug auf „Leadmagneten“

sei hier nur auf folgende Apps hingewiesen:

Mockup Design Studio für geniale Mockups, z. B. für eBook-Cover und andere

Dokumente…

Digital Magazine Builder für die Erstellung hochwertiger pdf-Magazine

Webinar Builder

330

eLearning Modul zum Erstellen von speziellen Lernkursen

Video Hosting, um eigene Werbevideos (zu deren Bearbeitung Builderall

weitere Tools zur Verfügung stellt) unabhängig von Youtube oder Vimeo zu

hosten und mit einem auf „Cheetah“ abgestimmten Videoplayer auf einer

Landingpage abzuspielen

Dazu kommen noch verschiedene Boots und natürlich der Social Media Planner,

mit dessen Hilfe man z. B. Facebook-Postings im Voraus planen und erstellen

kann und die dann am festgelegten Zeitpunkt automatisch ausgeliefert

werden. Auch die Verwendung von SMS zu Werbezwecken wird von Builderall

durch eine eigene App vorbildlich unterstützt.

HINWEIS: Zum Zeitpunkt der Abfassung dieses Manuskript war der in Builderall

für den „PixelPerfect“ Sitebuilder entwickelte Funnel-Builder noch

nicht für „Cheetah“ verfügbar. Er soll aber demnächst (wenn nicht bereits geschehen)

integraler Bestandteil von „Cheetah“ werden. Damit lassen sich

dann beliebige Sales Funnel quasi interaktiv im Handumdrehen aufsetzen –

eine Funktionalität, die z. Z. kein anderer Sitebuilder beherrscht.

331

Was bieten die bezahlten Builderall-Pläne

an Tools und Funktionen?

Was jetzt folgt, kann nur eine Aufzählung sein. Wenn Sie ernsthaft mit dem

Gedanken spielen, über das Internet mit der Herstellung und Vertrieb von digitalen

Produkten Geld zu verdienen oder als Affiliate über die Produktvermittlung

Provisionen zu erwirtschaften, dann sollten Sie je nach Ambitionen einen

der bezahlten Pläne in Erwägung ziehen. Was Sie für einen vergleichsweise

niedrigen Abo-Preis erhalten (den Sie übrigens durch Werbung weiterer Builderall-Abonnenten

bis auf null drücken können), ist einfach enorm. Einige Tools

wurden bereits angesprochen wie beispielsweise das Mockup-Studio, das On-

Page SEO Tool und der Magazineditor. Und das sind nur drei von mittlerweile

über Dreißig, die das Premium-Paket und diverse Bonuspakete beinhalten.

Also hier eine kurze und bei weitem unvollständige Aufzählung

Builderall Webinar Builder

Erstellen Sie interaktive Webinare mit Streaming-Optionen, Bildschirmfreigabe,

Webinar-Aufzeichnung und vieles mehr. Organisieren Sie Live-Streams auf Facebook

und Youtube mit dem genialen Webinar-Builder von Builderall!

332

Schwebende Videos

Wie wäre es, wenn Sie Ihre Webseitenbesucher mit einer Animation, die mit

der exklusiven Floating Video – Technologie von Builderall erstellt wurde, überraschen?

Es dauert wirklich nur Minuten, um ein „Floating Video“ zu erzeugen

– und zwar ohne teures professionelles Equipment…

Animated VSL Video Builder

Auch ein Video-Editor zur Erstellung animierter Videos ist Bestandteil der Builderall-Plattform,

der dabei hilft, tolle Videos zu Marketingzwecken zu erstellen.

Damit können Sie eigene Avatare erzeugen, die beispielsweise die Besucher

Ihrer Website persönlich begrüßen oder die Sie zu Werbezwecken in sozialen

Netzwerken einsetzen können. Eine Vielzahl von Templates erleichtert den Einstieg

in dieses in mehrfacher Hinsicht interessante Tool.

Professioneller Messenger Chatbot

Automatisieren Sie Ihre Kommunikation mit potenziellen Kunden, Geschäftspartnern

und Interessenten über den Builderall Messenger-Chatbot!

Instagram Autoresponder

Der Builderall Instagram Autoresponder ist ein spezielles Automatisierungstool,

mit dessen Hilfe Sie Instagram-Follower für ihre Social-Media-Posts gewinnen

können. Und lassen Sie nie wieder ihre Follower auf eine Antwort von ihnen

warten!

Video Wrapper

Reichern Sie Ihre Videos explizit mit Texten und Bildern an. Mittels des in Builderall

integrierten Video-Wrappers können Sie erstaunliche und Aufmerksamkeit

erregende Videos innerhalb weniger Minuten erstellen.

333

Social Proof

Mit dem Social Proof-Tool können Sie als Webseiteneigner elegant Konversionsraten

erhöhen, spezielle Angebote hervorheben, dem Webseitenbetrachter

ihre kürzlich gekauften Produkte anzeigen sowie Konsumenten ihrer Webseite

verfolgen.

Telegram

Nutzen Sie das Builderall Telegramm-Messaging, indem Sie vollautomatisiert

Nachrichten und Bots erstellen, um ihre Produkte und Dienstleistungen zu

promoten.

Skriptgenerator

Das Skriptgenerator-Tool hilft ihnen dabei, noch mehr Leads für eine effektive

Konvertierung durch packende Werbebotschaften einzusammeln. Wenn Sie

jemals Probleme mit dem Verfassen von Werbetexten hatten, dann sollten Sie

sich diesen Skriptgenerator einmal näher anschauen.

eLearning Platform

Mit der in der Builderall-Plattform integrierten E-Learning App können Sie eine

komplette virtuelle Lernplattform in ihre Website einbinden. Sie bietet alle

Funktionen, die man zum Aufbau von aus mehreren Lektionen bestehenden

Lehrgängen / Vorlesungen benötigt. Diese wiederum können aus HTML-Texten,

pdf-Dokumenten oder auch aus Videosequenzen bestehen. Das Einbetten der

Lernplattform in eine „Cheetah“ Website ist problemlos möglich.

Builderall Photo Studio

Erstellen Sie wunderschöne Fotos, Logos und Grafiken für soziale Medien,

Webseiten und Werbefunnels. Builderall Photo Studio ist eine betont einfache,

aber durchaus leistungsstarke Bildbearbeitungs- und Grafikdesignsoftware, die

Funktionen enthält, die man sonst nur selten findet.

334

Post Planner

Mit diesem leistungsstarken Tool können Freelancer, Online-Marketer und alle

Unternehmer, die in sozialen Netzwerken unterwegs sind, viel Zeit sparen, indem

sie ihre diesbezüglichen Aktivitäten im Voraus planen. Der Post Planner ist

das ideale Werkzeug dafür.

Customer Relationship Management (CRM)

Builderall beinhaltet ein integriertes CRM-System, mit dessen Hilfe Sie alle ihre

Geschäftsdaten an einem Ort zentral verwalten und einsehen können. Dieses

System ist in stetiger Weiterentwicklung begriffen und ist bzw. wird mit vielen

der anderen Tools von Builderall verzahnt werden.

Marketplace

Builderall betreibt einen international tätigen eigenen Marktplatz, auf dem

Tausende von Unternehmern ihre digitalen Produkte verkaufen. Auch Sie können

das! Auf jeden Fall lohnt es sich einmal einen Blick darauf zu werfen. Vielleicht

ist dort sogar das eine oder andere Produkt zu finden, welches für Sie

interessant ist.

E-Commerce – Lösung von Magento

Mit „Builderall eCommerce von Magento“ können Sie Ihre Website bzw.

Webshop direkt auf einem der leistungsstärksten digitalen Marketingplattformen

der Welt aufbauen und auf diese Weise aktiv und erfolgreich eCommerce

betreiben.

Builderall Directory Builder

Mit diesem genialen Tool lassen sich innerhalb kürzester Zeit Online-

Verzeichnisse mit Hunderten und Tausenden von Seiten erstellen. Das können

lokale Firmen- oder Behördenverzeichnisse sein, das können Verzeichnisse von

Herstellern und Vertreibern bestimmter Produkte und Dienstleistungen sein –

und vieles mehr. In dem Sie solche Verzeichnisse aufbauen, können Sie ihre

Website ganz schnell zu einem wahren Traffic-Magneten machen.

335

Video Tag Tool

Mittels Videotags lassen sich Werbevideos spezielle „Aktionen“ hinzufügen um

deren Betrachter zu veranlassen, einen Telefonanruf zu tätigen, ihnen eine E-

Mail zu senden oder – was wohl die häufigste Anwendungsart sein wird – ihre

Website zu besuchen. Auf diese Weise können Sie selbsterstellte Videos effektiv

zur Kontaktanbahnung verwenden, was ohne Videotags nicht so einfach

möglich wäre.

Share Locker

Mit dem Builderall Share Locker lässt sich die Verbreitung von Inhalte auf Webseiten

pushen. Das Prinzip ist betont einfach: Sie erstellen beispielsweise einen

außergewöhnlichen Blogartikel und bieten dort zusätzlich extra Wissen oder

einen Download an, den es gegen einen Share gibt. Damit kann man u. U. einen

unerwarteten viralen Effekt erreichen.

SMS Messaging

Senden Sie mit der SMS Messaging App Massen-Textnachrichten gleichzeitig an

eine große Anzahl von Empfängern. Verabschieden Sie sich davon, mühevoll

nacheinander Nachrichten an ihre Empfänger zu übermitteln…

Sitebot

Mit diesem Tool erhalten Sie die Möglichkeit, Chatbots auch ohne Verwendung

von Facebook zu erstellen. Damit können Sie ihre Website, ohne sich auf Facebook

verlassen zu müssen, mit diesem mächtigen textbasierten Dialogsystem

ausstatten. Ein Blick darauf lohnt sich wirklich.

Facebook Chatbot

Bekanntlich kann man mittels Chatbots komplette Unterhaltungen – z. B. mittels

des Facebook Messenger – erstellen und automatisieren. Geschickt genutzt,

lässt sich dieses Handling ideal für Marketing- und Verkaufszwecke einsetzen.

Der auf der Builderall-Plattform enthaltene Chatbot kann beispielsweise

das in der Pro-Variante kostenpflichtige „ManyChat“ voll ersetzen.

336

WhatsApp Automation & Funnel Builder

WhatsApp ist ein mächtiges Marketingtool, da WhatsApp-Mitteilungen eine

Öffnungsrate von deutlich über 80% erreichen. Mit der Builderall WhatsApp-

Messaging-App können Sie automatisiert über ihre eigene Nummer Textnachrichten

an eine große Zahl von Empfängern senden. Damit ergeben sich neue

Möglichkeiten, Kontakte mit potentiellen Kunden oder Geschäftspartner aufzubauen.

Smartphone App-Baukasten

Mit dem Builderall App Creator können Sie selbst auf verblüffend einfache Art

und Weise und ohne explizite Programmierkenntnisse Smartphone-Apps erstellen

und anschließend im Google Play Store, im Apple App Store oder im Amazon

App Store veröffentlichen bzw. darüber als digitales Produkt verkaufen.

WordPress Site Builder

Warum verwenden Sie als Webdesigner nicht einmal die ab dem ESSENTIAL-

Plan verfügbare WordPress-Integration, um wie gewohnt ihre Webseiten bzw.

ihre Blogs – diesmal in Builderall - zu erstellen und zu veröffentlichen?

Builderall Video Hosting

Sie haben Videos aufgenommen, die Sie auf ihren Webseiten anzeigen lassen

wollen? Da ging bis jetzt nichts an Youtube oder Vimeo vorbei. Aber was ist,

wenn man diesen Hostern seine Videos nicht anvertrauen will? Dann nutzen

Sie doch einfach das Builderall Video Hosting – System, welches mit einem eigenen

Viewer, der mit einer Vielzahl interessanter Zusatzfunktionen ausgestattet

ist, einhergeht.

337

Der schnelle Weg zum kostenneutralen

PREMIUM-Plan

Wer ernsthaft digitales Marketing betreiben möchte um beispielsweise als

Vendor eigene Produkte zu vermarkten oder um als Affiliate Provisionen zu erwirtschaften,

kommt um den PREMIUM-Plan von Builderall nicht herum. Wenn

man die Leistungsfähigkeit und den Funktionsumfang (z. Z. mehr als 30 Apps!)

mit den Paketen anderer Anbieter vergleicht wie „Click Funnels“, „GetResponse“

und „Wix“, dann erkennt man sofort, dass dessen monatlicher Preis quasi

ein „Schnäppchenpreis“ ist. Allein für „Click Funnels“ bezahlt man in der mit

dem Builderall PREMIUM-Plan vergleichbaren PLATINUM-Version 297 $ pro

Monat bei deutlich weniger verfügbaren Apps. Auch „GetResponse“, welches

hauptsächlich für E-Mail-Marketing ausgelegt ist, ist mit einem monatlichen

Abo-Preis von z. Z. 89 € deutlich teurer als Builderall – obwohl dieses Programmpaket

vielleicht am ehesten mit Mailingboss vergleichbar ist. Dabei beziehen

sich die 89 € auf maximal 1000 Mailempfänger pro Monat. Wenn Sie im

Monat mehr Mails verschicken wollen, wird es entsprechend teurer (bis 515 €

bei maximal 100.000 Empfängern).

Der PREMIUM-Preis von Builderall beträgt in Deutschland 59,90 € im Monat.

Sie können diesen Preis auf null drücken und sogar darüber hinaus noch einen

(nach oben offenen) Verdienst erwirtschaften, in dem Sie Builderall weiterempfehlen.

Denn eBusiness4us bietet ein geniales Affiliate-Programm mit einem

sogenannten Leverage-Effekt an, mit denen jeder, der sich an diesem Programm

beteiligt, durch Vermittlung der bezahlten Builderall-Pläne Geld verdienen

kann.

Die Erlöse, die Sie mit der Vermittlung von Builderall-Plänen erzielen, ergeben

sich aus einem ganz einfach nachvollziehbaren Provisionsmodell: Jede erfolgreiche

Vermittlung eines Builderall-Paktes wird einmalig zu 100% vergütet.

Das bedeutet, wenn Sie beispielsweise das Premium-Paket zu 59,90 € pro Monat

vermitteln, erhalten Sie einmalig diese 59,90 € als Provision gutgeschrie-

338

ben. Aber das ist noch nicht alles. Jeden weiteren Monat, den der von Ihnen

vermittelte Builderall-Anwender das Paket nutzt, bringt Ihnen 30% des monatlichen

Mietpreises als fortlaufende Provision, hier also 17,90 € - und das

solange, bis der Kunde das Builderall-Paket wieder kündigt (und das ist unwahrscheinlich,

wenn er damit seine Webseiten baut). Sollte nun Ihr Kunde

Gefallen an Builderall gefunden haben und selbst als Affiliate Builderall-

Pakete vermitteln, dann bekommen Sie von jedem von Ihrem Kunden vermittelten

Neukunden wiederum 30% des Mietpreises, d h. Sie verdienen an den

Erfolgen Ihres Kunden in einer weiteren Stufe mit. Das sollte Ansporn sein,

seine Kunden zu animieren, selbst Afffiliates zu werden und mit ihm eine dauerhafte,

freundschaftliche Zusammenarbeit anzustreben. Denn es geht bei

Builderall nicht darum, ein Nutzer oder Partner zu werden, sondern es geht darum,

ein lukratives Business aufzubauen.

Kurz gesagt, wenn Sie vier weitere Kunden für das PREMIUM-Paket vermitteln

und diese dabei bleiben, dann ist ab diesem Zeitpunkt das PREMIUM-

Paket für Sie kostenneutral, d. h. es finanziert sich allein durch die monatlichen

Provisionen dieser vier Kunden.

Und was müssen Sie tun, um dem Affiliate-Programm beizutreten? Eigentlich

nichts. Mit dem Erwerb eines Builderall-Planes haben Sie eigentlich schon alles

getan. Sie finden in Ihrem Dashboard den Bereich „Affiliates“, wo alle Funktionen

übersichtlich angeboten werden. In dem Video wird außerdem im Detail

339

erklärt, wie das Programm funktioniert und was Sie tun müssen, um an ihm zu

partizipieren.

Wie Sie sehen, gibt es keinen Grund, auf die vielen Funktionen und Apps des

PREMIUM-Planes zu verzichten. In diesem Sinne – Viel Spaß mit dem Sitebuilder

„Cheetah“ und den vielen anderen Tools in den Builderall-Plänen!

340

341

Der schnelle Weg zur eigenen Website und zum eigenen Blog

Sie wollen auch ein ePaper? Erhöhen Sie die Reichweite Ihrer Titel.

Template löschen?

Als Template speichern?