고객사 소개 페이지에서 고객사 로고들을 왼쪽 또는 오른쪽으로 움직이는 슬라이드(좌우 롤링 배너)로 만들어 표시하는 경우가 많이 있습니다. 쉽게 이해하기 위해 다음 영상을 보시면 기업 로고들이 배열되어 가로로 회전하고 있습니다.
테스트용으로 임의의 이미지를 업로드하여 만들어 보았습니다. 제대로 만들려면 먼저 크기가 일정한 고객사 로고 파일을 준비하면 되겠죠.
위의 영상과 같이 고객사를 소개하는 회전 슬라이더를 워드프레스에서 만들려는 경우, 테마 기능이나 플러그인을 사용할 수 있습니다. 예를 들어, 베스트셀링 테마인 아바다 테마에서는 이미지 캐러셀(image carousel) 기능을 사용하여 비슷하게 구현할 수 있습니다.
워드프레스 아바다(Avada)에서 Image Carousel 사용하기 - 워드프레스 중급
가장 인기 있는 워드프레스 테마 중 하나인 아바다(Avada)는 오랫동안 판매 1위 자리를 지키고 있는 베스트셀링 워드프레스 테마입니다. 아바다가 꾸준한 인기를 끌고 있는 이유 중 하나는 초보자도 쉽게 사용할 수 있도록 다양한 옵션과 기능을 제공한다는 점일 것입니다.
www.thewordcracker.com
Elementor 페이지 빌더의 이미지 캐러셀(회전 슬라이더, 좌우 롤링 배너) 요소를 사용하여 움직이는 고객사 리스트 만들기
위의 영상은 무료 페이지 빌더인 Elementor의 Image Carousel 요소를 사용하여 테스트로 만든 것을 보여줍니다. Elementor는 무료이지만 유료 페이지 빌더 못지않은 기능으로 많은 사랑을 받고 있습니다.
워드프레스 Elementor 페이지 빌더의 블록과 페이지 템플릿 사용하기
무료로 제공되는 페이지 빌더인 Elementor는 유료 페이지 빌더 못지 않은 다양한 기능으로 많은 사용자를 확보하고 있는 플러그인입니다. 페이지 빌더를 사용하면 사이트 속도가 느려질 수 있지만, Elementor는 비교적 빠른 속도를 보이는 것 같습니다.
www.thewordcracker.com
왼쪽 또는 오른쪽으로 움직이는 고객사 리스트를 만드는 방법을 간단히 살펴보겠습니다.
엘리멘터 페이지 빌더에서 왼쪽의 Image Carousel 요소를 끌어다가 오른쪽에 원하는 위치에 놓습니다.
그러면 오른쪽에 이미지 캐러셀 엘리먼트가 추가됩니다(노란색 부분).
오른쪽의 Image Carousel 설정에서 먼저 이미지들을 추가합니다. No Images Selected(선택한 이미지 없음) 아래의 이미지 추가 아이콘을 클릭하면 미디어 라이브러리가 열리면서 이미지를 추가하거나 업로드할 수 있습니다.
이미지를 선택하고 "새 갤러리 생성"을 클릭합니다.
그러면 갤러리 편집 화면이 표시됩니다. 끌어놓기로 이미지 파일을 정렬할 수 있습니다. 적절히 갤러리를 편집한 후에 "갤러리 삽입"을 클릭합니다.
그러면 이미지들이 갤러리에 삽입됩니다.
계속하여 왼쪽에서 이미지 크기를 선택합니다. 다양한 이미지 크기 중에서 선택하거나 Custom (사용자 정의)을 선택하여 직접 이미지 크기를 설정할 수 있습니다.
Custom을 선택할 경우 이미지의 가로 및 세로 폭을 지정합니다. 가로 세로 크기를 지정한 후에 APPLY (적용)를 클릭합니다.
계속하여 표시할 슬라이드 개수를 선택합니다.
예를 들어, 개수를 "5"로 선택하면 오른쪽에서 실제 슬라이드 작동 모양을 확인할 수 있습니다.
계속하여 나머지 설정을 합니다. 가령 Navigation (탐색)에서 내비게이션을 화살표와 점으로 표시할 것인지, 아니면 표시하지 않을 것인지 등을 설정할 수 있습니다.
그리고 Additional Options (추가 옵션)에서 자동재생, 허버 시 일지 정지 기능, 자동재생 속도, 무한 회전, 회전 방향(왼쪽 또는 오른쪽) 등 추가 옵션을 지정할 수 있습니다.
모든 설정이 끝나면 페이지를 발행하여 실제 작동을 살펴볼 수 있습니다.
추가: 이미지 링크 설정
엘리멘터 페이지 빌더의 이미지 캐러셀에서는 개별 이미지에 대하여 링크를 설정할 수 없고(업데이트: 아래의 "2022년 7월 추가: 엘리멘터 이미지 캐러셀의 개별 이미지에 링크 설정하기" 부분 참고), 전체 이미지에 대하여 링크를 설정할 수 있습니다.
사용자 URL을 선택하면 개별 이미지를 클릭하면 여기에 설정된 링크로 연결됩니다. 미디어 파일을 선택하면 라이트박스 형식으로 이미지를 확대하여 표시합니다.
아바다 테마의 이미지 캐러셀에서는 개별 이미지에 대하여 링크를 설정할 수 있습니다.
2022년 7월 추가: 엘리멘터 이미지 캐러셀의 개별 이미지에 링크 설정하기
Elementor 이미지 캐러셀에서 개별 이미지에 다른 링크를 지정하는 기능은 제공되지 않지만 "Custom links in Elementor Image Carousel" 플러그인을 사용하면 개별 이미지에 링크를 설정할 수 있습니다.
Custom links in Elementor Image Carousel
Lets you add custom links in Elementor Image Carousel widget
wordpress.org
또한, Elementor Pro 버전에서는 사용자 정의 속성을 추가할 수 있습니다.
Elementor Pro로 부드럽게 무한 회전하는 이미지 캐러셀을 만드는 방법
이미지 캐러셀을 무한 반복하도록 설정하면 중간에 끊기는 듯한 느낌이 날 것입니다. 그런 경우 다음 글에서 설명하는 방법을 참고하여 부드럽게 무한 반복되는 이미지 캐러셀을 만들 수 있습니다.
엘리멘터 프로로 부드럽게 무한 회전하는 이미지 캐러셀 만들기 - 워드프레스 정보꾸러미
워드프레스 인기 페이지 빌더인 엘리멘터(Elementor)에서는 이미지 캐러셀(회전 슬라이드) 위젯이 제공됩니다. 이미지 캐러셀을 무한 반복하도록 설정이 가능하지만, 중간에 끊기는 느낌이 날 것
www.thewordcracker.com
참고:
https://avada.tistory.com/2009
워드프레스 엘리멘터 포트폴리오 위젯
워드프레스 인기 페이지 빌더인 엘리멘터 플러그인의 유료 버전인 Elementor Pro에서는 포트폴리오 위젯을 사용하여 글이나 페이지, 커스텀 포트 타입을 포트폴리오 형식으로 표시할 수 있습니다.
avada.tistory.com
워드프레스 아바다(Avada) 테마 데모 설치 및 제거
워드프레스 아바다(Avada)는 현재 45만 개 이상 판매된 베스트셀링 테마입니다. 아바다 테마가 Themeforest에서는 가장 많은 판매량을 자랑하고 있으며, 최근 50만 고객을 돌파한 Elegant Themes의 Divi 테마가 아..
avada.tistory.com