Was ist ein Anker (Anchor) in HTML?
Der Anchor bzw. die Verankerung ist der Ziel-Link, den wir festlegen, wenn wir einen Hyperlink erstellen. Es sind Links, die uns zu einer anderen Website führen, eine E-Mail oder einen Anruf öffnen, eine Datei herunterladen oder – wie wir in diesem Beitrag sehen werden – uns zu einem anderen Punkt auf derselben Seite bringen. Sehen wir uns ein Beispiel an:
<a href="https://lacolmenatecnologica.com/">La Colmena Tecnológica</a>Ergebnis: La Colmena Tecnológica
In diesem HTML-Codebeispiel sehen wir, dass der Text zwischen den Tags <a> (Öffnung) und </a> (Schließung) einen Hyperlink zur URL https://lacolmenatecnologica.com/ enthält. Das heißt: Wenn Sie auf den Text La Colmena Tecnológica klicken, führt der Browser Sie zu dem Ziel, das wir im Attribut href angegeben haben.
Natürlich müssen wir kein HTML kennen, um mit Elementor einen Hyperlink zu erstellen, aber es schadet nicht, es zu wissen.
Ankertypen
In der folgenden Tabelle sehen Sie in Grün verschiedene Arten von Ankern. Einige benötigen ein Präfix, wie z. B. eine E-Mail, der mailto: vorangestellt werden muss, oder eine Telefonnummer, der tel: vorangestellt werden muss. Um den Download einer Datei anstelle der Anzeige zu erzwingen, müssen wir das Attribut download hinzufügen.
| Typ | HTML-Code |
|---|---|
| URL oder Link | <a href=“https://lacolmenatecnologica.com/„>Webseite</a> |
| <a href=“mailto:mario@lacolmenatecnologica.com„>Webseite</a> | |
| Telefon | <a href=“tel:+34665123123„>Webseite</a> |
| Datei herunterladen | <a href=“https://lacolmenatecnologica.com/AFI_grafico.pdf“ download=“AFI Gráfico“>Webseite</a> |
| Gleiche Seite | <a href=“#inicio„>Webseite</a> |
| Anker zu einer anderen Seite | <a href=“https://lacolmenatecnologica.com/nombre-de-la-pagina/#inicio„>Webseite</a> |
Einen Link zur gleichen Seite mit Elementor hinzufügen
Um einen Link hinzuzufügen, der zu einem anderen Punkt auf derselben Seite führt, müssen wir diese Schritte befolgen.
- Klicken Sie auf das Widget, zu dem Sie beim Klicken springen möchten. Das kann ein Abschnitt oder jedes beliebige Widget innerhalb der Seite sein, die Sie gerade bearbeiten. In diesem Beispiel verwenden wir einen Abschnitt, also klicken wir auf dessen Reiter, um ihn auszuwählen.
- Klicken Sie anschließend in der linken Spalte auf den Reiter Erweitert.
- Im Bereich Erweitert des Reiters Erweitert geben Sie im Feld CSS-ID einen Identifikationsnamen ein.
Empfehlungen für den Namen der CSS-ID:- Immer in Kleinbuchstaben schreiben.
- Leerzeichen durch Bindestrich oder Unterstrich ersetzen, z. B.: que_podemos
- Nur alphabetische Zeichen und Zahlen verwenden.
- Nicht verwechseln: Das Zeichen # muss hier nicht eingetragen werden; wir fügen es später im Hyperlink hinzu.
- Dieser Name ist auf der gesamten Seite eindeutig; wir dürfen ihn nicht erneut für andere Elemente verwenden. Eine ID definiert ein einziges Element.
- Klicken Sie nun auf das Element Ihrer Seite, an dem Sie den Hyperlink hinzufügen möchten, damit beim Klicken zur Sektion gescrollt wird, der Sie die ID que_podemos zugewiesen haben. Sie können diesen Link in jedem Widget platzieren, das Links unterstützt, oder in einem Text über den Texteditor. In diesem Fall verwenden wir ein Icon-Widget, um diesen Link zur gleichen Seite hinzuzufügen.
- Geben Sie in der linken Spalte im Reiter Inhalt den ID-Namen im Feld Link ein – diesmal mit vorangestelltem Rautenzeichen #. In diesem Fall: #que_podemos
- Sobald dies erledigt ist, speichern wir, und damit ist unser Link zur gleichen Seite fertig.
Wir können denselben Link in anderen Widgets oder Texten unserer Seite platzieren, damit sie auf diesen Abschnitt verlinken. Diese Art von Links wird häufig auf Seiten mit umfangreichen Inhalten verwendet, um dem Nutzer den Zugriff auf die benötigten Inhalte zu erleichtern. Außerdem können wir den vollständigen Hyperlink auch auf einer anderen Seite verwenden, wie wir als Nächstes sehen, um eine andere Seite zu öffnen und zum gewünschten Punkt zu springen:
https://lacolmenatecnologica.com/#que_podemosSie müssen lediglich am Ende der URL der Seite die ID hinzufügen, der das Rautenzeichen # vorangestellt ist. So können Sie diesen Anker auf jeder anderen Seite verwenden, um den Nutzer nicht nur zu einer Seite zu führen, sondern auch zu dem konkreten Punkt auf dieser Seite, den Sie möchten.