Divi에서 원형 요소를 디자인하기 위한 유용한 가이드

때때로 웹 사이트 디자인에는 원형 요소가 필요합니다. 웹 페이지에서 표준 상자 디자인의 단조로움을 깨는 좋은 방법입니다. 원형 요소를 만드는 것은 간단하게 들릴 수 있지만(실제로는 그렇습니다!) 몇 가지 기본 규칙에 익숙하지 않은 경우 몇 가지 불필요한 장애물에 부딪힐 수 있습니다.

예를 들어, 콘텐츠를 올바른 간격으로 원 모양 요소 내부에 정렬하고 맞추는 것이 때때로 어려울 수 있습니다. 또는 모바일 장치에서 서클을 반응형으로 만드는 것이 어려울 수 있습니다. 이러한 이유로 일부는 대신 콘텐츠에 원형 이미지 배경을 사용했습니다. 그러나 사용자 정의 이미지 배경을 사용하지 않으려면 다음으로 가장 좋은 방법은 CSS를 사용하는 것입니다. 좋은 소식은 Divi가 원형 요소를 만들기 위해 사용자 정의 CSS를 만들 필요가 없기 때문에 프로세스가 훨씬 쉬워진다는 것입니다. 따라서 Divi에서 요소에 원 모양을 부여하고 싶다면 이 게시물이 좋습니다.

이 튜토리얼에서는 Divi에서 원형 요소(섹션, 행 및 모듈 포함)를 만드는 방법에 대한 기본 사항을 안내합니다. 그런 다음 미리 만들어진 레이아웃에서 이러한 기술을 구현하는 것이 얼마나 쉬운지 보여 드리겠습니다.

확인 해봐!

엿보기

무료 원형 요소 레이아웃 예제 다운로드

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

파일 다운로드

무료로 다운로드

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

다운로드

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

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

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

시작하는 데 필요한 것

시작하려면 Divi에서 새 페이지를 만드세요. 그런 다음 페이지에 제목을 지정하고 프런트 엔드에 Divi 빌더를 배포합니다. "처음부터 빌드" 옵션을 선택합니다.

조금 후에 미리 만들어진 레이아웃을 페이지에 추가할 예정이지만 지금은 처음부터 빌드를 시작할 수 있습니다.

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

원형 요소를 만드는 세 가지 기본 단계

원형 요소를 만드는 세 가지 간단한 단계가 있습니다. 이 단계를 설명하기 위해 이 단계를 Divi Builder를 사용하여 행동 유도 모듈에 적용하겠습니다.

1단계: 높이와 너비 값이 동일한 요소 크기 조정

첫 번째 단계는 높이와 너비를 동일한 값으로 설정하는 것입니다. 기본적으로 우리는 요소를 완전한 원으로 만들기 전에 요소를 완전한 정사각형으로 만들고 싶습니다. 이 예에서 CTA 모듈의 높이와 너비를 10vw로 지정해 보겠습니다.

2단계: 네 모서리 모두에 대해 50%의 테두리 반경 추가

두 번째 단계는 요소(또는 모듈)의 테두리 반경을 네 모서리 모두에서 50%로 설정하는 것입니다. Divi에서는 "둥근 모서리" 옵션에서 요소의 테두리 반경을 변경할 수 있습니다.

3단계: 원형 요소 내에서 콘텐츠 정렬

세 번째 단계는 원형 요소의 내용을 정렬하는 것입니다. 요소의 패딩을 조정하여 이를 수행할 수 있습니다. (또한 이 포스트 뒷부분에서 내용을 세로로 가운데에 맞추기 위해 flex를 사용하는 방법을 다룹니다)

이 예에서 다음 패딩을 추가하여 콘텐츠를 원형 요소의 중심에 더 가깝게 만들 수 있습니다.

맞춤 패딩: 상단 18vw, 왼쪽 3vw, 오른쪽 3vw

물론 텍스트/콘텐츠가 모바일의 원형 요소 안에 맞도록 조정해야 할 수도 있지만 이것은 기본 설정을 다룹니다.

vw 길이 단위를 사용하여 원형 요소의 크기와 간격을 지정했음을 알 수 있습니다. 이는 보다 일관된 반응형 디자인을 만드는 데 유용합니다. 설명하겠습니다.

상대 길이 단위를 사용하여 원형 요소를 반응형으로 만들기

높이와 너비에 대해 VW 길이 단위 사용

모든 상대 길이 단위 중에서 vw 길이 단위는 반응형 디자인에서 제가 가장 좋아하는 것 중 하나입니다. vw 길이 단위는 부모 요소가 아닌 브라우저 창의 너비를 기준으로 하므로 브라우저 창 크기에 따라 매끄럽게 조정되는 일관된 디자인을 얻을 수 있습니다.

브라우저 너비를 축소할 때 예제 순환 호출 모듈이 어떻게 보이는지 살펴보겠습니다.

원형 요소 콘텐츠에 VW 길이 단위 사용

원형 요소의 크기와 내용에 대해 vw 길이 단위를 사용하는 것은 반응형 디자인에 좋은 조합입니다. 기본적으로 이것은 모든 브라우저에서 일관된 디자인을 위해 콘텐츠(텍스트 또는 이미지와 같은)가 원 요소의 크기로 매끄럽게 조정되도록 합니다. 하지만 모바일에서는 텍스트가 너무 작아질 수 있으므로 본문 텍스트에 vw 길이 단위를 사용할 때는 주의해야 합니다. 제목에 vw 길이 단위를 사용한 다음 필요에 따라 본문 텍스트의 크기를 픽셀로 조정하는 것을 좋아합니다.

또한 휴대폰 디스플레이에 원형 요소 디자인을 유지하려는 경우 콘텐츠를 최소화하고 최대 공간을 위해 원형 요소의 크기를 조정해야 합니다.

현재 예제를 사용하여 제목 텍스트에 vw 길이 값을 지정한 다음 다음과 같이 모바일에서 모듈 크기를 조정할 수 있습니다.

제목 텍스트 크기: 4vw
너비(전화): 70vw
높이 (전화: 70vw

보시다시피 이제 모든 콘텐츠가 휴대폰 디스플레이의 원형 요소 안에 잘 들어갑니다.

픽셀은 어떻습니까?

픽셀과 같은 절대 길이 단위를 사용하여 원의 크기를 조정하려는 경우 완벽합니다. 원형 요소가 브라우저 창 내부에 맞도록 하려면 태블릿 및 휴대폰 디스플레이의 각 중단점에서 필요한 크기 조정을 확인하고 수행하면 됩니다. 경우에 따라 픽셀을 사용하면 태블릿 및 휴대폰 디스플레이에서 크기를 적절하게(또는 더 정확하게) 얻기가 더 쉬울 수 있습니다.

예를 들어, 동일한 행동 유도 모듈을 사용하고 픽셀(vw 대신)을 사용하여 모듈의 크기와 간격을 지정해 보겠습니다.

다음과 같이 높이, 너비 및 패딩을 업데이트할 수 있습니다.

너비: 500px
높이: 500px
맞춤 패딩: 상단 200픽셀, 왼쪽 20픽셀, 오른쪽 20픽셀

이 디자인은 데스크탑에서 비슷하게 보이지만 전화기 디스플레이에서 원형 요소를 볼 때마다 문제가 발생합니다. 원형 요소는 픽셀(절대 길이 단위)을 사용하여 크기가 조정되므로 원형 요소는 휴대전화 디스플레이의 컨테이너 및 브라우저 외부로 확장됩니다.

그렇기 때문에 모바일 디스플레이에서 너비와 패딩 픽셀 값을 조정하는 것이 중요합니다. 예를 들어 너비와 높이를 대신 300px로 변경해야 할 수 있습니다.

% 길이 단위가 원형 요소 크기 조정에 제대로 작동하지 않는 이유

원형 요소에 대해 더 반응이 빠른 솔루션을 원하면 백분율을 사용하는 것이 답이라고 생각할 수 있습니다. 그러나 웹 페이지에서 요소의 크기를 조정할 때 높이에 대한 백분율 길이 단위는 너비에 대한 백분율 길이 단위와 같은 방식으로 작동하지 않습니다. 이는 요소의 기본 높이가 일반적으로 기본값(높이: 자동)으로 유지되기 때문입니다. 예를 들어 Divi 모듈에 100% 높이를 설정하려고 하면 상위 컨테이너(열, 행, 섹션 등)가 모두 높이에 대해 정의되지 않은 값이 있기 때문에 모듈이 조정되지 않습니다. 브라우저는 기본적으로 모듈을 100% 무(할 수 없음)로 설정하려고 하지 않습니다. 이것은 너비의 경우가 아닙니다. 모든 블록 요소(또는 div)의 기본 너비는 100%입니다. 따라서 모든 섹션, 행 및 모듈은 설정에 의해 변경되지 않는 한 기본 100% 너비를 갖습니다. 이것이 % 길이 단위가 반응형 원형 요소를 만들 때 사용하기에 가장 좋은 옵션이 아닌 이유입니다. 원형 요소는 모든 브라우저 크기에서 동일한 높이와 너비를 가져야 하므로 높이에 백분율 길이 단위를 사용하여 이를 달성하기 어렵습니다. 그러나 상위 요소에 더 많은 사용자 정의 CSS를 적용하여 높이와 너비를 100%로 만드는 방법이 있습니다. 그러나 Divi에서 원형 요소를 만드는 경우 vw 길이 단위를 사용하는 것이 더 쉽다는 것을 알 수 있습니다.

원형 요소 내 콘텐츠 정렬

원형 요소 내에서 콘텐츠를 정렬하려는 경우 Divi를 사용할 때 간단하다고 생각하는 두 가지 옵션이 있습니다. 패딩을 사용하여 콘텐츠를 정렬하면 circle 요소 내에서 콘텐츠를 표시할 위치를 더 잘 제어할 수 있습니다. 또는 flex 속성(패딩 포함)을 사용하여 콘텐츠가 원의 중앙에 직접 표시되도록 할 수 있습니다.

패딩을 사용하여 원형 요소 콘텐츠 정렬

패딩을 사용하여 원 요소 내부의 콘텐츠를 정렬하려면 컨테이너 또는 브라우저 너비의 크기에 따라 패딩이 증가하거나 감소하도록 상대 길이 단위(예: % 또는 vw)를 사용하는 것이 좋습니다. 상대 단위를 사용하여 크기가 조정된 원형 요소 내부의 패딩에 절대 길이 단위를 사용하고 싶지 않습니다. 결과는 일관성이 없고 모바일에서는 디자인이 깨집니다. 예를 들어 높이가 10vw이고 너비가 10vw인 원형 요소가 있는 경우. 브라우저의 너비가 줄어들면 해당 요소의 크기도 줄어듭니다. 요소 상단에 100px 패딩을 추가하면 브라우저 너비를 조정하고 디자인을 중단할 때마다 100px가 유지됩니다. 그러나 3vw 패딩을 추가하면 이 패딩이 요소와 잘 조정됩니다.

이것이 내가 행동 유도 모듈 ​​예제에서 vw 패딩을 사용하도록 제안한 이유입니다.

Flex 속성을 사용하여 원형 요소 콘텐츠 정렬

콘텐츠가 수직으로 가운데에 오도록 하기 위해 상단 및 하단 패딩을 배치하는 것에 대해 너무 걱정하고 싶지 않다면 flex 속성을 사용할 수 있습니다. 부모(원형 요소)에 CSS 조각 몇 개를 추가하면 모든 콘텐츠가 세로 중앙에 유지되도록 할 수 있습니다. 그런 다음 정렬, 패딩 또는 여백을 사용하여 콘텐츠도 수평 중앙에 유지되도록 할 수 있습니다.

내가 의미하는 바는 다음과 같습니다.

이 예를 사용하여 행동 유도 모듈 ​​설정을 엽니다.

그런 다음 위쪽 및 아래쪽 패딩을 0px로 설정합니다.

그런 다음 고급 탭으로 이동하여 다음 CSS 스니펫을 기본 요소에 추가합니다.

display:flex;
align-items: center;

이 특정 모듈의 경우 프로모션 설명 아래에 정렬을 약간 떨어뜨릴 추가 패딩이 있습니다. 따라서 프로모션 설명에 다음 CSS를 추가하여 제거할 수 있습니다.

padding-bottom: 0px

자세한 내용은 콘텐츠를 세로로 정렬하는 방법에 대한 이 게시물을 확인하세요.

실행하기: 미리 만들어진 레이아웃에 원형 요소 추가하기

이제 Divi에서 원형 요소를 만드는 방법을 더 잘 이해했으므로 실제 레이아웃 디자인에서 이것이 어떻게 작동하는지 살펴보겠습니다. 이 예에서는 Farmer Layout Pack에서 Divi의 Farmer 랜딩 페이지를 사용하겠습니다.

농부 방문 페이지 레이아웃을 페이지에 로드

시작하려면 먼저 Farmer Landing Page Layout을 페이지에 추가해 보겠습니다. 이렇게 하려면 설정 메뉴와 Divi Builder 하단을 열고 라이브러리에서 로드 버튼을 클릭합니다. 라이브러리에서 로드 팝업에서 Farmer Layout Pack을 찾아 선택합니다. 그런 다음 농부 방문 페이지를 사용하려면 클릭하십시오.

그러면 페이지에 레이아웃이 로드됩니다.

원형 섹션 헤더 만들기

첫 번째 예에서는 레이아웃의 상단 헤더 섹션을 원형 요소로 변환합니다. 이를 위해 우리는 세 가지 기본 규칙을 사용할 것입니다.

1: 높이 및 너비 값이 동일한 크기 요소
2: 네 모서리 모두에 대해 50%의 테두리 반경 추가
3: 원형 요소 내에서 콘텐츠 정렬

섹션 설정을 열고 다음을 업데이트합니다.

너비: 70vw(데스크톱), 70vw(태블릿), 80vw(휴대폰)
최대 너비: 1080px
섹션 정렬: 중앙
높이: 70vw(데스크톱), 70vw(태블릿), 80vw(휴대폰)
최대 높이: 1080px

태블릿 및 휴대폰에 대한 추가 높이 및 너비 값을 추가했으며 최대 높이 및 최대 너비도 추가했습니다. 중요한 것은 모든 높이 값과 모든 너비 값이 동일한지 확인하는 것입니다.

이제 네 모서리에 경계 반경 50%를 추가해야 합니다.

둥근 모서리: 50%(네 모서리 모두)

이것은 섹션이므로 콘텐츠에는 여러 모듈이 있는 2열 행이 포함됩니다. 이만큼 많은 콘텐츠가 있으므로 콘텐츠가 섹션에 맞는지 확인하기 위해 모듈의 크기를 약간 조정해야 합니다.

먼저 섹션 제목이 포함된 1열의 최상위 텍스트 모듈 설정을 엽니다. 그런 다음 다음과 같이 제목 텍스트 크기를 업데이트합니다.

제목 텍스트 크기: 4vw

그런 다음 헤더를 포함하는 텍스트 모듈 바로 아래에 있는 텍스트 모듈의 본문 텍스트 양을 줄이십시오.

이제 행의 간격을 조정하여 내용을 정렬할 수 있습니다. 행 설정을 열고 다음을 업데이트합니다.

사용자 정의 여백: 10vw 상단(데스크톱), 5vw(태블릿), 0vw(전화)
맞춤 패딩: 왼쪽 3vw, 오른쪽 3vw

원 모양을 더 눈에 띄게 만들기 위해 상단 섹션 구분선을 추가하고 배경 이미지 위치를 상단 왼쪽으로 이동할 수 있습니다.

이제 결과를 확인해보자.

원형 블러브 모듈 만들기

이제 이 레이아웃에서 원형 광고 문구를 만드는 방법을 알아보겠습니다. 이 예에서는 "Our Products" 섹션 아래에 있는 4개의 광고 모듈을 사용하겠습니다. 찾으면 2열 상단에 있는 블러브 모듈의 설정을 엽니다.

그런 다음 다음과 같이 모듈의 크기를 업데이트합니다.

이미지 너비: 7vw
너비: 50vw(데스크톱), 80vw(전화)
최대 너비: 400px
모듈 정렬: 중앙
높이: 50vw(데스크톱), 80vw(전화)
최대 높이: 400px

다음으로 테두리 반경 또는 둥근 모서리를 추가합니다.

둥근 모서리: 50%

그런 다음 다음과 같이 콘텐츠 디자인과 간격을 업데이트해 보겠습니다.

이미지/아이콘 배치: 상단
제목 텍스트 크기: 2vw(데스크톱), 20px(태블릿)
텍스트 방향: 중앙

맞춤 패딩: 위쪽 0vw, 아래쪽 0vw, 왼쪽 4vw, 오른쪽 4vw

마지막으로 Main Element에 다음 사용자 지정 CSS를 추가하여 flex 속성을 사용하여 콘텐츠를 세로로 정렬해 보겠습니다.

display: flex;
align-items: center;

섹션의 모든 Blurbs에 원형 스타일 확장

이것은 첫 번째 모듈의 원형 디자인을 처리합니다. 이제 우리가 해야 할 일은 블러 모듈 디자인 설정을 섹션의 나머지 세 블러브로 확장하는 것입니다. 이렇게 하려면 방금 디자인한 광고 문구 모듈을 마우스 오른쪽 버튼으로 클릭하고 "Blurb 스타일 확장"을 선택합니다. 스타일 확장 팝업에서 섹션 전체에 스타일을 확장하도록 선택합니다.

최종 결과

이제 최종 결과를 확인해보자.

마지막 생각들

Divi에서 원형 요소를 만드는 방법에 대한 몇 가지 유용한 팁을 배웠기를 바랍니다. 세 가지 기본 단계와 길이 단위를 적절히 사용하여 요소의 크기와 간격을 지정하는 방법을 이해하면 원하는 원형 디자인을 매우 쉽게 만들 수 있습니다. 그리고 기존 또는 미리 만들어진 Divi 레이아웃에 일부 원형 요소를 통합하는 것은 정말 재미있을 수 있습니다. 원형 모듈, 행 또는 전체 섹션을 만드는 방법을 자유롭게 탐색하십시오!

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

건배!