• 홈페이지
  • 조항
  • 주제
  • Divi의 드래그 앤 드롭 파일 업로드 기능을 사용하여 생산성을 높이는 6가지 방법

Divi의 드래그 앤 드롭 파일 업로드 기능을 사용하여 생산성을 높이는 6가지 방법

게시 됨: 2018-08-22

Divi의 드래그 앤 드롭 파일 업로드 기능은 웹 디자이너의 생산성을 높이는 훌륭한 도구가 될 수 있습니다. 이 튜토리얼에서는 드래그 앤 드롭 기능을 사용하여 Divi 디자인 워크플로를 개선할 수 있는 6가지 방법을 안내해 드리겠습니다. 그 과정에서 몇 가지 유용한 팁, 예제 및 보너스 코드 스니펫도 제공하겠습니다. 무슨 일이 일어나는지 보기 위해 파일을 끌어다 놓는 것은 항상 재미있습니다.

시작하자!

Divi의 드래그 앤 드롭 파일 업로드 기능에 대한 간략한 개요

드래그 앤 드롭 파일 업로드 기능은 Divi Builder를 사용할 때 페이지에 콘텐츠를 추가하는 쉬운 방법입니다. 이름에서 알 수 있듯이 페이지에 파일을 끌어다 놓아 섹션, 행 및 모듈을 미리 설정하는 일반적인 프로세스 없이 콘텐츠를 추가할 수 있습니다. 그리고 Divi는 파일 ​​형식에 따라 콘텐츠를 다르게 배치합니다. 예를 들어 txt 파일은 텍스트 모듈에 추가되고 html 파일은 코드 모듈에 추가되며 CSS 파일은 페이지에 사용자 정의 CSS로 추가됩니다.

지원되는 파일 형식 및 끌어서 놓기 동작

다음은 현재 끌어서 놓기 기능이 지원하는 모든 파일 형식의 목록입니다. 이것은 디자인 프로세스에서 기능을 활용할 수 있는 방법을 생각할 때 유용할 수 있습니다. 또한 이러한 파일 형식을 드래그할 때 어떤 일이 발생하는지 이해하는 데 도움이 되도록 간단한 설명을 추가했습니다.

이미지 파일

  • GIF
  • JPEG
  • jpg
  • png

단일 이미지 파일을 드롭하면 Divi는 새 섹션과 1열 행을 생성한 다음 이미 모듈에 업로드된 이미지가 있는 이미지 모듈을 추가합니다.

한 번에 여러 이미지 파일을 놓을 때 Divi는 동일한 구조(새 섹션 및 행)를 생성하지만 갤러리 모듈에 이미지를 추가합니다.

텍스트 파일

  • txt

txt 파일을 드롭하면 새 섹션 및 행 내부의 새 텍스트 모듈에 텍스트가 추가됩니다.

글꼴 파일

  • otf
  • ttf

글꼴 파일을 드롭하면 글꼴 이름과 글꼴이 이미 로드된 글꼴 업로드 팝업 모달이 시작됩니다. 업로드 버튼을 클릭하기 전에 지원되는 모든 글꼴 두께를 포함할 것인지 확인하기만 하면 됩니다.

비디오 파일

  • m4v
  • 이동
  • 웹엠
  • wmv
  • mp4

하나 이상의 비디오 파일을 드롭하면 새 섹션 및 행 내의 새 비디오 모듈에 각 비디오가 추가됩니다.

오디오 파일

  • mp3
  • 웨이브

하나 이상의 오디오 파일을 드롭하면 각 오디오 파일이 새 섹션 및 행 내의 새 오디오 모듈에 추가됩니다.

웹 파일

  • json
  • HTML
  • CSS

json 파일은 내보낸 모든 페이지 레이아웃용입니다. json 파일을 드래그하면 페이지 레이아웃이 페이지에 자동으로 로드됩니다.

html 파일을 드래그하면 html이 새 섹션 및 행 내부의 새 코드 모듈에 추가됩니다.

CSS 파일을 드래그하면 페이지 설정의 고급 탭에서 찾을 수 있는 페이지의 사용자 정의 CSS에 CSS 코드가 자동으로 추가됩니다.

전반적으로 프로세스는 직관적이며 워크플로를 개선할 수 있는 몇 가지 큰 가능성이 있습니다. 이 기능을 사용할 수 있는 몇 가지 방법에 대해 알아보겠습니다.

#1 필요에 따라 사용자 정의 CSS 스니펫을 페이지로 드래그

대부분의 Divi 사용자는 사용자 정의 CSS를 사용할 필요가 없기 때문에 Divi를 특히 좋아합니다. 그것이 Divi를 훌륭하게 만드는 이유입니다. 그러나 WordPress 테마 사용자 정의와 관련하여 사용자 정의 CSS(심지어 Divi 내에서도)는 여전히 귀중한 자산입니다.

다른 훌륭한 웹 개발자와 마찬가지로 CSS 스니펫을 저장하여 향후 프로젝트를 위해 쉽게 액세스할 수 있도록 해야 합니다. 이렇게 하면 웹 사이트 구축에 능숙해질 뿐만 아니라 Divi의 끌어서 놓기 기능을 활용할 수도 있습니다.

예를 들어, Divi 페이지에서 하단 바닥글 막대를 숨기기 위한 CSS 스니펫이 있다고 가정해 보겠습니다. 해당 스니펫을 "하단 바닥글 숨기기"라는 제목의 CSS 파일로 저장하면 해당 파일을 가져와 페이지로 드래그하여 즉각적인 결과를 얻을 수 있습니다.

Divi는 드롭할 때마다 자동으로 스니펫을 구성합니다.

페이지로 드래그하는 각 CSS 파일과 함께 Divi는 CSS를 추출하여 페이지에 추가합니다. 페이지 설정의 고급 탭에서 언제든지 이 맞춤 CSS를 볼 수 있습니다.

또한 Divi가 CSS 스니펫을 주석으로 래핑하여 현명하게 구성한다는 것을 알 수 있습니다. 모르는 경우 특정 코드 블록을 쉽게 식별 및/또는 설명하기 위해 코드 내에서 주석이 사용됩니다. CSS 스니펫 앞에 Divi는 "시작"이라는 텍스트와 함께 주석을 삽입하고 그 뒤에 CSS 파일의 제목인 "하단 바닥글 숨기기"를 삽입합니다. 스니펫 뒤에 Divi는 파일 ​​제목 다음에 "End"라는 텍스트와 함께 다른 주석을 삽입합니다.

다음은 "하단 바닥글 숨기기" CSS 파일에서 드래그한 후 페이지 설정에서 스니펫이 어떻게 보이는지 보여주는 예입니다. 

/* BEGIN: Hide Bottom Footer */
#main-footer {
    display: none;
}
/* END: Hide Bottom Footer */

자신의 CSS를 만드는 방법을 모르는 사람들을 위해 웹에서 제공하는 유용한 자습서에 의존할 수 있습니다. 멋지네요. 우리는 모두 그것을 합니다. 그러나 끌어서 놓기 기능을 활용하려면 해당 스니펫을 개별 파일로 저장하고 그에 따라 이름을 지정하는 것이 좋습니다. 그렇게 하면 각 스니펫을 끌어서 놓기만 하면 됩니다.

호버 애니메이션에 사용할 수 있는 CSS 스니펫의 두 가지 예

CSS를 사용하면 가능성이 거의 무한합니다. 하지만 라이브러리에 저장할 수 있는 CSS 스니펫의 몇 ​​가지 예를 들어 사이트에 애니메이션을 추가할 수 있다고 생각했습니다.

다음 css 스니펫을 ".css" 파일로 저장합니다("호버 시 아이콘 크기 조정"과 같은 이름). 

.et-pb-icon {
  -webkit-transition: all .2s ease-out;
  -moz-transition: all 0.2s ease-out;
  -ms-transition: all 0.2s ease-out;
  -o-transition: all 0.2s ease-out;
  transition: all 0.2s ease-out;
}
.et-pb-icon:hover {
-moz-transform: scale(1.2);
-webkit-transform: scale(1.2);
-o-transform: scale(1.2);
transform: scale(1.2);
}

그런 다음 이 다음 스니펫을 "Blurb Shadow on Hover"라는 이름의 다른 ".css" 파일로 저장합니다.

.et_pb_blurb:hover {
    -moz-box-shadow: 0px 0px 20px #ccc;
    -webkit-box-shadow: 0px 0px 20px #ccc;
    box-shadow: 0px 0px 20px #ccc;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    transition: all 0.5s;
}

두 파일이 모두 컴퓨터에 저장되면. 두 파일을 모두 선택하고 페이지로 끕니다. 물론 원하는 경우 하나만 드래그할 수 있지만 여러 파일에서도 작동한다는 것을 보여드리고자 합니다. 이렇게 하면 즉시 호버에 상자 그림자를 추가하여 모든 블러브 모듈에 팝업 효과가 나타납니다. 또한 모든 광고 아이콘 위에 마우스를 올려 놓으면 크기가 조정됩니다(더 커짐).

꽤 멋진 물건.

그리고 이러한 CSS 파일을 마음대로 사용할 수 있게 되면 얼마나 도움이 될지 상상할 수 있습니다.

#2 사용자 정의 글꼴을 페이지로 드래그 앤 드롭하고 현재 글꼴을 빠르게 교체

웹 사이트를 구축하는 경우 다양한 글꼴을 사용할 수 있어야 한다는 사실을 잘 알고 계실 것입니다. Divi에는 Divi Builder에 수백 개의 글꼴이 내장되어 있어 훨씬 더 쉽게 작업할 수 있습니다. 또한 Divi Builder 내에서 새 글꼴을 업로드하는 옵션을 항상 사용할 수 있습니다. 그러나 Divi의 새로운 드래그 앤 드롭 기능을 사용하면 사이트에 새 글꼴을 추가하는 것이 엄청나게 간단해집니다.

미리 만들어진 레이아웃 중 하나를 사용하고 있지만 Divi에서 아직 사용할 수 없는 새 글꼴을 사용해 보고 싶다고 가정해 보겠습니다. 글꼴을 변경하는 방법은 다음과 같습니다.

비주얼 빌더가 활성화되어 있고 미리 만들어진 레이아웃이 업로드되어 있는지 확인하십시오. 그런 다음 컴퓨터에서 브라우저 창 내부의 페이지/비주얼 빌더로 글꼴 파일을 드래그하기만 하면 됩니다. 그런 다음 업로드 버튼을 클릭합니다.

찾기 및 바꾸기가 포함된 끌어서 놓기는 강력한 콤보입니다.

한 단계 더 나아가 Divi의 찾기 및 바꾸기 기능을 사용하여 미리 만들어진 레이아웃 제목에 사용된 글꼴을 방금 놓은 새 글꼴로 바꿀 수 있습니다.

크리에이티브 에이전시 방문 페이지 레이아웃을 사용하여 상단 섹션에 헤더 텍스트가 포함된 텍스트 모듈을 엽니다. 그런 다음 제목 글꼴 옵션을 마우스 오른쪽 버튼으로 클릭합니다. 오른쪽 클릭 메뉴에서 찾기 및 바꾸기를 선택합니다.

찾기 및 바꾸기 팝업에서 "바꿀 내용" 옵션에서 새 글꼴을 선택하고 파란색 바꾸기 버튼을 클릭합니다.

이제 모든 헤더에 새 글꼴이 있습니다!

#3 여러 이미지를 드래그 앤 드롭하여 제목이 있는 즉석 사진 갤러리 만들기

Divi의 드래그 앤 드롭 기능을 사용하면 이미지를 사이트로 쉽게 드래그할 수 있습니다. 이것은 이미지가 많은 웹사이트를 구축할 때 정말 유용합니다. 그리고 대부분의 사람들은 저장된 이미지를 컴퓨터의 폴더에 보관하기 때문에 해당 이미지를 선택하여 페이지로 끌어다 놓는 것이 매우 편리합니다.

단일 이미지에서 드래그 앤 드롭할 때 작동하는 방법은 다음과 같습니다.

단일 이미지를 비주얼 빌더로 드래그하면 자동으로 다음이 수행됩니다.
1. 한 열 행으로 새 일반 섹션 만들기
2. 행에 이미지 모듈 추가
3. 해당 이미지 모듈에 이미지 삽입
4. 편집 프로세스를 시작하기 위해 편의상 이미지 설정을 엽니다.

여러 이미지를 드래그할 때 작동하는 방법은 다음과 같습니다.

여러 이미지를 비주얼 빌더 페이지로 드래그하면 Divi가 자동으로 다음을 수행합니다.

1. 한 열 행으로 새 일반 섹션 만들기
2. 행에 갤러리 모듈 추가
3. 갤러리 모듈에 새 이미지 삽입
4. 편집 프로세스를 빠르게 시작할 수 있도록 갤러리 모듈 설정을 엽니다.

페이지로 이미지를 드래그하기 전에 이미지를 준비하십시오

이미지 갤러리가 멋지게 보이도록 하려면 미리 몇 가지 최적화를 수행하는 것이 좋습니다.

이미지 크기
먼저 이미지의 크기가 모두 동일한지 확인합니다. 약 1500x800px 크기의 이미지를 사용하는 것이 좋습니다. 이렇게 하면 이미지가 라이트박스에 배포될 때 적절한 크기가 제공됩니다. 또한 Divi는 갤러리의 축소판에 더 작은 버전의 이미지를 사용합니다. 이 주제를 다루는 동안 Divi 모듈에 권장되는 몇 가지 이미지 크기를 검토하는 것이 도움이 될 수 있습니다. 그런 다음 파일 크기를 TinyPNG로 끌어서 조금 더 축소하거나 사진 편집기를 사용하여 웹 사양에 맞게 저장할 수 있습니다.

이미지 제목
기본적으로 Divi는 갤러리의 각 축소판 아래에 이미지 제목을 표시합니다. 따라서 (이 제목을 표시하려는 경우) 이미지를 드래그하기 전에 올바른 제목을 지정합니다.

#4 MP3 파일을 CSS 파일과 함께 페이지로 드래그하여 디자인 시작

팟캐스터에게 이것은 확실히 생산성을 높일 수 있습니다. Divi의 드래그 앤 드롭 기능은 mp3 및 wav 파일 형식을 지원하므로 빌더에 쉽게 드롭하여 빌드 프로세스를 시작할 수 있습니다.

단일 mp3 또는 wav 파일을 페이지로 드래그하면 Divi가 자동으로 다음을 수행합니다.

1. 한 열 행으로 새 일반 섹션 만들기
2. 오디오 파일이 첨부된 새 오디오 모듈 추가
3. 편집 프로세스를 시작하기 위해 자동 설정 모달을 엽니다.

여러 mp3 또는 wav 파일을 페이지로 드래그하면 Divi는 단일 오디오 파일을 드래그할 때와 동일한 작업을 수행하지만 이 작업을 여러 번 수행합니다. 따라서 4개의 오디오 파일을 드래그하면 Divi는 오디오 파일이 첨부된 오디오 모듈을 포함하는 한 열 행으로 4개의 다른 섹션을 생성합니다. 페이지에 추가된 마지막 오디오 모듈 편집을 시작하기 위해 오디오 설정 모달도 팝업됩니다.

한 번에 모든 오디오 모듈의 스타일을 즉시 지정하려면 CSS 파일을 드래그하세요.

사용자 정의 CSS를 사용하여 Divi 페이지에 추가 스타일을 추가하는 데 익숙하다면 향후 빌드에 사용할 수 있도록 해당 스니펫을 CSS 파일에 저장하는 것이 좋습니다(이미 알고 있다고 확신하지만). 따라서 특정 방식으로 오디오 모듈의 스타일을 지정하는 CSS 스니펫이 있는 경우 해당 CSS를 별도의 CSS 파일에 저장합니다. 그런 다음 해당 CSS 파일을 페이지로 간단히 드래그하여 모든 오디오 모듈의 스타일을 즉시 지정할 수 있습니다.

위 그림에서 사용한 CSS는 간단한 예이지만, 사용해보고 싶다면 다음 사용자 정의 CSS를 복사하세요. 

.et_pb_audio_module_content h2 {position: absolute;
    top: -40px;
    background: #c5310d;
    padding: 0.6em;
    left: 50px;}
.et_audio_module_meta {
    position: absolute;
    bottom: -45px;
    right: 30px;
    background: #c5310d;
    padding: 1em !important;
}
.et_pb_audio_module {
background: #888 !important;
}

.et_audio_container .mejs-playpause-button button:before, .et_audio_container .mejs-volume-button button:before {
    color: #c5310d;
}

.mejs-time-handle-content {
    border: 4px solid #c5310d;
    height: 14px;
    left: -7px;
    top: -6px;
    width: 14px;
    background: #c5310d;
}
.et_audio_container .mejs-controls .mejs-time-rail .mejs-time-total
{
background: #222;
}

그런 다음 텍스트 편집기에 붙여넣고 css 파일 형식으로 저장합니다(확장자는 ".css"여야 함). 일단 컴퓨터에 저장합니다. 오디오 블러브가 포함된 비주얼 빌더로 드래그하십시오.

#5 즉시 구현을 위해 페이지로 끌어다 놓을 수 있는 재사용 가능한 코드 블록 생성

Divi의 드래그 앤 드롭 기능은 CSS 및 HTML 파일을 지원합니다(자바스크립트 파일은 허용되지 않습니다). 그들이하는 일을 알고있는 사람들을 위해 HTML 파일에 스크립트를 추가하여 해당 자바 스크립트 기능을 추가 할 수 있습니다. 그러나 이렇게 하면 이러한 파일을 결합하여 즉각적인 결과를 얻기 위해 페이지로 드래그할 수 있는 유용한 코드 블록을 만들 수 있습니다.

예 1: 내보낸 코드 펜 파일을 페이지로 끌어다 놓기

codepens의 팬이라면 이미 유용한 끌어서 놓기 마법을 설정했을 수 있습니다. 너무 흥분하기 전에 파일을 드래그하여 사이트에 즉시 적용할 수 있는 파일을 생성하려면 html과 css의 조합만 사용하는 codepens로 제한된다는 점을 경고해야 합니다.

다음은 이 프로세스가 귀하에게 도움이 될 수 있는 방법입니다.

내보내려는 Codepen이 있는 페이지로 이동하여 페이지 오른쪽 하단의 내보내기 버튼을 클릭합니다.

컴퓨터에서 파일의 압축을 풀고 html 파일과 css 파일을 찾습니다. 텍스트 편집기를 사용하여 html 파일을 보고 필요하지 않은 모든 태그(doctype, html, 헤더, 본문)를 제거하여 코드펜의 html 상자에 표시되는 html만 남도록 합니다. . 그런 다음 파일을 저장합니다.

사실, HTML 파일의 경우 펜에서 직접 HTML을 복사하고 고유한 html 파일을 만드는 것이 더 나을 수 있습니다.

이제 CSS 파일을 찾으십시오(CSS 폴더 안에 있어야 함). SCSS 파일이 아닌 CSS 파일을 사용해야 합니다(이 파일 형식은 끌어서 놓기 기능에서 지원되지 않음).

이제 비주얼 빌더가 활성화된 상태에서 두 파일을 페이지로 드래그하십시오.

이것은 자동으로 일어나는 일입니다:

1. Divi는 한 열 행으로 새 섹션을 만듭니다.
2. Divi는 html을 내용으로 하는 행에 코드 모듈을 추가합니다.
3. Divi는 페이지 설정 사용자 정의 CSS 블록에 사용자 정의 CSS를 추가합니다.

오류가 발생하면 올바른 파일 형식이 없거나 파일 콘텐츠에 지원되지 않는 코드가 있다는 의미입니다. 예를 들어 html 파일에 doctype 및 html 태그가 있으면 파일이 작동하지 않습니다. 또한 CSS 파일에 SCSS 코드가 있으면 오류가 발생할 수도 있습니다.

물론 처음에는 이것이 가장 순조로운 과정이 아닙니다. 코드와 파일을 약간 정리해야 합니다. 따라서 html 및 CSS에 익숙하지 않은 경우 어려울 수 있습니다. 그러나 최종 결과는 끌어서 놓기만 하면 재사용 가능한 일부 코드 블록을 비축할 수 있다는 점에서 매우 가치 있는 것으로 판명될 수 있습니다.

또한 자신의 코드가 아닌 코드를 복사하기 전에 Codepen의 라이선스에 대해 잘 알고 있어야 합니다.

예 2: Font Awesome의 격리된 인스턴스를 페이지로 끌어다 놓기

Divi 사이트에서 Font Awesome을 사용하는 데 익숙하다면 페이지에 Font Awesome 인스턴스를 삽입할 수 있는 "드래그 준비" 파일이 몇 개 있으면 도움이 될 것입니다. 이것은 실제로 하나의 HTML 파일로 수행할 수 있습니다.

다음은 이 프로세스가 귀하에게 도움이 될 수 있는 방법입니다.

웹사이트에서 Font Awesome 스크립트를 가져옵니다. SVG + JS 버전인지 확인하십시오. 그런 다음 스크립트를 클립보드에 복사합니다.

그런 다음 새 텍스트 파일을 만들고 코드를 붙여넣습니다. 스크립트 아래에서 페이지에 배포하려는 html 및 글꼴 코드를 추가합니다.

다음은 멋진 글꼴 아이콘을 사용하는 목록이 있는 "드래그 준비" html 코드의 예입니다. 

<script defer src="https://use.fontawesome.com/releases/v5.2.0/js/all.js" integrity="sha384-4oV5EgaV02iISL2ban6c/RmotsABqE4yZxZLcYMAdG7FAPsyHYAPpywE9PJo+Khy" crossorigin="anonymous"></script>

<h2>Header</h2>
<ul class="fa-ul" style="list-style:none; font-size: 18px">
<li><i style="color: Tomato; " class="fa-li fas fa-address-book"></i>Your content goes here. </li>
<li><i style="color: Dodgerblue; " class="fa-li fas fa-address-book"></i>Your content goes here. </li>
<li><i style="color: Mediumslateblue; " class="fa-li fas fa-address-book"></i>Your content goes here. </li>
<li><i style="color: Tomato; " class="fa-li fas fa-address-book"></i>Your content goes here. </li>
<li><i style="color: Dodgerblue; " class="fa-li fas fa-address-book"></i>Your content goes here. </li>
<li><i style="color: Mediumslateblue; " class="fa-li fas fa-address-book"></i>Your content goes here. </li>
</ul>

파일을 html 파일로 저장했는지 확인하십시오. 그런 다음 비주얼 빌더를 사용하여 페이지로 드래그하십시오.

Divi는 자동으로 html을 코드 ​​모듈에 추가하므로 이제 페이지를 편집할 수 있는 멋진 글꼴 목록이 준비되었습니다.

텍스트 설정 내용을 사용할 수 있도록 목록이 텍스트 모듈에 포함되기를 원할 것입니다. 그러나 이것은 자동으로 발생하지 않기 때문에 스크립트를 포함하도록 html 파일을 제한할 수 있습니다. 그런 다음 html을 텍스트 모듈에 붙여넣습니다. 그러나 디자인을 처리할 수 있는 CSS 파일이 있는 사용자에게는 HTML 파일로 끌어다 놓을 수 있다는 것이 좋습니다.

#6 하드 드라이브에 Divi 페이지 레이아웃 라이브러리(json 파일)를 만들어 페이지로 드래그하여 더 빠른 개발

Divi를 사용하면 디자인한 전체 페이지 레이아웃을 쉽게 저장하고 내보낼 수 있습니다. 이 기능에는 두 가지 큰 이점이 있습니다. 첫 번째 이점은 웹 사이트를 구축할 때 디자인 프로세스의 속도를 높이기 위해 Divi 라이브러리 내에 페이지 레이아웃을 저장할 수 있다는 것입니다. 두 번째 이점은 페이지 레이아웃을 자신의 컴퓨터로 내보낼 수 있다는 것입니다. 이를 통해 다음 프로젝트를 시작하기 위해 귀중한 페이지 레이아웃(json 파일) 컬렉션을 축적할 수 있습니다.

그리고 새로운 드래그 앤 드롭 기능을 사용하면 저장된 레이아웃을 비주얼 빌더로 빠르게 드래그하여 더욱 빠르게 개발할 수 있습니다.

다음은 이 프로세스가 귀하에게 도움이 될 수 있는 방법입니다.

디자인 에이전시 랜딩 페이지 레이아웃의 헤더 섹션만 저장하고 싶다고 가정해 보겠습니다(이것은 원하는 디자인일 수 있지만 이 예에서는 미리 만들어진 레이아웃을 사용하고 있습니다). 레이아웃을 페이지에 로드한 후에는 상단 헤더 섹션을 제외한 레이아웃의 모든 섹션을 삭제하십시오. 그런 다음 레이아웃을 하드 드라이브로 내보냅니다.

비주얼 빌더를 사용하여 페이지 레이아웃을 내보내려면 설정 메뉴를 열고 이식성 아이콘을 클릭하십시오. 그런 다음 이식성 팝업에서 이름("Design Agency Header Layout")을 입력하고 Export Divi Builder Layout 버튼을 클릭합니다.

그러면 레이아웃이 json 파일로 컴퓨터에 저장됩니다.

이제 내 페이지의 헤더 섹션을 삭제하여 내 페이지에 섹션이 없는 경우 json 파일을 페이지로 끌어서 해당 헤더를 내 페이지에 쉽게 추가할 수 있습니다.

json 파일을 드래그하면 이식성 모달이 자동으로 팝업되어 기존 콘텐츠를 교체하거나 미리 백업을 생성하는 옵션을 선택할 수 있습니다. 콘텐츠를 바꿀 필요가 없으므로 가져오기 버튼을 클릭하기만 하면 페이지에 즉시 로드됩니다.

이것은 그다지 인상적이지는 않지만 디자인 프로세스를 실제로 가속화할 가능성이 있습니다. 다른 페이지 레이아웃(각각 내가 좋아하는 특정 요소가 있음)이 포함된 대규모 json 파일 컬렉션이 있는 경우. 그런 다음 빌딩 블록과 같은 파일을 사용하여 페이지에 하나씩 드래그할 수 있습니다. 내보낼 때 제공하는 제목에 설명이 포함되어 있는지 확인하십시오.

마지막 생각들

Divi의 드래그 앤 드롭 기능은 확실히 웹 디자인 워크플로를 향상시키는 데 유용한 도구가 될 수 있습니다. 처음에는 약간의 좌절감을 줄 수 있는 몇 가지 제한 사항이 있지만 이 기사가 이 기능을 활용하여 웹 디자인에서 생산성을 높일 개인용 드래그 가능한 파일 라이브러리를 만드는 방법을 이해하는 데 도움이 되기를 바랍니다.

아래 의견에서 자신의 아이디어를 듣고 싶습니다.

건배!