Versionen im Vergleich

Schlüssel

  • Diese Zeile wurde hinzugefügt.
  • Diese Zeile wurde entfernt.
  • Formatierung wurde geändert.

inklusive unter Verwendung verschiedener Feldspezialoptionen (FSO)

...

Um einen Visitenkarte nach den gegebenen Designvorgaben in einem Portal aufzubauen, empfehlen wir folgende Vorgehensweise:


1. Platzieren Sie unter Druckvorlagen→Druckvorlagen→Neues Design anlegen zunächst Ihre Hintergrundebene (PDF) inklusive Beispieldaten, um die Textstände besser abgleichen zu können.


Info
Image Modified


2. Beginnen Haben Sie hier Ihr Dokument hochgeladen, beginnen Sie im Layouter mit dem Aufbau und Positionieren der Textboxen. Hier können Sie die X- und Y- Koordinaten aus dem InDesign Dokument ganz einfach übernehmen.

3. Fügen Sie nun, für die jeweilige Textbox, die zuvor erstellen in der Datenbank erstellten Variablen der Pers.Daten ein. 

Info

...

Image Added


4. Weisen Sie den Variablen die für Ihre spezifische Visitenkarte notwendigen Regeln und Inlineoptionen zu. Dies können beispielsweise Tabulatoren, unterschiedlicheTextgrößenunterschiedliche Textgrößen, verschiedene Schriftschnitte, wechselnde Textfarben und so weiter sein.


5. Nehmen Sie die notwendigen Artikeleinstellungen vor. Eventuell kann es ratsam sein, auf den Seitenwechsel bei einer zweiseitigen Visitenkarte zu verzichten und die Ansicht im Frontend „untereinander“ anzubieten. Die Erfahrung hat gezeigt, das eine zweite Seite zum Blättern auch schon mal übersehen werden kann.Image Removed

Info
Image Added


Optische Darstellung durch Feldspezialoptionen

Diese Einstellungen werden bei der Artikeleinrichtung abgefragt.

Nachdem der Grundaufbau der Visitenkarte steht, können Sie nun die Optik für das Frontend, mit Hilfe unterschiedlicher Feldspezialoptionen, benutzerfreundlich anpassen.

Info
Image Modified


Ungewollte Leerzeichen des Nutzers innerhalb der Personalisierung, können durch die Aktivierung der Feldspezialoption „Leerzeichen am Wortanfang / Wortende entfernen“ vermieden werden. 

Info
Image Modified



Die FSO „Beispieltext“ bietet 3 Optionen, um den Benutzer bei der Personaliserung anzuleiten. 

1. Durch einfache Texteingabe im Backend, wird dieser Text unterhalb des zu befüllenden Feldes im Frontend angezeigt.

Info
Image Modified     Image Modified


2. Durch das Setzen eines Fragezeichens „?“ zu Beginnn der Texteingabe im Backend, wird Frontend innerhalb des Eingabefelds ein Fragezeichen angezeigrt, welches durch Mouse-over den entsprechenden HIlfetext anzeigt.

Info
Image Modified     Image Modified     Image Modified


3 Um den Benutzer eine zusätzliche Option zur Aktualisierung seiner getätigten Eingaben zu bieten, kann innerhalb der FSO unter dem Punkt „Beispieltext“ folgende Abfrage hinterlegt werden:
<input type=“button“ class=“btn btn-primary btn-sm pull-right crBtnPreview btn-cta-topbar“ value=“Aktualisieren“ style=“font-size:0.8em;padding:2px 10px;margin:4px 0px;; border-radius: 3px“ />
Hierbei kann individuell entschieden werden, unterhalb welcher Feldeingabe (Variable) dieser zusätzliche Button positioniert werden soll. Selbstverständlich besteht auch die Möglichkeit, diesen mehrfach zu verwenden.

Info
Image Modified     Image Modified



Die Eingabe einer „Überschrift“ führt zu einer benutzerfreundlichen optischen Unterteilung der Eingabefelder.
Sollte im Aufbauprozess beispielsweise die Benennung einer Variable nicht passend erscheinen, kann diese ganz einfach per „Abweichender Feldname“ umbenannt werden.

Info
Image Added     Image Added


Beispiel: anstelle des Titels soll hier der Akademische Grad eingegeben werden können.

Image Removed     Image Removed



Die FSO „Feld anfügen“ bietet die Möglichkeit, das Eingabefeld im Frontend zum einen von der Position her etwas anzupassen, zum anderen können dadurch mehrere Felder hintereinander positioniert werden. Dies ist etwa bei Eingabe einer Telefonnummer notwendig, wenn hier verschiedene Variablen zum Einsatz kommen.

Um ein optisch ansprechendes Bild der Eingabemaske zu erhalten sind hier noch ein paar weitere Anpassungen notwendig.

Info
Image Modified


Im dargestellten Beispiel werden vier Variablen für die Telefonnummer benötigt:
    •    TelefonLVW (Ländervorwahl)
    •    TelefonVW (Vorwahl)
    •    TelefonHW (Hauptwahl)
    •    TelefonDW (Durchwahl)

...

Der nächste Punkt, um alle Variablen in einer Zeile abbilden zu können ist, die „CSS-Angabenanzugebeneinzugeben.
Dafür ist es wichtig zu wissen, das innerhalb der Shopeinstellungen die Breite der Eingabefelder definiert ist - standardmäßig beträgt diese 248px.
Die Feldbreiten für die einzelnen Eingabefelder werden wie folgt angegeben:
    •    CSS für den Bereich der Texteingabebox: width:65px

Info
Image Modified     Image Modified     Image Modified     Image Modified


Wichtig ist, das die Gesamtsumme der hintereinander zu platzierenden Felder, eine Gesamtbreite von 248px zu erzielen sind.
(65px + 53px + 84px + 46px = 248px -> TelefonLVW + TelefonVW + TelefonHW + TelefonDW = Gesamtbreite)

...

Ist es nicht notwendig oder gewünscht das der Benutzer hier eine Eingabe vornehmen soll, kann das entsprechende Feld in einer weiteren FSO über den Punkt „Feld sperren“ gesperrt werden.

Info
Image Modified


Diese FSO-Einstellung muss nun auch für die 3 weiteren Telefon-Variablen aktiviert werden. Der einzige Unterschied ist - bei der ersten Variable muss zusätzlich zur Aktivierung der Funktion auch der Feldname angezeigt werden, das ist für die anschließenden Variablen nicht nötig.             

...

Für Telefonnummern oder auch Emailadressen kann die FSO „Präfix und Suffix“ zusätzlich ganz hilfreich sein. 

Info
Image Modified

   

Soll beispielsweise ein Bindestrich innerhalb einer Telefonnummer +49 (0) 2154 4809-0 bereits fest vorgegeben sein, so kann dies folgendermaßen abgebildet werden:
Zunächst wird dieser Bindestrich innerhalb des Layouters eingesetzt. Um dem Benutzer das Vorhandensein des Bindestrichs zu verdeutlichen, wird bei der FSO „Präfix und Suffix“, im hier beschriebenen Beispiel, bei der Variable TelefonHW ein Bindestrich als Suffix eingesetzt.

Info

...

Image Modified



Abschließend kann nun die bereinigte HIntergrundHintergrund-PDF (mit entfernten BeispiledatenBeispieldaten), sowie die zugehörige Druck-PDF hinterlegt werden.

...