{"id":6872,"date":"2021-10-03T09:44:46","date_gmt":"2021-10-03T07:44:46","guid":{"rendered":"https:\/\/lacolmenatecnologica.com\/link-di-ancoraggio-in-elementor-per-navigare-allinterno-della-stessa-pagina-in-wordpress\/"},"modified":"2026-09-02T22:50:19","modified_gmt":"2026-09-02T20:50:19","slug":"link-di-ancoraggio-in-elementor-per-navigare-allinterno-della-stessa-pagina-in-wordpress","status":"publish","type":"post","link":"https:\/\/lacolmenatecnologica.com\/it\/link-di-ancoraggio-in-elementor-per-navigare-allinterno-della-stessa-pagina-in-wordpress\/","title":{"rendered":"Link di ancoraggio in Elementor per navigare all’interno della stessa pagina in WordPress"},"content":{"rendered":"\n

Cos’\u00e8 un’ancora o Anchor in HTML?<\/h2>\n\n

L’anchor o ancoraggio \u00e8 il link di destinazione che specifichiamo quando creiamo un collegamento ipertestuale. Sono link che ci portano a un’altra pagina web, aprono un’email, un telefono, scaricano un file o, come vedremo in questo argomento, ci portano a un altro punto della stessa pagina. Vediamo un esempio: <\/p>\n\n

<a href=\"https:\/\/lacolmenatecnologica.com\/<\/mark>\">La Colmena Tecnol\u00f3gica<\/a><\/code><\/pre>\n\n
Risultato:<\/strong> La Colmena Tecnol\u00f3gica<\/a><\/p>\n\n
In questo esempio di codice HTML vediamo come il testo che si trova tra i tag <a><\/strong> (apertura) e <\/a><\/strong> (chiusura) conterr\u00e0 un collegamento ipertestuale all’URL https:\/\/lacolmenatecnologica.com\/<\/em><\/span>. Cio\u00e8, cliccando sul testo La Colmena Tecnol\u00f3gica<\/strong> il browser ci invier\u00e0 alla destinazione che abbiamo specificato nell’attributo href<\/strong>. <\/p>\n\n
Naturalmente non \u00e8 necessario conoscere l’HTML per creare un collegamento ipertestuale con Elementor, ma non fa male saperlo.<\/p>\n\n
Tipi di ancora<\/h2>\n\n
Nella seguente tabella puoi vedere in verde vari tipi di ancore, alcune necessitano di un prefisso come l’email che deve essere preceduta da mailto:<\/strong> o un telefono che deve essere preceduto da tel:<\/strong>. Per forzare il download di un file invece della sua visualizzazione, dovremo aggiungere l’attributo download<\/strong>. <\/p>\n\n
Tipo<\/th>Codice HTML<\/th><\/tr><\/thead>
URL o link<\/a><\/td><a href=”https:\/\/lacolmenatecnologica.com\/<\/mark>“>Pagina web<\/a><\/td><\/tr>
Email<\/a><\/td><a href=”mailto:mario@lacolmenatecnologica.com<\/span><\/mark>“>Pagina web<\/a><\/td><\/tr>
Telefono<\/a><\/td><a href=”tel:+34665123123<\/mark>“>Pagina web<\/a><\/td><\/tr>
Scaricare file<\/a><\/td><a href=”https:\/\/lacolmenatecnologica.com\/AFI_grafico.pdf<\/mark>” download=”AFI Gr\u00e1fico”<\/mark>>Pagina web<\/a><\/td><\/tr>
Stessa pagina<\/a><\/td><a href=”#inizio<\/mark><\/span>“>Pagina web<\/a><\/td><\/tr>
Ancora a un’altra pagina<\/a> <\/td><a href=”https:\/\/lacolmenatecnologica.com\/nome-della-pagina\/#inizio<\/mark><\/mark>“>Pagina web<\/a><\/td><\/tr><\/tbody><\/table><\/figure>\n\n
Aggiungere un link alla stessa pagina con Elementor<\/h2>\n\n
Per aggiungere un link che vada a un altro punto della stessa pagina dovremo seguire questi passaggi.<\/p>\n\n
    \n
  1. Clicchiamo sul widget a cui vogliamo spostarci quando facciamo clic, pu\u00f2 essere una sezione o qualsiasi widget all’interno della pagina che stiamo modificando. In questo esempio useremo una sezione, quindi clicchiamo sulla sua scheda per selezionarla  \"Selettore<\/li>\n\n\n\n
  2. Poi nella colonna di sinistra clicchiamo sulla scheda Avanzate<\/strong>.<\/li>\n\n\n\n
  3. Nella sezione Avanzate<\/strong> della scheda Avanzate<\/strong> inseriamo un nome di identificazione nel campo ID CSS<\/strong>.Raccomandazioni per il nome di ID CSS:<\/strong>\n
      \n
    • Scrivere sempre in minuscolo.<\/li>\n\n\n\n
    • Sostituire gli spazi con trattino medio o basso, esempio: cosa_possiamo<\/strong><\/li>\n\n\n\n
    • Usare solo caratteri alfabetici e numeri.<\/li>\n\n\n\n
    • Non confondiamoci, il simbolo #<\/strong> non \u00e8 necessario metterlo qui, lo metteremo dopo nel collegamento ipertestuale.<\/li>\n\n\n\n
    • Questo nome \u00e8 unico in tutta la pagina, non dobbiamo usarlo di nuovo per altri elementi. Un ID definisce un unico elemento. <\/li>\n<\/ul>\n<\/li>\n<\/ol>\n
      \n
      \"Definire\n\t\t\t\n\t\t\t\t\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n<\/div>\n
        \n
      1. Ora cliccheremo sull’elemento della nostra pagina dove vogliamo aggiungere il collegamento ipertestuale, in modo che quando facciamo clic si sposti alla sezione a cui abbiamo assegnato l’ID cosa_possiamo<\/strong>. Possiamo mettere questo link in qualsiasi widget che ammetta link o in un testo attraverso l’editor di testo. In questo caso useremo un widget Icona<\/strong> per aggiungere questo link alla stessa pagina.  <\/li>\n\n\n\n
      2. Nella colonna di sinistra clicchiamo sulla scheda Contenuto<\/strong> e inseriamo il nome dell’ID nel campo Link<\/strong>, ora s\u00ec, preceduto dal simbolo cancelletto #<\/strong>. In questo caso: #cosa_possiamo<\/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. Una volta fatto questo salviamo e abbiamo il nostro link alla stessa pagina completato.<\/li>\n<\/ol>\n\n
          Possiamo mettere questo stesso link in altri widget o testi della nostra pagina per collegarli a quella sezione. Questo tipo di link si usa solitamente in pagine il cui contenuto \u00e8 esteso per facilitare all’utente l’accesso al contenuto di cui ha bisogno. Inoltre possiamo anche usare il collegamento ipertestuale completo in un’altra pagina, come vediamo di seguito, per aprire una pagina diversa e spostarsi al punto che vogliamo:  <\/p>\n\n
          https:\/\/lacolmenatecnologica.com\/#que_podemos<\/span><\/code><\/pre>\n\n
          Dobbiamo solo aggiungere alla fine dell’URL della pagina l’ID preceduto dal simbolo cancelletto #. Ora possiamo usare questa ancora in qualsiasi altra pagina per portare l’utente non solo a una pagina, ma anche al punto specifico di quella pagina che vogliamo. <\/p>\n","protected":false},"excerpt":{"rendered":"
          Cos’\u00e8 un’ancora o Anchor in HTML? L’anchor o ancoraggio \u00e8 il link di destinazione che specifichiamo quando creiamo un collegamento ipertestuale. Sono link che ci portano a un’altra pagina web, aprono un’email, un telefono, scaricano un file o, come vedremo in questo argomento, ci portano a un altro punto della stessa pagina. Vediamo un esempio: […]<\/p>\n","protected":false},"author":4,"featured_media":6875,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_seopress_titles_title":"Link di ancoraggio in Elementor: guida per WordPress","_seopress_titles_desc":"Cos'\u00e8 un'ancora o Anchor in HTML? L'anchor o ancoraggio \u00e8 il link di destinazione che specifichiamo quando creiamo un collegamento ipertestuale. Sono link che ci portano a\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":"entrambi","_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":[401],"tags":[430,407],"class_list":["post-6872","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-elementor","tag-personalizzazione-di-wordpress","tag-web-design"],"_links":{"self":[{"href":"https:\/\/lacolmenatecnologica.com\/it\/wp-json\/wp\/v2\/posts\/6872","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/lacolmenatecnologica.com\/it\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/lacolmenatecnologica.com\/it\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/lacolmenatecnologica.com\/it\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/lacolmenatecnologica.com\/it\/wp-json\/wp\/v2\/comments?post=6872"}],"version-history":[{"count":1,"href":"https:\/\/lacolmenatecnologica.com\/it\/wp-json\/wp\/v2\/posts\/6872\/revisions"}],"predecessor-version":[{"id":6876,"href":"https:\/\/lacolmenatecnologica.com\/it\/wp-json\/wp\/v2\/posts\/6872\/revisions\/6876"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/lacolmenatecnologica.com\/it\/wp-json\/wp\/v2\/media\/6875"}],"wp:attachment":[{"href":"https:\/\/lacolmenatecnologica.com\/it\/wp-json\/wp\/v2\/media?parent=6872"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/lacolmenatecnologica.com\/it\/wp-json\/wp\/v2\/categories?post=6872"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/lacolmenatecnologica.com\/it\/wp-json\/wp\/v2\/tags?post=6872"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}