모바일에서 Elementor의 스크롤을 앵커 문제로 수정하는 방법

Rifat Dec 7, 2022

어젯밤 늦게 내 웹사이트의 일부 콘텐츠를 편집하고 있었습니다. 갑자기 Elementor 의 앵커로 스크롤 기능이 모바일에서 작동하지 않습니다. 앵커로 스크롤하면 웹 사이트를 제어한다는 사실이 걱정되었습니다. 즉시 전문가의 도움을 받아 문제를 해결했습니다. 이 경험을 통해 문제는 언제든지 발생할 수 있음을 배웠습니다. 스크롤 투 앵커 문제를 겪고 있는 웹 사이트 소유자를 돕기 위해 스크롤 투 앵커 문제를 해결하는 모든 방법 목록을 만들었습니다. 몇 가지 빠른 팁을 알아보기 위해 읽어 봅시다!

Elementor에서 Anchor?는 무엇입니까

점프 메뉴는 앵커 메뉴의 다른 이름입니다. 이 앵커 ID는 기본 설정으로 지정한 장소로 안내합니다. 앵커 메뉴를 사용하면 뷰어가 다음 페이지로 이동하고 링크를 클릭하고 검색할 수 있습니다. 이것은 일반적으로 WordPress 웹 사이트의 운영자입니다.

사이트에서 앵커를 사용하면 어떻게 도움이 됩니까?

앵커는 여러 용도로 사용할 수 있습니다. 이 연결은 귀하의 웹사이트에서 서핑 경험을 최적화합니다. 이점은 다음과 같습니다.

사용자 경험 향상

앵커 링크는 브라우징을 용이하게 합니다. 방문자는 원하는 서비스를 클릭, 탭하고 선택하기만 하면 됩니다. 이것은 온라인 경험을 향상시킵니다.

놀라운 웹사이트 만들기

최고의 무료 페이지 빌더 Elementor와 함께

지금 시작

콘텐츠의 맨 위로 돌아갈 수 있습니다.

너무 많이 스크롤하는 경우 앵커 링크가 페이지 상단으로 이동하는 데 도움이 될 수 있습니다. 이 도구는 시간을 절약하고 계속 추적할 것입니다.

효율적인 브라우징 보장

스크롤 외에도 클릭, 이전 페이지로 돌아가기 등에도 앵커 링크를 사용할 수 있습니다. 효율적인 브라우징을 용이하게 합니다.

더 빨라진 성능

명령에서 즉각적인 응답을 얻을 수 있습니다. 지침을 입력하는 대신 앵커 링크를 사용하면 더 빠르게 탐색할 수 있습니다.

Elementor의 Scroll to Anchor 기능이 모바일에서 작동하지 않는 이유

Elementor 의 앵커 스크롤이 모바일에서 작동하지 않는 이유를 설명하기 어렵습니다. 그러나 종합적인 조사 결과 다음과 같은 사실을 확인할 수 있었습니다.

불충분한 대상

페이지에 Sobre-Agencia, Como-Fazer, 서비스, 연락처 등과 같은 대상 링크가 없는 경우 스크롤 링크가 작동하지 않는 요인이 될 수 있습니다.

확장으로 인해 어려움이 발생함

Android 기기에 확장 프로그램이 로드된 경우 스크롤 기능이 작동하지 않을 수도 있습니다.

너무 많은 플러그인

웹사이트에 과도한 수의 플러그인이 있는 경우 이는 WordPress 앵커가 응답하지 않는 또 다른 이유일 수 있습니다. 추가 플러그인이 서로 충돌합니다. 이로 인해 웹 사이트에 액세스할 수 없게 될 수 있습니다.

열악한 서버 상태

웹사이트 서버가 플러그인을 처리할 수 없는 경우 링크가 작동하지 않는 원인일 수 있습니다.

Elementor Scroll to Anchor를 수정하는 가장 효과적인 팁 5가지

elementor anchor

Elementor 스크롤 투 앵커가 효과가 없는 이유에도 불구하고 다음 팁은 웹 사이트를 복구하는 데 도움이 될 것입니다. 여기 간다;

대상 만들기

페이지에 대상 링크가 없으면 스크롤 링크가 작동하지 않을 수 있습니다. 이러한 이유로 먼저 대상 링크를 구성한 다음 다음과 같은 방식으로 강조해야 합니다.

먼저 테마를 선택하고 시트에 다음 코드를 입력합니다.

.menu-item a{
     Color: black;


}

링크가 청중에게 표시되는지 여부를 알고 싶다면 이 옵션을 선택하십시오. 이렇게 하려면 다음 CSS를 제공하십시오.

.menu-itema.mPS2id-highlight{
      color: red;
}

자바스크립트 필터 사용

Elementor 앵커 위젯의 경우 javascript 필터를 사용할 수 있습니다. 다음 프로그램을 실행하여 필터를 추가하십시오.

add_action( 'wp_footer', function() {
    if ( ! defined( 'ELEMENTOR_VERSION' ) ) {
        return;
    }
    ?>
    <script>
        jQuery( function( $ ) {
            $( window ).on( 'elementor/frontend/init', function() {
                
                elementorFrontend.hooks.addFilter( 'frontend/handlers/menu_anchor/scroll_top_distance', function( scrollTop ) {
                    var isMobile = $(window).width() <= 760;
                    
                    if (isMobile) {
                        return scrollTop - 1000;
                    } else {
                        return scrollTop;
                    }
                    
                } );
                
            } );
        } );
    </script>
    <?php
} );

스크롤 조정

대체 솔루션으로 모바일 모드에서 메뉴가 열려 있는 동안 오프셋 스크롤을 조정합니다.

메뉴가 닫히지 않도록 방지

이것이 실행 가능한 솔루션은 아니지만 유일한 옵션은 메뉴 표시줄 드롭다운을 열어 두는 것입니다. 이렇게 하면 스크롤 앵커가 멈춘 경우 탐색이 쉬워집니다.

기본 테마 선택

사이트의 앵커 아이콘을 수정하기 위해 할 수 있는 한 가지는 아이콘을 수정하는 것입니다. WordPress의 기본 테마를 선택합니다. 이것은 우월합니다.

플러그인을 사용하여 Elementor 웹사이트에 앵커를 쉽게 추가하는 방법

플러그인은 웹사이트에 앵커 링크를 추가하는 가장 편리한 방법입니다. 앵커를 추가하려면 다음 단계를 따르십시오.

링크를 추가하기 전에 링크 추가 플러그인을 설치하십시오. 그런 다음 앵커 링크가 나타나야 하는 곳에 쇼트코드 블록을 만듭니다. 다음 단축 코드를 실행합니다.

[ps2id id='section-1'/]

새로운 단축 코드 블록에 앵커 링크를 삽입합니다. 링크를 표시할 위치에 배치합니다. 다음 코드를 실행합니다.

[ps2id url='#some-id']link text[/ps2id]

그런 다음 'some-id'를 구성된 앵커 이름으로 바꾸고 link-text를 원하는 앵커로 바꿉니다. 지금 변경 사항을 저장하십시오. 끝났습니다.

5최고의 앵커 및 스크롤 플러그인

연결 접근성을 크게 향상시키는 수십 개의 플러그인이 있습니다. 포괄적인 조사를 거쳐 아래에 나열된 5개의 앵커 플러그인을 가장 훌륭하게 제안합니다.

앵커 링크 추가

선택한 제목 및 콘텐츠 요소에 대한 앵커 링크를 삽입하는 신뢰할 수 있는 플러그인입니다. PHP(5.6) 및 PHP 7과 호환되는 앵커 링크를 추가합니다. 이 매개변수는 CSS를 비활성화하고 앵커 링크가 추가될 게시물 유형을 지정합니다.

페이지 스크롤 ID

새로운 트렌드를 실험하는 것을 좋아한다면 이것은 당신을 위한 것입니다. 이 Page Scroll to ID를 사용하면 스크롤 애니메이션을 추가할 수 있습니다. 이 플러그인을 사용하면 게시물의 시각적 편집기에 링크 & 대상 ID 버튼을 삽입할 수 있으며 기능이 향상되고 정교한 스크롤 모션 사용자 지정이 가능합니다. 또한 이 플러그인은 무료로 사용할 수 있습니다.

쉽고 부드러운 스크롤 링크

복잡성을 방지하기 위해 고객은 기본 모양의 플러그인을 자주 찾습니다. 간단하고 부드러운 스크롤 링크가 그 중 하나입니다. 사용자는 30개 이상의 애니메이션 효과를 사용하여 스크롤 값, 오프셋 값, 스크롤에서 특정 앵커 제외 등을 변경할 수 있습니다. 이 플러그인을 사용하면 모든 페이지 빌더에서 단축 코드를 활용할 수 있습니다.

얼티밋 블록

유용성과 고급 기능을 위해 이 플러그인을 권장합니다. 18개 이상의 블록이 있는 Ultimate 블록은 스크롤 조절 기능을 제공합니다. 이 플러그인을 사용하면 목차를 분리할 수 있습니다. 또한 이 플러그인을 사용하면 앵커 연결을 로마자로 표시할 수 있습니다. 블로거와 온라인 마케터에게 인기 있는 Gutenberg 플러그인입니다.

앵커 블록

이 작은 플러그인은 단순성을 제공합니다. 초보 사용자는 쉽게 텍스트에 대한 링크를 설치하고 추가할 수 있습니다. 그러나 정교한 스크롤 동작이 부족합니다. 앵커 블록은 구텐베르크 블로그 편집자를 위한 가장 기본적인 플러그인 중 하나입니다.

마무리

모든 웹사이트 소유자는 완전한 기능을 갖춘 WordPress 웹사이트를 원합니다. 제대로 작동하지 않으면 사용자가 실망할 수 있습니다. Elementor 가 모바일에서 앵커로 스크롤할 수 없는 것은 모든 웹사이트 소유자가 직면하는 일반적인 문제입니다. 삶을 단순화하기 위해 가장 효과적인 해킹을 강조했습니다. 우리는 이 정보가 귀하의 수리에 도움이 될 것이라고 믿습니다.

Divi WordPress Theme