팀 슬라이더
귀하의 팀은 페이지의 어떤 것만큼이나 비즈니스를 판매하지만 헤드 샷의 평평한 격자는 거의 그런 식으로 착륙하지 않습니다. 마스터 애드온 Elementor 팀 슬라이더 그 프로파일을 사람들이 찾아볼 수 있는 회전목마로 바꿉니다: 사진,이름, 역할,짧은 약력,소셜 링크,당신이 제어하는 레이아웃으로 슬라이딩. 스타일 사전 설정을 선택하고 간단한 리피터를 통해 각 멤버를 추가하면,당신은 팀원 회전목마 코드를 작성하지 않고 위로.
그것은 얼굴의 행 이상입니다. 호버 효과,자동 재생 및 요소별 스타일링은 각 프로필에 약간의 문자를 제공하고 사람들이 첫 번째 카드에서 멈추는 대신 전체 팀을 클릭하도록합니다. 아래 비디오는 빌드 아래로 더 내려 가면 사전 설정,캐러셀 설정 및 빠른 방법을 얻을 수 있습니다.
Elementor 팀 슬라이더란 무엇입니까?
팀 슬라이더는 당신의 사람들을 정적 격자에서 쌓아 두는 대신에 한 번에 하나의 카드를 보여주는 회전 목마입니다. 방문자는 프로파일을 스 와이프하거나 클릭하고,각 카드는 사진,이름, 역할,일반적으로 소셜 링크를 통해 팀원 회전 목마 또는 팀원 슬라이더라고 불리는 것을 볼 수 있습니다. 어느 쪽이든 같은 생각: 큰 팀을 작은 공간에 맞추고 사람들이 사진의 벽을 지나 스크롤하지 않고 그것을 통해 이동하게하십시오.
Elementor 의 코어 캐러셀과 많은 수동 스타일링에 근접할 수 있지만,프로파일 레이아웃,호버 상태,반응형 동작은 모두 빌드하고 계속 작업할 수 있습니다. Master Addons 위젯은 이러한 것들을 사전 설정으로 제공하므로 대부분의 작업은 설계가 아닌 구성입니다. 고정 그리드가 캐러셀보다 더 적합하다면,the 팀원 섹션 가이드 대신 그것을 다룹니다.
기성품 스타일 사전 설정으로 시작하세요
카드를 처음부터 디자인할 필요는 없습니다. 팀 회전목마,서클 그라데이션 또는 호버의 콘텐츠와 같은 사전 설정에서 시작하여 각각 조정할 수 있는 완성된 모습을 보여줍니다. 그런 다음 콘텐츠 리피터에서 팀을 구성합니다: 구성원당 항목을 추가하고,사진을 업로드하고,이미지 해상도를 설정하고,이름, 지정 및 짧은 설명을 채웁니다. 한 패널에서 실행되는 팀의 작은 시각적 데이터베이스처럼 작동합니다.
- 원클릭 사전 설정: 팀 회전 목마 또는 원 애니메이션과 같은 전체 디자인을 적용하고 당신은에서 시작하는 레이아웃이 있습니다.
- 리피터 관리: + 항목 추가 버튼을 사용하여 멤버를 순서대로 추가, 제거 또는 드래그합니다.
- 정회원 프로필: 각 개인의 이미지, 이름, 명칭, 설명 및 소셜 링크.
회전목마 제어 및 탐색
회전목마가 원하는 대로 작동하도록 설정합니다. 자동 재생을 켜고 속도를 설정하고,한 번에 몇 개의 슬라이드가 스크롤되는지 선택하고,끝없는 회전목마를 위해 루프를 켭니다. 그런 다음 사람들이 회전목마를 통해 어떻게 이동하는지 결정합니다: 화살표,점 또는 둘 다,슬라이더 안쪽이나 바깥쪽에 앉습니다. 모바일에서 화살표를 숨길 수도 있는데,어쨌든 전화 화면을 붐비는 경향이 있기 때문에 할 가치가 있습니다.
- 자동 재생 및 루프: 자동 재생 속도,애니메이션 속도,루프, 스크롤할 슬라이드를 설정합니다.
- 탐색: 사용자 정의 위치 지정이 가능한 화살표, 점 또는 둘 다.
- 모바일: 보기를 계속 열려면 휴대폰의 탐색 화살표를 숨깁니다.
슬라이더의 모든 요소를 스타일링합니다
각 레이어는 자체적으로 스타일을 지정합니다. 일반적인 모양,슬라이더 배경 및 콘텐츠 정렬을 먼저 설정한 다음 세부 사항으로 이동합니다: 이름,지정 및 설명에 고유한 색상,유형 및 간격을 지정합니다. 멤버 카드는 일반,호버 및 활성 상태에 대해 별도의 배경,테두리 및 상자 그림자를 가지므로 사람들이 회전목마를 통과할 때 카드가 실제로 반응합니다.
- 텍스트 스타일링: 이름, 역할, 약력에 대한 유형, 색상, 간격을 구분합니다.
- 카드 상태: 카드가 일반, 호버 또는 활성일 때 카드의 스타일이 다릅니다.
- 화살표 스타일링: nav 화살표, 일반 및 호버의 색상, 배경, 크기, 테두리 및 패딩입니다.
소셜 프로필 및 호버 효과
회원의 Facebook,Twitter, LinkedIn 또는 Instagram URL 을 추가하면 아이콘이 스타일이 지정된 세트로 카드에 표시됩니다. Hover 의 Social Left 또는 Hover 의 Content 와 같은 일부 사전 설정은 누군가가 카드를 맴돌 때까지 약력이나 아이콘을 다시 누른 다음 공개할 수 있습니다. 아이콘과 배경을 일반 상태와 호버 상태에 대해 별도로 색칠할 수 있으므로 공개는 나중에 생각한 것이 아니라 디자인의 일부처럼 보입니다.
- 소셜 미디어 통합: 팀원당 최대 4개의 소셜 프로필 URL을 추가합니다; 아이콘이 자동으로 표시됩니다.
- 아이콘 스타일링: 일반 상태와 호버 상태 모두에 대해 소셜 아이콘 색상과 배경을 사용자 정의합니다.
- 대화형 사전 설정: 내장된 호버 애니메이션이 포함된 사전 설정을 활용하여 바이오스 또는 소셜 링크를 우아하게 드러냅니다.
Elementor에서 팀 슬라이더를 추가하는 방법은 무엇입니까?
작업 팀 슬라이더는 몇 분 정도 걸립니다. 단축 코드도 없고 별도의 슬라이더 플러그인도 없습니다.
- 마스터 애드온을 설치하고 활성화한 다음 Elementor로 페이지를 편집합니다.
- 위젯 패널을 검색하세요 팀 슬라이더 그리고 페이지로 드래그하세요.
- 스타일 사전 설정을 선택하여 기본 모양을 설정합니다.
- 콘텐츠 리피터에서 을 클릭합니다 + 항목 추가 각 회원에 대해 사진, 이름, 명칭, 설명 및 소셜 링크를 입력하세요.
- 자동 재생, 루프, 스크롤할 슬라이드 및 탐색을 위한 회전목마 설정을 엽니다.
- 브랜드에 맞게 텍스트, 카드, 화살표를 스타일링한 다음 게시하세요.
완료 호출하기 전에 확인해야 할 한 가지: 사각형,균등하게 자른 사진을 업로드합니다. 일치하지 않는 이미지 크기는 팀 슬라이더가 꺼지는 일반적인 이유입니다. 하나의 키가 큰 헤드샷이 전체 행을 줄 밖으로 던지기 때문입니다. 모든 설정은 에 덮여 있습니다 팀원 회전목마 문서.
팀만을 위한 것이 아닙니다: 고객 및 추천서
팀을 위해 브랜드화되었지만 후드 아래에는 프로필 캐러셀이므로 사용후기 슬라이더 또는 클라이언트 캐러셀로도 사용됩니다. 이미지 필드에 클라이언트 로고 또는 고객 사진을 삭제하고 이름에 있는 사람이나 회사,지정에서의 역할 및 설명에 있는 견적과 동일한 사전 설정 및 컨트롤이 이어집니다.
- 팀 페이지: 직원을 위한 사진, 역할, 약력 및 소셜 링크.
- 사용후기 슬라이더: 고객 사진, 이름, 회사 및 견적.
- 클라이언트 캐러셀: 각 프로젝트에 대한 짧은 줄이 있는 로고.
- 연사 또는 저자 라인업: 약력과 링크가 포함된 헤드샷.
일반 이미지 캐러셀만 원한다면 엘리멘터 이미지 캐러셀 는 더 간단한 픽.
팀 슬라이더 요소에 대해 자주 묻는 질문
슬라이더에 팀원을 몇 명 추가할 수 있나요?
필요한 만큼. 계속 클릭 + 프로필 추가 콘텐츠 섹션에서 항목 추가,그리고 회전 목마는 어떤 숫자를 걸립니다. 매우 큰 팀은 초기 페이지 로드를 끌 수 있지만,그래서 회원 사진을 압축하고 수십에 일단 게으른 로딩을 켭니다.
Elementor 팀 슬라이더가 모바일과 태블릿에서 반응합니까?
예. 슬라이더,이미지, 텍스트,내비게이션이 모두 적응되고,조회당 슬라이드와 항목 간격이 작은 화면에서 조정됩니다. 보다 엄격한 제어를 위해 Elementor 의 반응 모드를 사용하여 태블릿과 모바일에서 서로 다른 글꼴 크기나 이미지 크기를 설정합니다.
팀 대신 사용후기나 고객에 사용할 수 있나요?
예. 유연한 프로필 캐러셀입니다. 이미지에 클라이언트 로고 또는 고객 사진을 넣고,제목에 이름을,지정에 회사 또는 역할을,설명에 인용문을 넣습니다. 즉,다른 위젯을 추가하지 않고 평가 슬라이더 또는 클라이언트 캐러셀을 제공합니다.
자동 재생 속도를 변경하려면 어떻게 해야 하나요?
회전목마 설정에서 자동 재생 속도를 찾으십시오. 값은 밀리초 단위이므로 5000은 5초입니다. 더 빠른 슬라이드를 위해 낮추거나(3000에서 3초) 속도를 늦추려면 올리십시오(7000에서 7초).
트렌드 엘리먼트 위젯 및 확장
더 짧은 시간에 정교한 웹사이트를 구축하세요.
