Elementor에서 로고 회전목마를 만드는 방법

드래그 인 더 로고 슬라이더 위젯, 각 로고를 리피터 행으로 추가하고 데스크탑, 태블릿 및 모바일용 보기당 슬라이드를 설정하고 루프로 자동 재생을 켭니다. 중 하나인 무료 위젯입니다 회전목마 위젯의 전체 가족그리고 모든 일은 약 5분 정도 걸립니다.

설정은 쉽습니다. 쉽지 않은 것은 열두 개의 다른 회사의 열두 개의 로고가 같은 행에 속한 것처럼 보이게 만드는 것입니다. 그것이 모든 로고 스트립의 실제 문제이며,이것의 후반부가 그것을 덮습니다.

1 단계: 로고 슬라이더 위젯을 추가합니다

Elementor 패널에서 “로고 슬라이더”를 검색하고 드래그하세요. 무료 Master Addons 플러그인의 일부입니다 자유 대 프로 고장 는 그 계층에 있는 다른 것의 전체 목록을 가지고 있습니다. The 로고 슬라이더 문서 참조 버전을 원하는 경우 모든 컨트롤을 다룹니다. 대부분의 애드온 플러그인은 일종의 로고 위젯을 제공합니다 회전목마 플러그인 비교 어떤 것이 라이센스 뒤에 넣었는지 말합니다.

2 단계: 로고를 추가하십시오

각 로고는 리피터 행입니다: 로고 이미지,선택적 링크,선택적 호버 텍스트 또는 호버 이미지. alt 텍스트는 미디어 라이브러리에 있는 이미지의 Alt 텍스트 필드에서 옵니다.

대부분의 사람들이 건너 뛰는 여기에서해야 할 두 가지 일:

실제 대체 텍스트를 작성합니다. “Acme Corp 로고,”가 아닌 “logo-1.png.”로고 스트립은 alt 텍스트가 진정한 정보를 전달하는 몇 안되는 장소 중 하나입니다. 회사 이름이 콘텐츠이기 때문입니다. 스크린 리더 사용자는 “이미지”라는 열두 이미지에서 아무것도 얻지 못합니다

각 로고를 연결하십시오 목적지가 유용한 경우에만. 클라이언트 로고를 클라이언트 웹 사이트에 연결하면 트래픽이 변환되는 페이지에서 멀어집니다. 대신 사례 연구에 연결하거나 전혀 연결하지 마십시오. 로고 스트립은 정적 신뢰 신호로 잘 작동합니다.

3단계: 레이아웃 및 동작

로고 스트립은 이미지 캐러셀과 다른 기본값을 가지고 있습니다. 왜냐하면 작업이 다르기 때문입니다. 아무도 로고를 연구하지 않습니다. 0.5 초 안에 등록합니다.

• 보기당 슬라이드: 데스크탑에 여섯, 태블릿에 네, 모바일 두 개 또는 세 개. 로고는 작고 포인트는 수량이기 때문에 사진 회전 목마보다 높은 밀도.
• 자동 재생: on. 이건 증언의 법칙과 반대입니다. 읽을 것이 없어서 연속 이동은 비용이 들지 않고 정적 행보다 더 많은 로고를 보여줍니다.
• 속도: 오른쪽 느낌보다 느립니다. 4000 ~ 6000ms. 빠른 로고 스트립은 동요로 읽습니다.
• 루프: 에, 그리고 당신은 적어도 두 번 볼 당 슬라이드가 있는지 확인. 여섯 당 볼은 열두 로고 최소 필요 또는 랩은 눈에 띄게 점프.
• 화살표와 점: 꺼져. 로고 스트립은 사람들이 탐색하는 것이 아닙니다.

자동 재생 지연을 다음으로 설정합니다 0 그리고 회전목마는 슬라이드별로 미끄러지는 대신 연속적인 천막이 됩니다. 이것이 가장 현대적인 사이트에서 로고 스트립에 사용하는 모습입니다 천막 가이드는 설정을 자세히 다룹니다.

4 단계: 일치하지 않는 로고를 일관되게 보이게하십시오

여기 진짜 문제가 있습니다. 여러분은 열두 개의 로고를 가지고 있습니다. 네 개는 넓은 워드마크이고,세 개는 사각형 아이콘이고,두 개는 거대한 내부 패딩이 PNG 에 구워져 있고,하나는 키가 큰 쌓인 락업입니다. 같은 너비의 줄에 떨어뜨리면 몸값 메모처럼 보입니다.

너비로 크기를 정하는 것은 실수입니다. 160px 너비로 설정된 넓은 워드마크는 시각적으로 아주 작습니다; 160px 너비의 사각형 아이콘은 엄청납니다. 같은 숫자이고 전혀 닮지 않았습니다.

대신 광학 영역별 크기입니다. 동일한 캔버스에 모든 로고를 내보내고,각 마크에 최종 스트립에서 약 40 ~ 50px 의 비슷한 시각적 높이를 부여하고,균형 잡힌 것처럼 보일 때까지 개별 파일을 위 또는 아래로 조정합니다. 위젯은 모든 로고를 동일한 이미지 해상도로 표시하므로 이미지 파일에서 이러한 균형이 이루어집니다. 행에서 눈을 가늘게 뜨다: 튀어 나온 로고는 너무 크고 사라지는 로고는 너무 작습니다. 숫자보다 눈을 믿으십시오. 눈이 방문자가 사용할 것이기 때문입니다.

제품 카드는 다른 방향에서도 동일한 불일치를 발생시킵니다. 여기서 한 스트립의 인물 사진과 사각형 사진이 a를 만듭니다 제품 회전목마 싸게 보세요. 거기 있는 수정은 고정된 높이가 아니라 고정된 종횡비입니다.

동일한 문제에 대한 두 가지 추가 수정 사항:

구운 패딩을 자릅니다. 브랜드 키트에서 내보낸 로고는 이미지 파일 내부에 넉넉한 투명 공간을 전달하는 경우가 많습니다. 해당 패딩은 보이지 않으며 로고 렌더링이 같은 높이의 이웃보다 작아집니다. 업로드하기 전에 보이는 경계 상자에 자릅니다.

가능한 곳에서 SVG를 사용하십시오. 로고는 벡터 아트워크입니다. SVG는 어떤 크기에서도 선명하게 유지되고 PNG의 일부만 무게가 나가며 유용한 부분인 CSS로 다시 채색할 수 있으므로 아래의 회색조 처리는 사소합니다.

5 단계: 그레이스케일 호버

휴식 시 채도가 떨어지고, 호버링 시 풀 컬러가 나타나는 로고. 기본 처리 방식에는 이유가 있습니다: 12개의 브랜드 팔레트에 있는 12개의 로고는 시각적 혼란이며, 그레이스케일은 이를 하나의 일관된 질감으로 바꿉니다.

로고 슬라이더에는 그레이스케일 스위치가 없으므로 두 가지 방법이 있습니다. 그레이스케일 파일을 클라이언트 로고로 업로드하고 색상 버전을 호버 로고 이미지로 업로드하거나 사용자 정의 CSS 로 로고에 CSS 그레이스케일 필터를 추가하고 호버에서 제거합니다. 캐러셀 항목의 불투명도 설정은 로고를 정지 상태에서는 약 0.6, 호버 상태에서는 1로 흐리게 할 수 있습니다. CSS를 사용하는 경우 전환을 200~300ms로 유지합니다. 그보다 더 빠르며 깜박입니다; 느리고 끈적끈적한 느낌입니다.

하지 말아야 할 한 가지 사례: 로고가 고객이 아닌 언론 언급인 경우 Forbes 및 TechCrunch 종류의 스트립을 색상으로 남겨 두십시오. 해당 로고는 색상으로 인식되며 채도를 낮추면 구매한 인식 비용이 발생합니다.

완성된 스트립

어디에 넣을 것인가: 영웅 바로 아래,또는 기본 행동 촉구 바로 아래. 두 위치 모두 방문자가 당신을 신뢰할지 결정하는 순간이기 때문에 작동합니다.

어디 그것을 넣어 하지: 바닥 글. 바닥 글에 로고 스트립 장식입니다. 아무도 설득 하기 위해 바닥 글에 스크롤.

로고 스트립은 기본 위젯이 디자인된 위젯을 능가하는 몇 안 되는 섹션 중 하나이므로 20개 중 어느 것도 없습니다 위젯 빌더 designs 는 그것을 대체하려고합니다. 다른 섹션에 대한 Pro 디자인을 원한다면,the 가격 페이지 계층을 가지고 있습니다.

얼마나 많은 로고?

8~16. 8 미만과 스크롤 스트립은 얼마나 적은지 주목합니다. 왜냐하면 6개의 정적 행이 6개의 로고 사이클링보다 더 자신감 있게 보이기 때문입니다. 16이 넘으면 뒷부분을 아무도 볼 수 없으므로 사람들이 알아볼 이름으로 리드하십시오.

그리고 만약 당신이 단지 4 개의 클라이언트를 가지고 있다면: 4 개를,정적 행으로,괜찮은 크기로 보여주세요. 회전목마는 풍요를 다루는 방법입니다. 희소성을 숨기기 위해 하나를 사용하는 것은 당신이 원하는 것과 반대입니다.

자주 묻는 질문

다음

로고가 아닌 사진? 다른 위젯,다른 기본값: elementor 에서 이미지 캐러셀을 만드는 방법. 의 컬렉션도 있습니다 20개의 명명된 슬라이더 디자인 중 8개는 무료로 가져올 수 있습니다로고 스트립은 없지만 로고의 경우 로고 슬라이더가 도구로 유지됩니다.

캐싱 플러그인 업데이트 후 스트립의 이동이 중지되면 Swiper 초기화 문제입니다 수정 사항은 여기에 있습니다. 회전목마 모양의 모든 것이 살아있습니다 요소 회전목마 위젯 페이지.