Elementor 를 사용하면 그라데이션 배경을 설정할 수 있지만 텍스트 자체에 그라데이션을 설정할 수는 없습니다. 표준 Heading 위젯은 단색만 사용하므로 일반적으로 다중 색상 제목은 자신의 CSS 를 로 작성하는 것을 의미합니다 background-clip: text. 그게 바로 공짜의 틈이다 그라디언트 헤드라인 위젯 에서 Elementor용 마스터 애드온 채우다.
이 위젯을 사용하면 두 가지 색상을 선택하고 선형 또는 방사형 그라데이션을 선택하고 텍스트는 코드 없이 해당 그라데이션으로 채워집니다. 또한 선택적 텍스트 그림자와 그라데이션이 뒤에 있는 모든 항목과 혼합되는 방식을 제어하는 13가지 혼합 모드가 제공됩니다. 이 가이드는 Master Addon과 함께 무료로 제공되는 위젯을 사용하여 모든 설정을 다룹니다.
배경 이미지 위에 한 색상에서 다른 색상으로 희미해지는 표제인, 여러분이 만들 그라디언트 텍스트의 종류는 다음과 같습니다:
시작하기 전에 #
- Elementor가 설치되고 활성화되었습니다
- Elementor용 마스터 애드온이 설치되고 활성화되었습니다(설치 가이드)
- Elementor 편집기에서 페이지 또는 템플릿이 열립니다
1 단계: 그라디언트 헤드라인 위젯 추가 #
Elementor 편집기에서 위젯 패널을 검색하세요 그라데이션 헤드라인 그리고 페이지로 드래그하세요. 마스터 애드온 위젯은 “MA” 배지를 달고 있으므로 쉽게 발견할 수 있습니다. 편집기가 을 엽니다 그라디언트 헤드라인 편집 세 개의 탭이 있는 패널: 콘텐츠, 스타일, 고급.
2단계: 제목 내용을 설정합니다 #
에 콘텐츠 탭에 제목을 입력하세요 향하고 필드. 여기에 필드의 나머지 부분은 기본입니다:
- 제목 URL 전체 제목을 링크로 바꿉니다.
- 정렬 왼쪽, 중앙 또는 오른쪽으로 설정합니다.
- 제목 HTML 태그 태그를 선택합니다: H1 부터 H6, 또는 div, span, 또는 p. 페이지의 메인 타이틀에 H1 을 사용하고 섹션 타이틀에 H2 를 사용하여 페이지가 깨끗한 구조를 유지합니다.
3단계: 그라데이션 색상을 선택합니다 #
로 전환하십시오 스타일 탭 및 열기 그라데이션 스타일. 유지하다 텍스트 색상 gradient 로 설정 (Classic 은 일반 단일 색상을 제공합니다). gradient 는 두 색상 사이에서 실행됩니다:
- 색상 는 첫 번째 색상입니다 위치 텍스트를 따라 위치하는 위치를 설정하는 슬라이더(백분율)입니다.
- 두 번째 색상 는 끝 색깔, 그것의 자신의 위치 슬라이더.
두 가지 색상을 브랜드 팔레트로 설정한 다음 위치 슬라이더를 살짝 눌러 각 색상이 다루는 텍스트의 양을 결정합니다. 드래그하면 미리보기가 업데이트됩니다. 따로 있습니다 보통의 그리고 호버 탭도 있으므로 누군가가 제목을 올리면 그라데이션이 바뀔 수 있습니다.
4단계: 기울기 유형, 선형 또는 방사형을 선택합니다 #
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 유형 드롭다운은 그라데이션 모양을 설정합니다. 각 옵션은 그 아래에 표시되는 추가 컨트롤을 바꿉니다:
- 방사형 중심점에서 색을 밖으로 펼칩니다. a 를 골라보세요 위치 (센터 센터처럼) 해당 지점이 있는 위치를 설정합니다.
- 선형 색상을 직선으로 실행합니다. Set the 각도 방향을 제어하려면: 180은 경사도를 아래로 곧게 향하게 하고, 90은 경사도를 가로질러 보냅니다.
Radial 은 텍스트의 중간에서 빛을 내기에 좋습니다. 선형은 대부분의 사람들이 왼쪽에서 오른쪽으로 또는 위에서 아래로 깨끗한 페이드 “그라디언트 텍스트,”라고 생각할 때 그리는 것입니다.
5 단계: 텍스트 그림자 추가 (선택 사항) #
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 텍스트 그림자 컨트롤은 글자 뒤에 깊이를 더합니다. 연필을 클릭하여 그림자 색상,흐림, 가로 및 세로 오프셋을 설정합니다. 부드러운 그림자는 그라데이션 텍스트가 바쁜 배경 이미지 위에 놓일 때 읽을 수 있도록 도와줍니다.
6단계: 13가지 혼합 모드를 사용해 보세요 #
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 블렌드 모드 드롭 다운은 그라데이션 텍스트가 배경 이미지 나 색상과 같이 뒤에있는 것과 혼합되는 방식을 결정합니다. 13 가지 모드가 있습니다:
- 일반, 곱하기, 화면, 오버레이
- 어둡게, 밝게, 색상 회피, 채도
- 색상, 차이, 제외, 색조, 광도
정상은 그라데이션을 그대로 유지합니다. 나머지는 배경에 반응합니다: 곱하기 어둡게,화면 밝게,차이는 눈에 띄는 모양을 위해 색상을 반전시킬 수 있습니다. 가장 빠른 선택 방법은 결과를 텍스트 뒤에있는 색상에 따라 다르기 때문에이를 뒤집어 미리보기를 보는 것입니다.
조정하다 타이포그래피 여기 있는 동안 글꼴과 크기를 확인하려면 다음을 클릭하세요 출판하다 (또는 업데이트) 페이지를 저장하려면.
그라데이션 텍스트가 잘 작동하는 곳 #
- 영웅 헤드라인사진이나 어두운 부분에 그라데이션 제목이 눈에 띄는 경우.
- 섹션 제목 플랫 텍스트보다 좀 더 개성이 필요합니다.
- 랜딩 페이지 그라데이션을 브랜드의 색 구성표와 일치시킵니다.
- 배경 이미지 위에블렌드 모드가 텍스트를 장면에 연결하는 경우입니다.
자주 묻는 질문 #
Elementor 에서 텍스트에 그라디언트 색상을 추가할 수 있습니까?
단색만 사용하는 기본 Heading 위젯이 아닙니다. Master Addons Gradient Headline 위젯이 추가됩니다: 두 가지 색상을 선택하고 선형 또는 방사형을 선택하고 텍스트가 그라데이션으로 채워지므로 사용자 정의 CSS가 필요하지 않습니다.
CSS 없이 Elementor 에서 그라디언트 텍스트를 어떻게 만들 수 있습니까?
마스터 애드온 그라데이션 헤드라인 위젯을 추가하고 제목을 입력한 다음 스타일 탭을 열고 첫 번째 색상과 두 번째 색상을 설정합니다. 유형 아래에서 선형 또는 방사형을 선택하면 그라데이션이 텍스트에 자동으로 적용됩니다.
선형 및 방사형 그라데이션 텍스트의 차이점은 무엇입니까?
선형 그라데이션은 각도로 설정된 직선으로 색상을 실행합니다. 방사형 그라데이션은 위치 컨트롤로 선택한 중심점에서 색상을 펼칩니다. 선형 슈트는 왼쪽에서 오른쪽으로 페이드; 방사형 슈트는 중간에서 빛나는 색을 나타냅니다.
블렌드 모드는 무엇을 합니까?
블렌드 모드는 그라디언트 텍스트가 뒤에 있는 배경과 혼합되는 방식을 제어합니다. 13 가지 옵션은 일반 (블렌딩 없음) 에서 곱하기,화면, 오버레이,차이 등 다양합니다. 효과는 텍스트 뒤에 있는 색상에 따라 다르므로 각각 미리보기하십시오.
그라디언트 텍스트에 Elementor Pro 가 필요합니까?
아니요. Gradient Headline 위젯은 Elementor 무료 버전에서 작동하므로 Gradient 색상,유형, 텍스트 그림자 및 혼합 모드는 모두 Elementor Pro 없이 작동합니다.
