Wichtige Erkenntnisse
- Elementor hat kein Roadmap-Widget, daher wird eine Elementor-Roadmap normalerweise mit einem Timeline-Widget erstellt, wobei jedes Element ein Merkmal oder eine Phase ist.
- Mit dem Master Addons Timeline-Widget kann jedes Element ein benutzerdefiniertes Etikett anstelle eines Datums anzeigen, das zu Roadmap-Status wie Ausgeschickt, In Bearbeitung, Weiter oben und Erkunden passt.
- Eine Roadmap für öffentliche Produkte funktioniert am besten mit Status-Labels oder Quartalen, denn genaue Daten auf einer Roadmap werden zu Versprechen, an die sich Kunden erinnern.
- Das Timeline-Widget kann eine Roadmap vertikal mit Links-, Mittel-, Overlay- oder Rechtsausrichtung oder als horizontales Karussell mit Pfeilen anzeigen.
- Der fokussierte Zustand im Style-Tab des Timeline-Widgets gibt dem Element, das ein Besucher gescrollt hat, seinen eigenen Kartenhintergrund und seine eigene Punktfarbe an.
Eine Elementor-Roadmap-Seite zeigt den Kunden, was Sie versendet haben, was Sie bauen und was als nächstes kommt. Elementer Enthält kein Roadmap-Widget, aber eine Roadmap ist eine Zeitleiste mit Status anstelle von Daten, sodass ein Timeline-Widget die Aufgabe erfüllt. Dieser Leitfaden verwendet die Master Addons Timeline Widget.
Das Beispiel ist eine Software-Roadmap mit vier Punkten: Shipped, In progress, Next up and Exploring Derselbe Build funktioniert für einen Kursplan, einen Bauzeitplan oder einen Onboarding-Prozess, Sie richten die Artikel ein, tauschen Termine gegen Etiketten, wählen ein Layout und stylen die Phasen.
Inhaltsverzeichnis
Was auf einer Produkt-Roadmap-Seite steht
Eine Produkt-Roadmap-Seite listet geplante Arbeiten auf, in der Reihenfolge, wie nah sie veröffentlicht werden sollen Jeder Eintrag benötigt drei Dinge: einen Status, einen Kurznamen und einen Satz darüber, was der Kunde bekommt.
Die meisten öffentlichen Straßenkarten verwenden eines von zwei Systemen für den Status:
| System | Beispielbeschriftungen | Benutzen Sie es, wenn |
|---|---|---|
| Statusbeschriftungen | Versendet, In Bearbeitung, Weiter oben, Erkunden | Sie möchten sich nicht auf Dates festlegen |
| Zeiteimer | Q1 2027, Q2 2027, später | Sie planen in Quartieren und können sich hinter diese stellen |
| Genaue Termine | 14. März 2027 | Der Termin ist fix, wie z.B. eine Veranstaltung oder ein Launch |
Status-Labels sind die sicherste Wahl für Software Ein verrutschtes Datum auf einer öffentlichen Seite wird screenshottet, und ein Label wie “Next up” kann nicht verrutschen.
So erstellen Sie die Roadmap in Elementor
Sie benötigen Elementor- und Master-Add-ons. Die Roadmap selbst ist ein Timeline-Widget, das auf die benutzerdefinierte Zeitleiste gesetzt ist.
Schritt 1: Planen Sie die Phasen
Schreiben Sie die Liste, bevor Sie den Editor öffnen Vier bis acht Elemente sind reichlich Für dieses Beispiel:
| Etikett | Merkmal | Einzeilige Beschreibung |
|---|---|---|
| Versendet | Checkout-neugestaltung | Eine Seite Kasse mit gespeicherten Warenkörben. |
| In Bearbeitung | Teamarbeitsplätze | Gemeinsame Projekte, Rollen und Kommentare. |
| Weiter | Mobile App | iOS - und Android-Apps mit Offline-Modus. |
| Erkundend | Öffentliche API | Webhooks und eine REST-API für Integrationen. |
Schritt 2: Fügen Sie das Timeline-Widget hinzu
Bearbeiten Sie Ihre Roadmap-Seite mit Elementor und suchen Sie im Widget-Panel nach Zeitleiste Und auf die Seite ziehen Behalten Zeitleisten-typ Auf Benutzerdefinierte Zeitleiste. Das Widget beginnt mit drei Beispielelementen Verwenden Sie Artikel hinzufügen Für ein viertes Symbol oder das Duplikatsymbol in einer Zeile, um eines zu kopieren.
Neu im Widget? So erstellen Sie eine Zeitleiste in Elementor Durch jede Kontrolle geht.
Schritt 3: Ersetzen Sie Daten durch benutzerdefinierte Etiketten
Öffnen Sie den ersten Artikel Ändern zeugen von Von Datum bis Benutzerdefiniertes EtikettGeben Sie dann den Status in die ein Etikett Feld. im Inhaltseditor die erste Zeile mit dem Feature-Namen zu einer Überschrift machen und die Beschreibung darunter schreiben.
Wiederholen Sie für jeden Artikel Die optionale zusammenfügen Feld macht eine ganze Karte anklickbar, was nützlich ist, um eine versendete Funktion an ihren Veröffentlichungsposten oder ihre Dokumente zu senden.
Schritt 4: Wählen Sie ein Layout
Das mittlere Layout oben wechselt die Karten links und rechts ab. Zwei weitere Layouts passen gut zu einer Roadmap.
Links ausgerichtet. Im Tab Stil öffnen Sie Grundriss und eingestellt Horizontal ausrichten Nach links Jede Karte sitzt auf einer Seite mit ihrem Etikett darin, das liest sich wie eine Liste, die sich leichter scannen lässt, wenn Beschreibungen länger laufen.
Horizontal. Im Reiter Inhalt, setzen Zeitleistenstil Zur Horizontalen Zeitleiste Die Phasen werden zu einem Karussell mit den Etiketten über der Linie, das dauert eine Zeile, passt also auf eine Startseite oder unter eine Preistabelle.
Die Karusselleinstellungen sind abgedeckt mit So erstellen Sie eine horizontale Zeitleiste in Elementor.
Schritt 5: Die Phasen stylen
Öffnen Sie die Registerkarte Stil und arbeiten Sie vier Abschnitte durch.
- Karten: Polsterung, Randradius sowie Titel- und Inhaltsfarben. Die Karteikarte Focused gestaltet die Karte, zu der der Besucher gescrollt hat.
- Termine: Typografie und Farbe für die Status-Labels Fett mit einer Markenfarbe lässt sie als Tags lesen.
- Linie: Der Hintergrund ist der vollständige Titel und die Fortschrittsfarbe füllt sich, während der Besucher scrollt.
- Punkte: ein Punkt, ein Symbol oder ein Bild mit separaten Standard-, Hover- und Fokusfarben.
Jedes Element hat auch einen eigenen Style-Tab im Content-Panel, für Punkt - und Farbeinstellungen allein auf diesem Element Verwenden Sie es, um dem versendeten Element eine andere Punktfarbe als dem Rest zu geben, so dass fertige Arbeit auf einen Blick sichtbar ist.
Möchten Sie zuerst weitere Layouts sehen? Die Elementor-Zeitleisten-Widget Seite hat Live-Demos, einschließlich einer horizontalen Roadmap.
Was Sie in der Roadmap anbringen sollten
Eine Roadmap-Seite liest sich besser mit ein wenig Kontext über und unter der Timeline.
- Ein kurzes Intro Das sagt aus, wie oft die Seite aktualisiert wird.
- Ein Feedback-Link Unter der Zeitleiste zu einem Formular oder einer Feature-Request-Board.
- Ein Changelog Für das, was bereits versendet wurde Die Changelogs-widget Listen Sie Versionseinträge auf derselben Seite auf.
- ZahlenWenn Sie sie haben Eine Reihe von Gegen auf Widgets können Funktionen anzeigen, die dieses Jahr ausgeliefert werden.
- Ein Fortschrittsindikator Für ein großes Projekt, die Verwendung der Widget der Fortschrittsleiste.
Wenn die Roadmap nur für Kunden bestimmt ist, ist die Anzeigebedingungen Ratgeber Zeigt, wie man einen Abschnitt vor abgemeldeten Besuchern ausblendet.
Häufig gestellte Fragen
Verfügt Elementor über ein Roadmap-Widget?
Nr. Elementor und Elementor Pro haben kein Roadmap - oder Timeline-Widget Die meisten Elementor-Roadmaps werden mit einem Timeline-Widget aus einem Addon erstellt, wobei jedes Element als eine Phase oder Funktion verwendet wird.
Kann ich eine Roadmap ohne Termine in Elementor zeigen?
Ja. Im Master Addons Timeline Widget, setzen Sie auf Benutzerdefinierte Beschriftung für jedes Element anzeigen und geben Sie einen Status wie Shipped oder Weiter up. Das Etikett nimmt den Platz des Datums neben dem Punkt.
Sollte eine öffentliche Roadmap vertikal oder horizontal sein?
Vertikal verwenden, wenn jede Phase ein paar Beschreibungszeilen hat, und horizontal, wenn die Roadmap ein kurzer Streifen von drei bis sechs Phasen innerhalb einer anderen Seite ist Das Timeline-Widget wechselt mit der Timeline Style-Steuerung zwischen ihnen.
Wie markiere ich ein Roadmap-Element wie gemacht?
Ändern Sie seine Beschriftung in Shipped und geben Sie ihm eine andere Punktfarbe im Artikel eigenen Style Tab Sie können auch einen Link zum Release Post hinzufügen, damit Besucher lesen können, was sich geändert hat.
Letzte Gedanken
Eine Elementor-Roadmap ist ein Timeline-Widget mit vier bis acht benutzerdefinierten Timeline-Elementen, auf benutzerdefiniertes Label gesetzt anzeigen und einem Status in jedem Label-Feld Wählen Sie für das Layout die Mitte, links oder horizontal, und verwenden Sie dann die Abschnitte Karten, Daten, Linie und Punkte, um versandte Arbeit von geplanten Arbeiten abzuheben.
Beginnen Sie mit einer Demo auf der Zeitleisten-Widget-Seite und ersetzen Sie die Musterartikel durch eigene Phasen.
Verwandte Lektüre
