로고 슬라이더

클라이언트 로고의 벽은 페이지의 나머지를 아래로 밀고 아직도 상표의 단지 소수만 보여줍니다. 로고 슬라이더는 1 개의 조밀한 지구로 전체적인 명부를 스스로 자전하는 적합하. The 로고 슬라이더 위젯 인 Elementor용 마스터 애드온 로고 이미지 세트에서 스트립을 빌드한 다음 별도의 슬라이더 플러그인 없이 호버 효과, 도구 설명, 자동 재생 및 탐색 화살표를 추가합니다.

각 로고는 클라이언트의 사이트에 연결하거나,호버에서 두 번째 이미지로 바꾸거나,브랜드 이름과 짧은 설명을 공개할 수 있습니다. 이 가이드는 캔버스에 대한 첫 번째 드래그부터 라이브 페이지의 완성된 회전목마까지 위젯을 통과합니다.

로고 슬라이더 위젯이 수행하는 작업 #

위젯은 로고 이미지의 목록을 가져와 반응형 자동 재생 캐러셀로 바꿉니다. 한 번에 표시되는 로고 수,회전 속도,방문자가 하나 위로 마우스를 가져가면 어떻게 되는지 제어합니다. Swiper 엔진에서 실행되므로 슬라이더는 처음부터 휴대폰과 태블릿에서 터치 친화적입니다.

마스터 애드온의 슬라이더 위젯 그룹에 위치합니다 이미지 회전목마 그리고 갤러리 슬라이더 위젯. 그 두 개는 사진과 갤러리를 위해 만들어졌습니다. 로고 슬라이더는 브랜드 마크를 위해 만들어졌습니다: 로고는 작고 균일한 간격으로 유지되며 한 줄로 정렬됩니다.

시작하기 전에 #

• 워드 프레스 와 함께 엘리멘터 설치되고 활성화됩니다.
• Elementor용 마스터 애드온 설치되고 활성화되었습니다. 플러그인에 새로운? 참조 설치 가이드.
• 이미지 파일로 준비되어 있는 당신의 클라이언트 또는 파트너 로고. 동일한 차원을 가진 로고는 베스트를 봅니다; 투명하거나 백색 배경을 가진 300 의 주위에 150 의 화소 무언가는 잘 작동합니다.

로고 슬라이더 위젯을 추가하는 방법 #

Elementor 편집기에서 을 엽니다 요소 패널 및 검색 로고 슬라이더또는 마스터 애드온 섹션으로 스크롤합니다. 위젯을 페이지로 드래그합니다. 브랜드 이름이라는 이름의 자리 표시자 항목 6 개가 로드되므로 슬라이더 모양이 바로 표시되고 자리 표시자를 하나씩 교체합니다.

로고 항목 섹션에 로고를 추가하세요 #

에서 콘텐츠 탭, 열기 로고 아이템. 목록의 각 항목은 하나의 로고입니다. 항목을 클릭하여 확장하거나 각 행의 오른쪽에 있는 복사 및 삭제 아이콘을 사용합니다. The 항목 추가 하단의 버튼은 목록을 필요한 만큼의 로고로 확장합니다.

항목 목록 아래에는 전체 슬라이더에 적용되는 세 가지 설정이 있습니다:

• 이미지 해상도: wordpress 크기는 썸네일부터 전체까지 모든 로고에 사용됩니다. 로고는 작은 파일이므로 일반적으로 전체는 괜찮습니다.
• 제목 HTML 태그: 호버에서 브랜드 이름을 감싸는 표제 태그, 기본적으로 H5. 페이지의 표제 구조에 맞는 태그를 선택하십시오.
• 이벤트 선택: 호버 효과를 트리거하는 요소 패널이 지적했듯이 이는 클라이언트 로고에서 호버 유형이 활성화된 경우에만 실행됩니다.

각 항목 내에서 을 클릭합니다 클라이언트 로고 워드 프레스 미디어 라이브러리를 열 필드. 로고 파일을 업로드하거나 이미 거기에 하나를 선택합니다. 첨부 파일 패널이 모든 로고가 동일한 크기를 공유하는 것을 확인하는 편리한 파일 치수를 보여줍니다.

각 로고에 대한 링크 및 호버 효과를 설정합니다 #

모든 로고 항목은 고유한 기능을 가지고 있습니다 링크 필드. 클라이언트의 URL 을 붙여넣으면 로고를 라이브 페이지에서 클릭할 수 있게 됩니다. 기어 아이콘은 새 탭에서 여는 것과 같은 일반적인 Elementor 링크 옵션을 엽니다.

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 브랜드 이름 플러스 쇼트 설명 그 자리에 나타나라.
• 이미지: 로고는 선택한 두 번째 이미지로 바뀝니다.

와 함께 텍스트 선택하면 두 개의 필드가 나타납니다. 브랜드 이름과 한 줄 설명을 입력하고 위젯은 호버의 로고 위에 표시됩니다. 슬라이더를 떠나지 않고 각 클라이언트에 대해 무엇을했는지 말하고 싶은 대행사에 적합합니다.

와 함께 이미지 선택됨, a 로고 이미지를 호버링합니다 대신 필드가 나타납니다. 일반적인 트릭: 회색조 로고를 기본 이미지로 사용하고 풀 컬러 버전을 호버 이미지로 사용하므로 방문자가 스트립을 가로질러 이동할 때 로고가 켜집니다.

로고에 툴팁 추가하기 #

각 항목에는 a도 있습니다 도구 설명 토글. 스위치를 켜면 방문자가 해당 로고 위에 마우스를 올리면 작은 거품이 나타납니다. The 설정 탭은 동작을 제어합니다:

• 내용: 툴팁 안의 텍스트.
• 배치: 거품이 있는 위치, 기본적으로 맨 위로.
• 커서를 따르세요: 도구 설명이 고정된 상태로 유지되는 대신 마우스를 추적하도록 하세요.
• 애니메이션 및 트리거: 도구 설명이 나타나는 방식, 기본적으로 호버에서 확장.

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 스타일 설정 옆에 있는 탭은 거품 자체를 스타일링합니다: 색상, 타이포그래피 및 간격. 툴팁은 전체 텍스트 호버 모드가 필요하지 않은 “2019 년부터 파트너” 와 같은 짧은 레이블에 잘 작동합니다.

탐색 화살표를 설정합니다 #

열다 네비게이션 방문자가 손으로 슬라이더를 이동하는 방법을 제어하는 섹션. The 네비게이션 드롭다운은 화살표를 표준 선택으로 사용하여 제어 유형을 설정합니다.

• 스크롤바 표시?: 슬라이더 아래에 드래그 가능한 막대를 추가합니다.
• 화살표 위치: Center 는 슬라이더의 각 측면에 하나의 화살표를 놓습니다. 상단 중앙 또는 하단 중앙은 두 화살표를 위 또는 아래에 그룹화합니다.
• 배치: 화살표를 슬라이더 상자 안에 보관하거나 바깥쪽으로 이동합니다.
• 모바일에서 화살표를 숨기시겠습니까?: 스와이프가 작업을 수행하는 작은 화면에 화살표를 떨어뜨립니다.
• 다음 아이콘 및 이전 아이콘: 기본 쉐브론을 Elementor 라이브러리의 아이콘으로 바꿉니다.

회전목마 동작을 조정합니다 #

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 회전목마 설정 섹션은 슬라이더의 동작을 구동합니다. 이것은 로고의 정적 행이 방문자가 기대하는 회전 스트립이되는 곳입니다.

• 열당 슬라이드: 1 부터 6 까지 한 번에 표시되는 로고 수. 4 개 또는 5 개가 대부분의 데스크톱 레이아웃에 적합하며 반응형 아이콘을 사용하면 장치당 더 작은 수를 설정할 수 있습니다.
• 레이아웃: 회전 목마는 표준 평면 슬라이더입니다.
• 자동 높이: 슬라이더 높이가 로고 행을 따르도록 합니다.
• 자동 재생 및 자동 재생 속도: 로고를 자동으로 회전합니다. 속도는 밀리초 단위의 지연이므로 5000 은 5 초마다 새로운 세트를 의미합니다.
• 호버링 시 일시 중지: 커서가 슬라이더 위에 있는 동안 회전을 중지합니다. 슬라이더는 호버 효과 및 도구 설명과 잘 어울립니다.
• 스크롤할 슬라이드: 단계당 얼마나 많은 로고가 진행됩니까.
• 중앙 슬라이드, 커서 잡기, 드래그 프리 모드: 활성 로고를 중앙에 배치하거나, 잡기 커서를 표시하거나, 방문자가 스트립을 자유롭게 던지도록 하세요.
• 루프: 슬라이더를 끝없이 실행하는데,이는 로고 스트립이 거의 항상 원하는 것입니다. 한 가지 지켜봐야 할 점: 루프에는 열당 슬라이드 수보다 더 많은 로고가 필요합니다. 다섯 개의 열과 다섯 개의 로고만 있으면 추가로 회전할 것이 없습니다.

로고 슬라이더 스타일 지정 #

로 전환하십시오 스타일 탭. 4 개의 섹션은 슬라이더의 모양을 다룹니다: 회전목마 항목,회전목마 항목 호버,아이콘, 탐색.

회전목마 품목 #

이 섹션에서는 일반, 호버 및 활성 상태로 각 로고 셀을 구성합니다.

• 배경, 테두리 유형, 테두리 반경, 상자 그림자: 각 로고에 카드 스타일 프레임을 주거나 깨끗한 스트립을 위해 모든 것을 비워 두십시오.
• 패딩 및 아이템 갭: 각 세포 안쪽에 공간 및 로고 사이 거리. 간격은 군집한 지구 호흡을 만드는 가장 빠른 방법 입니다.
• 섀도우 모드 및 불투명도: 로고의 부드러운 가장자리 그림자와 투명도.

회전목마 아이템 호버 #

이 섹션에서는 텍스트 오버레이를 포함하여 콘텐츠 탭에서 선택한 호버 상태를 스타일링합니다.

• 배경, 테두리, 상자 그림자, 패딩, 여백: 호버링된 로고 주변의 프레임입니다.
• 이름 색상, 이름 타이포그래피, 간격: 텍스트 호버 모드에 나타나는 브랜드 이름 텍스트입니다.

아이콘 #

아이콘 섹션은 호버 콘텐츠로 표시된 작은 아이콘을 스타일링합니다: 색상, 배경, 테두리, 패딩, 여백 및 글꼴 크기.

탐색 화살표 #

탐색 섹션에서는 화살표 버튼의 스타일을 지정하고 일반 상태와 호버 상태를 구분합니다.

• 색상 및 배경: 화살표 문양과 그 뒤에 있는 버튼.
• 테두리 유형, 테두리 반경, 패딩, 크기: 버튼 모양; 전체 반경은 대부분의 최신 사이트에서 볼 수 있는 둥근 버튼을 만듭니다.
• 화살표 사이의 공간: 슬라이더 위나 아래에 함께 앉을 때 두 버튼 사이의 간격입니다.

페이지의 결과 #

미리보기 또는 게시, 그리고 슬라이더가 라이브 실행: 로고는 자동 재생 타이머에서 회전, 화살표에 응답, 그리고 그들의 호버 효과와 툴팁을 발사. 여기에 볼 당 다섯 로고와 각 측면에 화살표와 함께 완성 된 스트립입니다.

일반적인 사용 사례 #

• 클라이언트 로고 스트립 에이전시 및 프리랜서 홈페이지에서 각 로고가 사례 연구에 연결됩니다.
• 파트너 및 스폰서 캐러셀 이벤트, 비영리 단체 및 SaaS 통합 페이지용.
• “에 등장” 프레스 바 보도에 연결되는 출판 로고가 있습니다.
• 브랜드 쇼케이스 유통업체 및 소매업체 사이트에 휴대하는 라벨이 나열되어 있습니다.
• 기술 스택 포트폴리오 사이트에서 툴팁을 사용하여 각 툴의 이름을 지정합니다.

더 나은 로고 슬라이더를 위한 팁 #

• 모든 로고를 동일한 크기로 유지하십시오. 혼합 치수는 슬라이드 할 때 행 점프를합니다. 300 x 150 과 같은 동일한 캔버스에 모든 로고를 내보내면 스트립이 안정적으로 유지됩니다.
• 회색조에서 색상으로 전환 호버를 사용합니다. 회색조 메인 이미지와 컬러 버전을 호버 로고 이미지로 설정합니다. 스트립은 방문자가 상호 작용할 때까지 조용합니다.
• 자동 재생으로 호버에서 일시 중지를 켭니다. 움직이는 대상에 대한 도구 설명을 읽을 수 있는 사람은 아무도 없습니다.
• 모바일에서 화살표 숨기기. 스와이프가 이를 대체하고 스트립은 작은 화면에서 깨끗하게 유지됩니다.
• 열당 슬라이드를 로고 너비와 일치시킵니다. 넓은 워드마크 로고는 컴팩트 아이콘 마크보다 적은 열이 필요합니다. 로고가 눌려 보이는 경우 이미지 파일을 터치하기 전에 카운트를 하나씩 삭제합니다.

자주 묻는 질문 #

감싸는 #

로고 슬라이더 위젯은 Elementor 에서 클라이언트 로고 캐러셀의 전체 작업을 다룹니다: 로고,로고당 링크 및 호버 효과,도구 설명,루프가 있는 자동 재생 및 화살표 버튼까지 스타일링하기 위한 리피터 사진 및 갤러리 슬라이더는 다음을 참조하십시오 이미지 회전목마 그리고 갤러리 슬라이더 위젯. 의 전체 집합을 찾아보기 마스터 애드온 위젯 및 확장, 그리고 보세요 가격 페이지 pro가 위에 추가하는 것을 위해.