평면 배경색은 제 역할을 하고 사라집니다. 색상 사이를 천천히 표류하는 그라데이션은 동일한 섹션이 하나의 이미지를 추가하지 않고도 살아있음을 느끼게 합니다. The 애니메이션 그라데이션 BG 확장 에서 마스터 애드온 프로 모든 컨테이너, 섹션 또는 열에 해당 효과를 추가합니다: 색상을 선택하고 각도와 속도를 설정하며 배경 주기가 자체적으로 순환됩니다.
라이브 페이지에서 실행되는 효과는 다음과 같습니다. 섹션은 콘텐츠가 그대로 유지되는 동안 색상 세트를 통해 이동합니다:
Animated Gradient BG 확장자가 수행하는 작업 #
활성화되면 컨테이너, 섹션 및 열은 다음을 얻습니다 애니메이션 그라데이션 배경 패널 스타일 탭, 일반 배경 섹션 바로 아래. 두 개 이상의 색상으로 로드하고 확장은 루프에서 색상 사이에 애니메이션을 적용하는 그라데이션을 렌더링합니다. 각도, 총 사이클 시간 및 완화 기능은 설정해야 합니다.
작은 스크립트는 콘텐츠 뒤에 그라디언트 레이어를 추가하고 CSS로 애니메이션을 적용하므로 호스팅할 비디오나 압축할 이미지가 없으며 상단의 텍스트는 계속 선택할 수 있습니다.
시작하기 전에 #
- 워드 프레스 와 함께 엘리멘터 설치되고 활성화됩니다.
- Elementor용 마스터 애드온 설치 및 활성. 플러그인에 새로운? 따라 설치 가이드 첫번째.
- A 마스터 애드온 프로 animated Gradient BG는 Pro 확장이므로 라이선스를 취득하세요.
Animated Gradient BG 확장을 활성화하는 방법 #
WordPress 대시보드에서 다음으로 이동하세요 마스터 애드온 그리고 열어보세요 확장 탭. 애니메이션 그라데이션 BG가 에 있습니다 애니메이션 위젯 그룹, 입자 및 배경 슬라이더 옆에. 보라색으로 바뀌도록 토글을 클릭한 다음 누르십시오 변경 사항 저장 그리고 녹색 “설정이 성공적으로 저장되었습니다” 공지를 기다리십시오.
구간의 그라데이션을 설정합니다 #
Elementor 편집기에서 컨테이너 또는 섹션을 선택하고 을 엽니다 스타일 탭. 그만큼 애니메이션 그라데이션 배경 보라색 MA 배지가 있는 섹션은 배경 바로 아래에 있습니다. 뒤집기 애니메이션 그라데이션 활성화 예, 캔버스가 효과를 실시간으로 미리 보는 동안 컨트롤이 나타납니다.
- 애니메이션 효과: 색상 움직임의 완화, 데모의 용이성.
- 각도: 대각선 스윕 데모의 그라데이션 방향 -45입니다.
- 총 애니메이션 기간(초): 그라데이션이 가로질러 표류하는 데 걸리는 시간 데모는 6 초를 사용합니다.
- 전환 부드러움(초): 패널에 기본값 3 으로 표시되지만 현재 버전에서는 애니메이션을 변경하지 않습니다. 기간과 애니메이션 효과를 사용하여 대신 느낌을 조정하십시오.
- 색상: 그라디언트를 잡고 있는 중계기가 멈춥니다. 클릭 항목 추가 다른 색상의 경우 또는 X가 하나를 삭제합니다.
색깔을 골라 #
색상 목록의 각 행은 표준 피커를 엽니다. 데모는 청록색,보라색, 주황색 세트로 시작한 다음 스왑이 들어오고 나갑니다: 하나를 제거하고 루프가 조여지고 진한 파란색 (#3D6CD6) 을 추가하면 사이클이 즉시 픽업합니다. 라이브 미리보기는 이것을 재미있는 부분으로 만듭니다; 당신은 당신이 만지는 모든 정지와 함께 섹션의 분위기가 바뀌는 것을 지켜 봅니다.
동일한 온도 편차에 있는 2 개 3 개의 색깔은 우아하게 읽었습니다. 스크린 세이버로 읽힌 전체적인 바퀴를 가로 질러 5 개의 색깔. 작은 시작.
페이지의 결과 #
이 페이지 상단의 GIF 에서와 같이 섹션의 색상을 통해 호흡을 게시하고 시청하십시오. 전체 주기는 기간으로 설정한 모든 것을 취한 다음 반복합니다. 버튼,제목 및 이미지는 영향을받지 않고 맨 위에 있습니다.
실용적인 참고 사항 하나: 어두운 텍스트는 가벼운 그라데이션 스톱에서 읽을 수 있지만 포화 상태에서는 사라질 수 있습니다. 첫 번째 프레임뿐만 아니라 세트의 모든 색상에 대해 헤드라인을 확인하세요.
애니메이션 그라데이션이 잘 작동하는 곳 #
- 영웅 섹션. 무거운 배경 비디오 없이 접힌 부분 위의 동작입니다.
- 콜투액션 밴드. 변화하는 배경은 그 위에 타고 있는 버튼으로 눈을 당깁니다.
- 곧 출시될 예정입니다. 전체 화면 그라데이션은 자체적으로 희박한 페이지를 전달합니다.
- 포트폴리오 및 대행사 사이트. 브랜드 색상 헤더를 통해 순환, 스톡 비디오에 대 한 지불 하지 않고.
- 가격 섹션. 강조 표시된 계획 뒤의 미묘한 그라데이션은 나머지 계획과 구분됩니다.
비디오 자습서 #
확장을 활성화하는 것부터 완성된 움직이는 배경까지 처음부터 구축된 그라데이션을 시청하세요.
자주 묻는 질문 #
Elementor 에서 애니메이션 그라데이션 배경을 추가하려면 어떻게 해야 합니까?
마스터 애드온 확장 탭에서 애니메이션 그라데이션 BG 확장을 활성화하고 컨테이너,섹션 또는 열을 선택한 다음 스타일 탭을 엽니다. 애니메이션 그라데이션 배경 패널에서 애니메이션 그라데이션 활성화를 켜고 두 개 이상의 색상을 추가하면 배경이 즉시 순환되기 시작합니다.
그라디언트는 몇 가지 색상을 사용할 수 있나요?
Color 리피터에 추가하는 만큼. 각 Add Item 클릭은 또 다른 그라데이션 스톱을 생성하고,애니메이션은 설정한 총 지속 시간 내에 모든 스톱을 순환합니다. 2~4 가지 색상은 대부분의 디자인을 다룹니다.
그라디언트 애니메이션의 속도를 제어할 수 있나요?
예. 총 애니메이션 지속 시간은 하나의 전체 사이클이 1 에서 20 까지 걸리는 시간을 설정하고 애니메이션 효과는 완화 효과를 설정합니다. 전환 부드러움 슬라이더는 현재 버전의 애니메이션에 영향을 미치지 않습니다.
애니메이션 그라데이션으로 인해 페이지 속도가 느려지나요?
효과는 비디오 또는 이미지 파일이 아닌 작은 스크립트로 설정된 CSS 애니메이션이므로 다운로드 할 추가 항목이 거의 없습니다. 영웅 섹션에서 모션을 넣는 가벼운 방법 중 하나입니다.
Animated Gradient BG 확장은 무료입니까?
아니요. Animated Gradient BG 는 Master Addons 의 Pro 확장입니다. Elementor 에는 무료 Gradient 배경 유형이 있지만 해당 그라데이션은 움직이지 않습니다.
감싸는 #
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 애니메이션 그라데이션 BG 확장 섹션 배경을 느리게 움직이는 색상으로 바꿉니다: 색상 목록, 각도, 지속 시간 및 완화. 팔레트를 단단히 유지하고 모든 정지에 대해 텍스트 대비를 확인하면 섹션이 제로 자산 가중치로 모션을 전달합니다. 그것은 잘 쌍을 이룹니다 입구 애니메이션 확장 움직이는 배경을 통해 도착하는 콘텐츠의 경우 무료입니다 그라데이션 헤드라인 위젯은 그라데이션 텍스트와 전체 세트를 다룹니다 마스터 애드온 위젯 및 확장 한 페이지 떨어져 있습니다.
