Das sind unsere Snippets
Schön, dass Sie sich diese Anleitung zu Gemüte führen.
Sie zeigt Ihnen, mit welchen Designvorlagen („Snippets“) Sie die Seiten Ihrer Website Abschnitt für Abschnitt gestalten können. Übrigens: das Snippet, das diesen Bereich verwendet wird, nennt sich „fullsize_text_centered“.
Wir wünschen Ihnen viel Vergnügen beim Gestalten Ihrer Website!
Zuvor aber noch:
die häufigsten Fragen
Wie baue ich ein Bild ein?
Neue Bilder einbauen oder gespeicherte Bilder ersetzen geht mit unserem System kinderleicht.
So gehts »Wie mache ich einen Link?
Einen neuen Link setzen funktioniert mit nur einem Klick. Wir zeigen, wie es richtig geht.
So gehts »Welche Icons kann ich verwenden?
Sie können aus einem Pool von 675 unterschiedlichen Icons zu vielen Themen auswählen.
So gehts »Wie verändere ich Farben?
Für Profis: Sie können die CSS-Einstellungen jedes Snippets individuell konfigurieren.
So gehts »Nun aber zu den Snippets:
four_colums_icons_center
Titel 1
Das ist ein Blindtext. Er ist der Platzhalter für den Inhalt, der später hier an dieser Stelle stehen wird.
Hilfe »Titel 2
Das ist ein Blindtext. Er ist der Platzhalter für den Inhalt, der später hier an dieser Stelle stehen wird.
Hilfe »Titel 3
Das ist ein Blindtext. Er ist der Platzhalter für den Inhalt, der später hier an dieser Stelle stehen wird.
Hilfe »Titel 4
Das ist ein Blindtext. Er ist der Platzhalter für den Inhalt, der später hier an dieser Stelle stehen wird.
Hilfe »four_columns_images_centered
Titel 1
Das ist ein Blindtext. Er ist der Platzhalter für den Inhalt, der später hier an dieser Stelle stehen wird.
Hilfe »
Titel 2
Das ist ein Blindtext. Er ist der Platzhalter für den Inhalt, der später hier an dieser Stelle stehen wird.
Hilfe »
Titel 3
Das ist ein Blindtext. Er ist der Platzhalter für den Inhalt, der später hier an dieser Stelle stehen wird.
Hilfe »
Titel 4
Das ist ein Blindtext. Er ist der Platzhalter für den Inhalt, der später hier an dieser Stelle stehen wird.
Hilfe »Es geht auch animiert:
four_columns_icons_anim
Titel 1
Das ist ein Blindtext. Er ist der Platzhalter für den Inhalt, der später hier an dieser Stelle stehen wird.
Hilfe »Titel 2
Das ist ein Blindtext. Er ist der Platzhalter für den Inhalt, der später hier an dieser Stelle stehen wird.
Hilfe »Titel 3
Das ist ein Blindtext. Er ist der Platzhalter für den Inhalt, der später hier an dieser Stelle stehen wird.
Hilfe »Titel 4
Das ist ein Blindtext. Er ist der Platzhalter für den Inhalt, der später hier an dieser Stelle stehen wird.
Hilfe »four_columns_text_4_3_3_2
Titel 1
Das ist ein Blindtext. Er ist der Platzhalter für den Inhalt, der später hier an dieser Stelle stehen wird.
ButtonTitel 2
Das ist ein Blindtext. Er ist der Platzhalter für den Inhalt, der später hier an dieser Stelle stehen wird.
ButtonTitel 3
Das ist ein Blindtext. Er ist der Platzhalter für den Inhalt, der später hier an dieser Stelle stehen wird.
ButtonTitel 4
Das ist ein Blindtext. Er ist der Platzhalter für den Inhalt, der später hier an dieser Stelle stehen wird.
Buttonfour_columns_text_2_2_2_4
Titel 1
Das ist ein Blindtext. Er ist der Platzhalter für den Inhalt, der später hier an dieser Stelle stehen wird.
ButtonTitel 2
Das ist ein Blindtext. Er ist der Platzhalter für den Inhalt, der später hier an dieser Stelle stehen wird.
ButtonTitel 3
Das ist ein Blindtext. Er ist der Platzhalter für den Inhalt, der später hier an dieser Stelle stehen wird.
ButtonTitel 4
Das ist ein Blindtext. Er ist der Platzhalter für den Inhalt, der später hier an dieser Stelle stehen wird.
Buttonfour_columns_text_4_4_2_2
Titel 1
Das ist ein Blindtext. Er ist der Platzhalter für den Inhalt, der später hier an dieser Stelle stehen wird.
ButtonTitel 2
Das ist ein Blindtext. Er ist der Platzhalter für den Inhalt, der später hier an dieser Stelle stehen wird.
ButtonTitel 3
Das ist ein Blindtext. Er ist der Platzhalter für den Inhalt, der später hier an dieser Stelle stehen wird.
ButtonTitel 4
Das ist ein Blindtext. Er ist der Platzhalter für den Inhalt, der später hier an dieser Stelle stehen wird.
Buttonfullsize_text
Das ist ein Blindtext. Er ist der Platzhalter für den Inhalt, der später hier an dieser Stelle stehen wird. Das ist ein Blindtext. Er ist der Platzhalter für den Inhalt, der später hier an dieser Stelle stehen wird.
Das ist ein Blindtext. Er ist der Platzhalter für den Inhalt, der später hier an dieser Stelle stehen wird. Das ist ein Blindtext. Er ist der Platzhalter für den Inhalt, der später hier an dieser Stelle stehen wird.
Ohne Animation oder mit Animation („_anim“)
fullsize_text_centered_anim
Dieses Snippet wurde auch beim Einleitungstext dieser Seite verwendet.
Das ist ein Blindtext. Er ist der Platzhalter für den Inhalt, der später hier an dieser Stelle stehen wird.
fullwidth_headline
gallery
text_image_left_5/7
Das ist ein Blindtext. Er ist der Platzhalter für den Inhalt, der später hier an dieser Stelle stehen wird. Das ist ein Blindtext. Er ist der Platzhalter für den Inhalt, der später hier an dieser Stelle stehen wird.
Hilfe »
text_image_left_1/3
Das ist ein Blindtext. Er ist der Platzhalter für den Inhalt, der später hier an dieser Stelle stehen wird. Das ist ein Blindtext. Er ist der Platzhalter für den Inhalt, der später hier an dieser Stelle stehen wird.
Hilfe »
text_image_left_1/4
Das ist ein Blindtext. Er ist der Platzhalter für den Inhalt, der später hier an dieser Stelle stehen wird. Das ist ein Blindtext. Er ist der Platzhalter für den Inhalt, der später hier an dieser Stelle stehen wird.
Hilfe »text_image_right_7/5
Das ist ein Blindtext. Er ist der Platzhalter für den Inhalt, der später hier an dieser Stelle stehen wird. Das ist ein Blindtext. Er ist der Platzhalter für den Inhalt, der später hier an dieser Stelle stehen wird.
Hilfe »
text_image_right_1/3
Das ist ein Blindtext. Er ist der Platzhalter für den Inhalt, der später hier an dieser Stelle stehen wird. Das ist ein Blindtext. Er ist der Platzhalter für den Inhalt, der später hier an dieser Stelle stehen wird.
Hilfe »
text_image_right_1/4
Das ist ein Blindtext. Er ist der Platzhalter für den Inhalt, der später hier an dieser Stelle stehen wird. Das ist ein Blindtext. Er ist der Platzhalter für den Inhalt, der später hier an dieser Stelle stehen wird.
Hilfe »
three_columns_icons_headline_centered
Titel 1
Das ist ein Blindtext. Er ist der Platzhalter für den Inhalt, der später hier an dieser Stelle stehen wird.
Hilfe »Titel 2
Das ist ein Blindtext. Er ist der Platzhalter für den Inhalt, der später hier an dieser Stelle stehen wird.
Hilfe »Titel 3
Das ist ein Blindtext. Er ist der Platzhalter für den Inhalt, der später hier an dieser Stelle stehen wird.
Hilfe »three_columns_text
Titel 1
Das ist ein Blindtext. Er ist der Platzhalter für den Inhalt, der später hier an dieser Stelle stehen wird.
Hilfe »Titel 2
Das ist ein Blindtext. Er ist der Platzhalter für den Inhalt, der später hier an dieser Stelle stehen wird.
Hilfe »Titel 3
Das ist ein Blindtext. Er ist der Platzhalter für den Inhalt, der später hier an dieser Stelle stehen wird.
Hilfe »three_columns_images_headline_centered
Titel 1
Das ist ein Blindtext. Er ist der Platzhalter für den Inhalt, der später hier an dieser Stelle stehen wird.
Hilfe »
Titel 2
Das ist ein Blindtext. Er ist der Platzhalter für den Inhalt, der später hier an dieser Stelle stehen wird.
Hilfe »
Titel 3
Das ist ein Blindtext. Er ist der Platzhalter für den Inhalt, der später hier an dieser Stelle stehen wird.
Hilfe »
two_columns_imageleft
Das ist ein Blindtext. Er ist der Platzhalter für den Inhalt, der später hier an dieser Stelle stehen wird. Das ist ein Blindtext. Er ist der Platzhalter für den Inhalt, der später hier an dieser Stelle stehen wird.
Hilfe »two_columns_imageright
Das ist ein Blindtext. Er ist der Platzhalter für den Inhalt, der später hier an dieser Stelle stehen wird. Das ist ein Blindtext. Er ist der Platzhalter für den Inhalt, der später hier an dieser Stelle stehen wird.
Hilfe »
two_columns_text_icons_headline_centered
Titel 1
Das ist ein Blindtext. Er ist der Platzhalter für den Inhalt, der später hier an dieser Stelle stehen wird. Das ist ein Blindtext. Er ist der Platzhalter für den Inhalt, der später hier an dieser Stelle stehen wird.
Hilfe »Titel 2
Das ist ein Blindtext. Er ist der Platzhalter für den Inhalt, der später hier an dieser Stelle stehen wird. Das ist ein Blindtext. Er ist der Platzhalter für den Inhalt, der später hier an dieser Stelle stehen wird.
Hilfe »
two_columns_images_centered
Das ist ein Blindtext. Er ist der Platzhalter für den Inhalt, der später hier an dieser Stelle stehen wird. Das ist ein Blindtext. Er ist der Platzhalter für den Inhalt, der später hier an dieser Stelle stehen wird.
Hilfe »
two_columns_images_centered
Das ist ein Blindtext. Er ist der Platzhalter für den Inhalt, der später hier an dieser Stelle stehen wird. Das ist ein Blindtext. Er ist der Platzhalter für den Inhalt, der später hier an dieser Stelle stehen wird.
Hilfe »two_columns_text
Das ist ein Blindtext. Er ist der Platzhalter für den Inhalt, der später hier an dieser Stelle stehen wird. Das ist ein Blindtext. Er ist der Platzhalter für den Inhalt, der später hier an dieser Stelle stehen wird.
Hilfe »two_columns_text
Das ist ein Blindtext. Er ist der Platzhalter für den Inhalt, der später hier an dieser Stelle stehen wird. Das ist ein Blindtext. Er ist der Platzhalter für den Inhalt, der später hier an dieser Stelle stehen wird.
Hilfe »Die Antworten auf die häufigsten Fragen
Wie baut man ein Bild ein?
Bevor Sie ein Bild in Ihre Website einbauen können, müssen Sie es auf Ihren Server hochladen. Klicken Sie dazu auf „Fotos & Dateien“ in der obersten Menüzeile. Um etwas Ordnung zu wahren, können Sie diese Bilder in Ordnern organisieren. Das funktioniert genauso wie auf Ihrem Computer. Wählen Sie den Ordner, in den das Bild gespeichert werden soll. Klicken Sie auf das graue Feld mit dem zackigen Rand und wählen Sie das Bild von Ihrem Computer aus. Alternativ können Sie alle Bilder & Dateien auch mit Drag & Drop auf dieses graue Feld ziehen. Der Upload-Balken zeigt den Fortschritt an. Verschwindet er, ist der Vorgang abgeschlossen.
Jedes Snippet, das den Einbau eines Bilds vorsieht, bietet Ihnen ein Dropdown-Menü an. Dieses Dropdown-Menü enthält alle Bilder, die zuvor hochgeladen wurden. Treffen Sie Ihre Wahl, klicken Sie auf „Speichern“ - fertig!
Häufige Frage: muss ich das Bild zuvor bearbeiten?
Nein. Sie können jedes Bild so hochladen, wie es ist. Unser System, die „Bizkit-Engine“, macht für Sie den Rest und optimiert die Fotos automatisch (Speichergröße, Qualität). „Klassische Bildbearbeitung" wie Retusche von Fotos oder das Beschneiden eines Bildes müssen Sie vor dem Hochladen auf Ihrem Computer durchführen.
Häufige Frage: welche Dateiformate kann ich hochladen?
Für Bilder sind folgende Formate möglich: .jpg, .gif, .png, .svg
Für Dokumente sind folgende Formate möglich: .pdf, .zip, Word-, Excel-, Powerpoint- und OpenXML-Dokumente
Wie mache ich einen Link?
Jedes Snippet hat zwei zusätzliche Felder, die mit „URL“ und „Label“ gekennzeichnet sind.
Die URL ist die Internetadresse der Seite, die Sie verlinken möchten.
Link auf eine externe Website
Um den Link in einem neuen Fenster zu öffnen, geben Sie die URL mit https:// an.
Link auf eine Unterseite der eigenen Website
Falls Sie auf eine Seite innerhalb Ihrer eigenen Website verlinken möchten (in keinem neuen Fenster öffnen!), dann verwenden Sie ebenfalls die URL der Seite, die Sie verlinken möchten. Der Unterschied: löschen Sie https:// und Ihre Domain aus dieser URL heraus. Das sieht dann (z.B. bei dieser Seite, die Sie soeben lesen) so aus:
https://online-raketen.at/lexikon/snippets.
Das /lexikon/snippets bleibt übrig - und genau das tragen Sie bei der URL ein.
Das „Label“ ist der Text, der im anklickbaren Button erscheinen soll. Das kann z.B. „mehr Info“, „jetzt lesen“, „Kontakt aufnehmen“, „weiterlesen“, etc. sein.
Speichern Sie danach das Snippet und Ihr Link ist online.
Wie kann ich Icons verwenden?
Die „Bizkit-Engine“ arbeitet mit „Font Awesome“, dem Weltmarktführer für digitale Symbole, zusammen. Die komplette Liste aller Icons finden Sie hier.
Einige Snippets sind für den Einbau von Icons vorgesehen. Tragen Sie den Namen des Icons (z.B. „coffee“, „envelope“, „suitcase“) in das vorgesehene Feld ein. Klicken Sie auf „Speichern“, wenn Sie mit der Bearbeitung fertig sind. Fertig!
Wie verändere ich Farben und Hintergrundbilder?
Mit der „Bizkit-Engine“ können Sie auch jedem Seitenabschnitt („Snippet“) ein individuelles Erscheinungsbild verleihen! Klicken Sie dafür oberhalb des „Speichern“-Buttons auf „CSS-Styles öffnen“. Nun erscheinen zusätzliche Felder, in die Sie Informationen eintragen können.
Verwenden Sie bei Farbangaben immer die HEX-Werte von Farben.
BG-Color: Hintergrundfarbe
Color Heading: Farbe der Überschriften
Color Text: Farbe des Fließtextes
Color Icons: Farbe der Icons
Color Text im Button: Farbe des Textes im Button
Color BG Button: Hintergrundfarbe des Buttons
Hintergrundbild: Dropdown-Menü vorhandener Bilder am Server zur Auswahl als Hintergrundbild
Sie möchten mit Snippets arbeiten und haben eine Frage dazu?
Unser Support-Team ist immer für Sie da! Schicken Sie uns Ihre Frage bzw. Problemstellung und wir werden uns so rasch wie möglich um eine Lösung bemühen!