Elementor 애니메이션 그라데이션 배경(Pro): 이동 그라데이션 섹션
Animated Gradient BG 는 컨테이너,섹션 또는 열 뒤에 천천히 움직이는 선형 그라데이션을 배치하는 Master Addons Pro 확장 프로그램입니다. 두 개 이상의 색상,각도, 지속 시간 및 완화 기능을 선택하고 그라디언트는 이미지 또는 비디오 파일없이 루프에서 앞뒤로 표류합니다. 종종 영웅 섹션,콜 투 액션 밴드 및 곧 출시 될 페이지에 사용됩니다. 배경 대신 그라데이션 색상의 텍스트의 경우 무료를 사용해보십시오 그라데이션 헤드라인 위젯.
두 가지 이상의 색상, 하나의 이동 그라데이션
에 색상을 추가합니다 색상 색상당 하나의 행을 나열합니다. 확장에는 최소 2 개가 필요합니다. 선형 그라데이션에 균등하게 간격을 두고 끝에 있는 첫 번째 색상을 반복하므로 루프에 하드 에지가 없습니다. 색상 중지 위치 또는 방사형 그라데이션에 대한 설정이 없습니다. 색상을 선택하면 편집기 미리보기가 업데이트됩니다.
- 색상 목록: 행 추가,복제 또는 삭제. 일반적으로 2~4 개의 색상이 가장 잘 읽혀집니다.
- 투명한 색상: 그라데이션은 섹션의 일반 배경 위에 자체 레이어에 위치하므로 투명도가 있는 색상을 사용하면 배경 이미지가 표시됩니다.
- 작동하는 곳: 컨테이너, 섹션 및 열, 스타일 탭에서. 위젯은 패널을 얻지 못합니다.
각도, 지속 시간 및 완화
각도 기울기의 방향을 -45 도에서 180 도까지 설정하며,기본값은 - 45 입니다. 총 애니메이션 기간(초)입니다 1 부터 20 까지 실행되며 기본값은 6 입니다. 그라디언트가 가로질러 드리프트하고 뒤로 드리프트하는 데 걸리는 시간입니다. 애니메이션 효과 완화 설정: 선형, 용이성, 용이성, 용이성 또는 재료 설계(부드러움)를 기본값으로 하는 세 가지 부드러운 곡선 중 하나입니다.
- 느리고 미묘함: 12 ~ 20 초는 영웅 텍스트보다 훨씬 뒤떨어져 작동합니다.
- 항상 켜져 있습니다: 페이지가 로드되고 호버링이나 스크롤 트리거가 없을 때 루프가 시작됩니다.
- 전환 부드러움: 이 슬라이더는 패널에 표시되지만 현재 버전의 애니메이션은 변경되지 않습니다.
Elementor 그라데이션 배경과 애니메이션 그라데이션 BG
Elementor의 무료 Background 설정은 Gradient 타입을 가지고 있지만 (Elementor 4.2.4 에서 확인), gradient는 움직이지 않습니다. CSS 키프레임을 직접 작성하여 애니메이션을 적용하거나, 확장자를 사용할 수 있습니다.
| 특징 | 요소 그라데이션 | 손으로 CSS | 애니메이션 그라데이션 BG |
|---|---|---|---|
| 가격 | 무료 | 무료 | 마스터 애드온 프로 |
| 운동 | 정적 | 예, 키프레임을 작성합니다 | 예, 내장되어 있습니다 |
| 색상 | 2, 정류장 위치 포함 | 어떤 | 2 개 이상, 균등하게 간격 |
| 그라데이션 유형 | 선형 또는 방사형 | 어떤 | 선형만 |
| 각도 | 장치당 0~360입니다 | 어떤 | -45~180 |
| 속도와 완화 | 아니요 | 예 | 내구 1 에서 20 s, 8 개의 완화 선택권 |
| 에 설정 | 스타일 패널 | 사용자 정의 CSS | 스타일 패널 |
정지 그라데이션의 경우 Elementor 자체 설정으로 충분하며 정지 및 그라데이션 유형에 대한 제어권을 더 많이 제공합니다. 확장 기능을 사용하면 그라데이션이 이동하기를 원할 때 키프레임을 작성할 수 있습니다.
관련: 그라데이션 헤드라인 (무료) 그라디언트 텍스트에 대한 플러스 입자 (무료) 그리고 배경 슬라이더 (무료) 다른 이동 배경.
Elementor에 애니메이션 그라데이션 배경을 추가하는 방법
확장 기능이 켜지면 모든 컨테이너,섹션 및 열의 스타일 탭에 패널이 나타납니다. 여기에 세부 정보가 있습니다 애니메이션 그라데이션 배경에 대한 문서입니다.
- Master Addons Pro가 활성화되어 있으면 다음으로 이동하세요 마스터 애드온 > 확장 그리고 스위치 켜기 애니메이션 그라데이션 BG.
- Elementor로 페이지를 편집하고 컨테이너, 섹션 또는 열을 선택하세요.
- 열다 스타일 탭하고 확장하세요 애니메이션 그라데이션 배경.
- 세트 애니메이션 그라데이션 활성화 to Yes.3 가지 샘플 색상이 나타납니다.
- 의 색상을 변경합니다 색상 목록, 그 다음 설정 각도, 총 애니메이션 기간(초)입니다 그리고 애니메이션 효과.
- 페이지를 업데이트하고 모든 색상에 대해 텍스트를 계속 읽을 수 있는지 확인하세요.
애니메이션 그라데이션 BG에 대해 자주 묻는 질문
Animated Gradient BG는 무료입니까?
아니요. Master Addons Pro 의 일부입니다. Elementor 의 무료 Gradient 배경은 정적이므로 움직이는 그라데이션에는이 확장 또는 자신의 CSS 가 필요합니다.
배경 이미지 위에 사용할 수 있나요?
예. 그라데이션은 섹션의 일반 배경 위에 자체 레이어에 그려집니다. 색상 선택기의 투명도가 약간있는 색상을 선택하고 배경 이미지가 보여줍니다.
한 애니메이션에서 몇 가지 색상을 사용할 수 있나요?
적어도 두 개,그리고 그 뒤에 더하는 만큼. 색은 균등하게 간격을 두기 때문에 보통 두 개에서 네 개가 가장 깔끔한 결과를 줍니다.
애니메이션이 항상 재생됩니까, 아니면 호버에서 재생되도록 할 수 있습니까?
항상 재생됩니다. 루프는 페이지가 로드되고 호버 또는 스크롤 트리거가 없을 때 시작됩니다. 호버 전용 효과의 경우 예를 들어 자체 CSS 가 필요합니다 사용자 정의 CSS 확장.
트렌드 엘리먼트 위젯 및 확장
더 짧은 시간에 정교한 웹사이트를 구축하세요.
![Elementor용 마스터 애드온 게시물/페이지 복제기 확장: 랜딩 페이지를 생성하는 WordPress 페이지 목록의 MA 복제기 행 링크 - [복제된 #128] 초안](https://d1asvmc6qcowgk.cloudfront.net/wp-content/uploads/2026/09/15102930/post-page-duplicator-768x403.webp)
