WordPress에서 Airbnb에서 영감을 받은 이미지 갤러리를 구축하는 방법

당신은 WordPress 사용자이며 인기 있는 임대 플랫폼인 Airbnb에서 사용하는 이미지 갤러리가 얼마나 좋은지 알아차렸습니까? 귀하의 웹 사이트에 복제하고 싶다면 더 이상 보지 마십시오! 올바른 도구와 몇 가지 간단한 단계를 사용하여 10분 이내에 빠르게 재현할 수 있습니다.

당신이 노련한 워드프레스 사용자이든 초보자이든, 이 튜토리얼은 공을 굴리기 위해 알아야 할 모든 것을 제공할 것입니다!

이 문서에서는 다음 내용을 설명합니다.

• 모듈라 설치 방법
• Modula에서 이미지 갤러리를 만드는 방법
• 에어비앤비 이미지 갤러리처럼 보이도록 이미지 갤러리를 사용자 지정하는 방법
• 그리고 더 …

Airbnb의 갤러리 디자인

간결하고 강력한 웹사이트 디자인은 전환을 창출하고 고객을 반복 고객으로 전환하는 데 성공하는 데 매우 중요합니다. 이것이 Airbnb가 리스팅 이미지 갤러리에서 목표로 하는 것입니다.

에어비앤비 이미지 갤러리가 인기 있는 이유를 살펴보겠습니다.

• 위치의 고품질 전문 사진
• 메인 이미지의 단순하고 깔끔하며 사용자 친화적인 레이아웃
• 전체 갤러리의 깔끔한 디스플레이
• 라이트박스를 통해 모든 사진을 쉽게 탐색할 수 있는 기능
• 각 이미지에 대한 캡션 또는 설명 표시
• 라이트박스 이미지 전환 효과
• 다양한 채널을 통한 갤러리 공유 옵션
• 탐색 화살표

다행스럽게도 Modula 플러그인을 사용하여 WordPress에서 이미지 Airbnb 갤러리 스타일을 쉽게 다시 만들 수 있습니다. 몇 가지 쉬운 설정을 조정하면 끝입니다! 계속 읽으면 이미지 갤러리를 Airbnb와 같은 이미지 갤러리로 바꾸는 것이 얼마나 쉬운지 알게 될 것입니다.

Airbnb와 같은 멋진 이미지 갤러리 구축

이미지 갤러리를 설정하려면 WordPress 웹사이트와 호스팅 제공업체가 필요하므로 단계를 진행하기 전에 이를 염두에 두는 것이 중요합니다. 아직 웹사이트가 없다면 WordPress 설치 가이드의 지침에 따라 빠르게 웹사이트를 구축할 수 있습니다.

웹 사이트가 실행되면 이미지 갤러리 생성을 지원하는 플러그인을 선택해야 합니다. WordPress 리포지토리에 다른 이미지 갤러리 플러그인이 있지만 Modula를 사용하는 것이 좋습니다. 이 플러그인에는 다양한 사용자 정의 옵션, 기본 기능이 포함된 무료 버전이 있으며 사용자 친화적입니다.

이 유형의 이미지 갤러리를 만들려면 $39에 스타터 플랜을 구매하여 잠금 해제할 수 있는 몇 가지 설정이 필요합니다. 구매 후 Airbnb와 같은 갤러리를 만들고 표시하는 네 가지 주요 단계가 있습니다.

️ 모듈라 설치

첫 번째 단계는 Modula를 설치하고 활성화하는 것입니다. 이렇게 하려면 WordPress 대시보드 > 플러그인 > 새로 추가 로 이동합니다.

새로 열린 페이지의 오른쪽 상단 모서리에 검색 표시줄이 있습니다. 'Modula'를 입력하면 첫 번째 검색 결과에 빠르게 나타납니다. 지금 설치 버튼을 클릭하여 설치 를 시작합니다.

️ 이미지 갤러리 만들기

Modula를 설치하고 활성화했으면 Airbnb와 같은 갤러리를 만들 차례입니다. WordPress 대시보드로 이동한 다음 Modula > Galleries 를 선택합니다.

여기에서 새로 추가 를 선택하여 갤러리 만들기를 시작합니다.

갤러리 에 제목을 추가하고 새 이미지를 업로드하려는 경우 이미지 파일 업로드 를 선택하거나 이미 가져온 이미지를 사용하는 경우 라이브러리에서 선택을 선택할 수 있는 새 창으로 리디렉션됩니다.

이미지가 갤러리에 추가되면 다음과 같이 표시됩니다. 여기에서 갤러리 사용자 지정을 시작하고 가능한 한 Airbnb 이미지 갤러리에 가깝게 만들 수 있습니다.

️ 이미지 갤러리 편집

여기에 재미있는 부분이 있습니다. Modula에는 다양한 사용자 지정 옵션이 있으므로 Airbnb의 이미지 갤러리 디자인에 가깝게 만드는 것은 매우 간단합니다.

첫째, 에어비앤비 목록을 클릭하면 클릭 시 모든 갤러리 이미지가 포함된 라이트박스가 열리는 제한된 수의 이미지(정확히 5개)가 표시됩니다. 다시 만들려면 Modula 갤러리 편집 모드에서 아래로 스크롤하여 Modula의 모든 사용자 지정 설정을 확인하십시오.

기본적으로 갤러리 유형은 Creative Gallery로 설정되어 있지만 이제 Custom Grid 로 설정해야 합니다. 다음으로 처음 5개 이미지의 모서리를 드래그하여 이렇게 채워지도록 확장합니다.

한 눈에 볼 수 있는 이미지 수를 제한하기 위해 일반 탭 아래에 최대 이미지 수 섹션이 있습니다. 계속해서 5로 설정하십시오.

다음으로 Airbnb 갤러리 이미지 사이에 약간의 간격이 있음을 알 수 있습니다. 비슷한 결과를 얻으려면 여백 값을 몇 픽셀 낮춥니다. 기본적으로 10px로 설정되어 있지만 데스크탑 값을 8로 줄일 수 있습니다. 또한 태블릿 및 휴대폰 값을 가지고 놀면서 어느 것이 더 나은지 확인할 수 있습니다.

그런 다음 라이트박스 및 링크 탭으로 이동하여 모든 이미지 표시 버튼을 활성화하면 라이트박스를 열 때 모든 갤러리 이미지가 표시됩니다. 이 단계를 건너뛰면 라이트박스는 처음 5개의 이미지만 순환합니다.

다음으로 에어비앤비 갤러리 위로 마우스를 가져가면 멋진 호버 효과가 나타납니다. Modula를 사용하면 마우스 호버 모양을 편집할 수 있습니다. 호버 효과 탭으로 이동하여 호버 색상을 더 어두운 회색으로 설정하고 불투명도를 25%로 낮춥니다.

에어비앤비처럼 이미지 위에 마우스를 올려놓으면 커서 아이콘 을 포인터 아이콘으로 변경할 수도 있습니다.

사람들이 이미지를 더 쉽게 순환할 수 있도록 라이트박스 및 링크에서 다음 설정을 켤 수 있습니다: 축소판 단추 , 축소판 자동 시작 , 아래쪽 축소판.

일부 에어비앤비 숙소는 모든 이미지 아래에 캡션을 표시할 수 있습니다. Modula를 사용하면 캡션을 쉽게 설정할 수 있습니다. 라이트박스 및 링크 설정에서 이미지 캡션 표시 를 클릭하는 것을 잊지 마세요. 라이트박스의 왼쪽, 오른쪽 또는 중앙에 표시할 캡션 위치를 설정할 수도 있습니다. 캡션 탭에는 캡션을 편집할 수 있는 더 많은 옵션이 있습니다. 모바일 버전의 경우 색상, 글꼴, 글꼴 크기, 글꼴 스타일 및 글꼴 크기까지 설정할 수 있습니다.

에어비앤비 갤러리에서 라이트박스를 열면 이미지 갤러리를 탐색하는 데 도움이 되는 탐색 버튼을 볼 수 있습니다. Modula는 이 기능도 제공합니다. 라이트박스 및 링크 탭에서 탐색 버튼 설정을 토글합니다.

에어비앤비 라이트박스의 경우 단색 검정색 배경색을 볼 수 있습니다. Modula를 사용하여 이를 달성할 수도 있습니다. 동일한 라이트박스 및 링크 탭에서 라이트박스 배경색 이 보일 때까지 아래로 스크롤합니다. 여기에서 원하는 색상을 설정하고 불투명도를 지정하거나 단색으로 만들 수 있습니다.

에어비앤비의 라이트박스에는 다양한 소셜 채널에서 숙소를 공유할 수 있는 공유 버튼이 있습니다. Modula는 또한 이 기능을 가지고 있어 가장 인기 있는 일부 플랫폼에 대한 액세스를 제공합니다. 동일한 라이트박스 및 링크 탭에서 공유 버튼 옵션을 활성화하면 Facebook, Twitter, Pinterest, WhatsApp, LinkedIn 및 이메일의 6가지 새로운 공유 옵션이 나타납니다. 갤러리에 표시할 항목을 개별적으로 선택할 수 있습니다.

Airbnb의 라이트박스에는 사용자가 클릭하여 라이트박스 갤러리를 닫을 수 있는 눈에 보이는 닫기 버튼이 있습니다. Modula로도 닫기 버튼 을 표시할 수 있습니다.

마지막으로 갤러리 업데이트를 클릭하여 설정을 저장하는 것을 잊지 마십시오.

에어비앤비에 표시된 5개의 주요 이미지 중 하나를 클릭하면 전체 이미지 갤러리로 리디렉션됩니다. 이미지 중 하나를 다시 클릭한 후에만 라이트박스가 팝업됩니다. Modula를 사용하여 이를 달성하려면 갤러리로 이동하여 방금 만든 갤러리에서 복제 갤러리 를 선택할 수 있습니다. 새 항목이 표시되고 다음 항목을 사용자 지정할 수 있습니다.

새로 만든 갤러리를 사용하여 원하는 레이아웃이 될 때까지 사용자 지정 그리드를 가지고 놀아보세요.

일반 설정까지 아래로 스크롤하고 최대 이미지 수 에서 5를 삭제하는 것을 잊지 마십시오. 새로 편집한 갤러리를 저장하고 우측의 숏코드를 복사합니다.

️ 갤러리 표시

우리가 할 첫 번째 전시는 전체 갤러리입니다.

WordPress 대시보드 로 이동하여 페이지 > 새로 추가 를 선택합니다. 이 페이지는 전체 이미지 갤러리를 표시하는 역할을 합니다. 암시적인 제목을 지정하고 단축 코드 블록에 단축 코드를 붙여넣습니다.

그런 다음 게시 또는 업데이트 버튼을 누르십시오. 그런 다음 이 페이지의 URL을 복사합니다. 잠시 후 이 URL이 필요합니다.

에어비앤비와 같은 이미지 갤러리를 표시하려는 페이지로 이동하여 우리가 만든 첫 번째 갤러리의 단축 코드를 붙여넣습니다.

마지막으로 해야 할 일은 이 두 갤러리를 연결하는 것입니다. Modula > Galleries로 가서 우리가 만든 첫 번째 갤러리를 선택합니다. 연필 아이콘을 클릭하여 첫 번째 이미지를 편집합니다.

편집 섹션에서 URL 상자에 전체 갤러리 페이지 URL을 붙여넣습니다. 저장 및 닫기 버튼을 클릭합니다.

다음 4개의 이미지에 대해 이 과정을 반복하고 갤러리 업데이트 버튼을 클릭하는 것을 잊지 마십시오.

페이지로 이동하여 새로 생성된 에어비앤비와 같은 이미지 갤러리를 확인하세요.

최종 결과: Airbnb 대 Modula

보시다시피 Modula를 사용하면 Airbnb 이미지 갤러리 디자인에 매우 근접할 수 있습니다. 사이에 약간의 간격이 있는 5개의 이미지 레이아웃부터 캡션이 있는 라이트박스, 탐색 화살표, 소셜 공유 버튼, 사용자 지정 그리드에 표시된 모든 이미지가 포함된 중간 페이지까지.

Modula는 더 많은 기능과 설정을 넘어 이미지 갤러리를 한 단계 끌어올리는 다목적 이미지 갤러리 플러그인입니다.

마지막 생각들

잘 디자인된 웹사이트는 얼마나 많은 방문자가 귀하의 서비스를 전환하고 다시 사용하는지에 상당한 영향을 미칠 수 있습니다. 올바른 플러그인과 몇 가지 쉬운 단계를 통해 Airbnb에서 영감을 받은 WordPress 이미지 갤러리를 빠르게 만들 수 있습니다. 이러한 종류의 갤러리는 고품질 이미지를 보여주고 웹 사이트 방문자에게 친근한 사용자 경험을 제공하는 훌륭한 방법입니다.

휴가 렌탈, 부동산 목록 또는 기타 이유로 갤러리를 사용하든 상관없이 Modula는 웹 사이트 방문자를 끌어들이고 참여시키는 Airbnb에서 영감을 받은 이미지 갤러리를 만들기 위한 최고의 WordPress 플러그인입니다.

오늘 Modula를 다운로드하고 이미지 갤러리를 사용자 정의하십시오!