하나의 영웅 이미지는 한 가지를 말합니다. 가장 좋은 서너 장의 사진을 회전하는 영웅 배경은 레이아웃에 단일 위젯을 추가하지 않고도 훨씬 더 많은 것을 말해줍니다. The 배경 슬라이더 확장 Elementor용 마스터 애드온 섹션의 정적 배경을 이미지 슬라이드쇼로 대체: 사진을 선택하고 전환을 선택하고 배경이 그 뒤에 순환하는 동안 콘텐츠가 맨 위에 놓입니다.
다음은 소용돌이 전환과 함께 세 장의 사진을 순환하는 데모의 완성된 영웅입니다:
백그라운드 슬라이더 확장자가 수행하는 작업 #
활성화되면 컨테이너와 섹션은 다음을 얻습니다 배경 슬라이더 패널 스타일 일반 배경 섹션 옆에 있는 탭. 뒤집어서 미디어 라이브러리의 이미지를 추가하면 섹션 배경이 시간 제한 슬라이드쇼가 됩니다. 이에 대한 모든 것은 구성 가능합니다:
- 이미지 추가: 표준 WordPress 갤러리 편집기에서 슬라이드를 들고 있는 갤러리 필드를 재정렬하거나 제거합니다.
- 전환: 페이드, 4 방향 슬라이드, 확대 및 축소, 소용돌이, 굽기, 흐림 및 플래시를 포함한 슬라이드 간 20+ 효과. 대부분 두 번째 변형이 있습니다.
- 애니메이션: Ken Burns는 각 슬라이드에서 여러 방향 또는 무작위로 동작을 수행합니다.
- 사용자 정의 오버레이: 슬라이드 위의 색상, 그라데이션 또는 이미지 레이어와 텍스트를 계속 읽을 수 있도록 하는 9가지 사전 설정된 오버레이 스타일.
- 지연 및 타이머: 각 슬라이드가 얼마나 오래 유지되는지, 데모에서 5000ms, 타이머에서 회전이 실행되는지 여부.
- 무작위 디스플레이, 이미지 해상도, 표지: 순서를 섞고, 로드된 크기를 선택하고, 이미지가 섹션을 채우는 방식을 제어합니다.
시작하기 전에 #
- 워드 프레스 와 함께 엘리멘터 설치되고 활성화됩니다.
- Elementor용 마스터 애드온 설치 및 활성. 플러그인에 새로운? 따라 설치 가이드 첫번째.
- Background Slider 는 무료 확장 프로그램이므로 Pro 라이센스가 필요하지 않습니다.
- 전폭 디스플레이에 적합한 크기의 두 개 이상의 이미지, 이상적으로는 유사한 크기입니다.
백그라운드 슬라이더 확장을 활성화하는 방법 #
WordPress 대시보드에서 다음으로 이동하세요 마스터 애드온 그리고 열어보세요 확장 탭. 배경 슬라이더가 에 있습니다 애니메이션 위젯 그룹, 옆에 애니메이션 그라데이션 BG. 보라색으로 변하도록 토글을 클릭한 다음 누르세요 변경 사항 저장 그리고 녹색 “설정이 성공적으로 저장되었습니다” 공지를 기다리십시오.
패널을 열고 이미지를 추가합니다 #
Elementor 편집기에서 영웅 컨테이너를 선택하고 을 엽니다 스타일 탭. 확장 배경 슬라이더 보라색 MA 배지와 스위치가 있는 섹션입니다 배경 슬라이더 활성화 예. 전체 설정 목록이 나타납니다 적용 미리보기에 변경 사항을 푸시하기 위한 상단 버튼입니다.
클릭 이미지 추가 그리고 미디어 라이브러리에서 슬라이드를 골라보세요. 데모는 세 개의 서비스 사진을 사용합니다. 갤러리 편집기는 순서를 처리합니다: 드래그하여 재배열하거나,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 전환 드롭 다운은 하나의 슬라이드가 다음 슬라이드로 손을 떼는 방법을 결정합니다. 목록은 길게 실행됩니다: 페이드,왼쪽, 오른쪽,위, 아래로 슬라이드,확대 및 축소,왼쪽 및 오른쪽으로 소용돌이 치기,화상, 흐림 및 플래시,대부분 두 가지 변형으로 데모가 시작됩니다 왼쪽으로 소용돌이치세요.
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 애니메이션 설정은 각 슬라이드 내부에 Ken Burns 의 움직임을 추가하고,천이 전환 사이에 배경을 계속 유지하는 느린 팬과 줌을 추가합니다. 방향을 선택하거나 로 설정합니다 무작위 그리고 각 슬라이드가 자신의 방식으로 드리프트하도록 하세요.
오버레이, 지연 및 타이머 #
바쁜 사진의 흰색 텍스트는 도움이 필요합니다. 회전 사용자 정의 오버레이 슬라이드 위에 색상, 그라데이션 또는 이미지를 표시하고 놓거나 9개의 사전 설정 중 하나를 선택합니다 오버레이 가독성을 위해 만들어진 패턴이 있는 스타일. 그 아래, 지연 각 슬라이드가 몇 밀리초 동안 유지되는지 설정합니다(데모에서는 5000) 타이머 회전을 자동으로 유지합니다 덮개 이미지가 섹션 가장자리에서 가장자리까지 채우도록 합니다.
페이지의 결과 #
게시 및 영웅이이 페이지의 상단에있는 GIF 에서와 정확히 같이,그 자체로 순환: 각 사진은 지연에 대한 보유,다음으로 소용돌이,제목과 버튼은 상단에 고정 유지. 방문자는 별도의 슬라이더 위젯없이 이동 배경을 얻을,아래 섹션 구조는 결코 변경되지 않습니다.
배경 슬라이더가 잘 작동하는 곳 #
- 영웅 섹션. 첫인상을 하나에 걸지 말고 세 장의 강렬한 사진을 회전하세요.
- 서비스 사업. 하나의 헤드라인 뒤에 작업 중인 팀을 표시합니다.
- 레스토랑 및 장소. 예약 버튼 뒤에서 요리 및 인테리어를 순환합니다.
- 포트폴리오. 소개 섹션의 배경으로 최근 프로젝트.
- 랜딩 페이지. 고정된 클릭 유도 문구 뒤에서 회전하는 제품 각도입니다.
비디오 자습서 #
게시된 페이지에서 확장 기능 활성화부터 사이클링 영웅까지 슬라이더가 끝에서 끝까지 구축되는 모습을 시청하세요.
자주 묻는 질문 #
Elementor 섹션에 배경 슬라이드쇼를 추가하려면 어떻게 해야 합니까?
마스터 애드온 확장 탭에서 배경 슬라이더 확장을 활성화하고 섹션을 선택한 다음 스타일 탭에서 배경 슬라이더를 엽니다. 켜고 두 개 이상의 이미지를 추가하고 전환을 선택하면 섹션 배경이 자동으로 순환됩니다.
어떤 전환 효과가 포함됩니까?
스물 이상: 페이드,왼쪽, 오른쪽,위, 아래로 슬라이드,확대 및 축소,왼쪽 및 오른쪽으로 소용돌이,화상, 흐림,플래시, 대부분 두 번째 변형이 있습니다. 별도의 애니메이션 설정은 각 슬라이드 안에 Ken Burns 팬 앤 줌 모션을 추가합니다.
사진 위에 글자를 읽을 수 있게 보관할 수 있나요?
예. 슬라이드 위의 색상,그라디언트 또는 이미지 레이어에 대해 사용자 지정 오버레이를 켜거나 9 가지 사전 설정 오버레이 스타일 중 하나를 선택합니다. 데모에서는 어두운 오버레이를 사용하므로 흰색 표제와 버튼이 모든 슬라이드에서 대비를 유지합니다.
슬라이드 속도를 어떻게 제어하나요?
Delay 필드는 데모에서 기본적으로 각 슬라이드가 표시되는 밀리초,5000 을 몇 밀리초로 설정해 줍니다. 타이머는 회전을 자동으로 실행하도록 유지하며,Random Display 는 다양성을 원할 경우 각 로드에서 슬라이드 순서를 섞습니다.
Background Slider 확장 프로그램은 무료인가요?
예. 배경 슬라이더는 확장 탭의 애니메이션 위젯 그룹에서 Elementor 용 Master Addons 무료 버전과 함께 제공됩니다. 가격 페이지는 Pro 플랜이 추가하는 내용을 다룹니다.
감싸는 #
배경 슬라이더 확장은 하나의 토글과 선택의 소수 슬라이드 쇼로 섹션 배경을 바꿉니다: 이미지, 전환, 오버레이, 지연. 콘텐츠는 그대로 유지, 배경은 작업을 수행, 어떤 여분의 슬라이더 위젯은 레이아웃을 입력하지 않습니다. 사진이없는 모션의 경우, the 애니메이션 그라데이션 배경 확장 대신 동일한 섹션을 색상으로 덮고 전체 세트를 덮습니다 마스터 애드온 위젯 및 확장 한 페이지 떨어져 있습니다.
