{"id":6856,"date":"2021-10-03T09:44:46","date_gmt":"2021-10-03T07:44:46","guid":{"rendered":"https:\/\/lacolmenatecnologica.com\/ankerlinks-in-elementor-um-innerhalb-derselben-seite-in-wordpress-zu-navigieren\/"},"modified":"2026-09-02T22:49:01","modified_gmt":"2026-09-02T20:49:01","slug":"ankerlinks-in-elementor-um-innerhalb-derselben-seite-in-wordpress-zu-navigieren","status":"publish","type":"post","link":"https:\/\/lacolmenatecnologica.com\/de\/ankerlinks-in-elementor-um-innerhalb-derselben-seite-in-wordpress-zu-navigieren\/","title":{"rendered":"Ankerlinks in Elementor, um innerhalb derselben Seite in WordPress zu navigieren"},"content":{"rendered":"\n

Was ist ein Anker (Anchor) in HTML?<\/h2>\n\n

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\u00fchren, eine E-Mail oder einen Anruf \u00f6ffnen, eine Datei herunterladen oder \u2013 wie wir in diesem Beitrag sehen werden \u2013 uns zu einem anderen Punkt auf derselben Seite bringen. Sehen wir uns ein Beispiel an: <\/p>\n\n

<a href=\"https:\/\/lacolmenatecnologica.com\/<\/mark>\">La Colmena Tecnol\u00f3gica<\/a><\/code><\/pre>\n\n
Ergebnis:<\/strong> La Colmena Tecnol\u00f3gica<\/a><\/p>\n\n
In diesem HTML-Codebeispiel sehen wir, dass der Text zwischen den Tags <a><\/strong> (\u00d6ffnung) und <\/a><\/strong> (Schlie\u00dfung) einen Hyperlink zur URL https:\/\/lacolmenatecnologica.com\/<\/em><\/span> enth\u00e4lt. Das hei\u00dft: Wenn Sie auf den Text La Colmena Tecnol\u00f3gica<\/strong> klicken, f\u00fchrt der Browser Sie zu dem Ziel, das wir im Attribut href<\/strong> angegeben haben. <\/p>\n\n
Nat\u00fcrlich m\u00fcssen wir kein HTML kennen, um mit Elementor einen Hyperlink zu erstellen, aber es schadet nicht, es zu wissen.<\/p>\n\n
Ankertypen<\/h2>\n\n
In der folgenden Tabelle sehen Sie in Gr\u00fcn verschiedene Arten von Ankern. Einige ben\u00f6tigen ein Pr\u00e4fix, wie z. B. eine E-Mail, der mailto:<\/strong> vorangestellt werden muss, oder eine Telefonnummer, der tel:<\/strong> vorangestellt werden muss. Um den Download einer Datei anstelle der Anzeige zu erzwingen, m\u00fcssen wir das Attribut download<\/strong> hinzuf\u00fcgen. <\/p>\n\n
Typ<\/th>HTML-Code<\/th><\/tr><\/thead>
URL oder Link<\/a><\/td><a href=\u201chttps:\/\/lacolmenatecnologica.com\/<\/mark>\u201e>Webseite<\/a><\/td><\/tr>
E-Mail<\/a><\/td><a href=\u201cmailto:mario@lacolmenatecnologica.com<\/span><\/mark>\u201e>Webseite<\/a><\/td><\/tr>
Telefon<\/a><\/td><a href=\u201ctel:+34665123123<\/mark>\u201e>Webseite<\/a><\/td><\/tr>
Datei herunterladen<\/a><\/td><a href=\u201chttps:\/\/lacolmenatecnologica.com\/AFI_grafico.pdf<\/mark>\u201c download=\u201cAFI Gr\u00e1fico\u201c<\/mark>>Webseite<\/a><\/td><\/tr>
Gleiche Seite<\/a><\/td><a href=\u201c#inicio<\/mark><\/span>\u201e>Webseite<\/a><\/td><\/tr>
Anker zu einer anderen Seite<\/a> <\/td><a href=\u201chttps:\/\/lacolmenatecnologica.com\/nombre-de-la-pagina\/#inicio<\/mark><\/mark>\u201e>Webseite<\/a><\/td><\/tr><\/tbody><\/table><\/figure>\n\n
Einen Link zur gleichen Seite mit Elementor hinzuf\u00fcgen<\/h2>\n\n
Um einen Link hinzuzuf\u00fcgen, der zu einem anderen Punkt auf derselben Seite f\u00fchrt, m\u00fcssen wir diese Schritte befolgen.<\/p>\n\n
    \n
  1. Klicken Sie auf das Widget, zu dem Sie beim Klicken springen m\u00f6chten. 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\u00e4hlen.  \"Elementor-Abschnittsauswahl\"\/<\/li>\n\n\n\n
  2. Klicken Sie anschlie\u00dfend in der linken Spalte auf den Reiter Erweitert<\/strong>.<\/li>\n\n\n\n
  3. Im Bereich Erweitert<\/strong> des Reiters Erweitert<\/strong> geben Sie im Feld CSS-ID<\/strong> einen Identifikationsnamen ein.Empfehlungen f\u00fcr den Namen der CSS-ID:<\/strong>\n
      \n
    • Immer in Kleinbuchstaben schreiben.<\/li>\n\n\n\n
    • Leerzeichen durch Bindestrich oder Unterstrich ersetzen, z. B.: que_podemos<\/strong><\/li>\n\n\n\n
    • Nur alphabetische Zeichen und Zahlen verwenden.<\/li>\n\n\n\n
    • Nicht verwechseln: Das Zeichen #<\/strong> muss hier nicht eingetragen werden; wir f\u00fcgen es sp\u00e4ter im Hyperlink hinzu.<\/li>\n\n\n\n
    • Dieser Name ist auf der gesamten Seite eindeutig; wir d\u00fcrfen ihn nicht erneut f\u00fcr andere Elemente verwenden. Eine ID definiert ein einziges Element. <\/li>\n<\/ul>\n<\/li>\n<\/ol>\n
      \n
      \"Eindeutige\n\t\t\t\n\t\t\t\t\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n<\/div>\n
        \n
      1. Klicken Sie nun auf das Element Ihrer Seite, an dem Sie den Hyperlink hinzuf\u00fcgen m\u00f6chten, damit beim Klicken zur Sektion gescrollt wird, der Sie die ID que_podemos<\/strong> zugewiesen haben. Sie k\u00f6nnen diesen Link in jedem Widget platzieren, das Links unterst\u00fctzt, oder in einem Text \u00fcber den Texteditor. In diesem Fall verwenden wir ein Icon<\/strong>-Widget, um diesen Link zur gleichen Seite hinzuzuf\u00fcgen.  <\/li>\n\n\n\n
      2. Geben Sie in der linken Spalte im Reiter Inhalt<\/strong> den ID-Namen im Feld Link<\/strong> ein \u2013 diesmal mit vorangestelltem Rautenzeichen #<\/strong>. In diesem Fall: #que_podemos<\/strong> <\/li>\n<\/ol>\n
        \n
        \"Link\n\t\t\t\n\t\t\t\t\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n<\/div>\n
          \n
        1. Sobald dies erledigt ist, speichern wir, und damit ist unser Link zur gleichen Seite fertig.<\/li>\n<\/ol>\n\n
          Wir k\u00f6nnen denselben Link in anderen Widgets oder Texten unserer Seite platzieren, damit sie auf diesen Abschnitt verlinken. Diese Art von Links wird h\u00e4ufig auf Seiten mit umfangreichen Inhalten verwendet, um dem Nutzer den Zugriff auf die ben\u00f6tigten Inhalte zu erleichtern. Au\u00dferdem k\u00f6nnen wir den vollst\u00e4ndigen Hyperlink auch auf einer anderen Seite verwenden, wie wir als N\u00e4chstes sehen, um eine andere Seite zu \u00f6ffnen und zum gew\u00fcnschten Punkt zu springen:  <\/p>\n\n
          https:\/\/lacolmenatecnologica.com\/#que_podemos<\/span><\/code><\/pre>\n\n
          Sie m\u00fcssen lediglich am Ende der URL der Seite die ID hinzuf\u00fcgen, der das Rautenzeichen # vorangestellt ist. So k\u00f6nnen Sie diesen Anker auf jeder anderen Seite verwenden, um den Nutzer nicht nur zu einer Seite zu f\u00fchren, sondern auch zu dem konkreten Punkt auf dieser Seite, den Sie m\u00f6chten. <\/p>\n","protected":false},"excerpt":{"rendered":"
          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\u00fchren, eine E-Mail oder einen Anruf \u00f6ffnen, eine Datei herunterladen oder \u2013 wie wir in diesem Beitrag sehen werden \u2013 uns zu einem […]<\/p>\n","protected":false},"author":4,"featured_media":6857,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_seopress_titles_title":"Ankerlinks in Elementor f\u00fcr WordPress richtig nutzen","_seopress_titles_desc":"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\u2026","_seopress_robots_index":"","_seopress_robots_follow":"","_seopress_robots_imageindex":"","_seopress_robots_snippet":"","_seopress_robots_primary_cat":"none","_seopress_robots_breadcrumbs":"","_seopress_robots_freeze_modified_date":"","_seopress_robots_custom_modified_date":"","_seopress_robots_canonical":"","_seopress_social_fb_title":"","_seopress_social_fb_desc":"","_seopress_social_fb_img":"","_seopress_social_fb_img_attachment_id":0,"_seopress_social_fb_img_width":0,"_seopress_social_fb_img_height":0,"_seopress_social_twitter_title":"","_seopress_social_twitter_desc":"","_seopress_social_twitter_img":"","_seopress_social_twitter_img_attachment_id":0,"_seopress_social_twitter_img_width":0,"_seopress_social_twitter_img_height":0,"_seopress_redirections_value":"","_seopress_redirections_enabled":"","_seopress_redirections_enabled_regex":"","_seopress_redirections_logged_status":"both","_seopress_redirections_param":"","_seopress_redirections_type":301,"_seopress_analysis_target_kw":"","_seopress_news_disabled":"","_seopress_video_disabled":"","_seopress_video":[],"_seopress_pro_schemas_manual":[],"_seopress_pro_rich_snippets_disable_all":"","_seopress_pro_rich_snippets_disable":[],"_seopress_pro_schemas":[],"footnotes":"","_bricks_page_content_2":[],"_bricks_page_header_2":[],"_bricks_page_footer_2":[]},"categories":[402],"tags":[433,404],"class_list":["post-6856","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-elementor","tag-webdesign","tag-wordpress-personalisierung"],"_links":{"self":[{"href":"https:\/\/lacolmenatecnologica.com\/de\/wp-json\/wp\/v2\/posts\/6856","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/lacolmenatecnologica.com\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/lacolmenatecnologica.com\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/lacolmenatecnologica.com\/de\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/lacolmenatecnologica.com\/de\/wp-json\/wp\/v2\/comments?post=6856"}],"version-history":[{"count":1,"href":"https:\/\/lacolmenatecnologica.com\/de\/wp-json\/wp\/v2\/posts\/6856\/revisions"}],"predecessor-version":[{"id":6858,"href":"https:\/\/lacolmenatecnologica.com\/de\/wp-json\/wp\/v2\/posts\/6856\/revisions\/6858"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/lacolmenatecnologica.com\/de\/wp-json\/wp\/v2\/media\/6857"}],"wp:attachment":[{"href":"https:\/\/lacolmenatecnologica.com\/de\/wp-json\/wp\/v2\/media?parent=6856"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/lacolmenatecnologica.com\/de\/wp-json\/wp\/v2\/categories?post=6856"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/lacolmenatecnologica.com\/de\/wp-json\/wp\/v2\/tags?post=6856"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}