Sie sind hier: Startseite » HTML-Editor » Nivo Slider

Nivo Slider*

HTML-Editor Hilfe

HTML-Editor Hilfe

Sind Sie ratlos?

Gestalten Sie Ihre Seiteninhalte mit Bildern!
Purer Text ermüdet jeden Seitenbesucher und er wird Ihre Webseite wohl nicht in Erinnerung behalten. Und wenn doch, dann in keiner "Guten". Hier wollen wir Ihnen einen HTML-Editor-Zusatz vorstellen, der Ihre Bilder auch noch in tollen Übergängen präsentiert.
Und das bleibt in Erinnerung.

Der Nivo Slider* versetzt Sie in die Lage, einen sog. "Eyecatcher" von besonderer Qualität in Ihrer Webseite zu integrieren.

Wie das funktioniert, wollen wir Ihnen hier vorstellen!


Nivo Slider*

Nivo Slider*

Wenn alles integriert ist!

Im vorangegangenen Bild sind die Bilder und Funktionen schon definiert.
Sie müssen in diesem Tool eigentlich gar nicht so viel anstellen, um ein beeindruckendes Ergebnis zu erzielen.

Trotzdem hier mal alles Schritt für Schritt!

Klicken Sie oben auf das Nivo Slider* Symbol.

Nivo Slider*

Nach dem ersten Klick auf das Symbol!

So sieht es aus, wenn das Bearbeitungsfenster das erste Mal geöffnet ist.
Wie kommen nun die Bilder ins Spiel?

Darauf wollen wir jetzt eingehen!

Wir sehen "oben links" drei kleine Symbole.

Der Button "Links" öffnet das Fenster der "Image Gallery*".
(Insofern Sie diese Erweiterung in Ihrem HTML-Editor wünschen!)
Auf dieses Zusatz-Tool gehen wir aber noch ein.

Der "Mittlere" Button öffnet den "File Manager*" , den wir Ihnen schon in einem vorangegangenen Kapitel vorgestellt haben.

Der "Rechte" Button öffnet ein Fenster, in dem Sie Bilder auf Ihrem Rechner zur Verwendung im Nivo Slider* auswählen können.

.: Achten Sie hier schon darauf, dass alle ausgewählten Bilder das gleiche Format haben!

.: Immer Querformat oder immer Hochformat!

.: Immer die gleiche Größe!

Wenn Sie das nicht beachten, werden Sie kein gutes Ergebnis erzielen!

Wir setzen im weiteren Verlauf voraus, dass Sie den File Manager* in Ihrem HTML-Editor integriert haben!

Bilder auswählen

Dateien (Beispielanordnung)

In unserem Beispiel-Editor haben wir den Ordner "Bilder" geöffnet.
Auf dieser Ebene haben die Bilder eine Breite von 200px und sind alle im Querformat!

.: Durch Halten der Taste "Steuerung" und Anklicken der zu verwendenden Bilder können Sie auch eine Mehrfachauswahl treffen.

Wir klicken nun auf "Select" und die Bilder sind im Arbeitsbereich des Nivo Slider*.

Das sieht dann so aus!

Bilder sind eingefügt!

.: Tip: Wir entfernen immer alle Häkchen im unteren Bereich.
(Probieren Sie an dieser Stelle aber gerne einmal selbst aus!)

Also, alle Häkchen sind entfernt!

Die Einstellungen im "mittleren Bereich" unter "Settings" lassen wir so wie sie sind.

Sehen wir uns die beiden Buttons über den jeweiligen Bildern an!

Der rote Button löscht das jeweilige Bild aus Ihrer Auswahl!

Der grüne Button lässt weitere Einstellungen zu.
Das schauen wir uns jetzt einmal genauer an!

Grüner Button geklickt!

Erstes Bild gewählt!

Der Reiter "Allgemein" ist beim Klicken des grünen Buttone vorbelegt.
In der ersten Zeile sehen wir "Typ" und "Ziel". Wofür das denn?

.: "Typ" lässt Sie auswählen, in welcher Form sich ein Klick auf das jeweilige Bild in der fertigen Fassung auswirkt!

Nehmen wir z.B. an, Sie wollen unter ein Bild einen Link legen, der auf eine andere Webseite zeigt.

Unter "Url:" geben Sie die entsprechende Web-Adresse ein und unter "Ziel" wählen Sie, wie sich dieser Link dann öffnet.

Die Position "Ziel" beinhaltet folgende Punkte:

(default) = öffnet browserabhängig in der Regel in einem neuen Browserfenster.
Für die weiteren Positionen folgen Sie bitte diesem Link zur Seite SELFHTML.
Hier können Sie auch weiterführende Beispiele sehen.

Unter "Titel" können Sie beim sog. Mouseover einen Tooltip eintragen und erzeugen.
Lesen Sie hierzu auch unter diesem Kapitel "Tooltip".

Google Analytics

Sollten Sie ein Konto bei Google Analytics eingerichtet haben um Ihre Werbemaßnahmen oder Teilbewerbungen von einzelnen Produkten zu erfassen, könnten Sie hier auch die Klicks auf die einzelnen Bilder dokumentieren.

Lightbox

Im HTML-Editor enthalten!

Unter dem Reiter "Lightbox" können Sie z.B. ein größeres Bild des gerade angeklickten Bildes öffnen.

Das Nivo Slider* Tool wird (optional) gegen Aufpreis in Ihren HTML-Editor eingebaut.