Wie können in den Produkt-Templates die Seitenränder vorgegeben und Inhalte wie Texte positioniert werden?

Inhaltsverzeichnis:


Ausgangssituation

Sie möchten in den Produkt-Templates die Seitenränder vorgeben oder Inhalte wie z.B. Texte an bestimmten Positionen ausgeben.

Für die Vorgabe der Seitenränder gibt es inzwischen eine einfachere Lösung. Siehe dazu: Wie kann ich Briefpapier einbinden?

Für die Positionierung von Texten ist dieser Artikel aber weiterhin nützlich.

Lösung

Aktuell sind die Seitenränder in einer Breite von 22,5 mm von jeder Seite fest vorgegeben.

Es ist geplant, dies per Einstellmöglichkeit anzupassen. Schon jetzt ist es möglich, mithilfe des Quellcodes die Ränder und Positionen vorzugeben.

Vorgehen

Rechenbeispiel

Um die Werte abweichend vom Beispiel bestimmen zu können, im Folgenden eine Erklärung zur Berechnung:

Vorgegebene Werte:

  • Laut DIN A4 ist diese 210 mm breit und 297 mm hoch.

  • Laut DIN 5008 sind die Seitenränder links 25 mm, rechts 15-20 mm, oben 45 mm und unten 25 mm

  • In den Produkt-Templates ist ein Rahmen von 22,5 mm von jeder Seite vorgegeben, der in der Berechnung berücksichtigt werden muss.

Daraus ergibt sich

  • Abstand oben: 45 mm (DIN 5008) - 22,5 mm (Standard) = 22,5 mm

  • Abstand links: 25 mm (DIN 5008) - 22,5 mm (Standard) = 2,5 mm

  • Höhe Inhalt: 297 mm (DIN A4) - 45 mm (Abstand oben DIN 5008) - 25 mm (unterer Rand DIN 5008) = 227 mm

  • Breite Inhalt: 210 mm (DIN A4) - 25 mm (Abstand links DIN 5008) - 20 mm (rechter Rand DIN 5008) = 165 mm

Übertragen der Werte

  1. Öffnen Sie im Menüpunkt “Werkzeuge” den Punkt “Quellcode”.

    grafik-20240711-160731.png

     

  2. Fügen Sie folgenden Code ein:

    <div style="background: lightblue; position: absolute; margin-left: 2.5mm; margin-top: 22.5mm; width: 165mm; height: 227mm; padding: 0px;"> <p style="margin-top: 0px;">Hier der Inhalt</p> </div>
    1. Erläuterung des Codes:

      grafik-20240711-163441.png

       

      1. background: lightblue; = färbt den Schreibbereich in hellblau. Dies ist angenehmer beim Rrstellen der Vorlage und kann anschließen entfernt werden, damit dies nicht in die finalen Dokumente übernommen wird.

      2. margin-left: 2.5mm; = Angabe des Abstands nach links

      3. margin-top: 22.5mm; = Angabe des Abstands nach oben

      4. width: 165mm; = Breite des Schreibbereiches

      5. height: 227mm; = Höhe des Schreibbereiches

  3. Verlassen Sie das Fenster “Quellcode”.

  4. Die Oberfläche zum Bearbeiten des Templates sieht nun so aus und kann wie gewohnt genutzt werden. Der Arbeitsbereich ist zur Orientierung blau gefärbt. Die Einfärbung kann vor der Freigabe an die Endnutzer entfernt werden (siehe oben bei Erklärung des Codes)

     

  5. Das Dokument würde dann finalisiert so aussehen:

     

Erweiterte Lösung mit zusätzlichen positionierten Texten

Aufbauend auf dem obigen Beispiel können über diesen Weg auch Inhalte millimetergenau positioniert werden.

So erhalten Sie mit diesem Code

<div style="background: lightyellow; position: absolute; margin-left: -2.5mm; margin-top: 4.5mm; width: 85mm; height: 45mm; padding: 0px;"> <p style="margin-top: 0px;">Hier die Anschrift</p> </div> <div style="background: LightCoral; position: absolute; margin-left: 102.5mm; margin-top: 9.5mm; width: 75mm; height: 55mm; padding: 0px;"> <p style="margin-top: 0px;">Hier der Informationsblock</p> </div> <div style="background: lightblue; position: absolute; margin-left: 2.5mm; margin-top: 72.96mm; width: 165mm; height: 175mm; padding: 0px;"> <p style="margin-top: 0px;">Hier der Inhalt</p> </div>

dieses Ergebnis: (vgl. https://de.wikipedia.org/wiki/DIN_5008 Vermaßung des Geschäfts­briefes Form A)

 

 

Anmerkungen

  • Beachten Sie beim Definieren der Bereiche, dass bei Überschreitung der Breite die PDF breiter als 210 mm sein wird und somit nicht mehr A4 entspricht.


Noch Fragen? Ist etwas unklar geblieben?

Sollten Sie noch weitere Fragen zu diesem Thema haben, die in diesem Artikel nicht behandelt oder erklärt wurden, wenden Sie sich gerne über unser Kundenportal an unseren Support.