Beliebige Website mit ClonewebX auf WordPress Breakdance Builder klonen

Best Practice Empfehlung: Website mit ClonewebX auf WordPress (Breakdance Builder) klonen

Hier findest du eine Schritt-für-Schritt-Best-Practice-Anleitung, wie du mit ClonewebX von Softlite.io eine Website effizient auf WordPress mit dem Breakdance Builder klonst:


1. Voraussetzungen prüfen

  • WordPress-Installation: Stelle sicher, dass WordPress korrekt installiert ist.
  • Breakdance Builder: Installiere und aktiviere den Breakdance Builder auf deiner WordPress-Seite.
  • ClonewebX Extension: Lade die neueste Version der ClonewebX-Erweiterung von Softlite.io herunter und installiere sie in deinem Browser .

2. ClonewebX einrichten

  • Lizenz wählen: Wähle die passende Lizenz (oder teste die Trial-Version) und logge dich in das ClonewebX-Dashboard ein .
  • Kompatibilität: ClonewebX unterstützt Breakdance vollständig, sodass du direkt für diesen Builder exportieren kannst  .

3. Website auswählen und klonen

  • Zielseite öffnen: Öffne die zu klonende Website in deinem Browser.
  • ClonewebX aktivieren: Starte die ClonewebX-Erweiterung und wähle die gewünschten Seitenbereiche (z.B. den gesamten Body oder spezifische Sektionen) aus .
  • Export-Format wählen: Wähle als Ziel „Breakdance Builder“ aus.

4. Import in WordPress (Breakdance Builder)

  • Exportierte Datei: Lade die von ClonewebX generierte Datei herunter.
  • Import in Breakdance: Gehe in WordPress zu einer neuen Seite, öffne den Breakdance Builder und importiere die Datei. Die Struktur und das Design werden übernommen  .
  • Hinweis: ClonewebX überträgt HTML und CSS, aber kein JavaScript. Interaktive Funktionen müssen ggf. manuell nachgebaut werden .

5. Nachbearbeitung & Optimierung

  • Bilder & Medien: Ersetze Platzhalterbilder durch eigene oder lade fehlende Medien hoch.
  • Responsivität prüfen: Überprüfe die Darstellung auf verschiedenen Geräten. ClonewebX bietet zwar Standard-Responsive-Einstellungen, aber Feintuning ist oft nötig.
  • SEO & Rechtliches: Klone keine urheberrechtlich geschützten Inhalte ohne Erlaubnis. Passe Meta-Tags, Alt-Texte und SEO-Einstellungen an.

6. Testen & Veröffentlichen

  • Funktionstest: Prüfe alle Seiten, Links und Formulare.
  • Performance: Optimiere ggf. die Ladezeiten und überprüfe die Kompatibilität mit anderen Plugins.

Zusätzliche Tipps

  • Regelmäßig sichern: Erstelle vor größeren Änderungen Backups deiner WordPress-Seite.
  • Support nutzen: Bei Problemen hilft der Softlite.io-Support weiter.

Fazit:
Mit ClonewebX kannst du Websites schnell und effizient in den Breakdance Builder von WordPress klonen. Achte auf Nachbearbeitung und rechtliche Aspekte, um ein optimales Ergebnis zu erzielen 



Anleitung: Website-Transfer mit ClonewebX zu Breakdance

1. Vorbereitung und Projektanlage

  1. CloneWebX Chrome-Erweiterung installieren: Stellen Sie sicher, dass die Erweiterung in Ihrem Browser installiert ist.
  2. Bei CloneWebX anmelden.
  3. Neues Projekt erstellen: Erstellen Sie ein neues Projekt für die Ziel-Website.
    • Projektname zuweisen: Geben Sie einen Namen für das Projekt ein (z.B. „Elementor“).
    • Quell-Domain-URL einbetten: Fügen Sie die URL der Website ein, die Sie klonen möchten. Dies kann das vollständige oder ein verkürztes Domain-Format sein.

2. Seite scannen und Sektionen klonen

  1. Zur Quell-Webseite navigieren: Gehen Sie zu der spezifischen Seite, die Sie klonen möchten.
  2. Seite vollständig laden: Scrollen Sie bis zum Ende der Quellseite, um sicherzustellen, dass alle Elemente geladen sind.
  3. CloneWebX Extension-Icon klicken: Klicken Sie auf das Icon oben rechts in Ihrem Browser.
  4. Seite hinzufügen: Wählen Sie das zuvor erstellte Projekt aus und klicken Sie auf „add page“.
    • Umleitungs-Tab: Ein neuer Tab wird geöffnet, der die ursprüngliche Seite simuliert und für das Klonen vorbereitet ist.

3. Auswahl und Export

  1. Ziel-Sektion/Element auswählen: Bewegen Sie die Maus über die Seite, um die gewünschte Sektion oder das Element auszuwählen.
  2. Selektor identifizieren:
    • Klicken Sie auf den gewünschten Bereich, um ein kleines Popup zu öffnen.
    • Identifizieren Sie den richtigen Ziel-Selektor, indem Sie auf die Augen-Icons klicken, um Elemente auszublenden. Wenn die gewünschten Daten verschwinden, gehört das Element zum gewählten Selektor.
    • Klicken Sie auf den Selektor, um ihn auszuwählen, oder geben Sie ihn direkt in das Feld ein.
  3. Page Builder auswählen: Wählen Sie im Steuerungspanel als Ziel-Page Builder „breakdance“.
  4. Dom-Kapazität reduzieren (Optimierung): Das Tool optimiert automatisch die Dom-Kapazität, indem es die Menge der benötigten Layout-Ressourcen reduziert.
  5. Exportieren: Klicken Sie am Ende des Panels auf den „export“-Button.
    • Die geklonten Daten werden in die Zwischenablage kopiert. Bei großen Datenmengen kann es sein, dass die Daten stattdessen in eine Datei übertragen werden.

4. Daten in Breakdance einfügen und anpassen

  1. Breakdance Editor aufrufen.
  2. Einfügen: Klicken Sie mit der rechten Maustaste in den Canvas-Bereich und wählen Sie „Paste“ (Einfügen), um die geklonten Daten einzufügen.
  3. Layout-Anpassung: Es wird automatisch ein Covered Section Layout erstellt.
    • Breite anpassen: Passen Sie die Breite dieser Sektion auf 100% an, damit der Inhalt vollständig angezeigt wird.
    • Abstand (Padding) anpassen: Setzen Sie die Padding-Seiten auf 0 Pixel.
  4. Inhalt und Design anpassen: Sie können den Inhalt nun im Breakdance-Editor frei anpassen und bearbeiten, z.B. eine Überschrift überarbeiten.
  5. Responsiveness prüfen: Überprüfen Sie das Ergebnis in verschiedenen Geräten (Desktop, Tablet, Mobile), um die Responsive-Fähigkeit zu testen.

⚠️ Wichtige Hinweise für den Klonvorgang

  • Gesamte Seite klonen: Sie können auch eine gesamte Seite klonen, indem Sie im Selektor-Feld „body“ eingeben.
    • Empfehlung: Diese Methode ist meist nur für einfache Websites geeignet. Bei komplexen Dom-Strukturen kann der Page Builder langsamer werden.
    • Optimale Funktionalität: Es wird empfohlen, einzelne Sektionen zu exportieren, um eine optimale Funktionalität zu gewährleisten.
  • Keine exakte Garantie: Es kann nicht garantiert werden, dass die Ausgabe exakt mit der Quellseite übereinstimmt, da das Ergebnis von vielen Elementen abhängt.