Ganzseitige Bilder können deine Angebote visuell noch einmal attraktiver machen. Du kannst vollformatige Bilder hinter der Titelseite, sowie hinter Textkapiteln einfügen.

Vorgehensweise

Der Prozess besteht aus drei Schritten:

  1. Bild hochladen und an der gewünschten Stelle einfügen
  2. Eigenes Layout anlegen
  3. CSS-Code im Layout hinterlegen

Schritt 1: Bildmaterial hinterlegen

Bild hochladen

Zunächst lädst du das Bild in Grip hoch. Das Bild muss im Seitenverhältnis des A4-Formats sein.

Wähle ein beliebiges Kapitel zur Bearbeitung oder Neuanlage und Klicke auf das Icon zum Bild einfügen im Text-Editor (1):

Editor: Bild einfügen

Im Bildeigenschaften-Dialog klickst du auf “Server durchsuchen” (2).

Bildeigenschaften

Daraufhin öffnet sich der Dateimanager als Popup. Lade das gewünschte Bild hoch, indem du die Datei auf “Hochladen” (3) ziehst. Alternativ kannst du auch auf “Hochladen” (3) klicken und eine Datei auswählen.

Dateimanager

Sobald die Datei hochgeladen ist, klickst auf das Bild. Dadurch schließt sich der Dateimanager. Anschließend kopierst du die URL der Datei aus den Bildeigenschaften (4). Die URL brauchst du, um später das Bild einzubinden. Am besten fügst du sie in einen Texteditor o.ä. ein.

Dateimanager

Code für ganzseitiges Bild einfügen

Kopiere den folgenden Code ebenfalls in einen Texteditor und füge die Bild-URL in das src-Attribut des img-Tags ein:

<!-- Siehe https://getgrip.de/hilfe/design/ganzseitige-bilder/ -->
<div class="full-page-image"><img src="/url/hier/einfuegen.jpg" /></div>

Nachdem du die URL des Bilds ersetzt hast, ist der Code bereit. Du kannst ihn nutzen, um ganzseitige Bilder am Ende der Titelseite oder in ein beliebiges Textkapitel einzufügen. Nachfolgend sind die beiden Möglichkeiten beschrieben.

Hinter der Titelseite

Füge den Code ganz am Ende der Titelseite ein (5). Stelle sicher, dass du die Bild-URL ersetzt hast und klicke anschließend auf Speichern (6).

Bild hinter Titelseite einfügen

Eine Anleitung zum Bearbeiten der Titelseite findest du unter Titelseite anpassen.

In einem Textkapitel

Grundsätzlich lässt sich ein ganzseitiges Bild an jeder Stelle des Kapitelinhalts platzieren. Es mag berechtigte Ausnahmen geben, aber grundsätzlich empfehlen wir, das Bild am Ende des Kapitels, also optisch zwischen zwei Kapiteln einzufügen.

Öffne das gewünschte Kapitel zur Bearbeitung. Dann klickst du im Editor auf den Button “Quellcode” (7).

Quellcode öffnen

Füge den von oben kopierten Code hinter dem vorhandenen Code ein (8) und klicke auf Speichern.

Bild in Quellcode einfügen

Damit ist Schritt 1 geschafft.

Schritt 2: Eigenes Layout anlegen

Nun speicherst du das aktuelle Design zunächst als eigenes Layout. Das machst du unter “Design anpassen” (1) im aktuellen Angebot, indem du auf “Als neues Layout speichern” (2) klickst:

Angebotsdesign als neues Layout speichern

In dem folgenden Popup kannst du dem Layout einen sinnvollen Namen geben (3).

Layout anlegen

Das ging schnell. Weiter geht’s mit Schritt 3.

Schritt 3: CSS-Code im Layout hinterlegen

Gehe zu den Konto-Einstellungen und dann zum Reiter Angebotslayout (1). Suche dort das neu angelegte Layout und klicke auf den Bleistift (2).

Eigenes Layout bearbeiten

Kopiere den folgenden CSS-Code

/* Siehe https://getgrip.de/hilfe/design/ganzseitige-bilder/ */
div.full-page-image img {
  width: 210mm;
  height: 297mm;
  max-width: none;
  margin-left: -30mm; /* Dieser Wert muss dem linken Seitenrand entsprechen  */
  margin-top: -30mm; /* Dieser Wert muss dem oberen Seitenrand entsprechen  */
}

Und füge ihn in das CSS-Feld ein(3).

Du kannst das Feld auch größer ziehen (4). Klicke auf Speichern und schließen (5).

CSS im Layout hinterlegen

Wie du aus dem Kommentar bei margin-left und margin-top entnehmen kannst, müssen wir den Seitenrand des Dokuments ausgleichen, damit das Bild über die gesamte Seite bis an den Rand dargestellt wird. Die Seitenrand-Abstände findest du im Angebot im Reiter “Design anpassen” unter “Seitenränder anpassen”. Im CSS benötigst du den entsprechenden negativen Wert. Wenn der Seitenrand links zum Beispiel auf 45mm eingestellt ist, muss margin-left -45mm sein.

Das war’s

Das Bild müsste nun ganzseitig an der gewünschten Stelle im PDF ausgegeben werden.

Wenn du mehrere ganzseitige Bilder einsetzen möchtest, kannst du einfach Schritt 1 wiederholen. Die Schritte 2 und 3 müssen nicht wiederholt werden.

Standard-Layout für neue Angebote

Wo wir gerade hier sind, nutzen wir die Gelegenheit und prüfen, ob das richtige Layout als Standard für neue Angebote eingestellt ist.

Soll zum Beispiel das eben angelegte Layout als Standard für neue Angebote gelten, klickst du es an (6) und anschließend auf “Standard-Layout festlegen” (7).

Das neue Layout zum Standard-Layout machen