WIE MAN

HowTo-Startseite

Menüs

Symbolleiste Menüsymbol Akkordeon Registerkarten Vertikale Registerkarten Tab-Kopfzeilen Ganzseitige Registerkarten Hover-Tabs Top-Navigation Reaktionsschnelles Topnav Navigationsleiste mit Symbolen Suchmenü Suchleiste Feste Seitenleiste Seitennavigation Responsive Seitenleiste Vollbildnavigation Off-Canvas-Menü Bewegen Sie die Sidenav-Schaltflächen Seitenleiste mit Symbolen Horizontales Scroll-Menü Vertikales Menü Untere Navigation Responsive Bottom Nav Navigationslinks für den unteren Rand Rechtsbündige Menülinks Zentrierter Menülink Menülinks mit gleicher Breite Festes Menü Schieben Sie die Leiste beim Scrollen nach unten Navigationsleiste beim Scrollen ausblenden Navbar beim Scrollen verkleinern Klebrige Navigationsleiste Navigationsleiste auf Bild Hover-Dropdowns Klicken Sie auf Dropdowns Kaskadierendes Dropdown Dropdown in Topnav Dropdown im Sidenav Antwort Navbar Dropdown Subnavigationsmenü Herunterfallen Mega-Menü Mobiles Menü Vorhang-Menü Eingeklappte Seitenleiste Eingeklapptes Seitenpanel Seitennummerierung Semmelbrösel Schaltflächengruppe Vertikale Schaltflächengruppe Klebrige soziale Leiste Pille-Navigation Responsive Kopfzeile

Bilder

Diashow Diashow-Galerie Modale Bilder Leuchtkasten Responsives Bildraster Bildraster Tab-Galerie Bildüberlagerung verblassen Bildüberlagerungsfolie Bild-Overlay-Zoom Bild-Overlay-Titel Bildüberlagerungssymbol Bildeffekte Schwarz-Weiß-Bild Bildtext Bildtextblöcke Transparenter Bildtext Ganzseitiges Bild Form auf Bild Heldenbild Hintergrundbild verwischen Ändern Sie Bg auf Scroll Side-by-Side-Bilder Abgerundete Bilder Avatar-Bilder Responsive Bilder Bilder zentrieren Miniaturansichten Rand um das Bild Triff das Team Klebriges Bild Spiegeln Sie ein Bild Schütteln Sie ein Bild Portfolio-Galerie Portfolio mit Filterung Bildzoom Bildlupenglas Schieberegler für den Bildvergleich Favicon

Tasten

Alarmschaltflächen Gliederungsschaltflächen Geteilte Schaltflächen Animierte Schaltflächen Verblassende Schaltflächen Schaltfläche auf Bild Schaltflächen für soziale Medien Mehr lesen Weniger lesen Schaltflächen laden Schaltflächen herunterladen Pille-Knöpfe Benachrichtigungsschaltfläche Symbolschaltflächen Weiter/Zurück-Schaltflächen Schaltfläche "Mehr" im Navi Schaltflächen blockieren Textschaltflächen Runde Knöpfe Schaltfläche „Nach oben scrollen“.

Formen

Login Formular Anmeldeformular Checkout-Formular Kontakt Formular Social Login-Formular Anmeldeformular Formular mit Symbolen Newsletter Gestapeltes Formular Responsives Formular Popup-Formular Inline-Formular Eingabefeld löschen Zahlenpfeile ausblenden Text in die Zwischenablage kopieren Animierte Suche Schaltfläche „Suchen“. Vollbildsuche Eingabefeld in der Navigationsleiste Anmeldeformular in Navbar Benutzerdefiniertes Kontrollkästchen/Radio Benutzerdefinierte Auswahl Kippschalter Kontrollkästchen aktivieren Feststelltaste erkennen Auslösetaste bei Enter Passwort-Validierung Kennwortsichtbarkeit umschalten Mehrstufiges Formular Automatische Vervollständigung Deaktivieren Sie die automatische Vervollständigung Deaktivieren Sie die Rechtschreibprüfung Datei-Upload-Schaltfläche Leere Eingabevalidierung

Filter

Liste filtern Filtertabelle Filterelemente Filter-Dropdown Sortierliste Zaubertabelle

Tische

Zebra gestreifter Tisch Tische in der Mitte Tisch in voller Breite Side-by-Side-Tabellen Responsive Tabellen Vergleichstabelle

Mehr

Vollbildvideo Modale Boxen Modal löschen Zeitleiste Scroll-Anzeige Fortschrittsbalken Fertigkeitsleiste Range-Schieberegler Kurzinfos Schweben des Anzeigeelements Popups Zusammenklappbar Kalender HTML enthält Aufgabenliste Lader Bewertung in Sternen Benutzer-Bewertung Overlay-Effekt Wenden Sie sich an Chips Karten Klappkarte Profilkarte Produktkarte Warnungen Aufbieten, ausrufen, zurufen Anmerkungen Etiketten Kreise Stil HR Coupon Gruppe auflisten Liste ohne Aufzählungszeichen Responsiver Text Ausgeschnittener Text Leuchtender Text Feste Fußzeile Klebriges Element Gleiche Höhe Klarfix Reaktionsschnelle Schwimmer Imbissbude Vollbildfenster Scroll-Zeichnung Glatte Schriftrolle Bg-Scroll mit Farbverlauf Klebrige Kopfzeile Header beim Scrollen verkleinern Preistabelle Parallaxe Seitenverhältnis Responsive Iframes Schalten Sie „Gefällt mir“/„Gefällt mir nicht“ um Schalten Sie Ausblenden/Anzeigen um Schalten Sie den Dunkelmodus um Text umschalten Klasse umschalten Klasse hinzufügen Klasse entfernen Aktive Klasse Baumsicht Eigentum entfernen Offline-Erkennung Verstecktes Element finden Webseite umleiten Zoom-Hover Flip-Box Vertikal zentrieren Mittlere Taste in DIV Übergang beim Schweben Pfeile Formen Download-Link Element in voller Höhe Browser Fenster Benutzerdefinierte Bildlaufleiste Bildlaufleiste ausblenden Bildlaufleiste anzeigen/erzwingen Geräte-Look Inhaltlich editierbare Grenze Platzhalterfarbe Textauswahlfarbe Geschossfarbe Vertikale Linie Teiler Symbole animieren Countdown-Timer Schreibmaschine Demnächst Seite Chat-Nachrichten Popup-Chat-Fenster Geteilter Bildschirm Referenzen Abschnittszähler Zitate Diashow Schließbare Listenelemente Typische Geräte-Haltepunkte Ziehbares HTML-Element JS-Medienabfragen Syntax-Highlighter JS-Animationen Länge der JS-Zeichenfolge JS Potenzierung JS-Standardparameter Holen Sie sich die aktuelle URL Holen Sie sich die aktuelle Bildschirmgröße Holen Sie sich Iframe-Elemente

Webseite

Erstellen Sie eine kostenlose Website Machen Sie eine Webseite Erstellen Sie eine statische Website Eine Website erstellen (W3.CSS) Erstellen Sie eine Website (BS3) Erstellen Sie eine Website (BS4) Eine Website erstellen (BS5) Erstellen und Anzeigen einer Website Erstellen Sie eine Link-Tree-Website Erstellen Sie ein Portfolio Erstellen Sie einen Lebenslauf Erstellen Sie eine Restaurant-Website Machen Sie eine Business-Website Erstellen Sie ein WebBook Center-Website Kontaktbereich Über Seite Großer Kopf Beispiel-Website

Netz

2-Spalten-Layout 3-Spalten-Layout 4-Spalten-Layout Erweiterndes Raster Rasteransicht auflisten Gemischtes Spaltenlayout Säulenkarten Zick-Zack-Layout Blog-Layout

Google

Google-Diagramme Google-Schriftarten Google Font-Paarungen Google Analytics einrichten

Konverter

Gewicht umrechnen Temperatur umrechnen Länge umrechnen Geschwindigkeit konvertieren

Bloggen

Holen Sie sich einen Entwicklerjob Werden Sie ein Front-End-Entwickler.

Wie erstelle ich eine Link-Tree-Website?

Mit einer Linkbaum-Website können Sie alle Ihre Links auf einer Website teilen.

Es ist eine Zielseite, auf der Sie die Links zu Ihren sozialen Netzwerken, Blogbeiträgen, Unternehmen, Projekten und mehr anzeigen können.

Erstellen Sie kostenlos eine Linkbaum-Website »

Warum eine Link-Tree-Website erstellen?

Die Links-Website ist großartig, um Ihre Online-Präsenz auszubauen.

Es macht es einfach, Links für die Orte zu teilen, an denen Sie Inhalte haben.

Darüber hinaus hilft die Link-Website den Menschen, sich an mehr als einem Ort mit Ihnen zu verbinden.

Indem Sie die Link-Website selbst erstellen, haben Sie die vollständige Kontrolle darüber.

Das Aussehen der Website spiegelt Ihre Marke wider. Gestalten Sie es so, wie Sie es möchten.


Was muss ich wissen, um meine Linkbaum-Website zu erstellen?

HTML, CSS und JavaScript sind die grundlegenden Sprachen zum Erstellen einer Website.

Es ist alles, was Sie brauchen, um Ihre Link-Site zu erstellen.

  1. Erstellen Sie die Struktur mit HTML. Das erste, was Sie lernen müssen, ist HTML, die Standardauszeichnungssprache zum Erstellen von Webseiten.
  2. HTML lernen ❯
  3. Mit CSS gestalten. Der nächste Schritt besteht darin, CSS zu lernen, das Layout Ihrer Webseite mit schönen Farben, Schriftarten und vielem mehr festzulegen.
  4. CSS lernen ❯
  5. Machen Sie es interaktiv mit JavaScript. Nach dem Studium von HTML und CSS sollten Sie JavaScript lernen, um dynamische und interaktive Webseiten für Ihre Benutzer zu erstellen.
  6. JavaScript lernen ❯

Wie fange ich an

Es gibt zwei Möglichkeiten, mit dem Aufbau einer Link-Tree-Website zu beginnen.

Von Grund auf neu erstellen oder eine Vorlage verwenden.

Bauen Sie mit W3Schools Spaces

In Spaces können Sie Ihre Link-Tree-Website erstellen und damit experimentieren.

Hier können Sie statische Seiten mit HTML, CSS und JavaScript erstellen.

Alles, was Sie brauchen, direkt im Browser.

Mehr erfahren ❯

Erstellen einer Link-Tree-Webseite von Grund auf neu

Als erstes müssen Sie ein Layout erstellen und dann Inhalte hinzufügen.

Um ein Website-Layout zu erstellen, lesen Sie unseren Artikel zum Erstellen einer Website: So erstellen Sie eine Website

Sobald Sie das Layout erstellt haben. Erstellen Sie die beiden unten aufgeführten Hauptabschnitte:

1. Organischer Abschnitt.

Der Bio-Bereich ist das erste, was die Leute sehen, wenn sie Ihre Link-Tree-Website besuchen.

Es wird oben auf der Link-Tree-Website angezeigt.

Halten Sie es kurz und bündig.

Der Abschnitt „Biografie“ kann Ihr Bild, Ihren Namen und Ihren Beruf enthalten.

Die Leute fühlen sich wohler, mit Ihnen in Kontakt zu treten, wenn sie Ihren Namen und Ihr Aussehen kennen.

Bildausschnitt

2. Abschnitt „Links“.

Der Abschnitt „Links“ enthält alle Links, die Sie teilen möchten.

Es wird unter der Bio-Sektion angezeigt.

Achten Sie darauf, dass die Links gut strukturiert sind.

Linkbereich

Bauen mit einer Schablone

Mit Vorlagen zu beginnen ist eine hervorragende Möglichkeit, sich inspirieren zu lassen und zu lernen.

Die Linkbaumvorlagen können direkt in Spaces geladen werden. Legen Sie mit wenigen Klicks los.

Kopieren Sie den Code und fügen Sie ihn in den Spaces-Editor ein oder speichern Sie ihn aus dem TryIt-Editor in Spaces.

Loslegen "

* Keine Kreditkarte benötigt

Personalisieren Sie die Vorlage

Hier ist ein vierstufiger Ansatz, um die Vorlage zu Ihrer eigenen zu machen.


Schritt eins: Ändern Sie den Hintergrund

Suchen Sie die Eigenschaft background oder background-image im Code und ändern Sie die URL.

Lesen Sie hier, wie Sie ein Hintergrundbild ändern: Hintergrundbild ändern


Schritt Zwei: Fügen Sie Ihr Bild hinzu

Suchen Sie das Tag <img> und ändern Sie es in die URL zu Ihrem Bild.

Lesen Sie hier, wie Sie ein Bild ändern: So ändern Sie ein Bild


Schritt drei: Schreiben Sie Ihre Biografie

Suchen Sie die Absatz-Tags oben im Code und ändern Sie den Text zwischen den Tags <p> und </p>.

Lesen Sie hier, um mehr über Absätze zu erfahren: Über HTML-Absätze


Schritt 4: Fügen Sie Ihre Links hinzu

Suchen Sie die Anker-Tags und ändern Sie den Text zwischen den Tags <a> und </a>.

Lesen Sie hier, um mehr über Anker-Tags zu erfahren: Über HTML-Anker-Tags


Durchsuchen und wählen Sie eine Vorlage aus

Wir haben fertige Vorlagen, die Sie verwenden können. Hier sind einige Beispiele:

Soziale Verbindungen 1

Soziale Verbindungen 2

Soziale Kontakte 3


W3Schulräume

W3Schulräume

Erstellen Sie Ihre statische Website mit W3Schools Spaces.

Kostenlos starten