Ein Page Builder kann viel, aber keine Beschriftungen gleichmäßig auf einen Kreis setzen und keine Marken aus einem Feld der Seite ziehen. IDF Visual Content liefert genau diese Bausteine: zeichnet einen angeschnittenen Bogen mit Nummern und den Stationen als Block daneben, zeigt die Marken einer Seite als Logo-Zeile oder als Karten mit Logo, Beschreibung und Nachweisen.
Beide Shortcodes bringen keine eigene Überschrift mit und bleiben leer, wenn die Seite keine Daten hat. Die Felder legt das Plugin selbst an: Stationen und Marker an der Seite, die Marken-Auswahl an der Seite, die Nachweise an den WooCommerce-Marken. Gedacht für Leistungs- und Landingpages, die je Seite andere Stationen und andere Marken zeigen.
Changelog
v0.7.0
Neu
- Deckkraft für Flächen und Linien im Reiter „Ring“. Joerg, 01.11.2026: „Können wir Flächen und Linien im Admin noch eine Transparenz geben?“ Neben sieben Farben steht in derselben Zeile eine Deckkraft in Prozent (0 bis 100, Standard 100): Bogen, innere Linie, Hintergrund und Rahmen der Nummern, Hintergrund und Rahmen der Begriffe, Linie zur Nummer. Unter 100 geht die Farbe als
color-mix(in srgb, <Farbe> <Deckkraft>%, transparent)ins Inline-CSS; eine Theme-Farbe bleibt dabei ein Verweis auf das Theme (var(--awb-colorN)). Text, Hover und Komet haben keine Deckkraft. Refs #12.
v0.6.0
Geändert
- Es gibt nur noch den Bogen. Joerg, 01.11.2026: „Wir behalten nur die neue Version ‚als Kreis‘. Ich sehe gerade, den Kreis gibt es auch noch.“
[idf_vc_ring]zeichnet immer den angeschnittenen Bogen mit Nummern, den Begriffen als Block und rechtwinkligen Linien, auch auf den Seiten, die bisher den ganzen Ring mit Bild in der Mitte hatten (Layout „Landing-Page 2027“). Der ganze Ring, das Bild in der Mitte und der umlaufende Marker sind entfernt. Die Attributebild,darstellungundtonstehen noch in Layouts und werden übergangen. Refs #12. - Jedes Feld im Reiter „Ring“ wirkt so, wie es dort steht. Joerg, 01.11.2026: „Wenn ich im Admin etwas einstelle wird es nicht übernommen.“ Bis v0.5.2 überschrieb
ton="dunkel"Linien, Begriffe und Rahmen mit festen hellen Werten, und das Stylesheet setzte im Bogen Schriftgröße (mal 0,78), Laufweite (0,14 em) und die gepunktete innere Linie fest. Diese Regeln sind weg; es gibt keinen Ton mehr, der Reiter gilt auf hellem wie auf dunklem Grund. Die Schrift der Begriffe und Nummern ist höchstens 1,7 % der Breite des Bogens (1.7cqw), damit der Block auch in schmalen Spalten passt. Refs #12. - Der Reiter „Ring“ ist nach den sichtbaren Teilen geordnet: Bogen (Höchstbreite, Farbe, Stärke), Innere Linie (an/aus, Farbe, Stärke, Größe in Prozent des Bogens, gepunktet oder durchgezogen), Komet (Farbe, Größe des Kopfs, Dauer eines Laufs), Nummern (Hintergrund, Rahmen, Ziffer), Begriffe (wie bisher, dazu Linie zur Nummer und Abstand der Begriffe). Neu sind Stil und Größe der inneren Linie, Dauer eines Laufs, die drei Farben der Nummern, die Farbe der Linien und der Abstand der Begriffe; bisher hingen Nummern und Linien an den Farben der Begriffe und des Markers. Weg sind Durchmesser des Bildes, Richtung des Markers und die Schriftgröße unter 640 px. Was bis v0.5.2 gespeichert ist, wirkt weiter: der Durchmesser der inneren Linie wird als Anteil des Bogens umgerechnet (68,4 % der Ringbreite = 74,67 % des Bogens), die Umlaufzeit als Dauer eines Laufs (ein Drittel), und Nummern und Linien übernehmen die gespeicherten Farben, an denen sie bisher hingen. Die Größe des Kometen ist jetzt der Durchmesser seines Kopfs in Prozent der Breite (bisher das 0,84-Fache). Refs #12.
- Der Bogen bleibt aus, solange die Spalten untereinanderstehen. Bis v0.5.2 galt fest 1025 px. Avada stellt auf ihre-ideenfabrik.de die Spalten bis 1200 px untereinander; zwischen 1025 und 1200 px hätte der Bogen über dem Text darüber gelegen. Die Grenze kommt jetzt aus dem mittleren Umbruch des Themes (Avada: Global Options, Responsive, Medium Screen Breakpoint,
visibility_medium; ohne Avada 1024 px) und steht im Inline-CSS. Darunter erscheint nichts, auch nicht der ganze Ring. Refs #12.
Entfernt
- ACF-Feld „Bild in der Mitte“ (
vc_ring_bild) aus der Feldgruppe „Ring (Visual Content)“. Gespeicherte Werte bleiben im Post-Meta liegen und werden nicht mehr gelesen. Refs #12.
v0.5.2
Geändert
- Im Bogen stehen Nummern auf dem Kreis und die Begriffe als Block daneben. Joerg, 01.11.2026: „Können wir die Labeln am Kreis mehr in den Kreis rücken? Dann nutzen wir den Platz im Header besser aus. Oder wir setzen Nummern auf den Kreis und ziehen geometrische Linien von Zahlen zu Chips“, dann „Die Begriffe als Block mehr zusammen. Die Linien folgen“ und „Können die Linien in rechten Winkeln zum Block gehen?“. Ab 1025 px sitzt auf dem Bogen je Station eine Nummer (01, 02, …) in einem Kreis wie die Stationen, Ziffer in der Akzentfarbe. Die Begriffe stehen linksbündig als Block an der Mitte der Box (Kante 50, Takt 5,5, Mitte 32 im Raster der Box). Je Station führt eine dünne Linie im rechten Winkel von der Nummer zum Begriff: waagerecht, senkrecht auf einer eigenen Bahn, waagerecht in den Begriff. Linien nach unten nehmen ihre Bahn von oben her, Linien nach oben von unten her, so kreuzt sich keine; liegen Nummer und Begriff fast auf einer Höhe, läuft die Linie gerade. Nummern und Begriffe wachsen mit der Box (
1.7cqw, höchstens die bisherige Größe), damit der Block bei jeder Breite gleich dicht steht. Unter 1025 px bleibt der ganze Ring mit den Begriffen auf der Linie. Refs #11.
v0.5.1
Geändert
- Der Bogen bestimmt die Höhe des Heros nicht mehr. Joerg, 01.11.2026: „Können wir oben und unten die Padding noch verkleinern? Eher wie auf der Startseite?“ Die Box des Bogens war quadratisch wie der Ring (658 px bei 1440 px Breite) und damit höher als der Text daneben; der Text stand mittig mit viel Luft darüber und darunter, der Hero von Fahrzeugwerbung war 1217 px hoch. Ab 1025 px ist die Box jetzt flacher (100 : 64), der Text bestimmt die Höhe wie auf der Startseite: Brotkrume oben bei 216 px statt 319 px, Hero 1012 px. Kreis, Stationen und Fläche sind im selben Verhältnis neu gerechnet (Mitte 80,8 / 39,2, Radius 73,3, Stationen von -16 bis 72, Fläche von -35 bis 80, jeweils in Prozent der Breite); die Form bleibt die der Vorschau. Im Bogen ist
--idf-vc-bogen-yjetzt ein Anteil der Boxhöhe. Refs #11. - Der Marker läuft als Komet mit Schweif von oben nach unten, dann wieder. Joerg, 01.11.2026: „Der Punkt ergibt so keinen Sinn, da er zurückläuft.“ Statt zu pendeln läuft der Punkt mit einem 16 Grad langen, nach hinten ausblendenden Schweif von kurz vor der ersten bis kurz nach der letzten Station, blendet aus und beginnt nach einer kurzen Pause wieder oben (ein Drittel der Umlaufdauer aus dem Reiter je Lauf). Die Gruppe dreht per
transform-box: fill-boxum die Kreismitte; ein unsichtbarer Kreis um dieselbe Mitte macht ihren Umriss symmetrisch. Bei reduzierter Bewegung steht der Komet links auf dem Bogen. Refs #11.
v0.5.0
Hinzugefügt
- Ring als Bogen:
darstellung="bogen". Joerg, 01.11.2026: der Ring im dunklen Hero der Leistungsseiten ist zu dominant. Freigegeben ist ein dünner, angeschnittener Bogen: Ausschnitt eines großen Kreises, dessen Mitte rechts außerhalb liegt, ohne Bild. Die Stationen stehen gleichmäßig im Winkel auf dem Bogen, von oben nach unten; die erste reicht über die Box hinaus nach oben, die Linie läuft bis an die Oberkante des Heros und blendet unten vor dem nächsten Inhalt aus. Der Marker pendelt zwischen erster und letzter Station (halbe Umlaufdauer aus dem Reiter je Richtung) und steht bei reduzierter Bewegung. Die Box behält die Maße des Rings, die Seite springt also nicht. Unter 1025 px Breite zeigt dieselbe Ausgabe den ganzen Ring ohne Bild. Geometrie aus der Vorschau vom 01.11.2026 (Hero bei 1440 px): Mitte 92,5 / 54, Radius 85 im 100er-Raster der Box. Refs #11. - Helle Fassung für dunklen Grund:
ton="dunkel". Linien, Rahmen und Schrift der Stationen in Weiß mit Deckkraft (55, 25, 40, 90 %), Stationen auf Schwarz, Hover Weiß; der Marker bleibt in der Akzentfarbe. Gilt nur für diesen Einsatz, der Reiter „Ring“ bleibt für den hellen Einsatz. Wirkt auch am Ring. Refs #11.
Geändert
- Im Bogen sind die Stationen kleiner (78 % der Schriftgröße aus dem Reiter) und gesperrt (0,14 em), die innere Linie ist gestrichelt, wie in der freigegebenen Vorschau.
v0.4.4
Geändert
- Ohne Stationen erscheint kein Ring mehr. Joerg, 20.09.2026: „Wenn keine Ring-Werte angegeben, sollte der Ring einfach weg bleiben.“ Bis v0.4.3 reichte dem Shortcode das Beitragsbild als Rückfall, und auf der neuen Hub-Seite Fassadengestaltung stand deshalb ein leerer Ring aus zwei Kreisen mit Bild in der Mitte. Jetzt entscheidet allein die Liste der Stationen: ist sie leer, gibt
[idf_vc_ring]nichts aus; im Avada-Builder steht statt dessen der Hinweis „Ring: keine Stationen hinterlegt, deshalb kein Ring.“ Das Bild in der Mitte bleibt Rückfall, sobald es Stationen gibt.
v0.4.3
Geändert
- Ein Logo aus
[idf_vc_marke_logo]folgt immer seiner Plugin-Zeile. Joerg, 19.09.2026, zur Zeile „[idf_vc_marke_logo]“ mit 40 px: „Ich verstehe nicht, was das dann ist. Das ist doch das Logo, das ich in der Karte aufrufe.“ Bis v0.4.2 hatte die Klasse an der Spalte seiner Post-Card-Vorlage (idf-marken-logo, 20 px) Vorrang, weil.klasse imgspezifischer war als.idf-vc-logo--karte. Jetzt ist der Plugin-Selektor.idf-vc-logo.idf-vc-logo--karteund gewinnt; die Klassen-Zeilen gelten für Avada-Bildelemente, die ein Markenbild selbst zeigen (Dynamic Data: Bild der Marke, z. B. Produktkarten). Zusätzlich.fusion-imageframe:has(.idf-vc-logo) { max-width: none; overflow: visible }, damit ein Bildelement mit Plugin-Logo als dynamischem Inhalt nicht beschneidet. Zeilen im Reiter entsprechend umbenannt. Refs #4.
v0.4.2
Behoben
- Avada-Bildelemente beschnitten die Logos. Auf den Archivkarten von Jacken stand von Fristads nur „FR“, von Greiff „G R“ (Joerg, 19.09.2026, Screenshot): das Bildelement (
span.fusion-imageframe) hatoverflow: hiddenund eine Höchstbreite aus dem Builder (25 % der Karte), das Bild darin war nach der neuen Rechnung breiter. Für jeden Kontext mit Klasse gibt es jetzt zusätzlich.klasse, .klasse.fusion-imageframe { max-width: none; width: auto; overflow: visible }. Refs #4. - Landingpage-Karten reagierten nicht auf den Reiter (Joerg, 19.09.2026): die Post-Card-Vorlage rendert
[idf_vc_marke_logo]ohne den Wrapper.idf-vc-marke__logo, den der Kontext „Marken-Karte“ erwartete, undhoehe="48"im Shortcode setzte die Basis fest. Der Einzel-Shortcode trägt jetzt die Klasseidf-vc-logo--karte, der Kontext meint beides; die Vorlage „PC Marke (Vorlage)“ auf ihre-ideenfabrik.de kommt ohnehoeheaus. Einhoeheim Shortcode geht weiterhin vor, absichtlich. Die Kontexte heißen jetzt nach dem, was sie erkennen: „Produkt-Logo“ und „Marken-Logo“ (Bild-Element mit der Klasse, auch ein Avada-Bildelement mit[idf_vc_marke_logo]als dynamischem Inhalt) und die beiden Plugin-Bausteine; die Labels „Produktseite“ und „Landingpage: Marken-Karte“ führten in die Irre. Refs #4.
Geändert
- Für Produktseite und Produkt-Archiv wird die CSS-Klasse des Bild-Elements eingetragen (wie im Avada-Feld „CSS-Klasse“, ohne Punkt) statt eines Selektors; der Selektor
.klasse imgentsteht daraus. Ein in v0.4.0/v0.4.1 gespeicherter Selektor.klasse imgwird beim Lesen zur Klasse. Joerg, 19.09.2026: „Ich verstehe die Klassen nicht.“
v0.4.1
Geändert
- Bezugsgröße ist die Wortmarke, nicht das Quadrat. In v0.4.0 bekam ein quadratisches Logo genau die Basis-Höhe und breite Wortmarken entsprechend weniger: in der Hero-Zeile von Berufskleidung standen Fristads mit 11 px und Geyser mit 9 px (live geprüft 19.09.2026). Jetzt ist eine Wortmarke 4 : 1 mit 35 % Tinte die 1,
k = (4/ar)^a · (0,35/Tinte)^e / Rand; quadratische Logos werden relativ dazu größer, breite kleiner. Neuer Regler „Seitenverhältnis ausgleichen“a(0,5 = gleiche Fläche, 0 = gleiche Höhe für alle, wie vor v0.4.0). Ein Logo ohne jede Messung bleibt bei 1. Refs #4.
v0.4.0
Hinzugefügt
- Reiter „Logos“: Marken-Logos optisch gleich groß, ohne Style je Logo. Bei gleicher Höhe wirkt ein quadratisches, dünn gezeichnetes Logo winzig und eine fette Wortmarke riesig (Joerg, 19.09.2026: „Machen wir sie an Höhe und Breite fest, sind sie total unterschiedlich … nicht für jedes Logo jedes Mal einen extra Style“). Jedes Marken-Logo wird einmal vermessen: Box ohne leeren Rand, Seitenverhältnis, Tintenanteil; daraus ein Faktor
k = 1/√ar · (0,35/Tinte)^e / Rand, mit dem Exponentene(Standard 0,25; 0 = reine Fläche) und Grenzen für Höhe und Breite. Je Kontext eine Basis-Höhe: Produktseite (.idf-produkt-logo img, 40 px), Produkt-Archiv (.idf-marken-logo img, 28 px), Landingpage Logo-Zeile (32 px) und Marken-Karte (48 px); die beiden ersten Selektoren sind editierbar. Die vier gemessenen Logos (Greiff 1,25 : 1 mit 11 % Tinte bis Geyser 8,1 : 1 mit 51 %) landen damit bei 3,6 : 1 (Greiff zu Fristads), was Joergs Archiv-Abstimmung entspricht. Refs #4. - Ausgabe auf jeder Seite als Inline-CSS an einem Handle ohne Datei:
img.wp-image-{ID},img[src*="/dateiname."]{--idf-logo-k:…},{Selektor}{--idf-logo-basis:…}und eine Höhenregel über alle Kontexte (height: calc(basis × k),width: auto,object-fit: contain). Greift an Avada-Elementen, im Editor und anwp_get_attachment_image(), weil alle die Klassewp-image-{ID}setzen. Regeln je Logo im Custom CSS entfallen. - Messung auf dem Server (Imagick, auch SVG mit Delegat; GD für Rasterbilder) beim ersten Bedarf, sonst im Backend per Canvas beim Öffnen des Reiters (AJAX
idf_vc_logo_messen, Nonce,manage_options); Ergebnis im Anhangs-Meta_idf_vc_logomit Datei-Hash, eine ersetzte Datei wird neu vermessen. Ohne Messung zählt nur das Seitenverhältnis aus den Metadaten. Reiter mit Vorschau je Kontext (reagiert sofort auf Exponent, Grenzen, Basis), Messwert-Tabelle, „Alle Logos neu vermessen“, CSS-Ausgabe. Übersicht zeigt „Marken-Logos vermessen x von y“. - Filter
idf/visual_content/logos(weitere Anhänge),idf/visual_content/logos_css; Actionidf/visual_content/logos_gespeichert. Test-Harnesstests/test-logos.php.
Geändert
[idf_vc_marken hoehe]und[idf_vc_marke_logo hoehe]setzen nur noch die Basis-Höhe je Einsatz (--idf-logo-basis), leer = Reiter „Logos“; der Faktor je Logo gilt immer. Die eigenen Logos tragen die Klassewp-image-{ID}.uninstall.phplöscht mit dem Schalter auchidf_visual_content_logosund die Messwerte.
v0.3.0
Hinzugefügt
- Reiter „Ring“ im Plugin-Menü. Alles am Ring ist jetzt ohne CSS einstellbar (Joerg, 19.09.2026: „Der Ring gibt heute keine Möglichkeit, dass man ihn gestalten kann“): Höchstbreite; äußere und innere Ringlinie (Farbe, Stärke, innere Linie an/aus und Durchmesser); Durchmesser des Bildes; Marker (Farbe, Durchmesser, Umlaufzeit, Richtung); Stationen (Hintergrund, Rahmen, Rahmenstärke, Text, Hover, Form Pille/abgerundet/eckig, Innenabstand, Schriftsatz aus den Avada-Typografie-Sets, Schriftgröße für Desktop und unter 640 px, Laufweite, Großbuchstaben). Option
idf_visual_content_ringüber die Settings API; „Zurücksetzen“ leert sie, dann gilt wieder der Plugin-Standard, der dem bisherigen Aussehen entspricht. Nach dem Speichern wird der WP-Rocket-Cache geleert, andere Caches hängen sich an die Actionidf/visual_content/ring_gespeichert. Refs #3. - Farbfelder mit den Farben des Themes, Bauart aus idf-digital-signage: Farbkreis (Iris aus WordPress) für eigene Farben, Textfeld für Name oder Hex-Code, Weltkugel mit der Palette des Themes (
editor-color-palette; Avada meldet dort seine Global Colors, die zwölf WordPress-Standardfarben bleiben draußen). Eine Theme-Farbe wird als Kennungtheme:<slug>gespeichert, nicht als Wert. Avada-Farben (awb-color-N) kommen im Frontend alsvar(--awb-colorN, #hex)an und folgen damit späteren Änderungen in den globalen Optionen, wie es die Regel „nur globale Farben“ verlangt; andere Themes bekommen den Wert der Palette. Refs #3. - Schriftsatz für die Stationen aus
fusion_options['typography_sets'](typography1 bis 5 und custom_typography_N, mit ihren Labels). Gesetzt, kommen Schrift, Gewicht, Stil, Zeilenhöhe, Größe, Laufweite und Großbuchstaben alsvar(--awb-<set>-…); einzelne Werte lassen sich darüber überschreiben. Filteridf/visual_content/schriftsaetze,idf/visual_content/theme_farben,idf/visual_content/ring_css.
Geändert
- Der Ring füllt seine Spalte. Bisher stand er fest auf 480 px (
--idf-vc-ring-size) und wurde in breiteren Spalten nicht größer (Joerg: „Sie sollte mindestens in dem Bereich, wo er steht, füllen“). Jetztwidth: 100%mitmax-widthaus der Höchstbreite des Reiters (Standard: keine). Das Attributgroesseam Shortcode ist die Höchstbreite je Einsatz (--idf-vc-ring-max), mindestens 240; ohne Attribut gilt der Reiter. Refs #3. - Alle Ring-Werte im Stylesheet sind Variablen mit dem bisherigen Wert als Rückfall. Die Werte des Reiters gehen als Inline-CSS am Stylesheet-Handle mit (
wp_add_inline_style), nur auf Seiten mit einem Baustein. Die innere Linie wird nur gerendert, wenn sie eingeschaltet ist. - Test-Harness
tests/test-ring-einstellungen.php(Standards, Bereinigung, Palette, Schriftsätze, CSS, Reiter rendert);uninstall.phplöscht die neue Option mit dem Schalter.
v0.2.0
Hinzugefügt
- Marken-Karte selbst gestalten.
[idf_vc_marken vorlage="ID" spalten="3"]rendert eine Post-Card-Vorlage aus der Avada-Bibliothek einmal je Marke der Seite; Aufbau, Farben und Schriften kommen damit aus dem Builder und den globalen Optionen statt aus dem Plugin-CSS (Joerg, 19.09.2026: die eingebauten Karten waren im Builder nicht definierbar). Raster mit 1 bis 6 Spalten, ab 1024 px höchstens 2, ab 640 px eine. Eine Vorlage, die sich selbst einbindet, wird abgefangen. Refs #2. - Einzel-Shortcodes je Marke für die Vorlage:
[idf_vc_marke_logo](hoehe,link,class),[idf_vc_marke_name](link,tag,class),[idf_vc_marke_text](absaetze,class),[idf_vc_marke_nachweise](alschips|text,trenner,class),[idf_vc_marke_link](text,target,class, auch umschließend). Alle mitmarke="slug|ID"auch einzeln nutzbar. Die aktuelle Marke wird in dieser Reihenfolge ermittelt: Attribut, Schleife der Vorlage, Filteridf/visual_content/marke, Marken-Term unter einem bekannten Global-Namen (idf_vc_term,fusion_term,post_card_term,awb_term; keine Suche durch alle Globals), Marken-Archiv. Ohne Marke leer im Frontend, Hinweis im Builder. Refs #2. - Filter
idf/visual_content/marken(Marken vor der Ausgabe) undidf/visual_content/marke(aktuelle Marke nachreichen).
Geändert
- Stylesheet nur noch mit globalen Farben (
--awb-color1bis5) und relativen Schriftgrößen; die Ring-Pillen bekommen ihre Größe über--idf-vc-station-size. Nachweise sind jetzt eine Liste (ul.idf-vc-chips > li.idf-vc-chip). - Logo und Archiv-Link liegen zentral in
Idf_Visual_Content_Marke,[idf_vc_marken]nutzt sie.
v0.1.0
Hinzugefügt
- Shortcode
[idf_vc_ring]: Kreislauf-Ring mit Bild in der Mitte, Stationen auf der Ringlinie (gleichmäßig verteilt, optional verlinkt) und laufendem Marker. Daten aus der Feldgruppe „Ring (Visual Content)“ der Seite, Attributestationen,bild,marker,groesse,classüberschreiben. - Shortcode
[idf_vc_marken]: die an der Seite ausgewählten WooCommerce-Marken als Logo-Zeile (layout="logos") oder Karten (layout="karten") mit Logo, Name, Beschreibung, Nachweisen als Chips und Link zum Marken-Archiv. Attributelabel,hoehe,marken,limit,class. - Plugin-eigene ACF-Felder per Code: Repeater Stationen, Bild und Marker-Schalter sowie Marken-Auswahl an den Seiten; Feld „Nachweise“ an den Marken (product_brand).
- Einstellungen: Post-Types, auf denen die Feldgruppen erscheinen (Voreinstellung physisch, strategie, digital, visuell, page).
- Stylesheet nur auf Seiten mit Baustein; Farben aus den Avada-Globals mit Rückfallwerten.
- Ohne Daten keine Ausgabe im Frontend, Hinweis im Page Builder. Keine eigene Überschrift, die setzt der Builder.
- Menü unter IDF Home mit Übersicht, Einstellungen, DSGVO, Hilfe und Deinstallieren.