Divi 갤러리 모듈 이미지를 위한 6가지 독특한 테두리 디자인
게시 됨: 2019-02-28Divi 갤러리 모듈은 웹사이트에 이미지 갤러리를 전시하기에 좋은 곳입니다. 기본적으로 갤러리 모듈은 이미지를 기본 디자인 요소로 유지하는 데 좋은 많은 스타일 지정 없이 그리드 레이아웃으로 이미지를 표시합니다. 그러나 약간의 창의력을 발휘하려는 경우 이미지 갤러리를 눈에 띄게 만드는 데 도움이 되도록 다양한 테두리 디자인으로 이미지의 프레임을 지정할 수 있습니다. 갤러리 모듈을 사용하면 이 프로세스를 매우 쉽게 수행할 수 있으며 결과는 놀라울 것입니다.
이 튜토리얼에서는 Divi 갤러리 모듈을 사용하여 이미지 갤러리에 고유한 테두리 디자인을 만드는 방법을 보여 드리겠습니다.
시작하자!
엿보기
#1 폴라로이드 이미지 갤러리
건물 디자인 시작 #1
#2 클린 그리드 디자인
건물 설계 시작 #2
#3 전체 갤러리 뒤의 사용자 정의 배경 이미지
건물 설계 시작 #3
#4 각 갤러리 항목 뒤에 있는 사용자 정의 배경 이미지
건물 설계 시작 #4
#5 박스 섀도우와 보더 콤보
건물 디자인 시작 #5
#6 필름 스트립 테두리 디자인
건물 설계 시작 #6
시작하는 데 필요한 것
YouTube 채널 구독
이 튜토리얼에서는 Divi 테마가 설치되어 활성화되어 있어야 합니다. 또한 이미지 갤러리를 구축하는 데 사용할 미디어 라이브러리에 12개의 이미지를 추가해야 합니다. 그리드 레이아웃을 사용하는 Divi 갤러리 모듈의 경우 이미지가 대부분의 데스크탑에서 화면을 잘 채울 수 있도록 라이트박스 디스플레이에서 이미지를 열 계획이라면 이미지 크기는 약 1500px x 800px이어야 합니다.
새 페이지 설정
우선 새 페이지를 만들고 페이지 제목을 지정하고 Divi Builder를 배포해야 합니다. "처음부터 빌드" 옵션을 선택한 다음 페이지를 게시합니다. 그런 다음 클릭하여 프런트 엔드에서 빌드합니다.
Divi 갤러리 모듈 템플릿 저장
Divi Gallery 모듈에 대해 5가지 다른 테두리 스타일을 디자인할 예정이므로 새 갤러리를 디자인할 때마다 처음부터 시작할 필요가 없도록 기본 갤러리 모듈 템플릿을 라이브러리에 저장하면 도움이 됩니다. .
하나의 열 행으로 새 섹션을 만든 다음 갤러리 모듈을 행에 추가합니다.
Divi는 다음과 같은 그리드 디스플레이에서 미디어 갤러리의 일부 이미지로 갤러리 모듈을 채웁니다.
갤러리 모듈 설정에서 회색 더하기 아이콘을 클릭하여 갤러리에 12개의 이미지를 추가합니다. 레스토랑 갤러리 페이지 레이아웃의 이미지를 사용하고 있습니다.
그런 다음 다음과 같이 Divi 갤러리 모듈 설정을 업데이트합니다.
이미지 번호: 12
제목 및 캡션 표시: 아니요
페이지 매김 표시: 아니요
이것은 앞으로 나아가는 좋은 템플릿으로 작용할 것입니다. 갤러리 모듈을 Divi 라이브러리에 저장하려면 모듈 위로 마우스를 가져갈 때 회색 모듈 메뉴에서 라이브러리에 저장 아이콘을 클릭합니다. 그런 다음 템플릿 이름을 "Gallery Module Template"로 지정하고 라이브러리에 저장합니다.
저장된 갤러리 모듈을 페이지에 추가하려면 클릭하여 평소처럼 새 모듈을 추가하기만 하면 됩니다. 그런 다음 팝업에서 라이브러리에서 추가 탭을 선택하고 "갤러리 모듈 템플릿"이라는 이름의 갤러리 모듈을 클릭합니다.
그게 다야 이제 테두리 디자인에 대해 알아보겠습니다!
#1 폴라로이드 이미지 갤러리
이 다음 디자인은 폴라로이드 사진처럼 보이는 이미지에 인기 있는 테두리입니다. 이것은 이미지 제목을 표시하려는 경우 특히 유용한 레이아웃입니다.
방법은 다음과 같습니다.
섹션 설정
한 열 행으로 새 일반 섹션을 만듭니다. 그런 다음 라이브러리에서 저장된 Divi 갤러리 모듈 템플릿을 추가합니다(위에 설명됨). 갤러리 모듈을 편집하기 전에 섹션 설정을 열고 흰색 테두리가 약간 튀어나오도록 회색 배경색을 추가합니다.
배경: #dddddd
행 설정
다음으로 다음으로 행 설정을 업데이트합니다.
거터 폭: 1
이렇게 하면 이미지 사이의 기본 여백 간격이 제거됩니다. 나중에 우리 고유의 맞춤 간격을 추가할 것입니다.
갤러리 모듈 설정
갤러리 모듈 설정을 열고 다음을 업데이트하십시오.
제목 및 캡션 표시: 예
제목 글꼴 두께: 굵게
제목 글꼴 스타일: TT
제목 텍스트 정렬: 가운데
제목 줄 높이: 2em
이미지 상단 테두리 너비: 10px
이미지 상단 테두리 색상: #ffffff
이미지 왼쪽 테두리 너비: 10px
이미지 왼쪽 테두리 색상: #ffffff
이미지 오른쪽 테두리 너비: 10px
이미지 오른쪽 테두리 색상: #ffffff
이미지 사이에 간격을 만들려면 갤러리 항목에 다음 테두리를 추가하십시오.
테두리 너비: 10px
테두리 색상: #dddddd(단면 배경 색상과 일치)
폴라로이드 테두리 디자인의 하단 부분을 색칠하려면 모듈에 흰색 배경을 추가해야 합니다.
배경색: #ffffff
최종 결과
다음은 폴라로이드 테두리 디자인의 최종 결과입니다.
#2 클린 그리드 디자인
이미지에 대해 간단하고 깔끔한 그리드 스타일을 찾고 있다면 이 테두리 디자인이 좋은 옵션입니다. 균형이 잘 잡히고 눈이 편안합니다.
방법은 다음과 같습니다.
한 열 행으로 새 일반 섹션을 만듭니다. 그런 다음 라이브러리에서 저장된 Divi 갤러리 모듈 템플릿을 추가합니다(위에 설명됨).
행 설정
갤러리 모듈을 편집하기 전에 섹션 설정을 열고 다음을 업데이트하십시오.
거터 폭: 1
맞춤 패딩: 위쪽 0px, 아래쪽 0px
테두리 너비: 10px
테두리 색상: #dddddd
이 행 테두리는 갤러리의 외부 간격을 이미지 사이의 간격과 일치시키는 데 필요합니다.
갤러리 모듈 설정
이제 갤러리 모듈 설정을 열고 다음을 업데이트하여 갤러리 항목과 갤러리 이미지에 테두리를 추가하십시오.
이미지 테두리 너비: 20px
이미지 테두리 색상: #ffffff
테두리 너비: 10px
테두리 색상: 투명(배경색을 표시하는 데 중요)
이제 갤러리 모듈에 배경색을 추가하여 디자인을 완성합니다.
배경색: #dddddd(행 테두리 색상과 일치)
갤러리 항목 테두리는 투명하기 때문에 배경 색상을 상속합니다.
최종 디자인
배경 색상을 변경하여 테두리 색상 변경
다른 테두리 색상으로 놀고 싶다면 배경색을 원하는 대로 업데이트할 수 있습니다. 그러나 행 테두리를 제거하고 모듈에 다음 간격을 추가해야 합니다.
맞춤 패딩: 위쪽 10px, 아래쪽 10px, 왼쪽 10px, 오른쪽 10px
이제 배경색을 원하는 대로 조정할 수 있습니다.
#3 전체 갤러리 뒤의 사용자 정의 배경 이미지
이 디자인을 사용하면 배경 이미지를 이미지 테두리에 일종의 질감 배경으로 사용할 수 있습니다. 이것은 모듈 배경 이미지의 특정 영역을 표시하므로 각 이미지 테두리를 고유하게 만드는 좋은 방법입니다. 설정은 위의 Clean Grid Design과 매우 유사합니다.
방법은 다음과 같습니다.
한 열 행으로 새 일반 섹션을 만듭니다. 그런 다음 라이브러리에서 저장된 Divi 갤러리 모듈 템플릿을 추가합니다(위에 설명됨).
행 설정
갤러리 모듈을 편집하기 전에 섹션 설정을 열고 다음을 업데이트하십시오.
거터 폭: 1
맞춤 패딩: 위쪽 0px, 아래쪽 0px
갤러리 모듈 설정
이제 다음과 같이 갤러리 모듈 설정을 업데이트하십시오.
배경 이미지: [이미지 추가] (아직 볼 수 없습니다)
배경색: #dddddd(투명도가 있는 png 배경 이미지를 사용하는 경우에만 표시됨)
이미지 테두리 너비: 10px
이미지 테두리 색상: #ffffff
테두리 너비(모듈용): 10px
테두리 색상: #ffffff
그런 다음 갤러리 항목에 다음 사용자 지정 CSS를 추가합니다.
padding: 3%;
이렇게 하면 갤러리 항목이 분리되어 디자인이 완성됩니다.
최종 결과
#4 각 갤러리 항목 뒤에 있는 사용자 정의 배경 이미지
이 디자인을 사용하면 배경 이미지를 사용하여 각 갤러리 항목에 대해 개별적으로 테두리 역할을 할 수 있습니다. 원하는 사용자 정의 이미지를 만들거나 미리 만들어진 레이아웃에 포함된 배경 이미지 중 하나를 사용할 수 있습니다. 저는 Meetup 방문 페이지 레이아웃에서 하나를 사용하고 있습니다.
방법은 다음과 같습니다.
한 열 행으로 새 일반 섹션을 만듭니다. 그런 다음 라이브러리에서 저장된 Divi 갤러리 모듈 템플릿을 추가합니다(위에 설명됨).
행 설정
갤러리 모듈을 편집하기 전에 섹션 설정을 열고 다음을 업데이트하십시오.
이 행을 전체 너비로 만들기: 예
거터 폭: 2
갤러리 모듈 설정
이제 다음과 같이 갤러리 모듈 설정을 업데이트하십시오.
이미지 테두리 너비: 10px
이미지 테두리 색상: #ffffff
그런 다음 갤러리 항목에 다음 사용자 정의 CSS를 추가합니다.
padding: 30px; background-image: url(""); background-size: contain; background-repeat: no-repeat; background-position: right;
다음으로 각 갤러리 항목 뒤에 앉고 싶은 사용자 정의 배경 이미지를 업로드해야 합니다. 이 예에서는 미리 만들어진 레이아웃 팩 중 하나의 이미지를 사용하고 있습니다. 이미지가 WordPress 미디어 갤러리에 업로드되면 이미지 URL을 클립보드에 복사합니다.
이제 돌아가서 갤러리 모듈 설정을 열고 "여기에 이미지 URL 삽입"이라고 표시된 사용자 정의 CSS에 URL을 붙여넣습니다. 따옴표 안에 URL을 유지해야 합니다.
최종 결과
다음은 최종 결과입니다.
#5 박스 섀도우와 보더 콤보
상자 그림자는 갤러리에 맞춤형 감각을 부여하는 데 좋습니다. Divi 갤러리 모듈 이미지에 상자 그림자를 사용하여 독특한 방식으로 이미지를 구성하는 깨진 격자 디자인을 만들 수 있습니다. 또한 모든 종류의 가능성을 위해 상자 그림자를 테두리 디자인과 결합할 수 있습니다.
방법은 다음과 같습니다.
한 열 행으로 새 일반 섹션을 만듭니다. 그런 다음 라이브러리에서 저장된 Divi 갤러리 모듈 템플릿을 추가합니다(위에 설명됨).
이미지 테두리 및 상자 그림자 추가
갤러리 설정을 열고 다음을 업데이트합니다.
이미지 테두리 너비: 10px
이미지 테두리 색상: #ffffff
이미지 상자 그림자: 스크린샷 참조
상자 그림자 수평 위치: -30px
상자 그림자 수직 위치: -30px
상자 그림자 확산 강도: -10px
그림자 색상: #e08474
갤러리 항목 테두리 추가
박스 섀도우 디자인은 지금 그대로가 좋습니다. 그러나 다음을 업데이트하여 갤러리 항목에 추가 테두리를 추가할 수도 있습니다.
오른쪽 테두리 너비: 7px
오른쪽 테두리 색상: #dddddd
오른쪽 테두리 스타일: 점선
하단 테두리 너비: 7px
하단 테두리 색상: #dddddd
하단 테두리 스타일: 점선
사용 가능한 다양한 스타일을 상기시키기 위해 점선 테두리 스타일을 추가했습니다. 다른 스타일(예: 실선 또는 파선)을 자유롭게 사용하십시오.
행 설정
디자인에 더 많은 공간을 제공하려면 행 설정을 열고 다음을 업데이트하십시오.
행 전체 너비 만들기: 예
최종 디자인
다음은 최종 디자인입니다.
#6: 필름 스트립 테두리 디자인
이번 마지막 디자인은 좀 더 유니크한 모습을 보여드리고 싶다는 생각이 들었습니다. 이 디자인은 필름 스트립과 유사한 방식으로 이미지의 각 열을 나누는 갤러리 항목의 오른쪽과 왼쪽에만 파선 테두리 스타일을 사용합니다.
방법은 다음과 같습니다.
한 열 행으로 새 일반 섹션을 만듭니다. 그런 다음 라이브러리에서 저장된 Divi 갤러리 모듈 템플릿을 추가합니다(위에 설명됨).
행 설정
갤러리 모듈을 편집하기 전에 행 설정을 열고 여백 너비를 1로 변경합니다.
거터 폭: 1
이렇게 하면 이미지 사이의 기본 여백 간격이 제거됩니다.
갤러리 모듈 설정
그런 다음 갤러리 설정을 열고 다음을 업데이트합니다.
점선 이미지 테두리 추가
이미지 오른쪽 테두리 너비: 8px
이미지 오른쪽 테두리 색상: #dddddd
이미지 오른쪽 테두리 스타일: 파선
이미지 왼쪽 테두리 너비: 8px
이미지 왼쪽 테두리 색상: #dddddd
이미지 왼쪽 테두리 스타일: 파선
간격을 위해 갤러리 항목 테두리 추가
왼쪽 테두리 너비: 20px
왼쪽 테두리 색상: #ffffff
오른쪽 테두리 너비: 20px
오른쪽 테두리 색상: #ffffff
이미지 상자 그림자 추가
이미지 상자 그림자: 스크린샷 참조
상자 그림자 흐림 강도: 0px
상자 그림자 확산 강도: -10px
그림자 색상: #222222
배경색 추가
배경색: #222222
그런 다음 갤러리 항목에 다음 사용자 정의 CSS를 추가합니다.
padding: 5px 10px;
최종 결과
이제 결과를 확인하십시오.
마지막 생각들
이 6가지 테두리 디자인 예제가 Divi 갤러리 모듈을 사용할 때 이미지에 대한 몇 가지 사용자 정의 테두리 디자인을 만드는 데 영감을 주기를 바랍니다. Divi Gallery 모듈에서 사용할 수 있는 설정을 처리하면 약간의 창의성만 있으면 됩니다. 따라서 다양한 이미지, 색상 및 간격을 사용하여 자신만의 새로운 디자인 옵션을 탐색하는 재미를 느끼십시오.
댓글로 여러분의 의견을 기다리겠습니다.
건배!