Z 인덱스가 켜져 있는 플로팅 버튼을 만들고 싶습니까? Elementor ?
모든 화면 콘텐츠 앞에 표시되며 일반적으로 중앙에 원형 모양과 아이콘이 있는 버튼에 익숙할 것입니다. 글쎄, 그것은 플로팅 액션 버튼입니다.
플로팅 작업 버튼은 작업을 트리거하거나 어딘가로 항해를 보낼 수 있습니다. 이메일, 소셜 네트워크, 방향에 대한 트리거와 같은 방문자 채널 및 기타 여러 항목을 구독합니다.
에 Elementor, 플로팅 액션 버튼을 만드는 방법에는 두 가지가 있으며 다음과 같습니다.
- Z-Index를 설정하여
- 팝업창을 생성하여 -Popup-
이 튜토리얼에서는 Z 인덱스를 설정하여 플로팅 액션 버튼을 만드는 방법만 보여주고 프로 버전을 사용하여 구현합니다.
하지만 먼저 다음 사항을 알아보세요. WordPress에 Elementor를 설치하는 방법
Elementor에서 플로팅 액션 버튼을 만드는 방법
무료 버전을 사용할 수 있습니다Elementor 이 방법으로 플로팅 작업 버튼을 만듭니다. 하지만 버튼을 표시하려는 각 페이지에 디자인한 버튼을 붙여넣어야 합니다. 웹 사이트.
와 Elementor 프로, 당신은 또한 기능에 액세스할 수 있습니다 맞춤 CSS, 이 튜토리얼에서 사용할 것입니다.
Elementor 편집기로 이동합니다. 기존 콘텐츠(페이지, 기사 등)를 수정하거나 새 콘텐츠를 만들 수 있습니다. 이 튜토리얼에서는 페이지를 수정할 것입니다.
먼저 단일 열이 있는 새 섹션을 만듭니다. 버튼 위젯 선택 위젯 패널에서 편집 영역으로 끌어다 놓습니다. 그런 다음 버튼을 변경하십시오. 텍스트 과 링크.
이 튜토리얼에서는 버튼을 트리거로 사용하여 방문자 를 탐색하려면 사이트 웹 엘리멘터. 그런 다음 옵션에서 조정, 로 설정 droite et, 마지막으로 변경 taille 켜기 버튼의 매우 큰.
위의 GIF에서 볼 수 있듯이 이 버튼은 섹션에서 고정되어 있습니다. 다음으로 스크롤할 때 같은 위치에 유지하면서 움직이게 할 것입니다.
탭으로 이동 고급. 매개변수에서 형세, 너비 설정 인라인(자동차), 정의하다 고정 위치, 세트 수평 방향 에 droite 그리고 그것을 조정 시차 원하는.
다음으로 이 메서드의 필수 사항을 정의합니다. 현장에서 Z-색인, 숫자 9999 입력 ; 버튼을 항상 앞에 둡니다(부동).
이제 플로팅 액션 버튼을 회전할 차례입니다. 항상 탭 아래 고급, 액세스 CSS 클래스 블록에서 레이아웃, 그런 다음 쓰기 rotate 내부.
참조 : Elementor: 최고의 WordPress 페이지 빌더 소개
그 후 블록으로 이동 사용자 정의 CSS , 다음 코드를 필드에 붙여넣습니다.
.rotate.rotate
{transform: rotate(90deg);}노브가 방금 회전한 것을 볼 수 있지만 화면 측면 사이에 이상한 간격이 있습니다. 따라서 조정하여 수정합시다. 시차 -92에서
마지막으로 이 플로팅 작업 버튼에 대해 마지막으로 작은 터치를 한 번 해보겠습니다. 블록에 액세스 변신 로봇, 선택 개요, 옵션에 액세스 오프셋 각 옵션을 7.
Elementor에서 특정 목표를 달성하기 위한 몇 가지 옵션이 있습니다. 플로팅 버튼과 관련하여 사용할 수 있는 두 가지 옵션이 있습니다. 여기에서는 한 가지 방법만 다루었고 다른 방법은 또 다른 튜토리얼이 될 것입니다.
읽기 : Elementor: WordPress 웹사이트를 마이그레이션하는 방법
더 많은 스타일 옵션을 원할 경우 팝업 빌더를 사용하여 플로팅 작업 버튼을 만드는 것이 버튼 닫는 시간, 지속 시간, 시작 또는 종료 애니메이션 등과 같은 동작과 버튼을 사용자 지정할 수 있는 옵션이 있으므로 더 나은 대안이 될 것입니다. .
이 작업을 쉽게 완료했습니다. 태블릿과 스마트폰 작업을 미리 보고 각 장치에 맞게 여백을 변경하려고 합니다.
지금 Elementor Pro를 받으세요!
결론
그래서 ! 프로필 카드에 확대/축소 효과를 적용하는 방법을 보여주는 이 문서의 내용은 여기까지입니다. 가는 방법에 대해 우려 사항이 있는 경우 내부에 알려주십시오. commentaires.
그러나 상담 할 수도 있습니다 우리의 자원, 인터넷 사이트 제작 프로젝트를 수행하는 데 더 많은 요소가 필요하면 워드 프레스 블로그 제작 또는 Divi : 역대 최고의 워드 프레스 테마.
그러나 그동안, 이 기사를 다른 소셜 네트워크에서 공유하십시오.
...
