Mobirise Tutorials
Werkzeuge

Zusätzliche Werkzeuge im VN-Designer

Suche Werkzeuge Übersicht Google Maps

VN Suche

VN-Designer und Mobirise-Tutorials wird durchsucht
Admin 

Werkzeuge 

Der VN‑Designer bietet — zusätzlich zu den Blockwerkzeugen, die jedem Block zugeordnet sind — zahlreiche weitere Tools, die die Bearbeitung von Webseiten deutlich vereinfachen.

Ihr öffnet die Werkzeuge über das Maulschlüssel‑Symbol 🔧 in der Menüleiste oder auch die Lightbox an der Lupe  oder über das Menü „Werkzeuge“.

Im Folgenden erläutere ich einige dieser Werkzeuge näher, allerdings nicht alle. Unten eine Übersicht über meine Beschreibungen.

Zusätzlich zu den allgemeinen, kostenlosen Werkzeugen bietet der VN‑Designer leistungsstarke Erweiterungen im Shop  bzw. unter Blocks → Werkzeuge an – zum Beispiel „SEO“ oder auch „Statistik“, die ihr erwerben könnt.  Bitte probiert die einzelnen Werkzeuge aus und fragt bei Bedarf in meinem Forum , welche Eigenschaften jedes Werkzeug bietet.

Es werden verschiedene Werkzeuge angeboten, auf die ich hier nicht explizit eingehen muss, da sie selbsterklärend sind. Außerdem werden dem oben genannten Shop auch neue, kostenlose Werkzeuge hinzugefügt.

Zur Übersicht ↓

Übersicht Werkzeuge

Wähle unten das gewünschte Thema aus.

VN Suche - Suchmaschine 

Das Werkzeug „VN Suche“ möchte ich ausdrücklich hervorheben und empfehlen: Diese Suchmaschine ist großartig und äußerst schnell, da einmal gescannte Seiten sofort verfügbar sind. Ihr gebt lediglich euren Benutzernamen und euer Passwort ein und wählt die Position des Eingabefeldes; dieses wird anschließend als eigener Block eingefügt.

Weitere Einstellungen nehmt ihr im Administrator‑Dashboard vor, das über eure Domain unter:

/assets/vn-search/admin/login.php

im Browser erreichbar ist; ruft es am besten unmittelbar nach der Veröffentlichung des Projekts auf. Tragt dort den Wurzelordner ein, ab dem alle Verzeichnisse eurer Domain durchsucht werden sollen. Mit Hilfe von Häkchen lassen sich einzelne Verzeichnisse von der Suche ausschließen. Außerdem können PDF‑ und TXT‑Dateien in die Suche einbezogen werden; ihre Inhalte werden ebenfalls durchsucht. Zusätzlich könnt ihr einen automatischen Scan per Cronjob einrichten, sodass Änderungen unmittelbar in die Suchmaschine übernommen werden.

Lest bitte dazu mein ausführliches Tutorial  zur VN‑Suche auf meiner Mobirise‑Tutorials‑Seite.

Lest auch die offizielle Anleitung zur VN‑Suche  in deutscher oder englischer Sprache.

Übersicht ↑

Text-Färber

VN Designer

Text-Färber

Das Werkzeug „Text-Färber“ ist eine kleine, aber sehr nützliche Anwendung. Beim Start öffnet sich ein verschiebbares Fenster mit verschiedenen Einstellmöglichkeiten. Ihr markiert Textbereiche mit der Maus und könnt diese anschließend per Farbpicker einfärben oder die Schriftgröße anpassen.

Übersicht ↑ 

Effekte

VN Designer

Text-Effekte

Genauso großartig wie das Werkzeug „Text‑Färber“ ist das Werkzeug „Text‑Effekte“. Auch hierfür öffnet sich ein separates, verschiebbares Fenster: Du markierst einfach den zu bearbeitenden Text und wählst den gewünschten Effekt. Das solltest du unbedingt selbst ausprobieren – du wirst begeistert sein. Dir steht eine Fülle von Effekten zur Verfügung, etwa Schatten, Glow (Neon), Markieren, Kontur, Farbverlauf, Unterstreichen und Durchstreichen, Abstand, Schreibweise sowie ein Button, mit dem du angewendete Effekte an der Markierung wieder entfernen kannst.

Übersicht ↑ 

Animationen

VN Designer

Animation

Das Werkzeug VN‑Animation lässt sich vielseitig einsetzen und bietet zahlreiche Animationen, die sowohl markierte Texte als auch ganze Blöcke animieren können. Die Vielfalt muss man selbst erleben, denn sie übersteigt die Möglichkeit, sie hier ausführlich zu beschreiben. Probiert es einfach aus – verwendet Animationen auf einer Webseite jedoch sparsam, denn sie sollen Aufmerksamkeit erregen, aber nicht stören.

Wiederholen ↻

Übersicht ↑

WhatsApp-Button

VN Designer

WhatsApp-Button

Der WhatsApp-Button ermöglicht es Besuchern, direkt Kontakt über WhatsApp aufzunehmen. Am Desktop wird nach dem Klick die WhatsApp-Webseite geöffnet. Ist WhatsApp Web bereits eingerichtet, kann die Unterhaltung direkt im Browser gestartet werden. Andernfalls wird der Nutzer aufgefordert, WhatsApp Web zunächst mit seinem Smartphone zu verbinden.

Auf mobilen Geräten wird der Link in der Regel direkt mit der installierten WhatsApp-App geöffnet.

Menü → Klick auf das WhatsApp Symbol 

Übersicht ↑ 

Übersetzer

VN Designer

Übersetzer

Der Übersetzer arbeitet extrem schnell, weil eine Seite nur einmal übersetzt wird — unabhängig davon, wer sie zuerst aufruft. Die Übersetzung wird in einer JSON-Datei gespeichert und das Programm prüft, ob sie noch mit der aktuellen Seite übereinstimmt. Ist das der Fall, wird nur der Inhalt der JSON-Datei angezeigt; es werden keine Tokens des API-Anbieters verbraucht.

Jeder Besucher deiner Website erhält einen verschiebbaren Sprachknopf und kann die Seite selbst live über DeepL, Microsoft Translator oder Google Cloud Translation übersetzen. Der Zugangsschlüssel verbleibt auf deinem Server und wird nie im Seitencode hinterlegt.

Eine Liste der API‑Key‑Anbieter findest du auf meiner Seite „KI‑Verwendung“.

Menü → Klick auf Symbol zwischen WhatsApp und Seitenpanel im Menü

Übersicht ↑ 

VN Designer

Bildsuche bei Pixabay und Unsplash

API-Schlüssel für Pixabay und Unsplash erstellen

Mit der Bilderweiterung des VN-Designers kannst Du Fotos von Pixabay und Unsplash direkt suchen und in Dein Webseitenprojekt laden. Dafür benötigst Du einen kostenlosen API-Schlüssel des jeweiligen Anbieters. Diese API-Keys könnt ihr unten in der Erweiterung "VN-Bildsuche" dauerhaft eintragen.

1. Pixabay – API-Key erhalten

🔸Öffne die Webseite Pixabay API.
🔸Registriere Dich kostenlos bei Pixabay oder melde Dich mit Deinem vorhandenen Konto an.
🔸Nach der Anmeldung wird Dir auf dieser Seite unter „Search Images“ Dein persönlicher API-Schlüssel angezeigt.
🔸Kopiere den angezeigten Schlüssel und füge ihn in das entsprechende Feld der Pixabay-Erweiterung im VN-Designer ein.

Hinweis: Der API-Zugang ist kostenlos. Standardmäßig sind bis zu 100 Anfragen innerhalb von 60 Sekunden möglich.

2. Unsplash – API-Key erhalten

🔸Öffne die Webseite Unsplash Developers.
🔸Registriere Dich kostenlos oder melde Dich mit Deinem Unsplash-Konto an.
🔸Öffne Deine Anwendungen über „Your Apps“ und wähle „New Application“.
🔸Akzeptiere die API-Nutzungsbedingungen und gib Deiner Anwendung einen Namen, beispielsweise „VN-Designer“, sowie eine kurze Beschreibung.
🔸Nach dem Erstellen Deiner Anwendung findest Du unter „Keys“ den benötigten „Access Key“.
🔸Kopiere diesen Schlüssel und füge ihn in das entsprechende Feld der Unsplash-Erweiterung im VN-Designer ein.

Wichtig: Verwende den „Access Key“, nicht den „Secret Key“.

Der kostenlose Demo-Zugang erlaubt zunächst 50 API-Anfragen pro Stunde. Für eine höhere Anzahl kann bei Unsplash ein Produktionszugang beantragt werden.

Hinweise zur Verwendung

Beide Anbieter stellen zahlreiche kostenlose Bilder bereit. Beachte bei der Verwendung die jeweiligen Lizenzbedingungen sowie die besonderen API-Nutzungsbedingungen.

Deine API-Schlüssel solltest Du vertraulich behandeln und nicht öffentlich auf Webseiten veröffentlichen.

Unsplash schreibt bei API-Integrationen unter anderem die Fotografennennung, das Hotlinking über die zurückgegebenen Bildadressen und das Auslösen eines Download-Ereignisses vor. Bitte prüft das sorgfältig und klickt auf den Button „Bildnachweise kopieren“, um die entsprechenden Anweisungen zu übernehmen.


Bei Pixabay ist das lokale Speichern dagegen ausdrücklich vorgesehen.


Übersicht ↑ 

VN-Bildsuche

VN-Bildsuche

VN Designer

Bildbearbeitung

Mit dem leistungsstarken Bildbearbeitungswerkzeug könnt ihr die Bilder eures Projekts verwalten.

Alle Bilder des Projekts werden aufgelistet — mit Dateiname, Dateigröße und Links zu den Seiten, auf denen das Bild verwendet wird.

Von hier aus könnt ihr einzelne Bilder direkt bearbeiten; nicht mehr benötigte Bilder lassen sich automatisch löschen.

Übersicht ↑ 

Bildbearbeitung

Bildbearbeitung

VN Designer

VN Galerie

Die VN‑Galerie lässt sich außergewöhnlich einfach erstellen und ermöglicht es, neue oder bereits im Projekt verwendete Bilder auszuwählen. Die Reihenfolge der Bilder lässt sich anpassen, was in vielen Fällen sehr sinnvoll ist.

Die Galerie bietet drei verschiedene Anzeigeoptionen: ein regelmäßiges Raster, ein unregelmäßiges Masonry‑Layout oder ein unten dargestelltes Karussell. In allen Layouts wird zur Vergrößerung eine Lightbox verwendet. Bildbeschriftungen können angelegt und angezeigt werden.

Zudem bietet die Galerie zahlreiche weitere Einstellungsoptionen in den Blockwerkzeugen.

Übersicht ↑ 

VN Designer

VN-Formular-Editor und Formular-Block

Das speziell für den VN‑Designer entwickelte Formular bietet jetzt wirklich alle denkbaren Optionen.

Wie in meinem Beispiel beschrieben, habt ihr in den Einstellungen bereits den SMTP‑Mailversand eingerichtet.

Das Formular besteht aus zwei Elementen:

Formular-Editor
Formular-Renderer Block

Öffnet in den Werkzeugen den „VN Formular Editor“ und legt eure Formularfelder ganz nach euren individuellen Wünschen an. Besonders effektiv zum Schutz vor Spam ist die Option „hCaptcha“.

Ihr könnt außerdem ein bereits mit diesem Formular-Editor erstelltes Formular, das als JSON-Datei exportiert wurde, in diesen Editor importieren.

Lest bitte mein ausführliches Tutorial auf meiner Mobirise‑Seite; dort erkläre ich den Editor und den Formular‑Block, der sich hier nahezu identisch verwenden lässt. Außerdem zeige ich, wie ihr den öffentlichen und den geheimen Schlüssel von hCaptcha erhaltet.

Mit dem Formular-Editor lassen sich auch sehr spezifische Formularregeln erstellen: Sie legen fest, unter welchen Bedingungen eine Regel greift und welche Aktion anschließend ausgeführt wird. Bitte studiert die Anleitung und probiert die Regeln schrittweise aus.            

Vier verschiedene Formularblöcke stehen euch zur Verfügung. Ihr findet sie hier:

→ Block hinzufügen → Bibliothek → VN Form Renderer

Wichtig: Vergebt dem Formular im Editor einen Dateinamen für die JSON-Datei, hier „form-vn-designer“. Verwendet keine Leer- oder Sonderzeichen, insbesondere keine Umlaute. Verwendet denselben Namen dann im Formular-Block ein, damit das erstellte Formular auf dem Server gefunden wird.

Hier könnt ihr mein Formular als Beispiel ansehen und gerne testen.

Übersicht ↑

Formular erstellen mit Editor

VN-Formular-Editor
zurück ↑

Formular

VN-Formular-Renderer (Formular-Block)
zurück ↑

SEO Werkzeug

VN Designer

SEO Erweiterung kostenpflichtig

Das Werkzeug VN-SEO ist ein Tool zur Suchmaschinenoptimierung eurer Seiten.

Ihr erhaltet einen Score, der aufzeigt, an welchen Stellen ihr die Webseite noch besser optimieren könnt. Zusätzlich wird ein Bericht erstellt.

Sobald ihr mindestens einen API‑Schlüssel für eine KI hinterlegt habt, werden alle Seiten gründlich auf fehlerhafte Einträge geprüft. Die Tags für Titel und Beschreibung können von der KI direkt optimiert werden — sowohl inhaltlich als auch hinsichtlich der korrekten Länge.

Eine Sitemap kann automatisch angelegt werden; ebenso lassen sich Vorschaubilder für Social‑Media‑Dienste automatisch erzeugen. So erledigt ihr stundenlange Arbeit in wenigen Minuten.

Übersicht ↑ 

Statistik Werkzeug

VN Designer

Statistik Erweiterung kostenpflichtig

Das Statistik-Tool eurer Webseite bietet einen hervorragenden Überblick über die Besucher der einzelnen Seiten. Klicke hier oder auf das Bild für große Ansicht. Es ist in verschiedene Bereiche wie „Besucher“ und „Beliebte Seiten“ unterteilt. Alle Statistiken lassen sich nach unterschiedlichen Zeiträumen filtern. Ein praktisches Werkzeug, um schnell den Überblick zu gewinnen.

Nachdem ihr die Einstellungen durchgelesen und euren Benutzernamen sowie ein Passwort hinterlegt habt, klickt auf den Button Zugang ändern. Geht anschließend wie gewohnt in „Einstellungen“ und klickt dort auf „Speichern“. Bei der nächsten Publizierung wird die Anwendung in dieses Verzeichnis auf den Server kopiert. Ruft im Browser die Datei „dashboard.php“ auf, um die Statistik zu verfolgen:

assets/vn-stats/dashboard.php

Übersicht ↑

Wie zählt die Statistik ↓

VN-Statistik Erweiterung kostenpflichtig

Die VN-Statistik erfasst die Seitenaufrufe und unterscheidet dabei zwischen einzelnen Aufrufen und Besuchern eines Tages. Ein Besucher kann an einem Tag mehrere Seiten aufrufen, wird jedoch nur beim ersten Aufruf als neuer Tagesbesucher gewertet. Die folgende Übersicht zeigt, wie typische Besuche gezählt werden.

Situation Was passiert?
Besucher ruft heute erstmals eine Seite auf 1 Seitenaufruf + 1 Besucher
Derselbe Besucher ruft eine andere Seite auf +1 Seitenaufruf, aber kein neuer Besucher
Derselbe Besucher lädt dieselbe Seite später erneut +1 Seitenaufruf
Derselbe Besucher lädt dieselbe Seite innerhalb von 2 Sekunden erneut Wird nicht gezählt
Derselbe Besucher kommt am nächsten Tag wieder Wird als neuer Tagesbesucher gezählt
Bot oder Suchmaschine Wird nach Möglichkeit nicht gezählt
Besucher mit aktiviertem DNT oder GPC Wird bei entsprechender Einstellung nicht gezählt
Eigene IP-Adresse steht auf der Ausschlussliste Wird nicht gezählt

Übersicht ↑

Werkzeuge

Ansicht einiger Werkzeuge