Divi로 아름다운 모바일 소셜 팔로우 바이오스를 만드는 방법 (무료 다운로드!)

개인 웹사이트를 만들 때 쉽게 연결할 수 있는 소셜 팔로우 약력 페이지가 있으면 도움이 됩니다. 귀하가 하는 일과 사람들이 귀하의 작업을 볼 수 있는 위치에 대한 요약이 포함된 훌륭한 온라인 방문 카드입니다. 모바일 소셜 팔로우 바이오스 내에서 공유되는 정보는 일반적으로 이미지, 이름, 직함, 간단한 설명 및 포트폴리오 링크로 제한됩니다. 방문자가 귀하에게 연락할 수 있도록 CTA를 추가할 수도 있습니다.

이 게시물에서는 Divi를 사용하여 두 개의 아름다운 모바일 소셜 팔로우 바이오스를 만드는 방법을 보여 드리겠습니다. 튜토리얼이 끝나면 바로 시작할 수 있도록 두 예제의 JSON 파일도 공유합니다.

가자!

시사

자습서를 시작하기 전에 처음부터 다시 만들 두 가지 예를 간단히 살펴보겠습니다.

실시예 1

실시예 2

예제 #1 재생성 시작

새 섹션 추가

배경색

첫 번째 예제부터 시작하겠습니다! 새 페이지를 만들거나 기존 페이지를 열고 일반 섹션을 추가하십시오. 섹션 설정을 열고 흰색 배경색을 추가합니다.

• 배경색: #ffffff

간격

그런 다음 섹션의 간격 설정으로 이동하여 몇 가지를 변경합니다. 화면 크기에 따라 값이 다르다는 것을 알 수 있습니다. 왼쪽 및 오른쪽 패딩을 수정하여 다양한 화면 크기에서 동일한 종류의 슬림한 디자인을 유지하고 있습니다.

• 상단 패딩: 50px(데스크톱 및 태블릿), 0px(전화)
• 하단 패딩: 50px(데스크톱 및 태블릿), 0px(전화)
• 왼쪽 패딩: 36vw(데스크탑), 23vw(태블릿), 0vw(전화)
• 오른쪽 패딩: 36vw(데스크톱), 23vw(태블릿), 0vw(전화)

행 #1 추가

열 구조

다음 열 구조를 사용하여 섹션에 새 행을 계속 추가합니다.

배경색

아직 모듈을 추가하지 않고 행 설정을 열고 배경색을 추가하십시오.

• 배경색: #333333

사이징

그런 다음 디자인 탭의 크기 설정으로 이동하여 열과 행 사이의 모든 사용자 지정 공간을 제거합니다.

• 이 행을 전체 너비로 만들기: 예
• 사용자 지정 거터 너비 사용: 예
• 거터 폭: 1

박스 섀도우

우리는 또한 더 큰 화면 크기에서 약간의 깊이를 만들기 위해 상자 그림자를 추가하고 있습니다.

• 상자 그림자 흐림 강도: 80px
• 그림자 색상: rgba(0,0,0,0.3)

이미지 모듈 추가

이미지 업로드

모듈 추가를 시작할 시간입니다! 1:1 비율의 이미지 모듈로 시작합니다. 예를 들어 우리가 사용하는 이미지의 너비와 높이는 '500px'입니다.

조정

이미지를 업로드했으면 디자인 탭으로 이동하여 이미지 정렬을 변경합니다.

• 이미지 정렬: 중앙

사이징

다음 크기 설정에서 너비를 수정하여 이미지 크기를 줄입니다.

• 폭: 33%
• 모듈 정렬: 중앙

국경

또한 테두리 설정의 각 모서리에 '50vw'를 추가하여 이미지를 원으로 바꾸고 있습니다. 그 위에 다음 설정을 사용하여 흰색 테두리를 추가합니다.

• 테두리 너비: 8px
• 테두리 색상: #ffffff

박스 섀도우

마지막으로 상자 그림자를 추가하여 입체적인 디자인을 만듭니다.

• 상자 그림자 수직 위치: 40px
• 상자 그림자 흐림 강도: 100px
• 그림자 색상: #000000

텍스트 모듈 #1 추가

H3 콘텐츠 추가

다음 모듈로! 일부 H3 콘텐츠가 포함된 이미지 모듈 바로 아래에 텍스트 모듈을 추가합니다.

H3 텍스트 설정

디자인 탭으로 이동하여 H3 텍스트 설정을 변경하여 계속합니다.

• 제목 3 글꼴: Open Sans
• 제목 3 글꼴 두께: 반 굵게
• 제목 3 텍스트 정렬: 가운데
• 제목 3 텍스트 색상: #ffffff
• 제목 3 줄 높이: 0.1em

간격

또한 이미지 모듈과 이 텍스트 모듈 사이에 공간을 만들기 위해 상단 여백을 추가하고 있습니다.

• 상단 여백: 30px

텍스트 모듈 #2 추가

콘텐츠 추가

다음으로 필요한 모듈은 또 다른 텍스트 모듈입니다. 내용 상자에 직함을 추가하십시오.

텍스트 설정

그런 다음 디자인 탭으로 이동하여 텍스트 설정을 변경합니다.

• 텍스트 글꼴: Open Sans
• 텍스트 글꼴 두께: 일반
• 텍스트 색상: #919191
• 텍스트 방향: 중앙

텍스트 모듈 #3 추가

콘텐츠 추가

자신에 대한 간단한 설명과 함께 다른 텍스트 모듈을 추가하여 계속하십시오.

텍스트 설정

텍스트 설정으로 이동하여 몇 가지를 변경합니다.

• 텍스트 글꼴: Open Sans
• 텍스트 색상: #b7b7b7
• 텍스트 줄 높이: 1.6em
• 텍스트 방향: 중앙

사이징

모듈의 너비도 수정하십시오.

• 폭: 68%
• 모듈 정렬: 중앙

간격

그리고 추가 공간을 만들기 위해 위쪽과 아래쪽 여백을 추가합니다.

• 상단 여백: 30px
• 하단 여백: 30px

버튼 모듈 추가

사본 추가

이 행에서 필요한 다음이자 마지막 모듈은 버튼 모듈입니다. 사본을 추가하십시오.

조정

그런 다음 디자인 탭으로 이동하여 이전 모듈과 일치하도록 버튼 정렬을 변경합니다.

• 버튼 정렬: 중앙

버튼 설정

버튼 설정에서 버튼 모양을 변경하여 계속하십시오.

• 버튼에 사용자 정의 스타일 사용: 예
• 버튼 텍스트 크기: 13px
• 버튼 텍스트 색상: #ffffff
• 색상 1: #ad32ff
• 색상 2: #32baff
• 기울기 방향: 96deg
• 버튼 테두리 너비: 0px
• 버튼 테두리 반경: 30px
• 버튼 글꼴: Open Sans
• 글꼴 두께: 매우 굵게
• 글꼴 스타일: 대문자

간격

다음으로 사용자 정의 여백과 패딩을 추가하십시오.

• 하단 여백: 50px
• 상단 패딩: 15px
• 하단 패딩: 15px
• 왼쪽 패딩: 50px
• 오른쪽 패딩: 50px

박스 섀도우

그리고 박스 섀도우를 추가하여 버튼 디자인을 완성합니다.

• 상자 그림자 수직 위치: 20px
• 상자 그림자 흐림 강도: 80px
• 그림자 색상: rgba(0,0,0,0.69)

행 #2 추가

열 구조

다음 줄로! 다음 열 구조를 사용합니다.

그라데이션 배경

아직 모듈을 추가하지 않고 행 설정을 열고 그라데이션 배경을 추가합니다.

• 색상 1: #1e1e1e
• 색상 2: #3f3f3f
• 그라디언트 유형: 방사형
• 방사형 방향: 왼쪽 상단
• 시작 위치: 26%
• 배경 이미지 위에 그라디언트 배치: 예

배경 이미지

다음 이미지를 컴퓨터에 저장하고 행의 배경 이미지로 사용합니다.

다음 배경 설정과 함께:

• 배경 이미지 크기: 실제 크기
• 배경 이미지 위치: 중앙
• 배경 이미지 반복: 반복 없음
• 배경 이미지 혼합: 하드 라이트

사이징

그런 다음 디자인 탭으로 이동하여 열과 행 사이의 모든 공간을 제거합니다. 이것은 우리가 얻는 행 공간을 최대한 활용하는 데 도움이 될 것입니다.

• 이 행을 전체 너비로 만들기: 예
• 사용자 지정 거터 너비 사용: 예
• 거터 폭: 1

간격

다음으로 사용자 정의 패딩을 추가하십시오.

• 상단 패딩: 84px
• 하단 패딩: 84px
• 왼쪽 패딩: 4vw(데스크톱), 7vw(태블릿), 14vw(전화)
• 오른쪽 패딩: 4vw(데스크톱), 7vw(태블릿), 14vw(전화)

박스 섀도우

상자 그림자와 함께.

• 상자 그림자 흐림 강도: 80px
• 그림자 색상: rgba(0,0,0,0.3)

표시하다

모든 소셜 팔로우 아이콘이 나란히 표시되도록 하기 위해 행의 기본 요소에 CSS 코드 한 줄을 추가합니다.

display: flex;

열 1에 소셜 미디어 팔로우 모듈 추가

조정

열 1에서 필요한 첫 번째 모듈은 소셜 미디어 팔로우 모듈입니다. 모듈을 추가했으면 디자인 탭에서 항목 정렬을 변경합니다.

• 항목 정렬: 중앙

새 소셜 네트워크 추가

새 소셜 네트워크를 추가하여 계속하십시오. 이 예에서는 Dribbble을 사용합니다.

링크

Dribbble 프로필에 링크를 추가하세요.

그라데이션 배경

그런 다음 다음 설정을 사용하여 그라데이션 배경을 변경합니다.

• 색상 1: #ea0061
• 색상 2: #ea4c8d
• 기울기 방향: 136deg

간격

그리고 사용자 정의 패딩을 추가하여 모듈의 크기를 늘립니다.

• 상단 패딩: 20px
• 하단 패딩: 20px
• 왼쪽 패딩: 20px
• 오른쪽 패딩: 20px

국경

또한 테두리 설정의 각 모서리에 '20vw'를 추가하여 모듈을 원으로 바꾸고 있습니다.

박스 섀도우

마지막으로 상자 그림자를 추가합니다.

• 상자 그림자 수직 위치: 20px
• 상자 그림자 흐림 강도: 80px
• 그림자 색상: #000000

열 1에 텍스트 모듈 #1 추가

콘텐츠 추가

다음 첫 번째 열에 텍스트 모듈을 추가합니다.

텍스트 설정

텍스트 설정을 변경합니다.

• 텍스트 글꼴: Open Sans
• 텍스트 글꼴 두께: 매우 굵게
• 텍스트 색상: #ffffff
• 텍스트 방향: 중앙

열 1에 텍스트 모듈 #2 추가

콘텐츠 추가

이전 항목 아래에 다른 항목을 추가합니다.

텍스트 설정

이 모듈의 텍스트 설정도 변경하십시오.

• 텍스트 글꼴: Open Sans
• 텍스트 색상: #898989
• 텍스트 크기: 11px
• 텍스트 방향: 중앙

열 1의 모듈을 두 번 복제하고 나머지 열에 중복 배치

1열의 모든 모듈을 사용자 정의했으면 계속해서 두 번 복제할 수 있습니다. 행의 나머지 두 열에 복제본을 배치합니다.

소셜 네트워크 변경

물론 소셜 네트워크를 변경해야 합니다.

소셜 네트워크 링크 변경

링크와 함께.

소셜 네트워크 그라데이션 배경 변경

그리고 네트워크 그라디언트 배경.

• 색상 1: #0043ff
• 색상 2: #00에이스

• 색상 1: #ea2c59
• 색상 2: #fed270

예제 #2 재생성 시작

새 섹션 추가

배경색

다음 예제로 넘어갑니다! 흰색 배경색으로 새 섹션을 추가합니다.

• 배경색: #ffffff

간격

다음으로 사용자 정의 패딩을 추가하십시오.

• 상단 패딩: 50px(데스크톱 및 태블릿), 0px(전화)
• 하단 패딩: 50px(데스크톱 및 태블릿), 0px(전화)
• 왼쪽 패딩: 36vw(데스크톱), 23vw(태블릿), 4vw(전화)
• 오른쪽 패딩: 36vw(데스크톱), 23vw(태블릿), 4vw(전화)

행 #1 추가

열 구조

다음 열 구조를 사용하여 새 행을 계속 추가합니다.

사이징

아직 모듈을 추가하지 않고 행 설정의 디자인 탭으로 이동하여 크기 설정을 변경합니다.

• 이 행을 전체 너비로 만들기: 예
• 사용자 지정 거터 너비 사용: 예
• 거터 폭: 1

이미지 모듈 추가

이미지 업로드

모듈 추가를 시작할 시간입니다! 우리가 필요로 하는 첫 번째 모듈은 1:1 비율의 이미지 모듈입니다.

조정

이미지 정렬을 변경합니다.

• 이미지 정렬: 중앙

사이징

너비도 수정합니다.

• 폭: 33%
• 모듈 정렬: 중앙

국경

그리고 테두리 설정에서 각 모서리에 '20px'를 추가합니다.

박스 섀도우

은은한 박스 섀도우를 더해 이미지 디자인을 완성해보세요.

• 상자 그림자 흐림 강도: 51px
• 그림자 색상: rgba(0,0,0,0.37)

텍스트 모듈 #1 추가

H3 콘텐츠 추가

다음으로 필요한 모듈은 텍스트 모듈입니다. 선택한 H3 콘텐츠를 추가합니다.

H3 텍스트 설정

디자인 탭에서 H3 텍스트 설정을 변경합니다.

• 제목 3 글꼴: Open Sans
• 제목 3 글꼴 두께: 매우 굵게
• 제목 3 글꼴 스타일: 대문자
• 제목 3 텍스트 정렬: 가운데
• 제목 3 텍스트 색상: #000000
• 제목 3 글자 간격: -1px
• 제목 3 줄 높이: 0.9em

간격

다음으로 위쪽 여백을 추가합니다.

• 상단 여백: 30px

텍스트 모듈 #2 추가

콘텐츠 추가

다른 텍스트 모듈을 추가하십시오.

텍스트 설정

텍스트 설정을 수정합니다.

• 텍스트 글꼴: Open Sans
• 텍스트 색상: #919191
• 텍스트 방향: 중앙

행 #2 추가

열 구조

다음 열 구조를 사용하여 새 행을 계속 추가합니다.

배경색

아직 모듈을 추가하지 않고 행 설정을 열고 행 배경색을 변경하십시오.

• 배경색: #ffffff

2열 배경색

두 번째 열에도 배경색을 추가합니다.

• 2열 배경색: #efefef

조정

왼쪽 행 정렬을 사용하고 있는지 확인하십시오.

• 행 정렬: 왼쪽

사이징

다음으로 크기 조정 설정으로 이동하여 몇 가지를 변경합니다.

• 사용자 정의 너비 사용: 예
• 단위: %
• 사용자 정의 너비: 67%
• 사용자 지정 거터 너비 사용: 예
• 거터 폭: 1
• 열 높이 균등화: 예

간격

또한 행과 열에 사용자 지정 패딩을 추가하고 있습니다.

• 상단 패딩: 0px
• 하단 패딩: 0px
• 열 1 상단 패딩: 20px
• 열 1 하단 패딩: 20px
• 열 2 상단 패딩: 20px
• 2열 하단 패딩: 20px

국경

왼쪽 상단, 오른쪽 상단 및 왼쪽 하단 모서리에 '14px'를 추가합니다.

박스 섀도우

그리고 은은한 박스 섀도우를 더해 줄 디자인을 완성해보세요.

• 상자 그림자 흐림 강도: 80px
• 그림자 색상: rgba(0,0,0,0.17)

열 1에 소셜 미디어 팔로우 모듈 추가

조정

첫 번째 열에는 소셜 미디어 팔로우 모듈이 필요합니다. 항목 정렬을 변경합니다.

• 항목 정렬: 중앙

새 소셜 네트워크 추가

그런 다음 새 소셜 네트워크를 추가합니다. 우리는 Dribbble을 사용하고 있습니다.

링크

Dribbble 포트폴리오에 링크를 추가하십시오.

그라데이션 배경

그리고 소셜 네트워크의 그라데이션 배경을 변경합니다.

• 색상 1: #ea0061
• 색상 2: #ea4c8d
• 기울기 방향: 136deg

간격

다음으로 몇 가지 사용자 정의 패딩 값을 추가합니다.

• 상단 패딩: 20px
• 하단 패딩: 20px
• 왼쪽 패딩: 20px
• 오른쪽 패딩: 20px

국경

그리고 소셜 네트워크의 각 모서리에 '10px'를 추가합니다.

박스 섀도우

은은한 박스 섀도우를 더해 모듈 디자인을 완성해보세요.

• 상자 그림자 흐림 강도: 80px
• 그림자 색상: rgba(0,0,0,0.3)

열 2에 텍스트 모듈 #1 추가

콘텐츠 추가

두 번째 열에 텍스트 모듈을 추가합니다.

텍스트 설정

그에 따라 텍스트 설정을 변경합니다.

• 텍스트 글꼴: Open Sans
• 텍스트 글꼴 두께: 매우 굵게
• 텍스트 색상: #000000
• 텍스트 방향: 중앙

간격

다음으로 상단 여백을 추가하여 공간을 만듭니다.

• 상단 여백: 10px

열 2에 텍스트 모듈 #2 추가

콘텐츠 추가

열 2에서 필요한 두 번째 모듈은 또 다른 텍스트 모듈입니다.

텍스트 설정

텍스트 설정을 변경합니다.

• 텍스트 글꼴: Open Sans
• 텍스트 색상: #898989
• 텍스트 크기: 11px
• 텍스트 방향: 중앙

복제 행 #2

행 수정이 완료되면 계속해서 한 번 복제할 수 있습니다.

모듈 교체

다음으로 모듈을 교체하십시오.

열 1 배경색 추가

그런 다음 중복 행에 열 1 배경색을 추가합니다.

• 열 1 배경색: #dbdbdb

열 2 배경색 제거

다음 열 2 배경색을 제거합니다.

행 정렬 변경

행 정렬도 변경하십시오.

• 행 정렬: 오른쪽

행 크기 변경

크기 설정에서 사용자 정의 너비와 함께.

• 사용자 정의 너비: 66.99%

행 테두리 변경

또한 '14px'가 오른쪽 상단 및 오른쪽 하단 모서리에만 할당되도록 합니다.

소셜 팔로우 네트워크 변경

소셜 네트워크를 변경하여 계속하십시오.

소셜 팔로우 네트워크 그라데이션 배경 변경

그라데이션 배경과 함께.

• 색상 1: #0043ff
• 색상 2: #00에이스

소셜 팔로우 행 모두 복제

소셜 팔로우 행이 모두 완료되면 각각을 복제할 수 있습니다.

중복 #1의 테두리 변경

첫 번째 복제본의 둥근 모서리를 변경합니다.

중복 #1의 소셜 팔로우 네트워크 변경

소셜 네트워크와 함께합니다.

중복 #1의 그라데이션 배경 변경

그리고 그라데이션 배경입니다.

• 색상 1: #ea2c59
• 색상 2: #fed270

중복 #2의 테두리 변경

두 번째 복제본의 둥근 모서리도 변경하여 계속하십시오.

중복 #2의 소셜 팔로우 네트워크 변경

소셜 네트워크와 함께합니다.

중복 #2의 그라데이션 배경 변경

그리고 다시 한 번, 소셜 네트워크에 할당된 그라디언트 배경.

• 색상 1: #00306b
• 색상 2: #007bb6

모바일 소셜 팔로우 바이오스 무료 다운로드

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

파일 다운로드

무료로 다운로드

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

다운로드

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

시사

이제 모든 단계를 거쳤으므로 다시 만든 두 예제의 결과를 최종적으로 살펴보겠습니다.

실시예 1

실시예 2

마지막 생각들

이 게시물에서 우리는 모바일 장치를 위한 멋진 소셜 팔로우 바이오스를 만드는 방법을 보여주었습니다. 이 디자인을 온라인 방문 카드로 사용하고 사람들을 이 페이지로 리디렉션하여 그들이 연락하거나 포트폴리오 링크를 볼 수 있도록 할 수 있습니다. 질문이나 제안 사항이 있으면 아래 의견 섹션에 의견을 남겨주세요!