Multibuttons
Es gibt mehrere Multibuttons. Eine gute Wahl ist der Buttons-Block von Kadence. Im Bild ist der MultiButtons von Gutenverse zu sehen. Die bessere Variante ist jedoch der Buttons-Block von Kadence.
Die Buttons werden als Link verwendet und verweisen von einem Text zum nächsten. Die Qualität eines Links bestimmt das SEO-Ranking bei Google(Search-Engine-Optimization). Es gibt verschiedene Arten von Links:
-Backlink: führt von einer Website zu einer anderen Website.
-interner Link: verweist auf eine Unterseite innerhalb einer Websiste
-externer Link: verweist auf eine Unterseite einer anderen Website
Gute Links erkennen
Gute Links stehen meist im Content-Bereich selbst. Sie sind farblich erkennbar und zudem meist noch unterstrichen. Sie werden auf Ankertexte gesetzt, die gut verständlich sind und dem Leser bereits einen ersten Eindruck verschaffen, was diesen bei einem Klick auf den Link erwartet. Ferner stehen sie in einem Bezug zum Inhalt des Texts. Idealerweise werden vor allem solche Beiträge mit Links befüllt, die über einen hohen Traffic verfügen. Wichtig ist es darauf zu achten, dass die gesetzten Links untereinander nicht in Konkurrenz stehen.
Navigation
Eine Navigation besteht in einem Block-Theme immer aus zwei Teilen:
-einem Navigationsmenü mit Links(Menü)
-einem Navigationsblock dem das Menü zugewiesen ist
Der Navigationsblock kann in einem Block-Theme an einer beliebigen Stelle eingefügt werden (horizontal oder vertikal). Wenn irgendwo ein Navigationsblock eingefügt, wird diesem Block automatisch ein Menü zugewiesen (das erste im Alphabet). Natürlich kann man ein anderes Menü zuweisen, oder ein neues erstellen. In den Block-Eigenschaften (Zahnrad-Symbol) kann die Richtung für die Links, horizontal oder vertikal, gewählt werden.
Eine weitere Navigations-Möglichkeit ist eine Linkmarkierung. Hiermit kann ein Text/Bild/etc. markiert und mit einen Link verknüpfen werden. Fährt man mit der Maus über diese Markierung wird ein Handsymbol für einen Link-Hinweis angezeigt, mit einem klick springt man zu diesem Link. Mit dieser Methode können die Links vielfältiger gestaltet werden. Zum Beisp. auf einem Icon oder Bild. Diese Methode wenden wir im Footer an.
Es gibt folgende Link-Arten:
-Backlink: führt von einer Website zu einer anderen Website.
-interner Link: verweist auf eine Unterseite innerhalb einer Websiste
-externer Link: verweist auf eine Unterseite einer anderen Website
-Anker: auch Sprungmarke gennannt. Einfacher Weg, um zu einem bestimmten Punkt einer Website zu springen, auch auf externe Websites. Kleinschreibung und ohne Leerzeichen in der Erweitert-Eigenschaft eines Blockelement. Auf diesen Anker, kann dann verlinkt werden mit dem #-Zeichen vorab.
Im Bild unten sehen wir den Tempate-Teil Header mit Navigationsblock und zugewiesenem Menü
Optionen
Site-Editor/Block-Editor Optionen
Um in die Optionen des WordPress-Editors zu gelangen muss auf die 3 übereinander liegenden Punkte, Icon ganz rechts, der Menüleiste geklickt werden:
Optionsmöglichkeiten:
–Ansicht:
Die wichtigsten Block-Optionen werden in der Menüleiste in der Mitte als Befehlsleiste angezeigt.
Ctrl+Shift+Enter
Ctrl+Shift+\
Zeig nur noch den mutierbaren Inhalt an. Die Menüzeile kann wieder eingeblendet werden, indem man die Maus an die Stelle platziert wo das Menü ist und hat so die Möglichkeit die Menüzeile wieder an zu zeigen.
Ctrl+Shift+\
Fokussierung auf einen Block nach dem anderen
Ctrl+Shift+Alt+F
Ein- und Ausblenden der Admin-Benutzeroberfläche.
–Editor:
–Plugins:
–Werkzeuge:
siehe auch: https://de.wordpress.org/pdf/
Hier sind schöne und funktionale HTML-Vorlagen sowie Design-Tipps speziell für das Calculated Fields Form (CFF) PDF Generator Add-on. Da das Add-on HTML zur Generierung der PDFs verwendet, liegt der Schlüssel zu einem schönen Design in der Kombination aus sauberem HTML und eingebettetem CSS.
Grundstruktur einer guten Rechnung
Diese Vorlage eignet sich hervorragend für Quittungen, Rechnungen oder Bestellbestätigungen. Sie nutzt ein zweispaltiges Layout für den Kopfbereich und eine klare Tabelle für die Positionsliste.
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<style>
/* Basis-Styling für das PDF */
body {
font-family: 'Helvetica', 'Arial', sans-serif;
font-size: 12px;
color: #333;
line-height: 1.5;
}
/* Kopfzeilen-Design */
.header {
width: 100%;
margin-bottom: 20px;
border-bottom: 2px solid #0056b3;
padding-bottom: 10px;
}
.company-info {
float: left;
width: 50%;
}
.invoice-info {
float: right;
width: 40%;
text-align: right;
background-color: #f4f4f4;
padding: 10px;
border-radius: 5px;
}
/* Tabellen-Design */
table {
width: 100%;
border-collapse: collapse;
margin-top: 20px;
}
th {
background-color: #0056b3;
color: #ffffff;
padding: 8px;
text-align: left;
font-weight: bold;
}
td {
border-bottom: 1px solid #ddd;
padding: 8px;
}
/* Gesamtbetrag hervorheben */
.total-row td {
font-weight: bold;
font-size: 14px;
background-color: #eef2f5;
}
/* Fußzeile */
.footer {
margin-top: 40px;
text-align: center;
font-size: 10px;
color: #777;
border-top: 1px solid #ccc;
padding-top: 10px;
}
/* Hilfsklassen */
.clearfix::after {
content: "";
clear: both;
display: table;
}
</style>
</head>
<body>
<!-- Kopfbereich -->
<div class="header clearfix">
<div class="company-info">
<h2 style="margin:0; color:#0056b3;">Ihr Firmenname</h2>
<p>
Musterstraße 1<br>
12345 Musterstadt<br>
USt-IdNr.: DE123456789
</p>
</div>
<div class="invoice-info">
<strong>Rechnung Nr.:</strong> <%itemnumber%><br>
<strong>Datum:</strong> <%submissiondate_ddmmyyyy%><br>
<strong>Kunde:</strong><br>
<%fieldname_kundenname_value%><br>
<%fieldname_kundenadresse_value%>
</div>
</div>
<!-- Positionsliste -->
<table>
<thead>
<tr>
<th width="50%">Beschreibung</th>
<th width="15%">Menge</th>
<th width="15%">Einzelpreis</th>
<th width="20%">Gesamt</th>
</tr>
</thead>
<tbody>
<!-- Beispiel für eine dynamische Zeile -->
<tr>
<td><%fieldname_beschreibung_value%></td>
<td><%fieldname_menge_value%></td>
<td><%fieldname_einzelpreis_value%> €</td>
<td><%fieldname_gesamtpreis_value%> €</td>
</tr>
<!-- Weitere Zeilen können hier hinzugefügt werden, falls das Formular wiederholende Gruppen unterstützt -->
</tbody>
<tfoot>
<tr class="total-row">
<td colspan="3" style="text-align:right;">Endsumme:</td>
<td><%fieldname_endsumme_value%> €</td>
</tr>
</tfoot>
</table>
<!-- Fußzeile -->
<div class="footer">
Vielen Dank für Ihren Auftrag! Fragen? Kontaktieren Sie uns unter info@ihrefirma.de
</div>
</body>
</html> Wichtige Hinweise zur Implementierung
- Feld-Tags ersetzen: Ersetzen Sie die Platzhalter wie
<%fieldname_kundenname_value%>durch die tatsächlichen Tags Ihrer Formularfelder. Diese finden Sie im CFF-Editor unter „Special Tags“. - HTML-Qualität: Der HTML-Code im CFF PDF-Generator muss wohlgeformt sein. Alle Tags müssen geschlossen werden (z.B.
<br />statt<br>), da der Generator sonst das PDF möglicherweise nicht erstellt. - CSS im Head: Das CSS muss zwingend im
<head>-Bereich innerhalb von<style>-Tags definiert werden. Externe CSS-Dateien werden vom PDF-Generator in der Regel nicht geladen.
Design-Tipps für spezielle Anforderungen
1. Mehrsprachige Zeichen und Sonderzeichen
Wenn Sie Umlaute oder spezielle Symbole verwenden möchten, stellen Sie sicher, dass <meta charset="UTF-8"> im Head-Bereich steht. Für nicht-lateinische Schriftzeichen (z.B. Kyrillisch oder Asiatisch) müssen spezifische Fonts im CSS eingebunden werden, da der Standard-Font diese oft nicht abdeckt.
2. Seitenumbrüche steuern
Bei längeren Formularen (z.B. Listen mit vielen Positionen) können Sie erzwungene Seitenumbrüche einfügen, um Tabellen nicht zu zerschneiden:
<p style="page-break-before: always;">Neuer Abschnitt auf nächster Seite</p>Dies ist nützlich, um z.B. die Zahlungsbedingungen immer auf eine neue Seite zu setzen.
3. Kopf- und Fußzeilen auf jeder Seite
Um sicherzustellen, dass Ihr Firmenlogo oder die Seitenzahl auf jeder Seite des PDFs erscheint, nutzen Sie position: fixed im CSS:
@page { margin: 100px 50px; }
#header {
position: fixed;
top: -80px;
left: 0;
right: 0;
height: 60px;
text-align: center;
}
#footer {
position: fixed;
bottom: -80px;
left: 0;
right: 0;
height: 60px;
text-align: center;
}Fügen Sie dann <div id="header">Ihr Logo</div> und <div id="footer">Seite <span class="page"></span></div> in den Body ein.
PHP
siehe auch: Wikipedia-Artikel zu PHP
PHP ist eine serverseitige Programmiersprache zur Erstellung von Webanwendungen wie z. B. WordPress, die im World Wide Web von einem Webserver ausgeführt werden.
Serverseitig bedeutet, dass PHP-Befehle auf dem Webserver ausgeführt werden. Im Quelltext der Webseiten im Browser ist kein PHP mehr vorhanden. Dort gibt es nur HTML, CSS und JavaScript.
Plugins
siehe auch: https://de.wordpress.org/plugins/
Plugins erweitern WordPress-Websites mit zusätzlichen Funktionen:
- Das Plugin WooCommerce erweitert eine Website um einem Shop.
- Die Plugins RankMath und Yoast unterstützen die SEO.
- Die Gutenverse Plugins Gutenverse (ca. 50 zusätzliche Blöcke für den Block-Editor) und Gutenverse Form (mit Form Builder). Diese Plugins erweitern den Block-Editor und ermöglichen ein einfaches gestalten von Formularen.
Plugins-Verwaltung über das Backend via Menüleiste mit klick auf Plugins -> Plugin hinzufügen.
Template-Anzeige
Die Template-Anzeige erreichen wir über Einstellungen für den Dokumenteneintrag Template, dort wählen Sie Template anzeigen.
So werden Block-Editor und Website-Editor einander immer ähnlicher:
R1
easfdsasdse.