5가지 독창적인 Divi Blurb 모듈 디자인

게시 됨: 2018-10-22

이 게시물에서는 Divi의 가장 인기 있는 기능 중 하나인 Blurb 모듈을 살펴보겠습니다. 겉보기에는 간단해 보이지만 웹사이트 요소에 생명을 불어넣을 수 있는 사용자 지정 가능한 기능이 많이 있습니다. 일반적으로 Blurb 모듈은 서비스, 혜택, 연락처 정보 등의 용도로 사용되지만 Divi에서는 가능성이 무궁무진합니다.

재미 좀 보자!

엿보기

다음은 이 튜토리얼에서 만들 5가지 광고 모듈 스타일을 살짝 보여줍니다.

5가지 독창적인 Divi Blurb 모듈 디자인

YouTube 채널 구독

시작하기

시작하려면 새 페이지를 만들어야 합니다. WordPress 대시보드에서 페이지 > 새로 추가로 이동합니다. 그런 다음 페이지에 제목을 지정하고 시각적 빌더를 배포합니다. "처음부터 빌드" 옵션을 선택합니다. 비주얼 빌더가 페이지에 로드되면 디자인을 시작할 준비가 된 것입니다.

이 튜토리얼은 이러한 각 블러브 스타일 디자인을 개별적으로 쉽게 만들 수 있도록 설계되었으므로 빌드하려는 디자인으로 자유롭게 게시물을 건너뛸 수 있습니다. 즉, 첫 번째 것부터 시작할 필요가 없습니다.

1. 기능 목록이 있는 팝업 광고

이 첫 번째 예에서는 팝아웃 효과를 만들기 위해 행 외부로 광고 문구를 확장하는 재미를 느낄 것입니다. 그런 다음 각 옆에 있는 인접한 열을 사용하여 추천 목록 항목으로 사용할 왼쪽 정렬 아이콘이 있는 몇 개의 안내문을 추가할 수 있습니다.

시작하려면 새 섹션과 4열 구조의 행을 만듭니다.

그런 다음 다음과 같이 행 설정을 업데이트합니다.

배경색: #2e3858
이 행을 전체 너비로 만들기: 예
사용자 지정 거터 너비 사용: 예
거터 폭: 1
열 높이 균등화: 예
사용자 정의 여백: 5vw 상단, 5vw 하단
맞춤 패딩: 위쪽 0px, 아래쪽 0px

설정을 저장합니다.

그런 다음 첫 번째 열에 첫 번째 광고 문구 모듈을 추가합니다.

내용 상자의 마지막 문장을 빼서 텍스트의 양을 조금 줄이십시오. 그런 다음 이미지 대신 아이콘을 사용하도록 선택하고 아이콘을 선택합니다(누구나 할 수 있음).

그런 다음 다음을 업데이트합니다.

배경색: #df4570
아이콘 색상: #ffffff
텍스트 방향: 중앙
제목 글꼴: Encode Sans Semi Condensed
제목 글꼴 스타일: TT
제목 글자 간격: 2px
사용자 정의 여백(데스크톱): -5vw 상단, -5vw 하단
맞춤 여백(태블릿): 위쪽 0px, 아래쪽 0px
사용자 정의 패딩: 상단 5vw, 하단 5vw, 왼쪽 3vw, 오른쪽 3vw
박스 섀도우: 스크린샷 참조
상자 그림자 흐림 강도: 80px

마우스 오른쪽 버튼 클릭 메뉴 옵션 또는 cmd+c 및 cmd+v 단축키를 사용하여 방금 만든 모듈을 복사하여 열 3에 붙여넣습니다. 그런 다음 다른 밝은(그러나 보완적인) 배경색으로 새 광고 모듈 설정을 업데이트합니다.

배경색: #24c4a3

이제 방금 만든 팝업 광고 문구에 인접한 목록 항목 광고 문구를 추가할 차례입니다.

이렇게 하려면 열 2에 새 광고 문구를 추가합니다. 그런 다음 제목 텍스트만 남도록 콘텐츠 상자에서 모의 텍스트를 제거합니다. 그런 다음 이전과 마찬가지로 이미지를 대체할 아이콘을 추가합니다. 그런 다음 디자인 설정을 다음과 같이 업데이트합니다.

아이콘 색상: #df4570
이미지/아이콘 배치: 왼쪽
제목 글꼴: Encode Sans Semi Condensed
맞춤 패딩: 상단 20px, 하단 20px, 왼쪽 3vw, 오른쪽 3vw

열에 총 3개의 목록 광고 문구를 얻을 수 있도록 광고 문구를 두 번 복제합니다. 그런 다음 Divi의 다중 선택 기능을 사용하여 3개의 광고 문구를 모두 선택한 다음 복사하여 4열에 붙여넣습니다.

다중 선택을 사용하여 4열에 있는 3개의 광고 문구를 모두 선택하고 요소 설정을 일괄 편집하여 3개 모두의 아이콘 색상을 #24c4a3으로 변경할 수도 있습니다.

그게 다야! 팝업 광고문안을 만드는 것은 광고문안을 돋보이게 하는 재미있는 방법이며 측면에 인접한 목록 광고문을 두는 것은 보다 창의적인 디자인을 위한 몇 가지 추가 옵션을 제공합니다.

다음은 최종 결과입니다.

2. 사용자 정의 배경 이미지가 있는 홍보 문구.

이 광고 스타일은 무료 책과 같은 콘텐츠 및 프로모션 제안을 제공하는 데 적합합니다. 기본 아이디어는 사용자 정의 배경 이미지를 위한 공간을 만들기 위해 모듈 왼쪽에 광고문안 콘텐츠를 배치하는 것입니다. 시작하겠습니다.

먼저 2열 행 구조의 일반 섹션을 추가합니다. 왼쪽 열에 새 광고 문구 모듈을 추가합니다.

Title 텍스트를 업데이트하고 모의 콘텐츠의 마지막 문장을 제거하여 텍스트 양을 줄입니다. 그런 다음 책 이미지(또는 제품 이미지)로 이미지를 업데이트합니다. 책이나 무언가의 아이콘도 작동합니다.

저는 여행 블로그 레이아웃 팩의 이미지 자산을 사용하고 있으므로 해당 이미지를 가져와서 자유롭게 디자인을 시작할 수 있습니다.

팁: 프로모션 역할을 할 수 있으므로 전체 모듈을 클릭할 수 있도록 이 모듈에 모듈 링크 URL을 추가할 수도 있습니다.

다음으로 모듈에 배경 이미지를 추가합니다. 배경 이미지가 이미지의 초점이 오른쪽에 있는 헤더와 같은지 확인하십시오. 이렇게 하면 배경이 텍스트에서 산만해지는 이미지 왼쪽에 콘텐츠를 추가할 수 있습니다.

그런 다음 콘텐츠 뒤에 위치하는 부분 오버레이 역할을 하는 배경 그라디언트를 추가하고 배경 이미지를 오버레이하여 텍스트를 더 읽기 쉽게 만듭니다. 배경 그라디언트를 추가하려면 다음을 업데이트하십시오.

배경 그라데이션 왼쪽 색상: rgba(255,255,255,0.8)
배경 그라데이션 오른쪽 색상: rgba(255,255,255,0)
기울기 방향: 90deg
시작 위치: 40%
최종 위치: 70%
배경 이미지 위에 그라디언트 배치: 예

그런 다음 다음을 업데이트합니다.

이미지 상자 그림자: 스크린샷 참조
제목 글꼴: Noto Serif
제목 텍스트 크기: 26px
본문 글꼴: Noto Sans
본문 텍스트 크기: 16px
이미지 너비: 150px
콘텐츠 너비(데스크톱): 60%
콘텐츠 너비: (스마트폰): 80%
맞춤 패딩: 2vw 하단, 2vw 왼쪽, 2vw 오른쪽

여기서 핵심 디자인 기술은 나중에 콘텐츠가 왼쪽에 배치될 수 있도록 이미지와 콘텐츠 모두에 사용자 정의 너비를 제공하는 것입니다.

이제 책 이미지가 멋진 중첩 효과를 위해 모듈 위로 확장된다는 인상을 주기 위해 광고 문구 상단에 상자 그림자를 추가해야 합니다. 이렇게 하려면 다음을 업데이트하십시오.

박스 섀도우: 스크린샷 참조
상자 그림자 수평 위치: 0px
상자 그림자 수직 위치: 50px
그림자 색상: #ffffff

마지막 단계에는 모듈의 왼쪽에 광고문안 콘텐츠를 정렬하는 데 필요한 사용자 정의 CSS의 짧은 스니펫이 포함됩니다. 이렇게 하려면 고급 탭으로 이동하여 Blurb 콘텐츠 입력 상자 아래에 다음 사용자 지정 CSS를 추가합니다.

margin-left: 0;

이제 결과를 확인하십시오!

팁: 사용 가능한 호버 옵션을 잊지 마십시오. 책 이미지에 마우스 오버 시 테두리를 주어 생동감 있게 만들어 보세요!

3. 배경 그라데이션을 사용한 원 블러브 스타일

이 간단한 광고 스타일은 배경 그라디언트를 사용하여 광고 내용의 원 배경 역할을 합니다. 이것은 사용자 정의 CSS를 사용하여 전체 광고 모듈을 원으로 바꾸는 재미있는 대안입니다.

3열 행 구조로 새 일반 섹션을 추가하여 시작합니다.

그런 다음 왼쪽 열에 광고 문구 모듈을 추가합니다.

그런 다음 내용의 마지막 문장을 빼내어 텍스트의 양을 줄이십시오. 이 디자인에서는 원 안에 텍스트를 맞출 것이기 때문에 텍스트 양을 약간 작게 유지하는 것이 중요합니다.

그런 다음 배경 그라디언트를 추가하여 다음과 같이 원 배경을 만듭니다.

배경 그라데이션 왼쪽 색상: #fa7f28
배경 그라데이션 오른쪽 색상: rgba(255,255,255,0)
그라디언트 유형: 방사형
시작 위치: 60%
최종 위치: 0%
배경 이미지 위에 그라디언트 배치: 예

그런 다음 나머지 디자인 설정을 다음과 같이 업데이트합니다.

텍스트 방향: 중앙
제목 글꼴: Oswald
제목 글꼴 스타일: TT
제목 글자 간격: 1px
본문 글꼴: 로봇
본문 글꼴 두께: Light
본문 텍스트 크기: 16px
너비(태블릿): 80%
모듈 정렬: 중앙
사용자 지정 패딩(데스크톱): 위쪽 20%, 아래쪽 25%, 왼쪽 20%, 오른쪽 20%
맞춤 패딩(스마트폰): 위쪽 20%, 아래쪽 25%, 왼쪽 10%, 오른쪽 10%

여기서 핵심은 배경 원이 중앙의 콘텐츠와 정렬되도록 사용자 정의 패딩을 올바르게 조정하는 것입니다. 보유하고 있는 콘텐츠의 양에 따라 이러한 설정을 조정해야 할 수도 있습니다.

이제 모듈을 복사하여 나머지 열에 붙여넣을 수 있습니다.

그런 다음 행 설정을 업데이트하여 사용자 정의 너비가 80%이고 거터 너비가 1이 되도록 합니다.

디자인을 완성하기 위해 다음과 같이 섹션에 배경 이미지와 그라디언트를 추가할 수 있습니다.

배경 이미지 추가
배경 그라데이션 왼쪽 색상: rgba(2,0,76,0.51)
배경 그라데이션 오른쪽 색상: rgba(2,0,76,0.84)
배경 이미지 위에 그라디언트 배치: 예

그게 다야! 최종 디자인을 확인하세요!

추가 공간을 위해 더 작은 브라우저 너비에서 원이 충돌하지 않도록 광고 아이콘의 크기를 50px 정도로 줄일 수 있습니다. 조정할 때 Divi의 다중 선택 기능을 활용하여 모든 모듈을 한 번에 일괄 편집하는 것을 잊지 마십시오.

보너스 팁: 사용자 정의 CSS를 사용하여 전체 Blurb 모듈을 원으로 만들기

전체 모듈을 원으로 바꾸려면(배경 그라디언트를 사용하는 대신) 그라디언트를 일반 배경색으로 교체하고 블러 모듈 설정의 고급 탭에서 이 사용자 정의 CSS를 추가하십시오.

기본 요소 상자에서:

height: 300px;
width: 300px;
border-radius: 100%;
border: 5px solid #ffffff;
padding: 5% !important;
display: flex;

Blurb 콘텐츠 상자에서:

margin: auto;

이 사용자 정의 CSS는 블러브 모듈 설정에서 패딩 세트를 재정의하므로 해당 설정을 다시 제어하려면 해당 스니펫을 제거해야 할 수 있습니다. 또한, 이 CSS는 flex를 사용하여 원 내에서 블러블 콘텐츠를 중앙에 배치합니다. 이것은 유용할 것입니다.

세 가지 모듈 모두에 적용하면 다음과 같이 보일 것입니다.

4. 테두리와 상자 그림자가 있는 프레임 광고

내가 항상 즐겨 사용하는 Divi 디자인 기능 중 하나는 상자 그림자입니다. 우리는 이전에 겹침 효과를 만든 프로모션 광고 문구 디자인에서 상자 그림자를 창의적으로 사용하는 기능을 이미 선보였습니다. 그러나 상자 그림자를 깨진 격자 디자인으로 콘텐츠의 프레임을 만드는 창의적인 방법으로 사용할 수도 있습니다. 이 디자인에서는 테두리와 상자 그림자를 독특한 방식으로 결합하는 방법을 보여 드리겠습니다.

시작하려면 3열 행 구조의 새 일반 섹션을 추가하십시오. 그런 다음 첫 번째 열에 blurb 모듈을 추가합니다.

광고 문구에 이미지를 추가합니다. 그런 다음 다음과 같이 디자인 설정을 업데이트하여 광고 이미지에 테두리와 상자 그림자를 지정합니다.

이미지 상단 테두리 너비: 8px
이미지 상단 테두리 색상: #2f3854
이미지 왼쪽 테두리 너비: 8px
이미지 왼쪽 테두리 색상: #2f3854

이미지 상자 그림자: 스크린샷 참조
상자 그림자 수평 위치: -20px
상자 그림자 수직 위치: -30px
그림자 색상: #f89da9

그런 다음 제목 및 본문 글꼴과 간격을 다음과 같이 업데이트합니다.

제목 글꼴: Yeseva One
본문 글꼴: 몬세라트
맞춤 여백: 50px 하단
맞춤 패딩: 2vw 하단

마지막으로, 다음과 같이 프레임 디자인의 균형을 맞추기 위해 광고 모듈에 사용자 정의 테두리와 상자 그림자를 제공합니다.

오른쪽 테두리 너비: 15px
오른쪽 테두리 색상: #2f3854
하단 테두리 너비: 15px
하단 테두리 색상: #2f3854

이미지 상자 그림자: 스크린샷 참조
상자 그림자 수평 위치: 20px
상자 그림자 수직 위치: 35px
그림자 색상: #dddddd

이제 2열과 3열의 모듈을 복사하여 붙여넣고 광고 이미지를 업데이트하여 디자인을 완성합니다.

다음은 최종 결과입니다.

5. Blurbs를 곡선 목록으로 스타일링하기

이 다음 디자인은 광고 문구를 사용하여 목록을 만드는 재미있는 방법입니다. 일부 사용자 정의 여백을 사용하여 광고 문구 목록 항목을 곡선으로 만들어 페이지의 요소를 둘러쌀 수 있습니다. 이 예에서는 큰 광고 아이콘의 오른쪽을 둘러싸도록 목록을 곡선으로 만들 것입니다. 그리고 당신은 약간의 창의력을 얻을 수 있습니다

먼저 2열 행 구조의 새 일반 섹션을 추가합니다.

블러브 모듈을 추가하기 전에 다음과 같이 행 설정을 업데이트하여 행에 사용자 정의 너비와 여백 너비를 지정하십시오.

맞춤 너비: 700px
거터 폭: 2

이제 왼쪽 열에 blurb 모듈을 추가하여 큰 blurb 아이콘을 만들어 보겠습니다. 그런 다음 제목 텍스트와 내용을 꺼냅니다. 그런 다음 전구 아이콘을 선택합니다. 이제 아이콘만 표시되어야 합니다. 다음으로 아이콘의 색상과 크기를 다음과 같이 업데이트합니다.

아이콘 색상: #96a6bd
아이콘 글꼴 크기(데스크톱): 400px
아이콘 글꼴 크기(스마트폰): 200px

오른쪽 열에 새 광고 문구 모듈을 추가합니다. 이것은 우리 목록을 구성할 총 5개의 광고문안 중 첫 번째가 될 것입니다. 그런 다음 모듈 설정을 열고 제목 텍스트만 남기고 내용을 꺼냅니다. 그런 다음 광고 문구의 오른쪽 화살표 아이콘을 선택합니다.

다음으로 디자인 설정을 다음과 같이 업데이트합니다.

배경색: #bb7860
아이콘 색상: #ffffff
이미지/아이콘 배치: 왼쪽
아이콘 글꼴 크기 사용: 예
아이콘 글꼴 크기: 30px
제목 글꼴: Raleway
제목 텍스트 색상: #ffffff
제목 텍스트 크기: 20px
제목 줄 높이: 1.5em
사용자 정의 여백: 하단 5%
맞춤 패딩: 위쪽 3%, 왼쪽 10%, 오른쪽 2%

오른쪽 열에 총 5개의 광고 문구가 쌓일 때까지 모듈을 네 번 복제합니다.

그런 다음 두 번째 광고 문구에 새 색상을 지정하고 오른쪽으로 밀어넣는 맞춤 여백을 지정하고 다음과 같이 창의적인 둥근 모서리를 지정합니다.

배경색: #393e56
사용자 정의 여백(데스크톱): 왼쪽 10%, 오른쪽 -10%
사용자 정의 여백(태블릿): 왼쪽 0%, 오른쪽 0%
둥근 모서리: 오른쪽 상단 50px, 왼쪽 하단 50px

이 모듈을 종료하기 전에 광고 문구 설정에서 옵션을 마우스 오른쪽 버튼으로 클릭하여 둥근 모서리를 복사하십시오.

그런 다음 블러 설정을 저장하고 생성한 첫 번째(상단) 모듈을 마우스 오른쪽 버튼으로 클릭하고 둥근 모서리 스타일을 모듈에 붙여넣습니다.

이제 적절한 색상, 간격 및 둥근 모서리 디자인으로 마지막 세 개의 모듈을 계속 업데이트하겠습니다.

열의 세 번째 광고 문구에 대해 다음을 업데이트합니다.

배경색: #96a6bd
사용자 정의 여백(데스크톱): 왼쪽 20%, 오른쪽 -20%
사용자 정의 여백(태블릿): 왼쪽 0%, 오른쪽 0%
둥근 모서리: 오른쪽 상단 50px, 오른쪽 하단 50px

네 번째 광고문안의 경우 다음을 업데이트합니다.

배경색: #393e56
사용자 정의 여백(데스크톱): 왼쪽 10%, 오른쪽 -10%
사용자 정의 여백(태블릿): 왼쪽 0%, 오른쪽 0%
둥근 모서리: 왼쪽 상단 50px, 오른쪽 하단 50px

다섯 번째 광고문안의 경우 네 번째 광고문안의 둥근 모서리를 복사하여 붙여넣기만 하면 됩니다.

그게 다야! 최종 디자인을 확인해보자.

더 많은 Blurb 스타일 영감

더 재미있는 광고 모듈 디자인을 탐색하는 데 관심이 있다면 아래 링크를 확인하세요.

광고에 비대칭 곡선 배경을 사용할 수 있습니다.
섹션 구분선을 사용하여 독창적인 디자인으로 광고 문구 모듈을 구성할 수 있습니다.
자신만의 배경 이미지 모양을 만들어 기하학적 격자 레이아웃을 만들 수 있습니다.
광고 아이콘을 결합하여 단면 상자 그림자의 게시물 섹션에 대한 중앙 그래픽 요소를 만드는 방법을 알아봅니다.
더욱 영감을 주는 광고 스타일을 위해 Divi Builder 내에서 사용할 수 있는 무료 Divi 사전 제작 레이아웃을 탐색하는 것을 잊지 마십시오.

이 예제를 통해 Divi Blurb 모듈로 무엇이 가능한지 알 수 있기를 바랍니다! 하늘이 여기 한계입니다. 이 모듈은 매우 유명하며 구축하는 거의 모든 사이트에서 사용될 것이므로 디자인이 동일해 보이지 않도록 다양한 아이디어를 갖는 것이 좋습니다. 때로는 색상과 글꼴을 변경하는 것만으로도 완전히 새로운 느낌을 줄 수 있으므로 이러한 아이디어를 자유롭게 사용하여 자신만의 것으로 만드십시오!

댓글로 여러분의 의견을 기다리겠습니다.

건배!