Divi의 효율성 기능을 사용하여 5단계로 어두운 레이아웃으로 전환하는 방법

웹사이트를 디자인할 때 의식적이든 무의식적이든 가장 먼저 내리는 결정 중 하나는 웹사이트에 부여할 색상 스타일입니다. 우리 중 용감한 사람들은 감히 완전한 생생한 색상 팔레트를 원할 것입니다. 그렇기 때문에 일반적으로 밝거나 어두운 레이아웃을 사용하는 것이 더 안전합니다. Divi 라이브러리의 미리 만들어진 레이아웃 섹션에서 모든 유형의 웹사이트를 구축할 때 무료로 사용할 수 있는 수많은 밝고 어두운 레이아웃을 찾을 수 있습니다. 그러나 레이아웃이 마음에 들지만 더 어두운 색상 팔레트를 원하거나 그 반대의 경우는 어떻게 합니까?

Divi의 효율성 기능을 사용하면 밝은 레이아웃 팩에서 어두운 레이아웃 팩으로 또는 그 반대로 이동하는 것이 그 어느 때보다 쉬워집니다. 이 게시물에서는 단 5단계로 밝은 레이아웃을 어두운 레이아웃으로 바꾸는 방법을 보여 드리겠습니다. 올바른 기술을 사용하는 경우 이 전환에 필요한 시간은 매우 적습니다. 수행해야 하는 단계의 수는 항상 작업 중인 레이아웃에 따라 다르지만 전체적인 접근 방식을 파악하면 처리 중인 모든 레이아웃에서 작동하도록 만들 수 있습니다.

가자!

시사

5단계만으로 Web Freelancer Layout Pack의 밝은 방문 페이지를 어두운 페이지로 변경합니다.

웹 프리랜서 랜딩 페이지 업로드

새 페이지 추가 및 Visual Builder 활성화

새 페이지를 추가하고 페이지에 제목을 지정하고 Visual Builder로 전환하여 시작하십시오.

웹 프리랜서 레이아웃 팩 업로드

화면에 표시되는 세 가지 옵션 중에서 미리 만들어진 레이아웃을 업로드하도록 선택합니다.

무료 레이아웃 팩 목록에서 Web Freelancer Layout Pack의 방문 페이지를 찾아 '이 레이아웃 사용'이라는 녹색 버튼을 클릭하여 업로드하십시오.

1단계: 전체 배경색 변경

첫 번째 섹션의 섹션 배경색 변경

시작할 시간입니다! 권장하는 첫 번째 단계는 페이지에 있는 모든 섹션의 배경색을 변경하는 것입니다. 그렇게 하면 어두운 배경색과 일치시키기 위해 어떤 디자인 요소를 변경해야 하는지 빠르게 알 수 있습니다. 페이지의 첫 번째 섹션을 열고 섹션 배경색으로 '#0c0c0c'를 선택합니다.

모든 섹션으로 스타일 확장

배경색을 추가하는 즉시 배경색을 마우스 오른쪽 버튼으로 클릭하고 '배경색 확장' 옵션을 클릭합니다.

그렇게 하면 배경색을 페이지의 모든 섹션으로 확장하도록 선택합니다.

2단계: 텍스트 색상 변경

전각 헤더 모듈 열기 및 텍스트 색상 변경

취해야 할 다음 단계는 사용 중인 텍스트 색상을 변경하는 것입니다. 모르거나 알 수 있듯이 Divi에는 페이지의 텍스트에 대해 밝거나 어두운 색상 팔레트를 선택할 수 있는 기본 옵션이 있습니다. 그러나 사용자 정의 색상을 선택하면 이 옵션은 선택한 사용자 정의 색상으로 대체됩니다. 각 요소를 확인하여 사용자 정의 색상이 있는지 확인하는 대신 전폭 헤더 모듈에서 텍스트 색상으로 'Light'를 선택하십시오.

모든 모듈로 스타일 확장

그런 다음 마우스 오른쪽 버튼을 클릭하고 '텍스트 색상 확장' 옵션을 선택하여 이 밝은 텍스트 색상을 확장합니다.

이 새로운 색상을 전체 페이지의 모든 모듈로 확장합니다.

다중 선택 기능을 사용하여 사용자 정의 색상 변경

앞서 언급했듯이 이전 단계는 미리 선택한 색상에 적용되지 않습니다. 예를 들어 Toggle 모듈에는 사용자 정의 제목 텍스트 색상이 있습니다. 각 토글을 개별적으로 수정하는 대신 키보드의 control/command 키를 사용하여 한 번에 모든 토글을 선택하고 각 모듈을 개별적으로 클릭합니다. 모두 선택했으면 설정 아이콘을 클릭합니다.

이제 선택한 각 모듈에 동시에 변경 사항을 적용할 수 있습니다. 이 경우 제목 텍스트 색상을 '#848484'로 변경합니다.

3단계: 버튼 변경

전체 너비 헤더의 버튼 1 설정 열기

페이지의 클릭 유도문안이 레이아웃 색상 팔레트와 계속 일치하는지 확인하는 것이 중요합니다. 이 경우 밝은 레이아웃과 어두운 레이아웃 모두에서 멋지게 보이는 버튼 모듈이 있습니다. 그렇기 때문에 페이지의 다른 버튼으로도 확장할 예정입니다. 계속해서 Fullwidth Header Module을 열고 Button One 설정으로 이동하십시오.

버튼 스타일을 페이지의 모든 버튼으로 확장

그런 다음 Button One 설정을 마우스 오른쪽 버튼으로 클릭하고 'Button One 스타일 확장' 옵션을 선택합니다.

버튼 스타일을 전체 페이지의 모든 버튼으로 확장합니다.

영웅 섹션에서 버튼 2 텍스트 색상 변경

확장 기능은 독립 실행형 모듈이 아니기 때문에 전체 너비 헤더 모듈의 두 번째 버튼에 도달하지 않습니다. 이것이 Button Two 설정을 열고 텍스트 색상을 '#ffffff'로 변경하는 이유입니다.

페이지의 모든 전각 헤더로 스타일 확장

이 텍스트 색상이 페이지의 모든 전체 너비 헤더 모듈에 적용되도록 하기 위해 이 색상도 확장합니다.

텍스트 색상을 마우스 오른쪽 버튼으로 클릭하고 'Extend Button Two Text Color' 옵션을 선택했으면 계속 진행하여 전체 페이지의 모든 전체 너비 헤더에 적용합니다.

4단계: 사용자 지정 여백 제거 및 사용자 지정 패딩으로 교체

맞춤 여백 제거

어두운 레이아웃으로 전환할 때 페이지에 공백을 가져오는 모든 사용자 지정 여백 값을 제거하는 것도 중요합니다.

대신 사용자 지정 패딩 사용

그러나 대신 사용자 지정 여백을 사용자 지정 패딩으로 추가하여 이전의 거리를 유지할 수 있습니다.

5단계: 특별 디자인 설정 검색 및 변경

특별 설계 설정 결정

수행해야 할 마지막 단계는 레이아웃 각각에 대해 매우 구체적입니다. 레이아웃 고유의 디자인 요소도 변경해야 합니다. 여기에는 다음 설정 중 일부가 포함될 수 있지만 이에 국한되지 않습니다.

• 상자 그림자
• 기둥 배경
• 아이콘 색상
• 디바이더 색상
• …

행 상자 그림자 색상에서 찾기 및 바꾸기 사용

이 특정 레이아웃에서 변경해야 할 사항 중 하나는 사용 중인 행 상자 그림자 색상입니다. 행 설정을 열고 상자 그림자를 변경하지 않고 마우스 오른쪽 버튼으로 클릭합니다. 그런 다음 '찾기 및 바꾸기' 옵션을 선택합니다.

전체 페이지에서 특정 색상 코드를 변경하려는 경우 찾기 및 바꾸기 기능을 사용하는 것이 가장 좋습니다. 다른 색상 코드(이 경우 '#33302f')로 쉽게 바꿀 수 있습니다. 이렇게 하면 색상이 사용된 정확한 위치를 확인하기 위해 모든 디자인 요소를 탐색할 필요가 없습니다.

일회성 발생 설정을 수동으로 변경

그러나 레이아웃 내에서도 일회성 반복 디자인 설정이 있습니다. 이를 변경하려면 수동으로 수행해야 합니다. 예를 들어 아래 인쇄 화면의 행에는 페이지의 다른 곳에서 사용되지 않은 상자 그림자 색상이 있습니다. 그래서 수동으로 '#33302f'로 변경합니다.

시사

5단계를 거친 후 최종 결과를 최종적으로 살펴보겠습니다.

마지막 생각들

이 게시물에서는 단 5단계로 밝은 레이아웃 팩을 어두운 레이아웃 팩으로 바꾸는 방법을 안내했습니다. 수행해야 하는 단계의 수는 항상 작업 중인 레이아웃에 따라 다르지만 전반적으로 접근 방식은 동일하게 유지됩니다. 질문이나 제안 사항이 있으면 아래 의견 섹션에 알려주십시오!