대부분의 텍스트 링크는 호버에서 한 가지 작업을 수행합니다: 색상 변경. The Elementor Creative Links 위젯 마스터 애드온에서 당신에게 놀 수있는 더 많은 것을 제공합니다, 단어 주위에 슬라이드 괄호, 텍스트를 휩쓸 채우기, 3D 플립, 그리고 당신이 CSS 파일을 열지 않고 어떤 링크에 드롭 할 수있는 다스 다른 호버 효과.
아래에서는 위젯을 추가하고 모든 Content 컨트롤을 살펴보고 Style 옵션을 다루고 효과 목록을 실행합니다. 편집기의 스크린 샷은 각 단계마다 제공됩니다. 먼저 위젯이 패널에있는 곳입니다.
Creative Links 위젯이 수행하는 작업 #
평범한 인라인 링크를 가져와서 움직이게 합니다. The 크리에이티브 버튼 위젯 패딩 처리된 견고한 버튼 스타일. Creative Links 는 텍스트 링크 버전입니다: “자세히 보기”, nav 스타일의 클릭 유도 문구 또는 문장 안에서 눈에 띄고 싶은 단일 문구. 애니메이션은 호버에서 실행되며,한 번의 드롭다운에서 선택합니다.
또한 옵션 아이콘,일부 효과가 드러내는 대체 레이블,정렬 컨트롤,링크 애니메이션을 중심으로 구축된 타이포그래피,테두리 및 색상 옵션 세트가 포함된 스타일 탭을 얻을 수 있습니다. 무료 Master Addons 컬렉션에 있으므로 모든 Elementor 사이트에서 실행됩니다. 전체 위젯 및 확장 리스트는 나머지를 가지고 있다.
오히려 모든 설정을 읽기 전에 그것을 볼? 여기에 동작 위젯입니다.
시작하기 전에 #
- 워드 프레스 와 함께 엘리멘터 설치되고 활성화됩니다.
- Elementor용 마스터 애드온 설치되고 활성화되었습니다. 그것에 새로운? 로 시작하십시오 설치 가이드.
- Elementor 편집기에서 열리는 페이지 또는 템플릿입니다.
Creative Links 위젯을 추가하는 방법 #
이 부분은 빠릅니다:
- Elementor로 페이지를 열고 왼쪽 상단의 위젯 패널 아이콘(그리드)을 클릭합니다.
- 유형 크리에이티브 링크 검색 상자에서 아래로 스크롤합니다 마스터 애드온 카테고리.
- 드래그하세요 크리에이티브 링크 캔버스에 위젯.
자리 표시자 “여기를 클릭하세요” 텍스트가 표시되며 편집할 준비가 되어 있습니다.
설명되는 내용 설정 #
링크를 선택하고 엽니다 콘텐츠 탭. 텍스트,효과, 링크가 가리키는 곳을 설정하는 곳입니다.
효과 #
X-1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 효과 드롭 다운은이 위젯을 사용하는 전체 이유입니다. 하나를 선택하고 링크는 호버에 애니메이션. 목록은 20 옵션을 지나 실행:
브래킷, 3D 효과, 하단 라인 슬라이드, 하단 테두리 확대, 슬라이드 인, 테두리 슬라이드 다운, 두 번째 테두리 슬라이드 업, 테두리 번역, 두 번째 텍스트 및 테두리, 푸시 아웃 공개, 텍스트 채우기, 원, 점 3개, 테두리 스위치, 스케일 다운, 아래로 떨어짐, 위로 이동, 교차, 3D 슬라이드, 3D 슬라이드 다운 등 몇 가지.
이름은 별다른 것을 주지 않으므로 라이브 미리보기에서 링크를 마우스오버하여 각각이 무엇을 하는지 확인하세요. 괄호와 텍스트 채우기는 본문 복사본에서 잘 작동합니다. 3D 옵션은 더 크고 제목이나 영웅 링크에 맞습니다.
항목 정렬, 링크 정렬 및 뒤로 텍스트 정렬 #
항목 정렬 전체 위젯을 배치합니다(왼쪽, 중앙, 오른쪽). 링크 정렬 그리고 뒤로 텍스트 정렬 링크 텍스트와 일부 효과가 가져오는 대체 레이블을 처리합니다. 세 가지 모두 반응형이므로 토글을 사용하여 장치별로 설정할 수 있습니다.
링크 텍스트 및 대체 링크 텍스트 #
X-1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 링크 텍스트 는 보이는 레이블, “여기를 클릭하세요” 라고 말합니다. The 대체 링크 텍스트 (스크린샷의 “Go!”) 는 하나를 드러내는 효과를 교환하는 두 번째 레이블입니다. 애니메이션이 남기는 공간만 얻으므로 짧게 유지하세요.
아이콘과 아이콘 간격 #
텍스트 옆에 아이콘을 놓은 다음 간격을 설정할 수 있습니다 아이콘 간격. 마스터 애드온은 8 개의 프리미엄을 번들로 제공합니다 아이콘 라이브러리, 그래서 Elementor 바로 안쪽에서 선택할 수 있는 것이 많습니다.
링크 URL #
목적지를 안으로 떨어뜨리십시오 링크 URL니다. 옆에 있는 기어 아이콘은 일반적인 옵션을 보유하고 있습니다: 새 탭에서 열고 nofollow 를 추가하십시오. 현장 링크의 경우 자신의 사이트에서 모든 페이지를 붙여 넣습니다.
스타일 설정 설명 #
로 전환하십시오 스타일 탭 및 열기 링크 스타일. 애니메이션 전후의 링크 모습입니다.
- 폭 그리고 아이콘 크기: 링크 상자와 아이콘의 크기를 자체적으로 조정합니다.
- 타이포그래피: 라벨의 글꼴 패밀리, 크기, 무게 및 문자 간격.
- 링크 패딩: 링크 영역 내부의 간격. 또한 애니메이션을 적용할 수 있는 일부 효과 공간을 제공합니다.
- 테두리 유형, 너비, 색상 및 반경: 많은 효과가 테두리(브래킷, 테두리 슬라이드 다운 및 나머지)에서 작동하므로 일반 링크보다 여기에서 더 많이 계산됩니다.
- 박스 섀도우: 원하는 경우 링크 상자의 깊이.
일반 및 호버 색상 #
색상 컨트롤이 분할됩니다 보통의 그리고 호버 상태. 평소와 함께 텍스트 색상 그리고 배경 색상, 알게 될 거야 정면 BG 색깔, BG 컬러 전, 그리고 BG 컬러 이후. 그 여분의 레이어는 슬라이드와 채우기 효과가 그 사이에 애니메이션되는 것이므로,중간 애니메이션을 보여주는 색상을 제어하고 싶을 때 설정하십시오.
효과가 실제로 나타나는 것을 봅니다 #
캔버스에 대한 Brackets 효과는 다음과 같습니다. 링크를 마우스로 가리키면 각 측면에 브래킷이 미끄러져 들어가므로 “여기를 클릭하세요”는 “[여기를 클릭하세요]”로 읽혀집니다. 모든 효과는 라이브 미리보기에서 이와 같이 동작하므로 커밋하기 전에 몇 가지를 쉽게 시도할 수 있습니다.
Creative Links 사용을 위한 팁 #
- 그 자리에 효과를 일치시킵니다. 텍스트 채우기 또는 하단 라인 슬라이드 같은 미묘한 것 들이 단락에 잘 앉아. 제목 및 영웅 영역에 대 한 3D 슬라이드 및 십자가 저장.
- BG 컬러를 시청하세요. 전면, 이전, 이후 배경은 애니메이션 중간에 텍스트를 지울 수 있으므로 전체 효과를 통해 링크를 읽을 수 있는지 확인하세요.
- 대체 라벨을 짧게 유지하십시오. 애니메이션이 떠나는 공간에 긴 대체 링크 텍스트가 비좁아집니다.
- 터치 잊지마세요. 호버는 폰에서 발사가 안되서 휴식상태는 저절로 끝난것처럼 보여야함.
텍스트 링크 대신 전체 솔리드 버튼이 필요하십니까? 그 크리에이티브 버튼 위젯. 제목,설명, 버튼을 함께 원하십니까? Look at the Call to Action 위젯을 실행합니다.
자주 묻는 질문 #
Elementor Creative Links 위젯이란 무엇입니까?
Elementor 에 애니메이션 텍스트 링크를 추가하는 Master Addons 위젯입니다. 일반 색상 변경 대신 링크는 사용자 정의 CSS 가없는 드롭 다운에서 모두 설정된 Brackets,Text Fill,Circle 및 3D Slide 와 같은 호버 효과를 얻습니다.
링크 효과는 몇 개나 포함되나요?
위젯에는 20+ 효과,Brackets, 3D Effect,Bottom Line Slide,Slide In,Text Fill,Circle, Three Dots,Border Switch,Cross, 3D Slide 가 포함되어 있습니다. 각각을 게시하기 전에 Elementor 편집기에서 실시간으로 미리 봅니다.
Creative Links 위젯은 무료입니까?
예. Creative Links 는 Elementor 플러그인을 위한 무료 Master Addons 의 일부입니다. Pro 플랜은 더 많은 위젯과 확장 기능을 추가합니다. 참조 가격 페이지 전체 비교를 위해.
Creative Links 와 Creative Buttons 의 차이점은 무엇입니까?
Creative Links 는 “자세히 보기” 또는 문장의 구문과 같은 인라인 텍스트 링크를 애니메이션화합니다. Creative Buttons 는 패딩 처리된 단추를 단단하게 스타일링합니다. Pick Links for text-style calls to action and Buttons for block-style ones.
링크 호버 효과가 모바일에서 작동합니까?
호버 효과는 마우스가 필요하므로 터치 스크린에서 트리거되지 않습니다. 휴지 상태가 완전 해 보이도록 디자인하면 링크가 여전히 작동하고 휴대폰과 태블릿에서 잘 읽혀집니다.
감싸는 #
Elementor Creative Links 위젯은 텍스트 링크에 실제 움직임을 제공합니다: 애니메이션에 맞춰진 20+ 호버 효과, 아이콘 및 색상 컨트롤, 코드가 필요하지 않은 모든 것. 효과를 선택하고 색상을 설정하면 링크가 그냥 앉아 있는 것을 멈춥니다. 여기에서 나머지 부분 마스터 애드온 위젯 라이브러리 볼 가치가 있습니다.
