Divi: 링크 및 호버 효과가 있는 반응형 이미지 그리드를 만드는 방법

다음을 사용하여 반응형 이미지 격자 레이아웃을 생성하시겠습니까? DIVI ?

빌더 Divi 그리드 보기를 사용하는 환상적인 내장 모듈이 있습니다.

그러나 때로는 CTA 링크를 사용하여 자신만의 사용자 정의 이미지 그리드 레이아웃을 만들고 싶을 수도 있습니다. 이를 통해 디자인을 보다 효과적으로 제어할 수 있으며 내용 플러그인을 사용하지 않고도 각 그리드 항목에 대해 표시하려는 항목입니다.

오늘은 내장된 디자인 옵션을 사용하여 CTA 링크가 포함된 반응형 이미지 그리드 레이아웃을 만드는 방법을 보여 드리겠습니다. Divi.

시작하자!

측량

다음은 이 자습서의 끝에서 얻을 결과에 대한 간략한 개요입니다.

Divi 테마 빌더로 페이지 만들기

WordPress 대시보드에서 다음으로 이동하여 새 웹 페이지를 만듭니다. 페이지 >> 추가

참조 : DIVI에서 슬라이딩 및 푸시 메뉴를 만드는 방법은 무엇입니까?

그런 다음 페이지에 제목을 지정하고 " Divi Builder 사용 ".

그런 다음 " 건축을 시작하다« 

특수 섹션 레이아웃 만들기

새 섹션 추가 " 전문 ". 왼쪽 사이드바 레이아웃 XNUMX/XNUMX XNUMX/XNUMX.

아래 스크린샷과 같이 열 레이아웃을 선택합니다.

새 특수 섹션만 남도록 기본 섹션을 삭제합니다.

섹션 설정을 열고 배경색을 다음과 같이 변경합니다.

• 배경: #84dbda

탭 아래 스타일, 다음 옵션을 업데이트합니다.

• 열 높이 균등화: 예
• 사용자 지정 거터 너비 사용: 예
• 거터 폭: 1
• 내부 폭: 100%

읽기 : DIVI에서 블로그 게시물을 띄우려면 어떻게 합니까?

• 최대 내부 너비: 1px(데스크톱), 080px(태블릿 및 휴대폰)

• 내부 여백(상단 및 하단): 12vh
• 열 1 패딩(상단 및 하단): 0px

섹션 스타일이 있는 상태에서 섹션에 XNUMX열 행을 추가합니다.

라인 설정

다음과 같이 라인 매개변수를 업데이트합니다.

• 사용자 지정 거터 너비 사용: 예
• 열 간격: 1
• 열 높이 조화: 예

• 내부 여백(상단 및 하단): 0px

첫 번째 줄을 복제하여 두 번째 줄을 만듭니다.

그런 다음 중복 행을 XNUMX열 레이아웃으로 변경합니다.

열 배경 이미지로 이미지 추가

이제 모든 행과 열이 준비되었으므로 그리드 레이아웃에 이미지를 추가할 준비가 되었습니다. 

이미지가 그리드 레이아웃에서 반응하도록 하기 위해 섹션의 XNUMX개 열 각각에 배경 이미지로 각 이미지를 추가합니다. 

각 배경 이미지의 배경 크기는 " 씌우다 ", 이미지는 브라우저 크기를 조정할 때 항상 전체 열을 채웁니다.

맨 위 행 열 배경 이미지

시작하려면 맨 위 행 열 설정을 엽니다.

그런 다음 열에 배경 이미지를 추가합니다.

맨 아래 행 열 배경 이미지

그런 다음 두 번째(하단) 행의 열 1에 대한 설정을 열고 이 열에 배경 이미지도 추가합니다.

다음으로 같은 행의 2열에 배경 이미지를 추가합니다.

섹션 열 1 배경 이미지

마지막으로 섹션 설정을 엽니다. "특기" 1열에 배경 이미지를 추가합니다.

각 열의 이미지에 겹쳐진 "행동 유도" 모듈 추가

배경 이미지가 그리드 레이아웃의 각 열에 추가되었으므로 각 열에 "행동 유도" 모듈을 추가합니다.

열 배경 이미지에 "클릭 유도문안" 모듈 오버레이를 사용하면 열 배경 이미지에 사용자 정의 배경 오버레이 스타일과 호버 효과를 쉽게 추가할 수 있습니다. 

이 예에서는 Action Call 모듈의 버튼 요소를 사용하지만 내용 버튼 위의 제목이나 본문.

맨 위 행 열에 첫 번째 "클릭 유도문안" 모듈을 추가합니다.

내용

다음과 같이 "클릭 유도문안" 모듈 설정을 업데이트합니다.

• 제목 텍스트 제거
• 본문 삭제

• 버튼 링크 URL: #

노트 : 버튼의 링크 URL에 "#"을 추가하는 것은 버튼이 표시되도록 하기 위한 필러일 뿐입니다. 호버에 반투명 배경색을 추가하면 모듈(및 그 뒤에 있는 이미지) 위로 마우스를 가져갈 때 멋진 사용자 지정 오버레이 색상이 제공됩니다.

• 배경색: 투명(데스크탑), rgba(255,235,77,0.5)(호버)

버튼 스타일

탭으로 이동 스타일 "클릭 유도문안" 모듈의 버튼 설정을 다음과 같이 수정합니다.

• 버튼에 사용자 정의 스타일 사용: 예
• 버튼 텍스트 크기: 22px
• 버튼 텍스트 색상: #ffeb4d
• 배경 버튼: #000000(데스크톱), #ec5f00(호버)

참조 : DIVI에서 슬라이딩 및 푸시 메뉴를 만드는 방법 

• 버튼 테두리 너비: 0픽셀
• 버튼 테두리 반경: 100px
• 버튼 글꼴: Quicksand
• 희미한 조명 버튼: 반 굵게

• 패딩 버튼: 위쪽 0,5em, 아래쪽 0,5em, 왼쪽 2em, 오른쪽 2em

크기, 패딩 및 테두리

다음으로, 모듈 뒤에 있는 열의 배경 이미지를 노출할 특정 높이가 있는지 확인해야 합니다. 

이를 위해 모듈에 내부 여백(상단 및 하단)을 추가합니다. 

또한 모듈에 미묘한 테두리를 추가하여 그리드 레이아웃의 다른 이미지와 약간 구분합니다.

다음 설정을 적용합니다.

• 폭: 100%

• 내부 여백(상단 및 하단): 15vh

• 하단 테두리 너비: 5px
• 왼쪽 테두리 너비: 5px
• 테두리 색상: rgba (255,255,255,0.5)

노트 : 패딩에 길이 vh 단위를 사용하면 브라우저 뷰포트의 높이에 상대적인 패딩 값이 만들어집니다. 따라서 이미지 그리드 요소는 브라우저 창에 비례하여 높이가 증가하거나 축소됩니다.

'클릭 유도문안' 모듈 콘텐츠의 수직 중앙 정렬

보장하기 위해 내용 "Action Call" 모듈의 수직 중앙에 남아 있으므로 flex 속성을 사용하여 사용자 정의 CSS의 작은 조각을 추가할 수 있습니다.

고급 탭에서 다음 CSS를 기본 요소에 추가합니다.

display:flex;
flex-direction:column;
justify-content:center;

다른 열에 클릭 유도문안 오버레이 추가

이제 첫 번째 "클릭 유도문안" 모듈이 사용자 지정되었으므로 모듈을 복사하여 레이아웃의 다른 3개 열에 붙여넣습니다. 여기에는 맨 아래 행의 2개 열과 섹션의 1열이 포함됩니다.

"클릭 유도문안" 모듈이 특수 섹션에서 열 1의 전체 높이를 포함하도록 하려면 최소 높이를 100%로 설정하십시오.

• 최소 높이: 100%

끝났어 ! 최종 결과를 봅시다.

최종 결과

다음은 호버 효과가 있는 웹 페이지의 반응형 이미지 그리드 레이아웃의 최종 결과입니다.

이것이 브라우저 크기를 조정할 때 그리드가 반응하는 방식입니다.

지금 DIVI를 다운로드하세요!!!

결론

반응형 이미지 그리드 레이아웃은 많은 웹사이트에서 계속해서 인기 있는 부분입니다. 클릭 유도문안 오버레이와 결합된 배경 이미지가 제공하는 시각적 매력은 이러한 중요한 탐색 링크를 실제로 표시할 수 있습니다. 

또한 이미지 그리드 레이아웃의 반응형 특성은 모든 장치에서 멋지게 보이며 항상 필수입니다.

이 안내서가 귀하의 향후 프로젝트에서 유용하기를 바랍니다. 사이트 웹. 우려 사항이나 제안 사항이 있으면 댓글 섹션 그것을 논의하기 위해.

그러나 상담 할 수도 있습니다 우리의 자원 웹사이트 제작 프로젝트를 완료하기 위해 더 많은 요소가 필요한 경우.

당신은 또한 우리의 가이드를 따를 수 있습니다 워드 프레스 블로그 제작 또는 Divi : 역대 최고의 워드 프레스 테마.

그러나 그동안, 이 기사를 다른 소셜 네트워크에서 공유하십시오.

...