Kopatibilität:

WebSite X5 Evo und Pro

Beim Einrichten einer neuen Webseite sind wir immer auf der Suche neuer Lösungen, mehr Dynamik zu erschaffen, um die Aufmerksamkeit der Besucher auf bestimmte Elemente zu lenken und dadurch die Seite interessanter und attraktiver zu machen. Sie auch?


Die Erstellung von Text-Boxen, die sich mit einem Mouseover-Effekt animieren, ist eine hervorragende Weise, um Informationen hervorzuheben. Diese Art von grafischen Elementen ist sehr vielseitig: Es passt zum Beispiel perfekt, um Ihre Kenntnisse, die Bewertungen der Kunden oder die Vorteile Ihrer Produkte/Dienstleistungen auf originelle Weise zu präsentieren.


Mit dem Zusatzobjekt Animated Box lassen sich diese Art von animierten Boxen mühelos erstellen: Sehen Sie sich auf der Vorschauseite einige Beispiele dafür, was Sie mit diesem Objekt tun können, und dann entfesseln Sie Ihre Kreativität.



Die Elemente, aus denen die animierten Boxen bestehen

Die animierte Boxen, die Sie mit diesem Objekt einrichten können, haben eine feste Struktur, die aus den folgenden Elementen besteht:

  • Hintergrund, der die Gestalt der Box definiert und der alle Inhalte einschließt;
  • Kreis 1, d. h. das Kreiselement, das beim Laden des Objekts angezeigt wird;
  • Kreis 2, d. h. ein zweites Kreiselement, das beim Mouseover angezeigt wird.


In der Box können dann auch die folgenden Elemente vorhanden sein: ein Bild, einen Titel, eine kurze Beschreibung, eine Schaltfläche mit Link. Darüber hinaus gibt es auch die für die Animation nötigen Elemente: Beim Mousover dehnt sich der Kreis 1 bis er den ganzen Hintergrund überlappt. Inzwischen tritt der Kreis 2 auf und übernimmt die ursprüngliche Position von Kreis 1. Der Effekt sieht klarer aus, wenn man unterschiedliche Farben für die zwei Kreise und den Hintergrund verwendet. 


So fügen Sie Inhalte ein

Jetzt, dass Sie wissen, wie das Objekt Animated Box funktioniert, können Sie Ihre eigene animierte Boxen erstellen. Fangen Sie mit den Inhalten an:

  • Doppelklicken Sie auf das Objekt Animated Box, das Sie gerade auf die Seite eingefügt haben, um das Einstellungen-Fenster zu öffnen. 
  • Bleiben Sie im Bereich Inhalte und wählen Sie aus das gewünschte Element aus der Drop-Down-Liste. Für jedes finden Sie dann die entsprechenden Optionen für die Personalisierung:
    • Bild: Falls vorhanden, wird es oben in der Box angezeigt. Nachdem Sie die gewünschte Bilddatei importiert haben, definieren Sie die Größe, die Ausrichtung (rechts, zentral, links) und den Außenrand (nämlich den Abstand zwischen dem Bild und den Rändern der Box).
    • Titel: Schreiben und formatieren Sie den Text, dann definieren Sie die Ausrichtung und den Außenrand, sowie auch die Farbe, für den Titel, beide die normale und diejenige, die beim Mouseover angezeigt wird. 
    • Beschreibung: Hier finden Sie dieselben Optionen wie beim Titel außer der Schriftartgröße. Die Formatierung der Beschreibung hängt tatsächlich von Optionen ab, die für den Titel definiert wurden. 
    • Schaltfläche: Geben Sie die Etikette der Schaltfläche ein (CTA oder Call to Action) und öffnen Sie das Fenster Link mit Klick auf   . Legen Sie dann den Stil der Schaltfläche fest, indem Sie ihre horizontale Ausrichtung, die Außen- und Innenränder, die abgerundeten Ecken, den Text und den Hintergrund definieren, beide die normalen und diejenigen, die beim Mouseover angezeigt werden. 


#Tipp - Wenn Sie für Ihre Box nicht alle Elemente brauchen, könne Sie für diejenige, die nicht angezeigt werden sollen, einfach keinen Inhalt eingebe. Wenn Sie beispielsweise für die Schaltfläche keinen Text schreiben, wird keine Schaltfläche und kein Link vorhanden sein.

   

So definieren Sie den Stil der animierten Boxen

Neben dem Stil für jedes einzelne Element können Sie auch das Aussehen der ganzen Box festlegen, damit sie sich an das Layout Ihrer Website besser anpasst:

  • Öffnen Sie den Bereich Stil und definieren Sie den Hintergrund und die Farben für Kreis 1 und 2: Wie bereits erwähnt, können Sie 3 unterschiedliche Farben einstellen, aber Sie können auch einen Kreis "entfernen", indem Sie ihn als transparent einstellen. 
  • Definieren Sie jetzt die Position der Kreise: Positionieren Sie zuerst Kreis 1, der sich in der Box oben, unten, rechts oder links finden kann. Kreis 2 übernimmt die oben/unten-Position von Kreis 1, aber Sie können dann für beide Ausgangs- und Endpunkt definieren, ob er lieber rechts, zentral oder links angezeigt werden muss. 
  • Stellen Sie die Ränder der Box ein: Sie können die Deckkraft, die Farbe (auch beim Mouseover) und die abgerundeten Ecken definieren.
  • Aktivieren Sie dann einen Schatten für die ganze Box, wenn Sie möchten. 


#Tipp - Wie Sie schon verstanden haben, können Sie mit diesem Objekt beliebig viele Ergebnisse erhalten, indem Sie Elemente ein und ausschalten und mit Farben und Positionen arbeiten. Wenn Sie experimentieren, werden Sie für jede Gelegenheit eine originelle und perfekte Lösung finden.


Sind sie schon neugierig, wie dies Objekt auf Ihrer Website aussieht? Installieren Sie sofort Animated Box.


Fehlen Ihnen noch Credits für das Objekt? Alle Kreditpakete ansehen