Skip to main content

Ausgleich von Text und Bild

Das Element sidebar wird in Paligo sowohl als separate Komponente (sogenannte schwebende Seitenleiste) als auch als allgemeines Reuse-Wrapper-Element verwendet, siehe Ein informelles Topic erstellen. Erfahren Sie mehr über Unterstützte Elemente.

Wenn Sie eine Seitenleiste in zwei Spalten aufteilen, können Sie Text und Bild für Ihre PDF-Ausgabe ausgleichen. Sie können dies für Schritt-für-Schritt-Anweisungen verwenden, in denen die nummerierten Schritte ein Bild enthalten müssen.

Sidebar_Leveled_small.png

Hinzufügen einer Seitenleiste mit zwei Spalten

Die Standardeinstellung für eine Seitenleiste ist eine einzelne Spalte mit grauem Hintergrund, schwarzem Rahmen und Text oberhalb des Bilds.

Durch Hinzufügen eines „role“-Attributs, das die Seitenleiste in zwei Spalten aufteilt (mit dem Bild und dem Text), werden die Spalten für die PDF-Ausgabe ausgeglichen. Das „role“-Attribut entfernt den Rahmen und die Hintergrundfarbe. Außerdem wird die Seitenleiste in zwei gleich große Spalten aufgeteilt. Es ist nicht möglich, die Spaltenbreiten individuell anzupassen. Daher muss Textmenge an die Bildgröße angepasst werden. Wenn die Textmenge die Bildhöhe überschreitet, fließt der Text in die Bildspalte über. Sie müssen für jedes Text-Bild-Paar eine eigene Seitenleiste hinzufügen.

Sidebar_Unleveled_small.png
Sidebar_Leveled_small.png

Links – Standardeinstellung der Seitenleiste. Rechts – Seitenleiste mit zwei Spalten.

Anmerkung

Damit dies in einer HTML-Ausgabe funktioniert, müssen Sie der Seitenleiste eine Rolle wie „sidebar-css“ zuweisen und CSS auf diese Rolle ausrichten. Sie müssen im Layout für die HTML-/HTML5-Konfiguration das Attribut „role“ als „class name“ aktivieren. Erfahren Sie mehr über role-Attributwerte.

Dieser Beispielcode teilt dem Text 75 % der Seitenleistenbreite zu.

.sidebar-css {
  padding: 6pt;
  width: 75%;
  display: flex;
}

Die folgende Anleitung zeigt, wie Sie Text und Bild für die PDF-Ausgabe ausgleichen.

  1. Wählen Sie das Topic oder die Komponente im Content Manager aus, um es/sie im Editor zu öffnen.

    Content Manager in Paligo. It shows the Documents section contains an Acme 100 Topics folder. Inside the folder there is a publication and many topics, including "Connect to Network (100).

    Alternativ können Sie Topics erstellen und dieses bearbeiten.

  2. Platzieren Sie den Cursor an der Stelle, an der das Element sidebar in das Topic eingefügt werden soll.

  3. Drücken Sie Alt + Enter ⏎ (Windows) oder Command ⌘ + Enter ⏎ (Mac), um den Kontextmenü „Elemente“ anzuzeigen.

    Element context menu shows a search field and a list of elements that are valid at the current position.

  4. Geben Sie sidebar ein und wählen Sie das Element im Menü aus.

  5. Fügen Sie einen title (optional), einen para und ein mediaobject hinzu, indem Sie Kontextmenü „Elemente“ verwenden.

  6. Wählen Sie Seitenleiste in Menü „Elementstruktur“ unterhalb der Symbolleiste aus.

    Sidebar_GoToElement_small.png

  7. Wählen Sie Zu Element wechseln aus.

  8. Fügen Sie dem Element sidebar das Attribut Rolle hinzu.

    Sidebar_Role_to_level_image_and_text_small.png

  9. Geben Sie den Wert column-count: 2; column-gap: 10pt ein.

    Dies ergibt zwei Spalten mit 10 pt Abstand zwischen ihnen.

  10. Drücken Sie Speichern. Save icon.

Anmerkung

Um das Ergebnis sehen zu können, müssen Sie das Topic veröffentlichen.

Verwenden von Nummerierungen in Seitenleisten

Um Text und Bild Schritt für Schritt auszugleichen, können Sie für Ihre PDF-Ausgabe Seitenleisten mit geordneten Listen verwenden.

Stellen Sie jeden Schritt durch eine neue Seitenleiste dar. Wenn Sie mehrere Schritte in derselben Seitenleiste darstellen, können Sie nur ein einzelnes Bild ausgleichen.

Sidebar_Numbered_List_B.jpg

  1. Hinzufügen einer Seitenleiste mit zwei Spalten für jeden Schritt.

  2. Wählen Sie den para in der ersten Seitenleiste aus.

  3. Wählen Sie auf der Symbolleiste Geordnete Liste aus. Ordered_list_small.png

    Toolbar_Edit_small.png

  4. Wiederholen Sie die Schritt-für-Schritt-Anleitung für alle Seitenleisten.

  5. Wählen Sie orderedlist im Menü „Elementstruktur“ für die Seitenleisten aus, die Schritt 2 und folgende darstellen.

    Sidebar_OrderedList_ElementStructureMenu.jpg

  6. Fügen Sie das Elementattribut Fortsetzung hinzu.

  7. Legen Sie den Wert auf Fortlaufend fest.

    Sidebar_Numbering.jpg

    Dies ergibt fortlaufend nummerierte Seitenleisten.

  8. Drücken Sie Speichern. Save icon.

Anmerkung

Um die korrekte Nummerierung sehen zu können, müssen Sie das Topic veröffentlichen.