Divi 사이트에 플로팅 어바웃 카드를 추가하는 방법

방문하는 거의 모든 웹 사이트에서 요소가 팝업되어 페이지에 고정됩니다. 쿠키 경고 및 수신 동의, 이메일 등록 및 채팅 상자. 우리 모두는 어느 시점에서 그것들을 무시하는 경향이 있으며, 웹사이트가 우리에게 말하려고 하는 것이 무엇이든 맹목적으로 됩니다. 읽지 않고 X를 클릭하기만 하면 됩니다. 그러나 그렇다고 해서 이러한 종류의 요소가 유용하지도 않고 자리를 차지할 수도 없다는 의미는 아닙니다. Divi를 사용하면 사이트에 가치를 더하는 플로팅 카드를 쉽게 만들 수 있으며, 자신이 누구이며 브랜드가 하는 일을 눈에 잘 띄지 않게 설명할 수 있습니다. 얼마나 쉬운지 봅시다.

시사

데스크탑

이동하는

1. 페이지 템플릿 만들기

가장 먼저 해야 할 일은 이 떠다니는 카드를 포함할 페이지를 결정하는 것입니다. 웹사이트의 모든 페이지에 표시할 수도 있고 특정 방문 페이지에만 표시할 수도 있습니다. 어느 쪽이든 Divi Theme Builder를 사용하여 설정할 수 있습니다. 전역 템플릿 또는 특정 페이지에만 적용되는 템플릿입니다.

테마 빌더를 사용하여 템플릿 만들기

시작하려면 WordPress 대시보드에서 Divi – Theme Builder 로 이동합니다. 플로팅 카드를 적용할 페이지의 Custom Body 섹션을 선택하거나 Global Body 를 선택하여 모든 곳에 적용합니다.

Divi Visual Builder를 로드한 후 선택 사항이 제공되면 Start from Scratch(처음부터 시작)를 선택합니다.

1열 행 및 게시물 콘텐츠 모듈 추가

그런 다음 메시지가 표시되면 단일 열 행을 선택합니다.

다음으로 Post Content 모듈을 선택하려고 합니다. 이것은 동적 콘텐츠 기능의 예입니다. 모듈은 Divi 페이지 자체 내부에 구축된 첨부 디자인을 표시합니다. 즉, 이 모듈은 이 템플릿을 사용하여 다른 페이지에 대해 다른 콘텐츠를 표시합니다. 블로그 게시물의 경우 블로그 콘텐츠가 됩니다. 상점 페이지의 경우 제품이 됩니다. 개별 페이지의 경우 Divi를 사용하여 만든 사용자 지정 콘텐츠입니다.

섹션 및 행 간격 조정

그것들이 제자리에 있으면 몇 가지 간격 조정이 필요합니다. 섹션 설정(Divi 빌더의 파란색 테두리)으로 이동하여 모든 상단 및 하단 패딩을 제거합니다. 디자인 탭, 간격 제목 아래에서 이 작업을 수행한 다음 패딩 아래 에서 위쪽 및 아래쪽 으로 0px 를 설정합니다.

변경 사항을 저장하고 행 설정을 입력합니다. 다시 상단 및 하단 패딩을 0px 로 설정합니다.

다음으로 Sizing 제목을 찾아 Use Custom Gutter Width 를 켜고 값을 1로 설정합니다. 그런 다음 Width 및 Max Width 를 100%로 설정합니다.

준비가 끝나면 떠 다니는 카드를 만들어 봅시다!

2. 플로팅 카드 추가

새 섹션 및 행 추가

먼저 새 섹션을 추가하려고 합니다. 페이지 하단으로 스크롤하고 파란색 + 원을 클릭하고 섹션 유형을 묻는 메시지가 표시되면 일반을 선택하면 됩니다.

Blurb 모듈 추가

이것은 부동 카드 전용 섹션이 될 것입니다. 내부에 다른 단일 열 행을 추가하려고 합니다. 그리고 그 안에서 플로팅 카드 자체에 Blurb 모듈을 사용하려고 합니다. Divi Blurb 모듈은 빌더에서 가장 다재다능한 모듈일 수 있으므로 이 기능에 대해 제공하는 것을 활용하고자 합니다.

섹션 및 행 설정 조정

그 자리에서 우리는 이 행과 섹션의 패딩과 위치를 조정해야 합니다. 먼저 섹션 설정으로 이동하여 Display – Spacing 에서 Top and Bottom Padding 을 0px로 설정합니다.

그런 다음 고급 탭에서 직책 제목을 찾습니다. Z 인덱스 를 12로 설정합니다. 숫자가 높을수록 섹션과 그 내용이 더 "앞"에 놓입니다. 그리고 그것은 떠다니는 카드이기 때문에 다른 모든 요소 위에 떠 있기를 원합니다.

마지막으로 행 설정으로 이동하여 상단 및 하단 의 패딩을 다시 한 번 0px로 설정합니다.

Blurb 모듈 콘텐츠

이제 카드 자체의 스타일을 지정할 차례입니다. Blurb 모듈에 대한 설정 을 입력합니다. 비즈니스를 설명하는 요소이기 때문에 회사나 브랜드가 하는 일에 대해 간략하게 언급하고 싶을 것입니다. 이것은 예시 포스트이기 때문에 좀비 맛의 lorem ipsum 으로 채웠습니다. 내용 탭에서 제목과 본문 내용을 설정할 수 있습니다.

배경색 설정

분명히 플로팅 카드가 사이트와 시각적으로 일치하기를 원하므로 올바른 배경색을 선택하는 것이 매우 중요합니다. 우리는 #ffffff (흰색)으로 갈 것입니다. 콘텐츠 탭에도 이 항목이 있으며 배경 제목 및 페인트 통 에서 찾을 수 있습니다.

카드 이미지 선택

Blurb 모듈은 모듈에 대한 이미지 또는 아이콘을 포함할 수 있는 옵션을 제공하며 우리는 우리 회사를 나타내는 이미지를 원합니다. 다시 콘텐츠 탭에서 이미지와 아이콘을 찾아 모듈에 적합한 이미지를 업로드하면 됩니다.

카드 모서리 모양 만들기

그런 다음 디자인 탭과 테두리 제목으로 이동합니다. 둥근 모서리 옵션을 찾아 각 모서리를 25px로 설정합니다. 이렇게 하면 전체 카드의 모양을 변경하지 않고 날카롭고 각진 모서리를 부드럽게 만듭니다.

텍스트 정렬

텍스트 제목 아래에서 텍스트 정렬 을 가운데로 설정합니다.

플로팅 카드의 제목 텍스트 스타일 지정

이전에 설정한 제목 텍스트의 기본값은 H4 입니다. 스타일을 지정하려면 제목 텍스트 제목으로 이동하여 H4 탭을 선택하고 다음 제목 옵션을 변경합니다.

• 글꼴: Poppins
• 글꼴 두께: 굵게
• 텍스트 색상: # 22303f
• 텍스트 크기: 20px
• 줄 높이: 1.3em

그런 다음 응답성 설정으로 이동하여 모바일 장치의 제목 크기를 변경해야 합니다. 제목 텍스트 크기 를 14px 로 변경합니다.

카드의 텍스트 스타일 지정

그런 다음 본문 텍스트로 이동하여 제목 글꼴과 일치하도록 본문 글꼴 을 Poppins 로 변경합니다.

그런 다음 링크 탭(체인 아이콘)을 클릭하고 링크 텍스트 색상 을 사이트의 보완 색상으로 바꿉니다. 우리는 #97c357을 선택했습니다.

정보 카드 크기 조정

크기 조정 제목 아래에서 이러한 설정에 다음 값을 추가합니다.

• 이미지 너비: 75%
• 콘텐츠 너비: 25vw
• 폭: 25vw
• 최대 폭: 30vw

응답성 설정에서 다음 값을 조정합니다.

• 콘텐츠 너비: 90vw
• 폭: 90vw
• 최대 폭: 95vw

모서리에 떠 있는 카드는 일반적으로 읽을 수 없기 때문에 이러한 값은 카드가 모바일 장치 화면의 전체 너비를 차지하도록 합니다.

블러브의 간격

Spacing 머리글은 왼쪽 여백 을 0px , 위쪽 및 아래쪽 패딩 을 2vw , 왼쪽 및 오른쪽 패딩 을 1vw 로 설정해야 하는 빠른 수정 사항 입니다.

반응형 설정의 경우 상단 및 하단 패딩 만 변경됩니다. 우리는 이것을 5%로 설정할 것입니다.

상자 그림자 추가

떠다니는 카드는 그 위치에 고정되어 있기 때문에 실제로 콘텐츠 위에 떠 있는 것처럼 보이길 원합니다. 이 효과는 모듈에 기본 상자 그림자를 추가하면 충분히 간단합니다. 이 옵션은 Box Shadow 아래에서 찾을 수 있으며 기본 하단 그림자를 선택했습니다.

반응형 CSS 조정

이제 재미있는 부분입니다. 플로팅 카드를 페이지에 고정할 고급 탭으로 이동합니다. 이를 위해 첫 번째 단계는 데스크탑용으로 추가한 이미지를 끄는 것입니다. Blurb 모듈의 이미지는 모바일의 크기와 유용성에 실제로 영향을 줄 수 있으며 페이지를 로드하는 데에도 영향을 줍니다.

그래서 우리는 display:none; 사용자 정의 CSS 아래의 모바일 전용 Blurb 이미지 필드 아래에 있습니다.

위치 설정으로 카드 고정 및 플로팅

마지막으로 카드를 띄울 위치에 카드를 배치합니다. 먼저 고급 탭으로 이동하여 위치로 스크롤합니다. 드롭다운 메뉴에서 고정 을 선택합니다.

다음으로 위치 옵션을 찾습니다. 이것은 플로팅 카드가 머무를 화면의 지점입니다. 데스크탑의 경우 화면 하단 모서리에 위치하기를 원합니다. 그래서 우리는 그것과 상관관계가 있는 사각형을 클릭합니다. 또한 창 경계에서 약간 오프셋되기를 원하므로 수직 오프셋 을 3%로 , 수평 오프셋 을 2%로 변경합니다.

다음으로 모바일용으로 다른 위치와 오프셋을 만들고 싶습니다. 위에서 우리는 화면의 전체 너비를 늘리기 위해 카드의 너비를 설정했습니다. 이를 염두에 두고 고정 위치 를 중앙 하단으로 변경하여 카드가 항상 화면 하단에 떠 있게 할 것입니다.

또한 모바일용 수직 오프셋 만 변경할 예정입니다. 이 값을 3% 로 설정하십시오. 가로 오프셋은 모바일 화면의 너비이고 중앙에 있기 때문에 필요하지 않습니다.

최종 결과

모든 것이 적절하게 설정되고 개인 사이트에 맞게 조정되면 최종 제품이 이와 유사하게 보일 것입니다.

데스크탑

이동하는

결론

Divi의 강력한 옵션과 직관적인 인터페이스로 사이트에 떠다니는 카드를 즉시 디자인하고 부착할 수 있습니다. 처음부터 사용자에게 누구와 거래하는지 알려주면 브랜드 충성도를 얻을 수 있습니다.

웹사이트에서 플로팅 카드를 사용한 이유는 무엇입니까? 댓글로 알려주세요!