헤드라인에서 움직이는 단어는 정적인 선이 그렇지 않은 곳에서 눈을 당깁니다. The 애니메이션 헤드라인 위젯 인 Elementor용 마스터 애드온 제목을 고정된 부분과 애니메이션 부분으로 나눈 다음 회전, 입력, 슬라이드, 클립과 같은 효과가 있는 단어 목록을 통해 애니메이션 부분을 순환합니다.
첫 번째 제목을 작성하고 회전하는 단어를 추가하고 애니메이션 사전 설정을 선택한 다음 두 부분의 스타일을 지정합니다. 이 가이드는 위젯의 모든 설정을 안내합니다.
애니메이션 헤드라인 위젯이 수행하는 작업 #
위젯은 두 조각에서 하나의 제목을 구축합니다. The 첫 번째 제목 그대로 유지되고 두 번째 제목 선택한 애니메이션으로 단어 목록을 회전합니다. 따라서 “마스터 애드온”은 루프에서 Ultimate Addons 에서 Unique Design,Unlimited Variations 로 변경되는 단어 옆에 앉을 수 있습니다.
그것은 세 개의 탭이 있습니다. 콘텐츠 텍스트, 단어 목록, 사전 설정 및 타이밍을 보유합니다. 스타일 각 제목에 색상과 크기가 있습니다. 고급 일반적인 Elementor 간격 및 가시성 옵션을 제공합니다.
시작하기 전에 #
- 워드 프레스 와 함께 엘리멘터 설치되고 활성화됩니다.
- Elementor용 마스터 애드온 설치되고 활성화되었습니다. 플러그인에 새로운? 참조 설치 가이드.
- 고정된 제목 텍스트와 회전하려는 단어 목록입니다.
Animated Headline 위젯을 추가하는 방법 #
Elementor 편집기에서 을 엽니다 요소 패널 및 검색 애니메이션 헤드라인또는 마스터 애드온 섹션으로 스크롤합니다 (위젯에는 보라색 MA 배지가 있습니다). 페이지로 드래그하면 편집할 준비가 된 샘플 헤드 라인이로드됩니다.
제목과 단어 목록을 설정합니다 #
열다 콘텐츠 탭. 그만큼 첫 번째 제목 는 정적 텍스트, 그리고 두 번째 제목 는 회전하는 단어의 반복자이다.
- 스타일 사전 설정: 회전하는 단어에 사용되는 애니메이션입니다.
- 첫 번째 제목: AI로 쓰기 옵션이 있는 선의 고정된 부분입니다.
- 두 번째 제목: 회전하는 단어당 하나의 항목. 항목 추가 를 사용하여 단어를 추가하고 복사 아이콘을 복제하고 X 를 제거하십시오.
- 정렬 및 HTML 태그: 헤드라인을 정렬하고 제목 수준(H1~H6)을 설정합니다.
- 애니메이션 지연: 각 단어가 다음 단어 앞에 표시되는 시간은 밀리초 단위입니다.
애니메이션 사전설정을 선택합니다 #
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 스타일 사전 설정 드롭다운은 회전하는 단어가 어떻게 들어오고 나가는지를 설정합니다. 각각은 헤드라인에 다른 느낌을 줍니다.
- 1, 2, 3 회전: 단어를 제자리에 뒤집거나 회전시킵니다.
- 입력: 타자기처럼 글자별로 단어를 입력하세요.
- 로드 바, 슬라이드, 클립: 막대, 슬라이드 또는 마스크로 단어를 표시합니다.
- 줌, 스케일, 푸시: 단어를 확장하거나 밀어 넣습니다.
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 로드 바 예를 들어, 다음 단어가 로드되기 전에 움직이는 막대 뒤에 있는 각 단어를 미리 설정합니다.
첫 번째 제목을 스타일링합니다 #
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 스타일 탭이 분할됩니다 첫 번째 제목, 두 번째 제목, 그리고 패턴 (프로 옵션). 열다 첫 번째 제목 고정된 텍스트의 스타일을 지정합니다.
- 텍스트 색상 및 배경: 고정된 단어 색상과 그 뒤에 있는 선택적 하이라이트입니다.
- 타이포그래피: 글꼴, 크기 및 무게.
- 패딩, 여백, 테두리, 상자 그림자: 텍스트 주위의 상자.
애니메이션 단어를 스타일링합니다 #
오픈 두 번째 제목 회전하는 단어를 스스로 스타일링하려면 대조되는 색상이나 하이라이트 배경을 지정하고 애니메이션이 고정된 텍스트에 혼합되는 대신 눈에 띕니다.
첫 번째 제목과 동일한 컨트롤을 가지므로 다른 텍스트 색상, 강조 배경, 타이포그래피 및 움직이는 부분의 테두리를 설정할 수 있습니다.
일반적인 사용 사례 #
- 영웅 헤드라인 주요 판매 포인트를 순환합니다.
- 랜딩 페이지 사이클링 청중 또는 사용 사례(블로거, 상점, 대행사용).
- 기능 섹션 몇 가지 회전하는 단어로 제품이 수행하는 작업을 강조합니다.
- 포트폴리오 소개 당신의 역할이나 기술에 대한 타이핑 효과와 함께.
- 공지사항 바 애니메이션 단어 하나로 눈을 그립니다.
애니메이션 헤드라인 위젯 작업 팁 #
- 비슷한 길이의 단어를 계속 회전시키세요. 큰 길이의 점프는 애니메이션에 따라 라인을 이동시킵니다.
- 읽기 속도와 일치하도록 지연을 설정합니다. 약 2000~3000ms 정도면 사람들이 각 단어를 읽을 수 있습니다.
- 애니메이션 단어를 대조해 보세요. 다른 색상이나 하이라이트는 방문자에게 어떤 부분이 움직이는지 알려줍니다.
- 미리 설정된 톤과 일치시킵니다. 타이핑은 개인 사이트에 적합; 회전 및 슬라이드 슈트 대담한 영웅.
- 올바른 HTML 태그를 설정하십시오. 페이지의 주요 헤드 라인에 H1 을 사용하여 SEO 에 대해 올바르게 유지됩니다.
비디오 자습서를보십시오 #
화면에서 따라하는 것을 선호하시나요? 아래의 비디오 튜토리얼은 애니메이션 헤드라인 요소를 처음부터 끝까지 살펴보고 Elementor 편집기에서 각 사전 설정,단어 목록 및 스타일 옵션이 어떻게 작동하는지 보여줍니다.
자주 묻는 질문 #
마스터 애드온의 애니메이션 헤드라인 위젯은 무엇입니까?
고정된 첫 번째 부분과 애니메이션 두 번째 부분에서 제목을 작성하는 Elementor 위젯입니다. 두 번째 부분은 회전,입력, 슬라이드와 같은 효과가 있는 단어 목록을 통해 회전하며,모두 코드 없이 Elementor 패널에서 설정됩니다.
Animated Headline 위젯에는 어떤 애니메이션 스타일이 포함되어 있나요?
10 개의 사전 설정: 1 회전,2 회전,3 회전,입력, 로드 바,슬라이드, 클립,줌, 스케일,푸시. 각각은 회전하는 단어가 들어오고 나가는 방식을 타자기 효과에서 바 공개 또는 스핀으로 변경합니다.
회전하는 단어를 어떻게 추가하거나 변경합니까?
콘텐츠 탭을 열고 두 번째 제목 반복기를 사용합니다. 각 항목은 하나의 회전 단어입니다. 항목 추가를 사용하여 단어를 추가하고 복사 아이콘을 사용하여 단어를 복제하고 X 를 사용하여 제거합니다. 위젯은 순서대로 순환합니다.
단어가 얼마나 빨리 바뀌는지 조절할 수 있나요?
예. 콘텐츠 탭의 애니메이션 지연 필드는 각 단어가 다음 단어보다 얼마나 오래 표시되는지 밀리초 단위로 설정합니다. 2000~3000 정도의 값은 방문자가 각 단어가 회전하기 전에 읽을 시간을 제공합니다.
Elementor 에서 타이핑 효과 헤드라인을 만들 수 있나요?
예. 스타일 사전 설정을 입력으로 설정하고 회전하는 단어는 타자기처럼 문자별로 입력 한 다음 삭제하고 다음 단어를 입력합니다. 개인 사이트 및 포트폴리오 인트로에 적합합니다.
감싸는 #
애니메이션 헤드라인 위젯은 플랫 헤딩을 움직이는 헤딩으로 바꿉니다: 고정된 부분을 쓰고, 회전할 단어를 나열하고, 입력 또는 회전과 같은 사전 설정을 선택한 다음, 양쪽 절반을 스타일링합니다. 더 많은 헤딩 위젯은 다음을 참조하세요 듀얼 헤딩 위젯 그리고 the 그라디언트 헤드라인 위젯, 전체를 찾아보세요 마스터 애드온 위젯 및 확장, 그리고 확인해 보세요 가격 페이지 각 계획에 포함된 내용입니다.
