덕분에 WordPress에서 핫스팟으로 대화식 이미지를 만드는 방법을 알고 싶습니까? Elementor 필수 애드온?
이미지는 정보를 전달하는 훌륭한 도구입니다. 이미지와 시각적 형태 전체를 통해 전달되는 정보가 이해하고 기억하기 더 쉽다는 것은 누구나 알고 있습니다.
웹 환경에서 다양한 이미지 형식을 사용할 수 있습니다. 인포그래픽, 사진, 연재만화, 일러스트레이션 등…
무언가의 해부학, 도시 랜드마크, 지도 또는 방향과 같은 웹 콘텐츠를 만들고 싶다면 핫스팟을 사용한 이미지 구축이 좋은 생각이 될 수 있습니다.
이러한 유형의 콘텐츠에 대한 아이디어는 전달하는 정보를 독자가 쉽게 이해할 수 있도록 대화형 이미지를 제공하는 것입니다. 각 핫스팟에 대한 도구 설명이 포함된 이미지에 핫스팟을 추가할 수 있습니다. 다음은 예입니다.
당신이 가지고있는 경우 웹 사이트 WordPress를 기반으로 핫스팟이 있는 이미지를 만드는 것은 그리 어렵지 않습니다. 모듈을 사용하여 만들 수 있습니다. 필수 애드온 .
Essential Addons 모듈이란 무엇입니까?
Essential Addons는 애드온입니다.Elementor. 이것은 2백만 건이 넘는 다운로드를 기록한 가장 인기 있는 모드 중 하나입니다. 이 추가 기능은 귀하의 컴퓨터에 약 60개의 추가 위젯을 추가합니다. Elementor.
Essential Addons에서 제공하는 위젯 중 하나는 EA 이미지 핫스팟 대화형 이미지를 만드는 데 사용할 수 있습니다. Essential Addons 자체는 freemium 애드온이지만 EA Image Hotspots 위젯은 이 버전에서만 사용할 수 있으므로 Hotspots로 이미지를 생성하려면 프로 버전을 사용해야 합니다.
Essential Addons 모듈을 사용하여 핫스팟으로 이미지를 생성하는 방법
먼저 WordPress에 Elementor 및 Essential Addons 모듈을 설치해야 합니다. Essential Addons의 프로 버전을 얻을 수 있습니다. 웹 사이트 공식적인. Elementor의 경우 무료 버전을 사용할 수 있습니다.
참조 : Elementor에서 Global Widget을 사용하는 방법
Elementor의 무료 버전은 다음 디렉토리에서 사용할 수 있습니다. 워드 프레스 플러그인 플러그인 설치 프로그램 검색 상자에 "elementor"를 입력하여 설치할 수 있습니다(플러그인 – > 추가).
Elementor 및 Essential Addons가 설치되면 새 페이지(페이지 – > 추가) 또는 새 항목(아이템 – > 추가) Elementor로 편집하십시오. 버튼을 클릭하면 Elementor 편집기로 리디렉션됩니다. 엘리먼트로 편집.
핫스팟으로 이미지를 생성하기 전에 먼저 레이아웃을 설정할 수 있습니다. 이렇게 하려면 왼쪽 패널의 왼쪽 하단 모서리에 있는 기어 아이콘을 클릭하여 페이지 설정 패널을 엽니다.
읽기 : Elementor의 게시물 위젯을 사용하는 방법
드롭다운 메뉴에서 레이아웃 설정 레이아웃
편집 상자에서 더하기 아이콘을 클릭하여 새 섹션을 추가하고 왼쪽 패널에서 EA Image Hotspots 위젯을 추가합니다.
왼쪽 패널에서 이미지 선택기를 클릭하여 이미지를 추가합니다.
오픈 옵션 핫스팟 왼쪽 패널에서 액세스 포인트를 추가합니다. 기본적으로 EA Image Hotspots 위젯에는 핫스팟이 포함되어 있습니다. 기본 액세스 포인트를 클릭하여 내용을 편집할 수 있습니다.
기본적으로 액세스 포인트 유형은 아이콘. 로 변경할 수 있습니다. 텍스트 아니면 떠나 보라 당신이 그것을 원한다면.
탭을 클릭하십시오 POSITION 액세스 포인트의 위치를 설정합니다. 슬라이더를 드래그하여 X 및 Y 위치를 설정합니다.
탭을 클릭하십시오 툴팁 툴팁 콘텐츠를 추가합니다. 도구 설명을 활성화하고 편집기에서 콘텐츠를 추가합니다. 도구 설명의 위치를 위쪽, 아래쪽, 왼쪽 또는 오른쪽으로 설정할 수도 있습니다.
더 많은 핫스팟을 추가하려면 버튼을 클릭하십시오. 요소 추가 섹션 핫스팟 위 단계를 반복하여 핫스팟 위치, 도구 설명 내용 및 도구 설명 위치를 설정합니다.
섹션 열기 툴팁 설정 툴팁의 크기와 애니메이션 효과를 설정합니다.
이제 탭으로 이동 스타일 핫스팟과 도구 설명의 스타일을 지정합니다. 먼저 옵션을 엽니다. 영상 이미지 크기를 설정합니다.
섹션 열기 핫스팟 핫팟을 사용자 정의합니다. 크기, 아이콘 색상(또는 선택한 핫스팟 유형에 따라 텍스트), 배경 색상, 테두리 반경 등을 설정할 수 있습니다.
발견 : Elementor에서 관련 항목을 추가하는 방법
섹션 열기 도움말 툴팁을 사용자 지정합니다. 배경 색상, 텍스트 색상, 타이포그래피(글꼴 크기, 글꼴 모음, 글꼴 스타일) 및 너비를 설정할 수 있습니다.
지금까지 핫스팟이 있는 이미지를 성공적으로 만들었습니다. 결과에 만족할 때까지 왼쪽 패널을 가지고 놀면서 핫스팟으로 이미지를 사용자 지정할 수 있습니다. 완료되면 버튼을 클릭할 수 있습니다. 게시 페이지를 게시합니다.
Gutenberg에 핫스팟이 있는 이미지 추가
작업 중인 기사의 지원 자료로 핫스팟이 있는 이미지를 추가하려면 플러그인을 사용하여 Gutenberg(기본 WordPress 편집기)와 통합할 수 있습니다. 구텐베르크용 엘리멘터 블록. 이 플러그인을 사용하면 Elementor 템플릿을 Gutenberg 블록으로 사용할 수 있습니다.
위의 핫스팟이 있는 이미지를 Elementor 섹션 템플릿으로 저장하려면 섹션 핸들을 마우스 오른쪽 버튼으로 클릭하고 템플릿으로 저장.
모델 이름을 지정하고 버튼을 클릭하십시오. 등록자.
핫스팟이 있는 이미지를 추가하려는 기사를 엽니다. 새 블록을 추가하고 선택 엘리멘터 라이브러리 방금 만든 핫스팟이 있는 이미지 템플릿을 선택합니다.
지금 Elementor Pro를 받으세요!!!
결론
여기 ! 그것이 당신에게 방법을 보여주는이 기사에 대한 것입니다 Elementor 및 Essential Addons 덕분에 WordPress의 핫스팟으로 대화형 이미지 생성. 거기에 가는 방법에 대해 우려 사항이 있는 경우 commentaires.
그러나 상담 할 수도 있습니다 우리의 자원, 인터넷 사이트 제작 프로젝트를 수행하는 데 더 많은 요소가 필요하면 워드 프레스 블로그 제작 또는 Divi : 역대 최고의 워드 프레스 테마.
그러나 그동안, 이 기사를 다른 소셜 네트워크에서 공유하십시오.
...
