Divi에서 조직도를 만들고 싶으신가요?
에서 순서도 레이아웃을 만드는 방법을 알고 Divi 프로세스와 아이디어를 전달할 수 있는 많은 기회를 제공합니다. 사이트 웹. 어떤 경우에는 순서도를 사용하여 많은 요소를 포함하는 매우 복잡한 아이디어를 설명할 수 있습니다.
에 사이트 웹그러나 이러한 더 복잡한 순서도는 달성하기 어려울 수 있습니다. 특히 응답을 원하는 경우에는 더욱 그렇습니다.
이 튜토리얼에서는 컴퓨터에서 사용할 수 있는 편리한 순서도 레이아웃을 만드는 방법을 보여 드리겠습니다. 사이트 웹, 간단하고 효과적이며 반응이 좋습니다.
또한 Divi에 내장된 옵션만 사용하여 Divi를 생성하므로 사용자 정의 코드나 플러그인을 추가하는 것에 대해 걱정할 필요가 없습니다.
시작하자!
측량
이 튜토리얼에서 만들 순서도 디자인을 간단히 살펴보겠습니다.
Divi Builder로 새 페이지 만들기
시작하려면 다음을 수행해야 합니다.
WordPress 대시보드에서 페이지> 새로 추가 새 페이지를 만듭니다.
이해하기 쉬운 제목을 지정하고 클릭하십시오. Divi Builder 사용
그런 다음 클릭 건물 시작 (처음부터 구축)
그 후에 Divi에서 디자인을 시작할 빈 캔버스가 생깁니다.
Divi에서 순서도 레이아웃을 만드는 방법
1단계: 중심 광고 문구가 있는 행 만들기
Divi에서 순서도 레이아웃 생성을 시작하려면 중앙에 있는 광고 문구가 포함된 행을 생성하는 것으로 시작합니다. 이것은 순서도의 첫 번째 요소가 됩니다.
섹션 패딩
먼저 기본 섹션에 대한 섹션 설정을 열고 하단 패딩을 0px로 설정합니다.
- 패딩(하단): 0px
선
섹션 내에서 열에 행을 추가합니다.
라인 설정을 열고 다음 디자인 설정을 업데이트합니다.
- 거터 폭: 1
- 패딩(상단 및 하단): 0px
블러브 모드 디자인
첫 번째 순서도 요소를 만들기 위해 Blurb 모듈을 사용합니다.
Blurb 모듈을 인라인으로 삽입합니다.
모듈 매개변수
Blurb 모듈 설정을 엽니다. 탭 아래 내용, 기본 제목과 본문 텍스트를 유지할 수 있습니다.
그런 다음 작은 아이콘 이미지로 이미지를 업데이트하거나 내장된 Divi 아이콘 중 하나를 사용하십시오. 이 튜토리얼에서는 다음 아이콘을 사용합니다. 크라우드펀딩 레이아웃 팩 .
그런 다음 모듈에 배경색을 지정합니다.
- 배경: #f8f8f8
탭 아래 디자인, 다음을 업데이트합니다.
- 텍스트 정렬: 가운데
- 최대 너비: 400px(데스크톱 및 태블릿), 90%(전화)
- 정렬 모듈: 중앙
- 패딩: 6%(상단 및 하단), 3%(좌우)
다음으로 Blurb 모듈에 다음과 같이 테두리를 지정합니다.
- 테두리 너비: 2px
2단계: 수직선과 화살표로 연결선 만들기
순서도 레이아웃의 다음 부분에서는 중앙에 수직선과 화살표가 있는 커넥터 행을 만듭니다. 이 선은 다음 선들을 연결하는 데 사용됩니다. 내용 페이지 하단까지 계속되어야 하는 조직도의 내용입니다.
이 경우 Blurbn 모듈이 중앙에 있는 이전 줄 아래에 선과 화살표를 추가하여 순서도를 시작하려고 합니다.
새 줄을 만들고 이전 줄의 스타일을 복사/붙여넣기
이렇게 하려면 이전 행 아래의 열에 새 행을 추가합니다.
"를 사용하여 기타 모듈 설정 (또는 오른쪽 클릭 옵션), 위의 이전 행에서 스타일을 복사하여 새 행에 붙여넣습니다.
세로줄 구분 기호 만들기
세로 줄 구분자를 만들려면 새 Divider 모듈을 줄에 추가하십시오.
디바이더 설정에서 다음과 같이 디자인 설정을 업데이트합니다.
- 선 색상: #333333
- 라인 위치: 하단
- 디바이더 무게: 150px
- 너비: 2px
- 정렬 모듈: 중앙
- 여백: -1px(하단)
탭 아래 Advnaced, 다음과 같이 오버플로를 숨깁니다.
- 수평 오버플로: 숨김
- 수직 오버플로: 숨김
Blurb 모듈로 화살표 만들기
다음으로 프레젠테이션 모듈을 사용하여 구분선 위에 위치할 화살표 아이콘을 만듭니다.
화살표를 만들려면 구분선 아래에 새 Blurb 모듈을 추가하십시오.
블러브 모드 설정
모듈 설정에서 기본 제목과 본문을 제거하고 아이콘 사용, 그런 다음 화살표 아이콘을 선택합니다(스크린샷 참조).
탭 아래 디자인, 다음을 업데이트합니다.
- 아이콘 색상: #bbbbbb
- 이미지/아이콘 정렬: 중앙
- 아이콘 글꼴 크기 사용: 예
- 아이콘 글꼴 크기: 50px(데스크톱), 40px(태블릿 및 휴대폰)
- 최대 너비: 50%
- 정렬 모듈: 중앙
- 높이: 50px(데스크탑), 40px(태블릿 및 휴대폰)
탭 아래 Advnaced, 다음 CSS를 추가하십시오. 광고 이미지 :
margin-bottom: 0px;
background: #ffffff;
화살표를 선 위에 배치하려면 다음을 업데이트하십시오.
- 위치: 절대
- 위치: 센터
- Z 인덱스: 10
3단계: 순서도의 인접 부분에 대한 선 만들기
커넥터 행이 완료되면 순서도 디자인을 계속하기 위해 인접한 여러 Blurb 모듈의 다른 행을 추가합니다.
선을 추가하려면 연결선 아래에 첫 번째 선(레이아웃 상단에 생성한 중앙 광고 문구가 있는 선)을 복사하여 붙여넣기만 하면 됩니다.
회선 설정을 열고 다음을 업데이트하십시오.
- 최대 너비: 50%
- 테두리 너비: 2px
순서도의 왼쪽
이제 경계가 선에 추가되었으므로 Blurb 모듈을 왼쪽 경계선 위에 배치합니다.
이렇게 하려면 다음 디자인 설정을 업데이트하십시오.
- 정렬 모듈: 왼쪽
- 여백: 70px(상단 및 하단)
- 변환 변환 X 축: -50%
이것은 Blurb 모듈이 경계선 위에서 수평으로 중앙에 오도록 하는 핵심입니다.
순서도의 오른쪽
오른쪽 경계선에 다른 Blurb Module을 추가하려면 기존 Blurb를 복제하십시오.
광고 문구를 오른쪽 경계선에 배치하려면 탭으로 이동하세요. Advnaced 절대 위치를 지정하십시오.
- 위치: 절대
- 위치: 중앙 오른쪽
다음으로 다음 옵션을 업데이트합니다.
- 여백: 없음
- 변환 Y축 변환: -50%
- 변환 X축 변환: 50%
각 경계선의 모서리에 화살표 추가
행이 진행되는 방향에 대한 순서도를 더 명확하게 하기 위해 행 경계 행에 화살표 아이콘을 추가합니다.
왼쪽 상단 화살표
왼쪽 상단 테두리 행에 화살표를 추가하려면 커넥터 행에서 만든 화살표 Blurb 모듈을 복제하고 인접한 Blurb 모듈이 포함된 행으로 끕니다.
Duplicate Arrow Blurb 모듈을 열고 아이콘을 왼쪽 화살표로 변경합니다.
다음으로 모듈 위치의 위치를 업데이트합니다.
- 위치: 왼쪽 상단
마지막으로 다음과 같이 변환 번역 옵션을 업데이트합니다.
- 변환 Y축 변환: -50%
오른쪽 상단 화살표
오른쪽 상단 경계선에 있는 화살표를 만들려면 화살표 " 왼쪽 상단 모서리에 우리가 방금 만든 것입니다. 그런 다음 설정을 열고 위치 위치를 변경합니다.
- 위치: 오른쪽 상단
또한 오른쪽을 가리키는 화살표로 화살표 아이콘을 업데이트하십시오.
왼쪽 아래 화살표
왼쪽 하단 경계선에 있는 화살표를 만들려면 화살표 " 맨 위 오른쪽 우리가 방금 만든 것입니다.
그런 다음 설정을 열고 위치 위치를 변경합니다.
- 위치: 왼쪽 하단
다음으로 변환 변환 옵션을 업데이트합니다.
- 변환 Y축 변환: 50%
오른쪽 아래 화살표
오른쪽 하단 경계선에 있는 화살표를 만들려면 화살표 " 왼쪽 하단에 우리가 방금 만든 것입니다.
그런 다음 설정을 열고 위치 위치를 변경합니다.
- 위치: 오른쪽 하단
또한 왼쪽 화살표로 화살표 아이콘을 업데이트하십시오.
모든 화살표가 배치되면 다음을 사용하여 각각의 레이블을 업데이트할 수 있습니다. 레이어 뷰 .
4단계: 다른 커넥터 라인 추가
순서도의 인접한 두 부분과 모든 화살표가 있는 선을 완료하면 다른 연결선을 추가하여 순서도를 계속할 수 있습니다.
이렇게 하려면 위에서 만든 연결선을 복제하고 순서도의 인접 부분에서 Blurb 모듈이 포함된 줄 아래에 붙여넣습니다.
5단계: 직선형 커넥터로 흐름 사용자 지정
기존 흐름도 디자인에서 흐름은 상단 요소에서 시작하여 오른쪽 및 왼쪽 인접 요소로 분기한 다음 중간으로 돌아가 다음 중간 요소로 이동합니다.
흐름을 사용자 지정하기 위해 섹션을 복제하여 왼쪽의 인접한 프레젠테이션 요소에서 중지하고 오른쪽의 프레젠테이션 요소에서 계속하도록 순서도를 사용자 지정할 수 있습니다.
중복 섹션
이렇게 하려면 먼저 순서도가 포함된 전체 섹션을 복제합니다.
다른 왼쪽 블러브 모듈 추가
복제 섹션(하단)에서 두 개의 인접한 모듈이 포함된 행에서 왼쪽 Blurb 모듈을 찾습니다. 그런 다음 왼쪽에 있는 광고 문구를 복제하여 바로 아래에 새 광고 문구를 만듭니다.
아래쪽 화살표 및 테두리 제거
그런 다음 왼쪽 하단 화살표와 오른쪽 하단 화살표를 삭제합니다.
여러 광고 문구가 포함된 라인에 대한 라인 설정을 열고 하단 테두리를 제거합니다.
- 하단 테두리 너비: 0px
직선 경계선 연결선으로 선 만들기
이제 라인의 오른쪽 경계선을 아래의 커넥터 라인과 연결하는 오른쪽 경계선 커넥터를 사용하여 순서도 디자인을 사용자 지정하려고 합니다.
이를 위해 다른 선을 만들고 오른쪽에 사용자 정의 구분선과 윤곽선 화살표를 추가합니다.
세 가지 레이아웃으로 기존 행 아래에 새 행을 한 열 추가합니다.
탭 아래에서 다음과 같이 행 설정을 업데이트합니다. 디자인 :
- 거터 폭: 1
- 최대 너비: 50%
- 패딩: 0px(상단 및 하단)
다음으로 선에 직선 테두리를 추가합니다.
- 오른쪽 테두리 너비: 2px
그런 다음 라인에 Divider 모듈을 추가합니다.
다음과 같이 구분선 설정을 업데이트합니다.
- 선 색상: #333333
- 라인 위치: 하단
- 디바이더 무게: 2px
- 폭: 50%
- 여백: -2px(하단)
고급 탭에서 구분 기호의 위치를 업데이트합니다.
- 위치: 절대
- 위치: 오른쪽 하단
구분선이 있는 상태에서 첫 번째 섹션 세 번째 행의 오른쪽 하단 화살표에서 Blurb 모듈을 복사하여 오른쪽 구분선이 있는 행에 붙여넣습니다.
방금 복제하고 이동한 화살표의 Blurb 모듈 설정을 열고 다음을 업데이트합니다.
- 위치: 기본
- 정렬 모듈: 오른쪽
왼쪽 경계선 흐름 정지
현재 왼쪽 테두리의 일부가 왼쪽 하단의 광고 문양 아래에 노출되어 있습니다. 그것을 숨기려면 이 하단 광고의 하단 여백을 제거하기만 하면 됩니다.
6단계: 왼쪽 에지 라인 커넥터로 라인 업데이트
순서도에는 왼쪽 경계선 커넥터가 필요할 수도 있습니다. 이를 생성하기 위해 다음과 같이 오른쪽 경계선 커넥터가 있는 라인을 업데이트할 수 있습니다.
- 왼쪽 테두리 너비: 2px
- 오른쪽 테두리 너비: 0
줄 안의 구분 기호를 새 위치로 업데이트합니다.
- 위치: 왼쪽 하단
다음으로 화살표 정렬을 업데이트합니다.
- 정렬 모듈: 왼쪽
그리고 아이콘을 오른쪽 화살표로 변경합니다.
최종 결과
최종 결과를 확인하십시오.
지금 DIVI를 다운로드하세요!!!
결론
이 자습서에서는 누구나 프로세스와 아이디어를 전달하는 데 사용할 수 있는 유용한 순서도 레이아웃을 만들었습니다. 방문자 놀라운 반응형 디자인.
이를 사용하여 서비스 또는 디자인 프로세스를 보여주고, 인포그래픽을 만들거나 고객에게 내용 새로운 방식으로.
이 튜토리얼이 다음 Divi 프로젝트에 영감을 주기를 바랍니다. 우려 사항이나 제안 사항이 있으면 다음에서 저희를 찾으십시오. 댓글 섹션 그것을 논의하기 위해.
상담도 가능합니다 우리의 자원, 인터넷 사이트 작성 프로젝트를 수행하기 위해 더 많은 요소가 필요한 경우.
주저하지 말고 가이드와 상의하세요. 워드 프레스 블로그 제작 또는 Divi : 역대 최고의 워드 프레스 테마.
그러나 그동안, 이 기사를 다른 소셜 네트워크에서 공유하십시오.
...
