Divi 5로 페이지 디자인을 업데이트하는 가장 빠른 방법

Divi 5는 더 빠르게 작업하고보다 자유롭게 설계 할 수 있도록 소수의 현명한 새로운 도구를 소개합니다. 그러나 손가락 끝에 많은 힘이 있기 때문에 특히 기존 레이아웃을 업데이트 할 때 시작 장소에 대해 확신이 없습니다.

아마도 이미 간격을 조정하고 색상 조정 및 레이아웃을 정리하는 방법을 알고 있으므로이 게시물은 기본 사항을 다시 배치하는 것이 아닙니다. Divi 5로 더 빨리 수행하는 것입니다. 아래 단계에서는 기존 페이지에서 팔로우 할 수있는 실제 업데이트 워크 플로우를 안내합니다. 그리고 최근의 변화가 압도적이라고 느꼈다면 여기에서 시작하십시오. 명확성과 자신감으로 완화 할 수 있습니다.

Divi 5로 페이지 디자인을 업데이트하는 8 단계

이 튜토리얼의 경우 Divi Layout Pack 라이브러리의 비즈니스 CV 방문 페이지를 사용하고 있습니다.

YouTube 채널을 구독하십시오

Divi 5의 새로운 도구를 사용하여 페이지를 업데이트하는 방법을 살펴보고, 변수를 설계하고, 변수를 설계하고, 속성을 확장하여 워크 플로우 속도를 높이고 반복 편집을 줄입니다. 시작합시다.

1. 산만없는 편집을 위해 대시 보드를 최적화하십시오

레이아웃을 업데이트 할 때 약간의 중단조차도 집중할 수 있습니다. 섹션 사이를 점프하고, 반복적으로 설정을 열고, 중단 한 곳을 추적 할 수 있습니다. 이러한 종류의 지연은 특히 더 길거나 더 복잡한 페이지에서 빠르게 추가됩니다.

Divi 5는보다 유연한 편집 환경으로 마찰을 줄이는 데 도움이됩니다. 패널을 도킹하여 키 설정을 보관하고 탭에서 여러 모듈을 열고, 레이어 패널을 사용하여 끝없는 스크롤없이 레이아웃을 탐색 할 수 있습니다. 모듈을 클릭하거나 클릭하는 대신 움직일 때 모든 것을 열고 액세스 할 수 있습니다.

레이어 패널은 레이아웃에 대한 전체 구조 개요를 제공하므로 클릭하면 모든 섹션, 행 또는 모듈로 즉시 이동할 수 있습니다. 스크롤하지 않고 큰 페이지를 뛰어 넘는 데 특히 유용합니다.

이전에 워크 플로우는 종종 모듈을 열고 저장하고 다시 스크롤하고 다음 모듈을 열고 그 사이클을 반복하는 것을 의미했습니다. Divi 5는 그 모든 것을 건너 뜁니다. 여러 모듈을 연속적으로 열 수 있습니다. 각각 편집 패널의 탭으로 볼 수 있습니다. 따라서 요소 설정을 반복적으로 닫고 재개하지 않고 설정을 비교하거나 요소 간의 전환을 더 쉽게 만들 수 있습니다.

새로운 워크 플로에 익숙해 지려면 조정이 필요할 수 있습니다. 패널이 다르게 행동하므로 모듈 사이를 전환하는 것은 바로 두 번째 자연을 느끼지 않습니다. 그러나 약간의 연습을하면 이러한 작은 변화가 더해지기 시작합니다.

아래 단계를 따라 가면 패널로 다르게 작업하거나 몇 가지를 도킹하고 탭에 커플을 쌓거나 레이어 패널을 열어 두십시오. 당신은 당신의 흐름에 가장 적합한 것을 느끼기 시작할 것입니다.

2. 글로벌 디자인 변수를 먼저 설정하십시오

전체 레이아웃을 관리 할 때 마지막으로 원하는 것은 자신을 반복하는 것입니다. 그러나 모든 스타일이 각 모듈 내에서 수동으로 설정되면 발생하는 일입니다. 처음에는 작동 할 수 있지만 시간이 지남에 따라 페이지가 연결이 끊긴 선택의 패치 워크로 바뀝니다. 결국, 무언가가 항상 그리워집니다.

디자인 변수는이를 피하는 데 도움이됩니다. 그들은 당신에게 당신의 디자인 언어를 정의 할 수있는 중심적인 장소를 제공합니다. 글꼴, 색상, 간격, 이미지, URL 또는 링크에 대한 재사용 가능한 값을 정의합니다. 일단 적용되면이 값은 사용하는 모든 모듈에 연결되어 있습니다.

간단한 예입니다. 모든 제목이 라토 글꼴을 사용하기를 원한다고 가정 해 봅시다. 모든 모듈에서 LATO를 선택하는 대신 글꼴 변수를 만듭니다. 이름을 지정하고 Lato를 선택하고 저장하십시오. 해당 변수에 묶는 모든 제목은 이제 동기화됩니다.

나중에 다른 글꼴로 전환하려면 변수를 업데이트하십시오. 모든 연결된 모듈은 변경 사항을 자동으로 반영합니다.

그리고 그것은 단지 하나의 사용 사례입니다. 또한 일관된 섹션 패딩, 버튼 스타일, 배경색 또는 반복적으로 사용하는 기타 변수를 설정할 수도 있습니다. 너무 압도적 인 느낌이라면 모든 것을 한 번에 정의 할 필요는 없습니다. 재사용 할 수있는 스타일부터 시작하여 디자인 시스템을 확장하십시오.

3. 정적 값을 설계 변수로 바꾸십시오

때때로 레이아웃에는 하드 코딩 스타일이 있으므로 수동으로 업데이트하면 프로세스가 일치하지 않습니다. 그렇기 때문에 정적 값을 방금 정의한 글로벌 변수로 대체합니다.

개별적으로 사냥 할 필요가 없습니다. Divi의 찾기 및 교체 도구를 사용하면 몇 번의 클릭만으로 변수의 정적 값을 쉽게 바꿀 수 있습니다. 제목이 모두 수동으로 선택된 글꼴을 사용한다고 가정 해 봅시다. 제목 모듈을 열고 글꼴 필드를 클릭하고 찾기 및 교체를 선택하십시오.

교체 값 패널에서 필드 위로 호버링하고 변수 관리자를 엽니 다. 모든 제목 글꼴 변수를 선택하고 변경 사항을 확인하십시오.

마법을 즉시 볼 수 있습니다 : 레이아웃을 가로 지르는 글꼴의 모든 인스턴스는 즉시 교체됩니다. 이 동일한 방법은 색상, 간격, 버튼 스타일 및 변수를 설정 한 내용에 대해 작동합니다.

그리고 한 번에 모든 것을 바꿀 필요는 없습니다. 작게 시작하고 섹션 패딩 또는 버튼 배경과 같이 가장 재사용 할 스타일을 선택하고 먼저 전환하십시오. 갈 때 레이아웃은 수동 편집 패치 워크에서 완전히 연결된 시스템으로 이동합니다. 그리고 그 시스템이 제자리에있을 때, 모든 미래의 변화는 기본적으로 더 쉬워지고 빠르며 일관됩니다.

4. 확장 속성을 사용하여 몇 초 만에 업데이트를 적용하십시오

글로벌 값이 마련되면 다음 단계는 세분화입니다. 종종 자신이 개별 섹션을 약간 조정하고 작업을 다시 수행하지 않고도 레이아웃의 나머지 부분에 이러한 변경 사항을 전달할 수 있기를 바랍니다. 확장 속성으로 가능합니다.

한 요소에서 스타일, 내용 또는 사전 설정을 즉시 복사하여 다른 요소에 적용 할 수 있습니다. 모듈이 같은 유형이 아닌 경우에도 작동합니다. 예를 들어, 하나의 이미지에 대한 사용자 정의 테두리와 섀도우를 설계 한 경우 섹션의 모든 이미지에 대한 참조로 사용할 수 있습니다.

스타일링 된 이미지를 마우스 오른쪽 버튼으로 클릭하고 속성 확장을 선택하십시오.

확장 패널이 열리면 다시 돌아올 가능성이 높기 때문에 측면에 도킹하십시오. 드롭 다운에서 스코프를 부모 섹션 으로 설정하고 요소 유형을 이미지 로 설정 한 다음 확인하십시오.

해당 한 조치는 개별적으로 만지지 않고 해당 섹션의 모든 이미지에 업데이트를 적용합니다.

그리고 그것이 확장 속성이 실제로 그 자리를 차지하는 곳입니다. 일련의 매뉴얼, 반복적 편집이 필요하고 일관된 움직임으로 바꿉니다. 이미지 갤러리 나 블러 브와 같은 여러 유사한 열이나 모듈이있는 섹션에 사용할 수 있습니다. 모든 모듈에서 시간을 연소하지 않고 디자인에 광택을 가져 오는 가장 빠른 방법입니다.

5. 재사용 가능한 편집을 옵션 그룹 사전 설정으로 저장하십시오

레이아웃을 개선 할 때 간격, 테두리 또는 배경색을 조정하여 물건을 올바르게 얻을 수 있습니다. 매번 조정을 반복하는 대신 옵션 그룹 사전 설정으로 저장하십시오.

칼럼의 간격, 테두리 및 배경을 사용자 정의했다고 가정 해 봅시다. 당신은 그것이 어떻게 보이는지 좋아하고 다른 곳에서 재사용하고 싶습니다. 해당 열의 설정을 열고 수정 한 스타일 그룹 (간격 또는 테두리 등)으로 스크롤 한 다음 사전 설정 아이콘을 클릭하여 저장하십시오.

사전 설정을 다른 열에 적용하려면 원본을 마우스 오른쪽 버튼으로 클릭하고 속성을 확장하여 열 사전 설정을 확장하십시오 . 패널에서 스코프를 상위 행 으로 설정하고 열을 요소 유형으로 선택한 다음 extend 속성을 누르십시오.

그 하나의 사전 설정은 이제 한 번의 움직임으로 행의 모든 열에 적용됩니다. 가격 책정 테이블, 블러 브, 평가 또는 수동 노력없이 시각적 일관성을 원하는 곳과 같은 반복 요소가있는 레이아웃에 특히 유용합니다. 사전 설정은 레이아웃 팩에 저장되므로 다른 페이지에서도 사용할 준비가되어 있습니다.

6. 빠른 일회성 변경을 위해 복사/붙여 넣기를 사용하십시오

스타일을 전체 섹션이나 행으로 확장 한 후에도 여전히 작고 타겟팅 된 조정을 원할 수 있습니다. 아마도 하나의 열이나 모듈 만 약간 다른 모양이 필요할 수 있습니다. 사전 설정을 다시 확장하는 대신 속성 관리 기능을 사용하십시오.

예를 들어, 열의 테두리와 그림자를 사용자 정의하고 다른 하나만 일치하도록하려면 스타일링 된 열을 마우스 오른쪽 버튼으로 클릭하고 항목 스타일을 복사 하십시오. 그런 다음 업데이트하려는 열을 마우스 오른쪽 단추로 클릭하고 항목 스타일을 붙여 넣습니다.

이것은 다른 설정을 덮어 쓰지 않고 즉시 작동하지 않으므로 유연성을 유지하려는 상황에 이상적입니다. 거의 모든 요소에서 스타일을 복사하여 붙여 넣고 간격, 색상, 경계 또는 기타 디자인 조정 여부에 관계없이 복사 할 내용을 정확하게 결정할 수 있습니다.

속성 확장 대량 편집을 처리하고 복사/페이스트는 세부 사항을 처리합니다. 주로 수행되는 레이아웃을 미세 조정하는 데 적합하지만 여전히 몇 가지 개인적인 손길이 필요합니다.

7. 반응 형 뷰를 완성하기 위해 사용자 정의 중단 점 사이의 전환

데스크탑 레이아웃이 모든 화면 크기에서 멋지게 보이도록하십시오. Divi 5의 사용자 정의 가능한 브레이크 포인트는 한 번의 클릭으로 태블릿, 전화 및 사용자 정의 화면 너비를 전환 할 수있게하여 쉽게 만들 수 있습니다. 장치 아이콘은 빌더 바로 내부에 있으므로 섹션이 작은 화면에서 어떻게 작동하는지 빠르게 미리 볼 수 있습니다.

필요한 경우 더 많은 제어를 위해 자신의 중단 점을 정의 할 수도 있습니다.

이것은 간격, 글꼴 크기 및 이미지 정렬을 확인하기에 완벽한시기입니다. 몇 분 밖에 걸리지 만 나중에 더 큰 레이아웃 문제, 특히 콘텐츠가 많은 또는 변환 중심 페이지에서 저장합니다. 워크 플로를 변경할 필요가 없습니다. Divi Tools는 반응 형 뷰에서 원활하게 작동하므로 조정을하고 레이아웃을 미리보기 및 이동하십시오.

8. 디자인 변수를 업데이트하여 전체 레이아웃을 즉시 새로 고치십시오.

이전에는 글로벌 디자인 변수를 설정하고 찾기 및 교체를 사용하여 정적 값을 대체했습니다. 이제 레이아웃이 중앙 집중식 설계 시스템에 완전히 연결되어 있습니다.

디자인 변수는 웹 사이트 전체 업데이트를 매우 쉽게 만듭니다. 브랜드가 타이포그래피 또는 주요 색상을 업데이트한다고 가정 해 봅시다. 동일한 변경 사항을 반복적으로 수행하기 위해 각 모듈을 파기하는 대신 저장된 변수를 업데이트합니다. 하나의 변경은 전체 레이아웃에 즉시 적용됩니다.

이것을 실제로 보려면이 나란히 비교를 살펴보십시오. 레이아웃 구조는 동일하게 유지되지만 그 뒤에있는 프로세스는 극적으로 단순하고 빠릅니다.

이제 이것이 어떻게 비늘을 어떻게 유지하는지 생각해보십시오. 동일한 시스템에 구축 된 전체 웹 사이트, 모든 페이지 및 섹션을 상상해보십시오. 당신은 더 이상 각 변경에 대한 단계를 회복하지 않습니다. 변수에 대한 단일 조정은 모든 것을 업데이트합니다. 변수 관리자를 통해 값을 관리하여 전체 브랜드를 관리하고 있습니다.

이런 종류의 유연성은 Divi 5가 설계된 것입니다. 편집이 빠르고 반복을 줄이고 정확성을 높이며 노력으로 더 많은 제어를 제공하는 것입니다.

Divi 5 워크 플로를 사용자 정의하십시오

지금까지 디자인 변수, 속성 확장 및 옵션 그룹 사전 설정과 같은 도구가 레이아웃을 업데이트하는 방법을 재구성 할 수있는 방법을 보았습니다. 그러나 그것들을 사용하는 방법은 하나도 없습니다.

이 연습은 프로세스의 한 버전 일뿐입니다. 다른 순서로 단계를 따라 가거나 몇 가지를 건너 뛰거나 자신의 일상에 혼합 할 수 있습니다. 그리고 목표는 공식을 따르지 않고 자연스럽게 느끼고 일하는 방식에 맞는 리듬을 찾는 것이기 때문에 완전히 괜찮습니다.

조금 실험하십시오. 도구로 더 많이 놀수록 흐름에 가장 적합한 것을 더 많이 인식하기 시작합니다. 일이 더 부드럽게 느껴지면 업데이트가 더 빠르고 디자인이 일관성이 유지되면 그것이 작동한다는 신호입니다.

그리고 이러한 도구가 워크 플로가 발전함에 따라 계속 유지 될 수 있는지 궁금하다면 절대적으로 할 수 있습니다.

Divi 5는 귀하의 작업 방식에 적응하도록 설계되었습니다.

그것이 우리가 다루었던 모든 기능의 생각입니다. 모든 스타일을 선불로 정의하거나 구축 할 때 변경하려는 경우 도구는 작업을 선호하는 방식에 적응합니다.

빨리 움직이거나 시간을 할애 할 수 있습니다. 빈 페이지에서 시작하거나 기존 레이아웃을 수정하십시오. 건축업자는 당신을 엄격한 워크 플로로 강요하지 않습니다. 바쁜 작업을 줄이고, 반복적 인 편집을 건너 뛰고, 명확성, 속도 및 자신감으로 디자인하는 데 실제로 중요한 것에 집중할 수 있도록 만들어졌습니다.

궁극적으로, 그것은 당신의 프로젝트와 아이디어가 성장함에 따라 당신과 같은 느낌을주는 프로세스를 구축하는 것입니다. 당신과 함께 향상되는 디자인 워크 플로를 만들 준비가 되셨습니까?