weboffice.digital - Dokumentation
Branche Beauty Branche Gastro Branche Handel
PDF

Eigener HTML-Code Designer

Eigener HTML-Code Designer

Der Eigener HTML-Code Designer ermöglicht es dir, benutzerdefinierten HTML-Code direkt in deine Website einzubinden. Das ist nützlich für spezielle Funktionen, externe Widgets, Tracking-Codes oder individuelle Gestaltungen, die über die Standard-Blöcke hinausgehen.

Voraussetzungen

  • Du hast einen Eigener HTML-Code-Block zu deiner Seite hinzugefügt
  • Du befindest dich im Bearbeitungsmodus
  • Du hast grundlegende HTML-Kenntnisse oder fertigen Code zum Einfügen

Aufbau des Designers

Allgemeine Einstellungen: Grundlegende Konfiguration für die Darstellung

HTML-Editor: Großer Textbereich für deinen benutzerdefinierten Code

Allgemeine Einstellungen

Volle Breite verwenden:

  • Aktiviert: Der HTML-Code wird über die gesamte verfügbare Breite dargestellt
  • Deaktiviert: Der Code wird in einem begrenzten Container angezeigt
  • Empfehlung: Je nach Art des eingefügten Inhalts wählen

HTML-Code eingeben

Code-Editor:

  • Großer Textbereich mit 15 Zeilen Höhe
  • Unterstützt vollständigen HTML-Code
  • Automatische Speicherung bei Änderungen
  • Sofortige Vorschau der Änderungen auf der Website

Unterstützte Technologien:

  • HTML: Vollständige HTML5-Unterstützung
  • CSS: Inline-Styles und <style>-Blöcke
  • JavaScript: Inline-Scripts und <script>-Tags
  • Externe Einbindungen: iframes, externe Scripts, etc.

Häufige Anwendungsfälle

Externe Widgets einbinden

Social Media Feeds:

<!-- Twitter Timeline -->
<a class="twitter-timeline" data-width="400" data-height="600" 
   href="https://twitter.com/deinaccount">Tweets by deinaccount</a>
<script async src="https://platform.twitter.com/widgets.js"></script>

YouTube Videos:

<iframe width="560" height="315" 
        src="https://www.youtube.com/embed/VIDEO_ID" 
        frameborder="0" allowfullscreen></iframe>

Google Maps:

<iframe src="https://www.google.com/maps/embed?pb=..." 
        width="600" height="450" frameborder="0" 
        allowfullscreen></iframe>

Tracking und Analytics

Google Analytics:

<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=GA_TRACKING_ID"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'GA_TRACKING_ID');
</script>

Facebook Pixel:

<script>
!function(f,b,e,v,n,t,s)
{if(f.fbq)return;n=f.fbq=function(){n.callMethod?
n.callMethod.apply(n,arguments):n.queue.push(arguments)};
if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';
n.queue=[];t=b.createElement(e);t.async=!0;
t.src=v;s=b.getElementsByTagName(e)[0];
s.parentNode.insertBefore(t,s)}(window, document,'script',
'https://connect.facebook.net/en_US/fbevents.js');
fbq('init', 'DEINE_PIXEL_ID');
fbq('track', 'PageView');
</script>

Spezielle Gestaltungen

Benutzerdefinierte Tabellen:

<table style="width: 100%; border-collapse: collapse;">
  <thead>
    <tr style="background-color: #f8f9fa;">
      <th style="padding: 12px; border: 1px solid #dee2e6;">Produkt</th>
      <th style="padding: 12px; border: 1px solid #dee2e6;">Preis</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td style="padding: 12px; border: 1px solid #dee2e6;">Produkt A</td>
      <td style="padding: 12px; border: 1px solid #dee2e6;">99€</td>
    </tr>
  </tbody>
</table>

Interaktive Elemente:

<div style="background: linear-gradient(45deg, #ff6b6b, #4ecdc4); 
            padding: 20px; border-radius: 10px; text-align: center;">
  <h3 style="color: white; margin: 0;">Sonderangebot!</h3>
  <p style="color: white; margin: 10px 0;">Nur heute 50% Rabatt</p>
  <button onclick="alert('Angebot aktiviert!')" 
          style="background: white; border: none; padding: 10px 20px; 
                 border-radius: 5px; cursor: pointer;">
    Jetzt zugreifen!
  </button>
</div>

Sicherheit und Best Practices

Vertrauenswürdige Quellen:

  • Verwende nur Code von vertrauenswürdigen Quellen
  • Prüfe externe Scripts vor der Einbindung
  • Achte auf HTTPS bei externen Ressourcen

Performance beachten:

  • Zu viele externe Scripts können die Ladezeit verlangsamen
  • Teste die Seitengeschwindigkeit nach dem Hinzufügen
  • Verwende async oder defer bei Scripts wenn möglich

Responsive Design:

  • Stelle sicher, dass dein Code auf mobilen Geräten funktioniert
  • Verwende relative Größenangaben (%, vw, vh)
  • Teste auf verschiedenen Bildschirmgrößen

Validierung:

  • Überprüfe deinen HTML-Code auf Syntax-Fehler
  • Verwende Online-Validatoren bei Unsicherheiten
  • Teste alle Funktionen nach dem Einfügen

Häufige Probleme und Lösungen

Code wird nicht angezeigt:

  • Überprüfe die HTML-Syntax auf Fehler
  • Stelle sicher, dass alle Tags korrekt geschlossen sind
  • Prüfe, ob externe Ressourcen erreichbar sind

Layout-Probleme:

  • Verwende CSS-Container für bessere Kontrolle
  • Achte auf Konflikte mit bestehenden Styles
  • Teste mit und ohne "Volle Breite"

JavaScript funktioniert nicht:

  • Überprüfe die Browser-Konsole auf Fehler
  • Stelle sicher, dass externe Libraries geladen sind
  • Verwende window.onload oder DOMContentLoaded Events

Mobile Darstellung:

  • Verwende viewport-Meta-Tags wenn nötig
  • Teste auf echten mobilen Geräten
  • Achte auf Touch-Bedienung bei interaktiven Elementen

Tipps für Anfänger

Einfach beginnen:

  • Starte mit einfachen HTML-Elementen
  • Füge schrittweise CSS und JavaScript hinzu
  • Teste jede Änderung sofort

Backup erstellen:

  • Kopiere funktionierenden Code vor Änderungen
  • Verwende Kommentare zur Dokumentation
  • Speichere komplexe Codes extern

Hilfe finden:

  • Nutze Online-Ressourcen wie MDN Web Docs
  • Frage in Entwickler-Communities
  • Verwende Code-Validatoren

Schrittweise erweitern:

  • Beginne mit statischem HTML
  • Füge CSS für Styling hinzu
  • Erweitere mit JavaScript für Interaktivität

Verwandte Seiten