코드 모듈은 플러그인 단축 코드 또는 정적 HTML과 같은 코드를 페이지에 추가할 수 있는 빈 캔버스입니다. 예를들어 Divi 슬라이더가 아닌 다른 슬라이더 플러그인을 사용하려는 경우 플러그인의 단축 코드를 표준 또는 꽉찬너비 코드 모듈에 배치하여 표시할 수 있습니다.
페이지에 코드 양식 모듈을 추가하는 방법
페이지에 코드(= Code) 모듈을 추가하기 전에 먼저 Divi Builder로 이동해야 합니다. 웹 사이트에 Divi 테마가 설치되면 새 페이지를 만들 때마다 게시물 편집기 위에 Divi Builder 사용 버튼이 표시됩니다.
이 버튼을 클릭하면 Divi Builder가 활성화되어 모든 Divi Builder 모듈에 액세스 할 수 있습니다.
비주얼 빌더(시각 빌더)에 들어가면 회색 더하기 버튼을 클릭하여 페이지에 새 모듈을 추가할 수 있습니다. 새 모듈은 행 내부에만 추가할 수 있습니다. 새 페이지를 시작하는 경우 먼저 페이지에 행을 추가하는 것을 잊지 마십시오. ‘행(Row)’ 및 ‘섹션(Section)’ 요소를 사용하는 방법에 대한 훌륭한 매뉴얼이 있습니다.
모듈 목록에서 “코드” 모듈을 찾아 클릭하여 게시물에 추가하세요.
모듈 목록을 검색할 수 있습니다. 즉, “코드”를 입력한 다음 찾아 추가할 수 있습니다! 모듈이 추가되면 모듈의 옵션 목록이 표시됩니다. 옵션은 컨텐츠, 디자인 및 고급의 세 가지 주요 그룹으로 구분됩니다.
사용 예시: 컨텐츠에 애니메이션 효과를 주기 위해 외부 스타일시트 추가
이 예제에서는 페이지의 요소에 애니메이션 효과를 추가하기 위해 Animate.css를 가져오는 링크 스크립트를 추가하겠습니다.
참고: Animate.css 파일에는 코드가 많기 때문에 필요한 페이지에만 로드 하는 것이 좋습니다.
일반 섹션과 꽉찬너비(1열)행을 추가하고 코드 모듈을 추가하기만 하면 됩니다.
컨텐츠 탭의 텍스트 상자에 코드를 추가합니다.
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>
이제 애니메이션을 적용하기 위해 CSS 클래스를 추가하기만 하면 됩니다. 이 예에서는 페이지를 로드 할 때 버튼이 바운스 되도록 할 것입니다.
버튼을 하나 추가하고, 버튼 모듈 설정의 고급 탭에서 CSS 클래스에 밑의 스타일을 입력합니다.
animate__animated animate__bounce
이제 페이지가 로딩될 때 버튼이 바운스 됩니다.
다음은 코드 모듈을 사용하는 방법에 대한 몇 가지 추가 예제입니다.
- 특정한 페이지에만 자바스크립트 코드 블록 또는 라이브러리를 추가합니다.
- 레볼루션 슬라이더와 같은 타사 플러그인을 사용합니다.
- 꽉찬너비 코드 모듈을 사용하여 보다 대화형 설문지, 연락처 양식 등을 위해 Typeform을 포함할 수 있습니다.
- 플로팅 액션 메뉴 추가
- 슬라이드 인 상단 막대 광고를 만듭니다.
- 플로팅 액션 버튼을 추가합니다.
팁: 줄 바꿈이 있는 코드를 추가하면 코드가 작동하지 않는 경우가 있습니다. 코드 모듈에 붙여 넣기 전에 텍스트 편집기에서 코드를 만들고(모두 한 줄에 작성) 넣는 것이 가장 좋습니다.
컨텐츠 옵션
콘텐츠 탭에는 텍스트, 이미지 및 아이콘과 같은 모듈의 모든 콘텐츠 요소가 있습니다. 모듈에 나타나는 것을 제어하는 모든 것은 이 탭에서 찾을 수 있습니다.
텍스트 > 코드
여기에서 현재 위치의 페이지에 표시하려는 HTML, CSS 또는 JavaScript 코드를 배치할 수 있습니다. 편집자와 관리자만 필터링 되지 않은 HTML을 게시 할 수 있습니다.
즉, 작성자나 기여자가 넣은 일부 코드가 모듈에서 제거 될 수 있습니다. 모듈에 단축 코드를 배치할 수도 있습니다. 이러한 단축 코드는 추가적으로 Divi 모듈에 감싸지지 않고 상위 열 내부에서 렌더링 됩니다.
관리자 라벨
쉽게 식별할 수 있도록 빌더에서 모듈의 레이블이 변경됩니다. 비주얼 빌더에서 Wire Frame보기를 사용할 때 이러한 레이블은 Divi Builder 인터페이스의 모듈 블록 내에 나타납니다
디자인 옵션
디자인 탭에는 글꼴, 색상, 크기 및 간격과 같은 모듈의 모든 스타일 옵션이 있습니다. 모듈 모양을 변경하는 데 사용할 탭입니다. 모든 Divi 모듈에는 거의 모든 것을 변경하는 데 사용할 수 있는 설정 목록이 있습니다.
최대 너비
여기에 입력 한 값은 코드 모듈 내에서 렌더링 되는 모든 콘텐츠의 너비를 정의된 값으로 제한합니다. 예를 들어 입력 필드에 50% 를 입력하면 코드 모듈의 내용이 포함된 열의 50 %로 줄어 듭니다.
고급 옵션
고급 탭에는 사용자 정의 CSS 및 HTML 속성과 같이 숙련된 웹 디자이너가 유용하다고 생각할 수 있는 옵션이 있습니다. 여기에서 모듈의 여러 요소에 맞춤 CSS를 적용할 수 있습니다. 또한 사용자 정의 CSS 클래스 및 ID를 모듈에 적용할 수 있으며 이는 하위 테마의 style.css 파일 내에서 모듈을 사용자 정의하는 데 사용할 수 있습니다.
CSS ID
이 모듈에 사용할 선택적 CSS ID를 입력하십시오. ID는 사용자 지정 CSS 스타일을 만들거나 페이지의 특정 섹션에 대한 링크를 만드는 데 사용할 수 있습니다.
CSS 클래스
이 모듈에 사용할 선택적 CSS 클래스를 입력하십시오. CSS 클래스를 사용하여 사용자 지정 CSS 스타일을 만들 수 있습니다. 공백으로 구분하여 여러 클래스를 추가할 수 있습니다. 이러한 클래스는 Divi 하위 테마 또는 Divi 테마 옵션 또는 Divi Builder 페이지 설정을 사용하여 페이지 또는 웹 사이트에 추가하는 사용자 정의 CSS 내에서 사용할 수 있습니다.
맞춤 CSS
맞춤 CSS는 모듈과 모듈의 내부 요소에 적용할 수도 있습니다. 사용자 정의 CSS 섹션에는 각 요소에 직접 사용자 정의 CSS를 추가할 수 있는 텍스트 필드가 있습니다. 이러한 설정에 대한 CSS 입력은 이미 스타일 태그 내에 있으므로 세미콜론으로 구분 된 CSS 규칙 만 입력하면 됩니다.
보이기 여부
이 옵션을 사용하면 모듈이 표시되는 장치를 제어할 수 있습니다. 태블릿, 스마트 폰 또는 데스크톱 컴퓨터에서 모듈을 개별적으로 비활성화하도록 선택할 수 있습니다. 다른 장치에서 다른 모듈을 사용하거나 페이지에서 특정 요소를 제거하여 모바일 디자인을 단순화하려는 경우 유용합니다.