Divi에서 콘텐츠를 위한 플로팅 코너 디자인을 만드는 방법

플로팅 코너 디자인을 만드는 것은 사용자 정의 코드 없이는 가능하다고 생각하지 못했던 약간의 창의적인 스타일을 Divi 모듈에 추가하는 간단하고 쉬운 방법입니다. 좋은 소식! Divi를 사용하면 Divi의 기본 제공 옵션을 사용하여 모듈의 네 모서리 스타일을 지정하기 위해 디바이더와 블러브를 사용할 수 있습니다. 그리고 다양한 가능성을 시도하는 것은 꽤 재미있을 수 있습니다.

이 튜토리얼에서는 Divi에서 콘텐츠의 플로팅 코너 디자인을 만드는 방법을 보여 드리겠습니다. 요소가 제자리에 있으면 수많은 모양, 아이콘 및 색상으로 모서리의 스타일을 지정할 수 있습니다!

시작하자!

엿보기

이 튜토리얼에서 가능한 플로팅 코너 디자인을 살짝 엿볼 수 있습니다.

플로팅 테두리 디자인 예제 레이아웃을 무료로 다운로드하십시오.

플로팅 테두리 디자인 레이아웃을 사용하려면 먼저 아래 버튼을 사용하여 다운로드해야 합니다. 다운로드에 액세스하려면 아래 양식을 사용하여 Divi Daily 이메일 목록에 가입해야 합니다. 신규 구독자는 매주 월요일에 더 많은 Divi 혜택과 무료 Divi 레이아웃 팩을 받게 됩니다! 이미 목록에 있는 경우 아래에 이메일 주소를 입력하고 다운로드를 클릭하기만 하면 됩니다. "재구독"되지 않거나 추가 이메일을 받지 않습니다.

파일 다운로드

무료로 다운로드

Divi 뉴스레터에 가입하면 최고의 Divi 랜딩 페이지 레이아웃 팩과 수많은 놀라운 무료 Divi 리소스, 팁 및 요령을 이메일로 보내드립니다. 따라하시면 ​​금세 Divi 마스터가 되실 것입니다. 이미 구독한 경우 아래에 이메일 주소를 입력하고 다운로드를 클릭하여 레이아웃 팩에 액세스하십시오.

다운로드

성공적으로 구독했습니다. 이메일 주소를 확인하여 구독을 확인하고 무료 주간 Divi 레이아웃 팩에 액세스하세요!

레이아웃을 페이지로 가져오려면 zip 파일을 추출하고 json 파일을 Divi Builder로 드래그하기만 하면 됩니다.

이제 튜토리얼로 들어가 볼까요?

시작하기

이 튜토리얼에 필요한 유일한 것은 Divi입니다. 우리는 Divi Builder의 프런트 엔드에서 이러한 예제를 처음부터 빌드할 것입니다.

시작하려면 새 페이지를 만들고 페이지 제목을 지정하세요. 클릭하여 프런트 엔드에서 Divi Builder를 사용하고 "처음부터 만들기" 옵션을 선택합니다.

이제 갈 준비가 되었습니다!

플로팅 코너 디자인 레이아웃 템플릿 만들기

이 디자인에는 수많은 디자인 가능성이 있으므로 작업할 기본 레이아웃(또는 템플릿)을 만드는 것이 좋습니다.

이 템플릿의 경우 텍스트 모듈의 각 모서리에 4개의 구분선을 추가합니다. 그런 다음 레이아웃이 배치되면 고유한 디자인을 위해 이러한 디바이더를 사용자 정의하는 새로운 방법을 탐색할 수 있습니다.

먼저 하나의 열 행이 있는 새 일반 섹션을 만듭니다.

텍스트 모듈을 추가하기 전에 다음과 같이 행 설정을 업데이트하십시오.

맞춤 너비: 640px
맞춤 패딩: 위쪽 0px, 아래쪽 0px

그런 다음 행에 텍스트 모듈을 추가하고 다음을 업데이트합니다.

텍스트 텍스트 크기: 20px
텍스트 줄 높이: 1.8em
맞춤 여백: -25px 상단, -25px 하단, 25px 왼쪽, 25px 오른쪽
사용자 지정 패딩(데스크톱): 위쪽 10%, 아래쪽 10%, 왼쪽 10%, 오른쪽 10%
맞춤 패딩(전화): 상단 20%, 하단 20%
테두리 너비: 4px
테두리 색상: #eeeeee

사용자 지정 여백과 패딩은 곧 추가할 분할기 모듈을 정렬하는 데 도움이 됩니다. 디바이더는 높이와 너비가 50px이므로 -25px 위쪽 및 아래쪽 여백은 해당 디바이더를 텍스트 모듈의 절반으로 당겨서 멋진 대칭 디자인을 만듭니다.

상위 2개의 플로팅 코너 디바이더 추가

텍스트 모듈이 제자리에 있으면 구분선 모듈을 사용하여 상단 두 개의 부동 모서리 디자인을 추가할 수 있습니다.

새 구분선 모듈을 만들고 텍스트 모듈의 맨 위로 끕니다.

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

디바이더 표시: 아니오

배경색: #7cda24(또는 원하는 색상)
높이: 50px
너비: 50px

50px 높이와 너비는 부동 테두리에 사용할 수 있는 완벽한 정사각형을 제공합니다.

이제 구분선에 상자 그림자를 추가하여 다음과 같이 부동 효과를 만듭니다.

박스 섀도우: 스크린샷 참조
상자 그림자 수직 위치: 0px
상자 그림자 흐림 강도: 0px
상자 그림자 확산 강도: 20px
그림자 색상: #ffffff

구분자 모듈이 텍스트 모듈 위에 유지되고 뒤에 숨겨지지 않도록 하려면 다음과 같이 CSS 스니펫을 기본 요소에 추가해야 합니다.

주요 요소 CSS:

position: relative

그런 다음 Z 인덱스를 1로 업데이트합니다.

다음으로 분할기 모듈을 복제하고 복제된 분할기 설정을 다음과 같이 업데이트합니다.

모듈 정렬: 오른쪽
맞춤 여백: -50px 상단

이렇게 하면 디바이더를 오른쪽에 정렬하고 그 위에 있는 디바이더 모듈의 정확한 높이까지 끌어 올립니다. 이것은 우리가 찾고 있는 정확한 코너 배치를 생성합니다.

하단 코너 디바이더 추가

두 개의 하단 모서리 구분선을 추가하려면 와이어프레임 보기 모드를 배포하고 방금 만든 왼쪽 및 오른쪽 구분선을 복사하여 텍스트 모듈 아래에 붙여넣습니다. 아래에).

그게 다야! 기본 레이아웃의 최종 디자인을 확인해 보겠습니다.

새로운 플로팅 코너 디자인 탐색

이 템플릿을 사용하면 가능한 몇 가지 다른 디자인을 탐색할 수 있습니다. 이 전체 섹션을 Divi 라이브러리에 저장하여 앞으로 템플릿으로 유지할 수 있습니다. 하지만 지금은 섹션을 복제하고 새로운 디자인을 탐색해 보겠습니다.

그라데이션 배경이 있는 다이아몬드 모양

템플릿을 복제한 상태에서 다중 선택 기능을 사용하여 4개의 분할기 모듈을 모두 선택합니다. 그런 다음 선택한 디바이더 중 하나에서 설정 기어 아이콘을 클릭하여 요소 설정 모달을 배포합니다. 이 단계에서 클릭 모드를 사용하는 것이 도움이 될 수 있습니다.

요소 설정에서 다음을 업데이트합니다.

그라데이션 배경 왼쪽 색상: #7cda24
그라디언트 배경 오른쪽 색상: #edf000
기울기 방향: 45deg

그런 다음 변형 옵션을 사용하여 구분선을 다이아몬드 모양으로 회전합니다.

변환 Z축 회전: 45deg

다음은 최종 디자인입니다.

기울어진 디바이더

변형 기울이기 옵션을 사용하여 훨씬 더 독특한 디자인을 위해 구분선을 기울일 수도 있습니다. 각 디바이더에 대해 별도의 스큐 디자인을 추가하거나 다중 선택을 사용하여 X 및 Y 축에서 -37deg만큼 동시에 4개 모두에 대한 변환 스큐를 업데이트할 수 있습니다.

다음은 그 모습입니다.

어두운 배경 디자인

독특한 부동 모서리 디자인을 위해 텍스트 모듈에 어두운 배경색을 추가하는 실험을 할 수도 있습니다. 다음은 변환 없이 회전 또는 기울이기를 사용하여 배경색이 #002130인 텍스트 모듈의 예입니다.

둥근 모서리 모서리

디자인에 둥근 모서리를 추가하려면 다음과 같이 둥근 모서리를 행에 추가하기만 하면 됩니다.

둥근 모서리: 20px

원형 부동 모서리

사각형 모서리를 원으로 바꾸려면 다음과 같은 사용자 정의 CSS 스니펫을 각 구분선의 기본 요소에 추가할 수 있습니다.

border-radius: 50%;

디바이더는 50px x 50px이므로 완벽한 원 디자인을 만듭니다.

보시다시피 수많은 새로운 모서리 디자인을 위해 이러한 요소를 조정할 수 있는 다양한 방법이 있습니다.

이제 디바이더 모듈 대신 플로팅 코너에 블러브 아이콘을 사용하는 방법을 살펴보겠습니다.

Blurb 아이콘으로 부동 모서리 만들기

텍스트 모듈의 각 모서리에 Blurb 아이콘을 추가하면 훨씬 더 독특한 디자인을 얻을 수 있습니다. 튜토리얼 시작 부분에서 만든 것과 동일한 레이아웃 템플릿을 사용할 수 있습니다. 유일한 차이점은 네 모서리에 디바이더 모듈 대신 블러브 모듈을 사용한다는 것입니다.

계속해서 섹션 레이아웃 템플릿의 복제본을 배포하세요.

그런 다음 텍스트 모듈 위와 아래의 구분선 모듈을 삭제합니다.

상단 2개의 광고 아이콘 모서리 추가

우리는 단지 하나의 아이콘을 표시하기 위해 블러브 모듈을 사용하기를 원하기 때문에 크기와 간격이 올바른지 확인하고 얻어야 합니다.

텍스트 모듈 위에 블러브 모듈을 추가하고 제목과 본문 텍스트를 제거합니다. 그런 다음 이미지 대신 아이콘을 클릭하여 사용하고 서클 페이스북 아이콘을 선택합니다.

그런 다음 다음 안내문 설정을 업데이트합니다(이 설정은 첫 번째 예에서 분할기 모듈에 추가한 설정과 매우 유사합니다).

배경색: #ffffff
아이콘 글꼴 크기: 50px
너비: 50px
맞춤 여백: 0px 하단
둥근 모서리: 50%
박스 섀도우: 스크린샷 참조
상자 그림자 수직 위치: 0px
상자 그림자 흐림 강도: 0px
상자 그림자 확산 강도: 20px
그림자 색상: #ffffff

주요 요소 CSS:

position: relative;

광고 이미지 CSS:

margin-bottom: 0px

Z 인덱스: 1

다음으로, 블러 모듈을 복제하여 현재 블러 바로 아래에 다른 모듈을 만들고 다음을 업데이트합니다.

모듈 정렬: 오른쪽
맞춤 여백: -50px 상단

그런 다음 맨 위의 두 개의 광고 문구 모듈을 복사하여 텍스트 모듈 아래에 붙여넣습니다(왼쪽 광고 문구가 오른쪽 광고 문구 위에 쌓인 상태로 유지되도록 하세요).

그런 다음 각 광고의 아이콘을 원하는 대로 업데이트할 수 있습니다.

다음은 최종 디자인입니다.

Blurb 아이콘 부동 모서리로 더 많은 디자인 탐색

이 설정을 사용하면 많은 독특한 디자인을 탐색할 수 있습니다. 아이콘을 변경하고, 다양한 색상 콤보를 사용하고, 변형 옵션으로 크기를 조정하거나 회전할 수도 있습니다.

다음은 텍스트 모듈에 어두운 배경색과 다양한 아이콘 색상을 사용하는 디자인의 예입니다.

여러 열 레이아웃에서 작동

요소를 함께 유지하는 한 이러한 부동 모서리 레이아웃을 여러 열에 추가할 수 있습니다.

마무리

Divi에서 콘텐츠를 위한 플로팅 코너 디자인을 만드는 것은 실제로 Divi 빌더의 힘을 보여줍니다. 모든 기본 제공 옵션을 사용할 수 있으므로 하나의 기본 레이아웃 템플릿에서 수많은 디자인 변형을 만들 수 있습니다. 새로운 디자인을 탐색하는 재미를 느끼실 수 있기를 바랍니다.

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

건배!