코드 모듈은 플러그인 단축 코드 또는 정적 HTML 코드와 같은 코드를 페이지에 추가 할 수있는 빈 캔버스입니다. 타사 플러그인 (예 : 타사 슬라이더 플러그인)을 사용하려는 경우 플러그인 단축 코드를 표준 또는 전체 너비 코드 모듈에 배치하여 요소를 제한없이 표시 할 수 있습니다.
페이지에 코드 모듈을 추가하는 방법
페이지에 코드 모듈을 추가하려면 먼저 Divi Builder에 액세스해야 합니다. 일단 디비 테마 귀하의 사이트 웹, 당신은 버튼을 볼 것입니다 Divi Builder 사용 새 페이지를 만들 때마다 게시자 위에
이 버튼을 클릭하면 모든 Divi Builder 모듈에 액세스 할 수있는 Divi Builder가 활성화됩니다. 그런 다음 버튼을 클릭하십시오 비주얼 빌더 사용 비주얼 모드에서 생성기를 시작합니다.
버튼을 클릭해도됩니다 비주얼 빌더 사용 검색할 때 사이트 웹 WordPress 대시보드에 로그인한 경우 업스트림.
Visual Builder에 들어가면 회색 더하기 버튼을 클릭하여 페이지에 새 모듈을 추가 할 수 있습니다. 새 모듈은 행 내부에만 추가 할 수 있습니다. 새 페이지를 시작하는 경우 먼저 페이지에 행을 추가해야합니다.
모듈 목록에서 코드 모듈을 찾아 클릭하여 페이지에 추가하십시오. 모듈 목록을 검색 할 수 있습니다. 즉, "code"라는 단어를 입력 한 다음 Enter 키를 눌러 코드 모듈을 자동으로 찾아 추가 할 수 있습니다! 모듈이 추가되면 모듈 옵션 목록이 표시됩니다. 이러한 옵션은 세 가지 주요 그룹으로 구분됩니다. 내용 , 임신 et 고급 .
무딘 스타일 시트를 추가하여 개별 페이지의 콘텐츠에 애니메이션 효과를주는 사용 사례
이 예제에서는 Animate.css를 가져 와서 페이지의 요소에 애니메이션 효과를 추가하는 링크 스크립트를 추가합니다. Animate.css 파일에는 많은 코드가 포함되어 있으므로 필요한 페이지에만로드하는 것이 좋습니다.
일반 섹션과 전폭 줄 (1 열)을 추가하고 코드 모듈을 추가하십시오.
텍스트 상자에는 내용, 코드 조각을 추가합니다.
페이지에서 CSS 클래스 페이지의 모든 요소에 애니메이션을 적용하기 위해 몇 가지 CSS 클래스를 추가하기 만하면됩니다. 이 예에서는 페이지가로드 될 때 버튼을 바운스하겠습니다.
버튼 모듈 설정의 고급 탭에서 CSS 클래스 텍스트 상자에 "animated"및 "bounce"클래스 두 개를 입력합니다.
이제 페이지가로드 될 때 버튼이 튀어 오릅니다.
팁 : 줄 바꿈이있는 코드를 추가하면 코드가 작동하지 않는 경우가 있습니다. 텍스트 편집기에서 코드를 만들어 코드 모듈에 붙여 넣는 것이 좋습니다.
코드 내용 옵션
의 탭에서 내용, 텍스트, 이미지, 아이콘 등 모듈의 모든 콘텐츠 요소를 찾을 수 있습니다. 통제하는 모든 것 무엇 모듈에이 탭에 항상 나타납니다.
내용
여기에 현재 위치의 페이지에 표시하려는 HTML, CSS 또는 JavaScript 코드를 배치할 수 있습니다. 편집자와 관리자만 필터링되지 않은 HTML을 게시할 수 있습니다. 즉, 작성자 또는 기여자가 코드를 사용할 경우 코스에서 코드가 제거될 수 있습니다. 모듈에 단축 코드를 배치할 수도 있습니다. 이러한 코스 코드(단축 코드)는 추가 Divi 모듈 래퍼 없이 상위 열 안에 표시됩니다.
관리 라벨
쉽게 식별 할 수 있도록 생성기의 모듈 레이블이 변경됩니다. Visual Builder에서 WireFrame보기를 사용할 때 이러한 레이블은 Divi Builder 인터페이스의 모듈 블록에 나타납니다.
코드 디자인 옵션
디자인 탭에서 글꼴, 색상, 크기 및 간격과 같은 모든 모듈 스타일 옵션을 찾을 수 있습니다. 이 탭에서는 모듈의 모양을 수정할 수 있습니다. 각 Divi 모듈에는 거의 모든 것을 조정할 수있는 긴 디자인 설정 목록이 있습니다.
최대 너비
여기에 입력 한 모든 값은 코드 모듈에서 렌더링되는 모든 콘텐츠의 너비를 설정 값으로 제한합니다. 예를 들어 입력 필드에 50 %를 입력하면 코드 모듈의 내용이 포함 된 열의 50 %로 줄어 듭니다.
코드 고급 옵션 코드
고급 탭에는 사용자 정의 CSS 및 HTML 속성과 같이 숙련 된 웹 디자이너가 유용하다고 생각할 수있는 옵션이 있습니다. 여기에서 모듈의 여러 요소에 사용자 정의 CSS를 적용 할 수 있습니다. 또한 사용자 정의 CSS 클래스 및 ID를 모듈에 적용 할 수 있으며 이는 하위 테마의 style.css 파일에서 모듈을 사용자 정의하는 데 사용할 수 있습니다.
CSS ID
이 모듈에 사용하기 쉬운 CSS ID를 입력하십시오. ID를 사용하여 사용자 정의 CSS 스타일을 만들거나 페이지의 특정 섹션에 연결할 수 있습니다.
CSS 클래스
이 모듈에 사용할 선택적 CSS 클래스를 입력합니다. CSS 클래스를 사용하여 사용자 정의 CSS 스타일을 만들 수 있습니다. 공백으로 구분하여 여러 클래스를 추가할 수 있습니다. 이 클래스는 귀하의 디비 테마 하위 페이지 또는 페이지에 추가하는 사용자 정의 CSS 사이트 웹 Divi 테마 옵션 또는 Divi Builder 페이지 설정을 사용합니다.
맞춤 CSS
사용자 지정 CSS는 모듈 및 모듈의 내부 요소에 적용 할 수도 있습니다. Custom CSS 섹션에는 CSS를 각 요소에 직접 추가 할 수있는 텍스트 필드가 있습니다. 이러한 설정의 CSS 항목에는 이미 스타일 태그가 포함되어 있습니다. 따라서 세미콜론으로 구분 된 CSS 규칙을 입력하기 만하면됩니다.
시계
이 옵션을 사용하면 모듈이 표시되는 장치를 제어 할 수 있습니다. 태블릿, 스마트 폰 또는 데스크톱에서 개별적으로 모듈을 비활성화하도록 선택할 수 있습니다. 다른 장치에서 다른 모드를 사용하거나 페이지에서 일부 요소를 제거하여 모바일 디자인을 단순화하려는 경우 유용합니다.
이 튜토리얼은 끝났습니다.
