React website builder.
Das ist Quarkly.
Visuelle Schnittstelle, adaptive Designeinstellungen, Code-Editor, React-Komponenten, alle Möglichkeiten von CSS. Verwenden Sie vorgefertigte React-Komponenten oder erstellen Sie Ihre eigenen. Unbegrenzte Anpassungsmöglichkeiten, No-Code-Tools eines klassischen Editors.
Projekt erstellen
Coole Features für React.js Entwickler.
Erstellen benutzerdefinierter React-Komponenten im Code-Editor
Sie können benutzerdefinierte React-Komponenten im Quarkly-Code-Editor erstellen und sie danach zur Seite hinzufügen.
Leitfaden für Entwickler
Nützliche Informationen zum Erstellen von Quarkly-Komponenten, zum Erstellen von Anwendungen und mehr.
Hot Import von NPM-Modulen
Das Importieren von Modulen zu Ihrer Komponente aus NPM war noch nie einfacher.
Exportieren zu Create React App
Ein Schritt, um Ihr Projekt abzuschließen oder es auf Ihrem eigenen Server zu hosten: Exportieren Sie es in ein Archiv mit einem Create-React-App-Projekt.
Exportieren zu Gatsby Project
Exportieren Sie Ihre Projekte zu Gatsby – einer der bekanntesten statischen Site-Generierungs-Webframeworks
Commits in Ihr GitHub-Repository pushen
Möchten Sie ein GitHub-Repository für Ihr Projekt erstellen und Änderungen dort committen? Ein Kinderspiel!
Veröffentlichung auf Netlify
Wenn Ihre Website fertig ist, veröffentlichen Sie sie auf Netlify. Sie wird eine technische Domain haben, zum Beispiel: https://inspiring-beaver-d128ed.netlify.app.
Modern eingebauter Code-Editor
Im Quarkly-Editor können Sie alle Entitäten überwachen, die auf der Seite vorhanden sind.
Debugger
Unsere Debug-Konsole hilft Ihnen, Fehler im Komponentencode und auf Seiten zu verfolgen.
Code-Tipps
Wenn Sie Zweifel haben, wie man eine Eigenschaft buchstabiert, beginnen Sie mit dem Tippen und der Editor vervollständigt, was Sie schreiben.
Synchronisierte Seiten und Code-Editor
Alle Bearbeitungen, die Sie auf den Seiten vornehmen, werden im Code und umgekehrt angezeigt.
Vollständige Designkontrolle.
Funktionen
Jetzt wird Ihre Webseite bemerkt! Nutzen Sie unsere einzigartigen Animationen, eingängigen Layouts und Transformationen.
Primitive
Basis-Komponenten, die ähnlich sind wie HTML-Tags wie Text, Bild, Box und andere.
Erstellen von Komponenten auf einer Seite
Wählen Sie ein Element oder eine Gruppe von Elementen auf der Seite oder auf dem Layer-Panel aus und verwandeln Sie sie in eine Komponente. Fügen Sie Kopien der Komponente zur Seite hinzu und sie erben alle Props.
Anzeigen von benutzerdefinierten Props auf dem Panel
Jede Eigenschaft, die zu einer benutzerdefinierten Komponente gehört, kann auf dem rechten Panel angezeigt werden.
Themen
Mit Themen können Sie ein konsistentes Design für Ihre Webseite erstellen.
Designanpassung mit Breakpoints
Ihre Webseite ist vollständig responsiv auf mobile Geräte, indem Sie für Elemente an Breakpoints unterschiedliche Designlösungen verwenden.
Hinzufügen und Bearbeiten von Breakpoints
Im Projektdesign möchten Sie vielleicht benutzerdefinierte Breakpoints hinzufügen oder vorhandene bearbeiten.
Drag'n'Drop
Ordnen Sie Elemente auf der Seite an, wie Sie möchten, lassen Sie sie auf dem gewünschten Bereich fallen oder verschachteln Sie sie in anderen Elementen.
Mehrfachauswahl
Sie können mehrere Elemente auswählen, um ihre Stile festzulegen, sie an einen anderen Ort zu ziehen und abzulegen, zu entfernen, usw.
Texteditor
Sie können einen Teil des Textes in kursiv oder fett umwandeln, ihn zu einem Link machen oder zu Span umwandeln und jeden Stil dafür verwenden.
Deep select
Sie können die Hierarchie der Elemente mit Doppelklick hoch- und heruntergehen. Wenn Sie in die Hierarchie eintauchen möchten, halten Sie unter Windows die Strg-Taste und unter MacOS die Cmd-Taste gedrückt.
Unterstützung von Flexbox und Grid
Hier bei Quarkly sind wir Befürworter von modernsten Ansätzen zur Frontend-Codierung.
Konfiguration der Stile von Pseudoklassen hover/active/focus, usw.
Um das Aussehen des Elements zu ändern, zum Beispiel, wie es sich beim Überfahren verhält, aktivieren Sie "hover" und wenden Sie die gewünschten Props an.
Verbindung zu Google Fonts
Machen Sie Ihre Webseite lebendiger, indem Sie Schriften aus einer Bibliothek mit über 990 Schriftfamilien verwenden.
Unsplash-Bilder
Unsplash ist eine der angesagtesten kostenlosen Bildbestände. Durchsuchen Sie seine Sammlung und wählen Sie Bilder direkt aus der Quarkly-Schnittstelle aus.
Props-Panel
Hier finden Sie kategorisierte Stil- und Funktionsproperties.
Layout
In diesem Abschnitt finden Sie Anzeigeeigenschaften von Elementen.
Typografie
In diesem Abschnitt können Sie Textstile mit speziellen Eigenschaften ändern.
Einrückungen
Öffnen Sie diese Einstellungen, um Ränder und Abstände zu konfigurieren.
Hintergrund
In diesem Abschnitt finden Sie Eigenschaften für Elementhintergründe.
Ränder
Hier können Sie Ränder und Rundungen konfigurieren.
Position
Diese Kategorie hilft Ihnen, die Position des Elements und die Z-Index-Einstellungen zu konfigurieren.
Blend-Modus
Diese Eigenschaft bietet zusätzliche Designmöglichkeiten.
Boxschatten
Diese Eigenschaft hilft Ihnen, den Schatten des Elements auszuwählen.
Übergang
Diese Eigenschaft ermöglicht es einem Element, sanft von einem Zustand in einen anderen zu wechseln.
Transformation
Mit dieser Eigenschaft können Sie das Element transformieren, zum Beispiel drehen oder zoomen.
Filter
Diese Eigenschaft hilft Ihnen, eine Vielzahl von visuellen Effekten anzuwenden.
Große Geschäftsmöglichkeiten.
Arbeiten Sie als Team zusammen
Nutzen Sie das Quarkly-Kollaborations-Tool: Arbeiten Sie gemeinsam mit Ihren Teamkollegen an einem Projekt, schicken Sie ihnen einfach eine Einladung.
Inhalt
Nutzen Sie die vorgefertigten Blöcke: Pop-ups, Karten, Videos und vieles mehr!
Vertrauter Workflow
Sie werden keine Probleme haben, die Arbeitsweise hier zu verstehen. Die Lernkurve von Quarkly ist wirklich sanft.
Themenbezogene Blöcke zum sofortigen Einsatz
Sie können Komponenten mit themenbezogenem Inhalt nutzen. Arbeiten Sie genauso damit wie mit regulären Komponenten.
Katalog mit Komponenten
Enthält über 40 Komponenten, und der Katalog hört nie auf zu wachsen.
Semantische Tags
Alle Komponenten können als Tag fungieren. Wählen Sie einfach den notwendigen "as" Eigenschaftswert aus.
Schema.org
Sie können gewünschte Attribute zu Elementen im Code-Editor setzen.
Bild ALT
Dies ist eine separate Eigenschaft des "Image"-Elements.
Favicons
Mit dieser Funktion können Sie einzigartige Icons für alle Geräte und individuelle Kachelhintergrundfarben für Windows 10 installieren.
Open Graph und Meta-Tags
Verwenden Sie diese Einstellungen für die korrekte Anzeige Ihrer Website in sozialen Netzwerken und in Suchmaschinen.
Benutzerfreundliche URL
Saubere URLs helfen Ihnen, die SEO Ihrer Website zu verbessern.
Robots.txt und sitemap.xml
Diese Dateien werden automatisch erstellt. Aber Sie können sie in der Zukunft so bearbeiten, wie Sie es für richtig halten.
Nutzen Sie es kostenlos.
Wir bieten Ihnen Quarkly so lange kostenlos an, wie wir können, und bieten dann den niedrigsten Preis unter unseren Wettbewerbern.
Projekt erstellen