Divi를 위한 20개 이상의 유용한 바닥글 튜토리얼

우아한 테마 블로그에는 훌륭한 Divi 튜토리얼이 많이 있습니다. 이 튜토리얼을 통해 Divi로 무엇이든 할 수 있는 방법을 배울 수 있습니다. 여기에는 훌륭한 바닥글을 디자인하는 방법이 포함됩니다. 이 기사에서는 Divi 테마 빌더와 함께 사용할 수 있는 20개 이상의 유용한 Divi 바닥글 튜토리얼을 살펴보겠습니다. 모든 문서에는 데스크톱 및 모바일 화면용 바닥글 작성에 대한 단계별 지침이 포함되어 있습니다. 많은 파일에는 JSON 파일 다운로드 및 비디오 지침이 포함됩니다.

1. 사용자 정의 바닥글 만들기

이 튜토리얼은 Divi Builder를 사용하여 사용자 정의 전역 바닥글을 만들고 구축하는 과정을 안내합니다. 이것은 Divi 바닥글과 Divi 테마 빌더를 시작하기 위한 훌륭한 튜토리얼입니다.

튜토리얼 보기

2. Divi 바닥글을 고정하기

이 Divi 튜토리얼은 Divi 바닥글 내의 요소를 화면 하단에 고정하는 방법을 보여줍니다. 요소가 바닥글 내의 해당 위치에 도달하면 고정이 중지되고 적절한 위치에 유지됩니다. 데스크톱에서는 전체 연락처 정보를 표시하고 휴대전화에서는 간단한 정보를 표시합니다. 바닥글은 해당 위치에 도달할 때까지 더 작은 크기입니다. 제자리에 고정되면 정상적인 크기로 자랍니다.

튜토리얼 보기

3. 고정 바닥글 표시 만들기

이것은 사용자가 바닥글 영역으로 스크롤할 때 표시되는 고정 바닥글을 만드는 방법을 보여줍니다. 바닥글은 커튼을 치거나 창문을 흔드는 것처럼 드러납니다. 일반적으로 CSS가 필요하지만 이 자습서에서는 Divi의 설정으로 CSS를 수행하는 방법을 보여줍니다.

튜토리얼 보기

4. Divi 바닥글 고정

이 튜토리얼에서는 사용자가 스크롤할 때 저작권 표시와 소셜 아이콘이 있는 웹사이트 하단 표시줄을 그대로 유지하는 방법을 보여줍니다. CSS 또는 jQuery를 사용하여 수행하는 방법과 코드를 사용하는 위치를 보여줍니다.

튜토리얼 보기

5. 하단 바닥글 표시줄에 창의적인 배경 디자인 추가

이 튜토리얼은 바닥글 하단의 바닥글 막대에 디자인을 추가하는 방법을 보여줍니다. 구분선 및 기타 섹션 설정을 사용하여 페이지 하단과 혼합되는 창의적인 배경을 추가합니다.

튜토리얼 보기

6. 모바일 고정 바닥글 막대 만들기

이 튜토리얼에서는 특히 모바일 장치용 고정 바닥글 막대를 만드는 방법을 보여줍니다. 그것은 Divi의 내장된 고정 옵션을 사용하고 3개의 다른 고정 바닥글 바 디자인을 만듭니다. 바닥글 막대에는 4개의 탐색 버튼이 있습니다. CSS가 포함되어 있습니다.

튜토리얼 보기

7. Divi의 섹션 구분선 아래에 아름다운 바닥글 스크롤 표시 만들기

이것은 고정 바닥글을 표시하는 바닥글 스크롤 표시를 만드는 방법을 알려줍니다. 바닥글은 섹션 구분선을 통해 표시되므로 물결 모양의 디자인이나 원하는 구분선 스타일을 사용할 수 있습니다. 여기에는 CSS의 작은 스니펫이 포함되어 있습니다.

튜토리얼 보기

8. 고정 바닥글 막대 만들기

이 튜토리얼은 Divi로 만든 고정 하단 바닥글 바를 만드는 방법을 보여줍니다. 바닥글 막대는 제자리에 유지되며 사용자가 페이지 맨 아래로 스크롤할 때 바닥글에 완벽하게 맞습니다. 여기에는 사용자 정의 CSS가 포함됩니다.

튜토리얼 보기

9. 떠 있는 바닥글 서랍 디자인하기

이것은 화면 하단에 고정되고 사용자가 아이콘을 클릭할 때 열리는 플로팅 서랍을 만드는 방법을 보여줍니다. 토글과 유사하게 작동합니다. 서랍에는 모든 Divi 콘텐츠가 포함될 수 있으며 모든 Divi 섹션으로 만들 수 있습니다. 여기에는 사용자 정의 코드가 포함됩니다.

튜토리얼 보기

10. 글로벌 바닥글에 게시물 카테고리 메뉴 위젯 추가

이것은 표준 WordPress 게시물 카테고리 메뉴 위젯을 Divi 바닥글에 추가하는 방법을 보여줍니다. 범주 구조를 설정하고, 여러 메뉴를 만들고, 위젯을 만든 다음 전역 바닥글에 표시하는 방법을 보여줍니다.

튜토리얼 보기

11. Divi의 고정 옵션으로 고정 바닥글 막대 만들기

이 튜토리얼에서는 사용자가 바닥글에 도달할 때까지 화면 하단에 고정되는 바닥글 막대를 만드는 방법을 보여줍니다. 그러면 바닥글 막대가 제자리에 고정되고 색상이 변경됩니다. 흥미로운 클릭 유도문안을 만듭니다. 데스크톱 버전에는 연락처 정보와 버튼이 포함되어 있습니다. 전화 버전에는 버튼만 포함되어 있습니다.

튜토리얼 보기

12. 글로벌 바닥글에서 대화식으로 연락처 세부 정보 강조 표시

이 자습서에서는 연락처 세부 정보를 대화형으로 만드는 방법을 보여줍니다. 연락처 세부 정보를 연속으로 3개의 모듈로 나눕니다. 사용자가 모듈 중 하나에 마우스를 가져가면 모듈이 다른 모듈보다 크게 확장되고 색상이 변경되고 텍스트가 변경되어 정보가 표시됩니다. 여기에는 CSS가 포함됩니다.

튜토리얼 보기

13. 동적 로고 추가

이 자습서에서는 바닥글 내에서 표준 로고를 동적으로 표시하는 방법을 보여줍니다. 이런 식으로 Divi 테마 옵션에서 웹사이트의 로고를 변경하면 바닥글이 자동으로 그에 맞게 변경됩니다.

튜토리얼 보기

14. 특정 페이지에서 바닥글 제거

이것은 Divi Theme Builder 설정을 사용하여 특정 페이지에서 바닥글을 제외하는 방법을 보여줍니다. 특정 페이지에서 바닥글을 사용하는 방법, 특정 페이지에서 바닥글을 제외하는 방법, 기본 바닥글을 숨기는 방법 등 다양한 방법을 보여줍니다.

튜토리얼 보기

15. 소셜 아이콘 추가

이 튜토리얼에서는 Divi 바닥글에 소셜 아이콘을 추가하는 방법을 배웁니다. 또한 Divi Builder를 사용하여 레이아웃에 맞게 스타일을 지정하는 방법도 배우게 됩니다.

튜토리얼 보기

16. 개인정보 보호 약관 링크 추가

이 튜토리얼에서는 개인 정보 및 약관 페이지에 대한 링크를 Divi 바닥글에 추가하는 방법을 배웁니다. 사용자 정의 WordPress 메뉴를 사용하여 2가지 다른 방법으로 추가하는 방법을 보여줍니다. 첫 번째 방법은 Divi 메뉴 모듈을 다룹니다. 두 번째는 Divi 사이드바 모듈을 다룹니다.

튜토리얼 보기

17. WordPress 메뉴 추가

이 튜토리얼은 WordPress 위젯을 사용하여 Divi 바닥글에 수직으로 쌓인 표준 WordPress 메뉴를 추가하는 방법을 보여줍니다. 메뉴와 위젯을 만드는 방법과 Divi와 함께 사용하는 방법을 단계별로 설명합니다.

튜토리얼 보기

18. 자동으로 업데이트되는 동적 저작권 연도 추가

이것은 Divi의 설정을 사용하여 현재 연도를 동적으로 표시하여 Divi 바닥글에 저작권 표시를 만드는 방법을 보여줍니다. 동적 옵션이 있는 간단한 텍스트 모듈을 사용합니다. 또한 저작권 기호를 만드는 방법과 웹사이트 이름 또는 기타 정보에 대해 클릭 가능한 링크를 추가하는 방법을 보여줍니다.

튜토리얼 보기

19. 3개의 예제로 단축 코드 추가

이 튜토리얼은 Divi 바닥글에서 단축 코드를 사용하는 방법을 보여줍니다. 단축 코드가 포함된 3가지 플러그인을 사용하는 방법을 단계별로 안내합니다. 텍스트 및 코드 모듈 모두에 단축 코드를 추가하는 방법을 보여줍니다.

튜토리얼 보기

20. 이메일 옵션 추가

이것은 이메일 선택 모듈을 Divi 바닥글에 추가하고 웹사이트와 일치하도록 스타일을 지정하는 방법을 보여줍니다. 필요에 가장 적합한 레이아웃을 결정하는 데 도움이 되도록 설정과 함께 몇 가지 예를 보여줍니다.

튜토리얼 보기

21. 빠질 수 없는 4가지 요소와 추가 방법

이 자습서에서는 바닥글 디자인에 포함해야 할 가장 중요한 요소에 대해 설명합니다. 4가지 요소를 분류하여 포함할 수 있는 항목의 유형을 보여줍니다. 또한 Divi 바닥글에 추가하는 방법도 보여줍니다.

튜토리얼 보기

22. 전체 화면 바닥글 만들기

이 자습서에서는 바닥글을 전체 화면으로 표시하는 방법을 보여줍니다. 전체 화면 바닥글은 사용자의 브라우저가 표시하는 화면 크기나 확대/축소 수준에 관계없이 화면에 맞게 조정됩니다.

튜토리얼 보기

23. Blurb 모듈을 바닥글 항목으로 사용

이것은 Divi 바닥글 내에서 광고 문구 모듈을 사용하는 흥미로운 방법을 보여줍니다. 단순히 링크 목록을 표시하는 대신, 블러브 모듈은 목록에 아이콘을 추가하여 글머리 기호에 대한 흥미로운 디자인을 생성할 수 있습니다. 또한 레이아웃에 맞게 스타일을 지정하는 방법도 보여줍니다.

튜토리얼 보기

24. 사용자 친화적인 바닥글을 만드는 5가지 팁

여기에서는 바닥글을 사용하기 쉽게 만드는 5가지 팁에 대해 설명합니다. 포함할 주요 요소를 보여주고 이를 개선하는 데 사용할 수 있는 도구에 대한 정보를 제공합니다. 팁은 모든 바닥글에 적용되지만 Divi에서 조정하는 방법에 대한 정보가 포함되어 있습니다.

튜토리얼 보기

25. 면책 조항을 추가하는 3가지 방법

이 튜토리얼은 Divi 바닥글에 면책조항을 추가하는 다양한 방법을 보여줍니다. 세 가지 방법에는 정적 면책조항, 고정 면책조항 및 애니메이션 면책조항이 있습니다.

튜토리얼 보기

무료 바닥글 템플릿을 검색하는 방법

ET 블로그에는 무료 Divi 바닥글이 많이 있습니다. "무료 바닥글", "무료 Divi 바닥글" 또는 이와 유사한 키워드를 검색하기만 하면 됩니다. 선택할 수 있는 무료 바닥글 템플릿이 많이 있습니다. 템플릿 팩에는 머리글과 바닥글이 모두 포함됩니다. 함께 또는 별도로 사용할 수 있습니다.

마무리 생각

Divi를 위한 20개 이상의 유용한 Divi 바닥글 튜토리얼을 살펴보았습니다. Divi 바닥글을 사용자 정의하는 방법에는 여러 가지가 있습니다. 이 20개 이상의 자습서는 방법을 배울 수 있는 좋은 방법이며 자신만의 것을 만들 수 있는 많은 아이디어를 제공합니다. 여기에는 Divi 테마 빌더를 사용하는 방법에 대한 지침이 포함되어 있습니다. 그들 중 몇몇은 CSS와 jQuery를 사용하는 방법을 보여줍니다.

우리는 당신의 의견을 듣고 싶습니다. 이 20개 이상의 유용한 Divi 바닥글 튜토리얼을 사용해 보셨습니까? 의견에서 가장 좋아하는 것을 알려주십시오.