플러그인 없이 Divi에서 플로팅 배너를 만드는 방법

게시 됨: 2024-10-08

플로팅 배너는 전반적인 사용자 경험을 방해하지 않으면서 효과적으로 사용자의 관심을 끌고 주요 메시지를 제시합니다. 스크롤 트리거와 결합하면 방문자가 페이지를 탐색할 때 이러한 배너가 동적으로 표시되어 적시에 적시에 정보를 제공함으로써 사용자 참여를 향상시킵니다.

이 글은 추가 타사 플러그인의 도움 없이 Divi에서 시각적으로 매력적이고 효과적인 플로팅 배너를 만드는 과정을 안내합니다. 모양을 사용자 정의하는 것부터 스크롤 동작을 기반으로 표시를 트리거하는 것까지 스크롤하는 동안 플로팅 배너의 모양을 전략적으로 시간을 정할 수 있습니다. 동시에 제안, 공지 사항 또는 클릭 유도 문구를 원활하게 효과적으로 홍보할 수도 있습니다.

스크롤 동작을 기반으로 Divi에서 플로팅 배너를 만드는 방법(플러그인 없음)

1단계: 사용자 정의 본문 템플릿 생성 또는 편집

WordPress 대시보드에서 Divi -> Theme Builder 로 이동합니다. 테마 빌더 페이지에서 새 본문 템플릿을 생성하거나 전역 또는 사용자 정의 본문 추가 버튼을 클릭하거나 수정하려는 템플릿을 선택하여 기존 템플릿을 편집합니다.

이 예에서는 단일 게시물 템플릿에 플로팅 배너를 표시하므로 모든 게시물 템플릿을 선택하여 편집합니다.

새 섹션 추가

Custom Body 템플릿 편집기에 들어가면 페이지에 대한 새 섹션을 만듭니다. 플로팅 배너 요소가 페이지에서 너무 크지 않고 비례적으로 보이도록 하기 위해 섹션 크기를 25% 너비로 설정했습니다.

2단계: 플로팅 배너 콘텐츠 추가

모듈 추가

다음으로 플로팅 배너 콘텐츠를 추가하겠습니다. 새 모듈을 추가하려면 섹션 내부의 " + " 버튼을 클릭하세요 . 그런 다음 텍스트, 버튼, 클릭 유도 문안 모듈 등과 같이 플로팅 배너 콘텐츠로 표시하려는 모듈을 선택합니다. 이 예에서는 클릭 유도 문안 모듈을 선택합니다.

모듈 사용자 정의

플로팅 배너 콘텐츠를 표시하는 수단으로 사용하려는 모듈을 추가한 후 우리가 할 일은 모듈을 조정하고 스타일을 지정하는 것입니다. 원하는 대로 모듈을 사용자 정의할 수 있습니다. 이 예(Call to Action 모듈)에서는 텍스트 제목 및 본문 교체, 버튼 및 링크 URL 추가, 배경 모듈 색상 변경, 여백 추가 등 몇 가지 변경 사항을 적용합니다. 테두리 반경 등을 추가합니다.

CSS 클래스 추가

다음으로 모듈의 고급 탭에 " floating-banner-content "라는 사용자 정의 CSS 클래스를 추가합니다.

플로팅 배너 콘텐츠 디자인을 마친 후에는 모든 변경 사항을 저장하는 것을 잊지 마세요.

3단계: 사용자 정의 CSS 및 JavaScript 코드 조각 추가

다음으로 Divi 테마 옵션에 사용자 정의 CSS 및 JavaScript 스니펫을 추가하겠습니다.

사용자 정의 CSS 추가

Divi 테마 옵션으로 이동하여 사용자 정의 CSS(WordPress 대시보드 -> Divi -> Divi 테마 옵션 -> 일반 -> 사용자 정의 CSS )를 선택하세요. 그런 다음 아래 CSS 스니펫을 복사하여 사용 가능한 필드에 붙여넣으세요.

 @media 전용 화면 및 ( min-width: 768px ) { .floating-banner-content {
  위치: 고정;
  상단: 130px;
  왼쪽: 80%;
  변환: 번역X(-50%);
  상자 그림자: 0 2px 4px rgba(0, 0, 0, 0.2);
  Z-색인: 9999;
  불투명도: 0;
  가시성: 숨김;
  전환: 불투명도 0.3초 완화, 가시성 0.3초 완화;
}
}

@media 전용 화면 및 ( min-width: 768px ) { .floating-banner-content.active {
  불투명도: 1;
  가시성: 가시성;
}
}

JavaScript 코드 추가

Divi Them 옵션 페이지에서 통합 탭으로 이동하세요. 다음으로, 아래의 JavaScript 스니펫을 블로그의 < head >에 코드 추가 필드에 붙여넣으세요.

 <스크립트>
jQuery(문서).ready(함수($) {
    var 배너 = $('.floating-banner-content');

    $(창).스크롤(함수() {
        var scrollTop = $(this).scrollTop();
        if (scrollTop >= 400) {
            배너.addClass('활성');
        } 또 다른 {
            배너.removeClass('활성');
        }
    });
});
</script>

사용자 정의 CSS 및 JavaScript 스니펫이 추가되면 변경 사항 저장 버튼을 클릭하여 변경 사항을 적용합니다.

결과를 보려면 게시물이나 페이지 중 하나를 미리 볼 수 있습니다(플로팅 배너 요소를 배치하는 위치에 따라 다름).

CSS와 JavaScript 코드는 무엇을 했나요?

CSS 코드 분석

@media only screen and ( min-width: 768px ) :
- 이 미디어 쿼리는 특히 최소 화면 너비가 768픽셀인 장치(예: 태블릿 이상)를 대상으로 합니다. 플로팅 배너가 편안하게 표시될 수 있는 장치에 맞춰져 있는지 확인합니다.
.floating-banner-content :
- 이 선택기는 배너 콘텐츠가 포함된 모듈에 적용되는 'floating-banner-content' 클래스가 있는 요소를 대상으로 합니다.
.floating-banner-content 스타일:
- position: fixed; : 사용자가 페이지를 스크롤하더라도 그대로 유지됩니다.
- top: 130px; : 배너의 상단 위치를 뷰포트 상단으로부터 130픽셀로 설정합니다.
- left: 80%; : 배너를 왼쪽 가장자리에서 뷰포트 너비의 80% 위치에 배치합니다.
- transform: translateX(-50%); : 배너를 왼쪽으로 50% 이동하여 가로 중앙에 배치합니다.
- box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); : 배너에 은은한 그림자를 더해 깊이감을 줍니다.
- z-index: 9999; : 배너가 페이지의 다른 요소 위에 표시되도록 합니다.
- opacity: 0; : 처음에는 배너의 불투명도를 0으로 설정하여 배너를 숨깁니다.
- visibility: hidden; : 배너 내용이 표시될 때까지 숨깁니다.
- transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out; : 배너의 불투명도 및 가시성 변경 시 부드러운 전환 효과를 적용합니다.
.floating-banner-content.active :
- 이 선택기는 " active " 클래스도 포함하는 " floating-banner-content " 클래스가 있는 요소를 대상으로 합니다. 이 클래스는 표시되어야 할 때 배너에 추가됩니다.
.floating-banner-content.active 요소의 스타일:
- opacity: 1; : 불투명도를 1로 설정하여 배너를 보이게 합니다.
- visibility: visible; : 배너의 내용을 표시합니다.

JavaScript 코드 요약

이 JavaScript 코드는 사용자의 스크롤 위치에 따라 플로팅 배너의 가시성을 효과적으로 제어합니다.

사용자가 특정 임계값(이 경우 400픽셀 )을 지나 아래로 스크롤하면 배너가 표시됩니다.

사용자가 임계값 위로 다시 스크롤하면 배너가 사라집니다. 이 동작은 역동적이고 매력적인 사용자 경험을 제공합니다.

결론

이 글에서는 추가 플러그인 없이 Divi에서 역동적이고 매력적인 플로팅 배너를 만드는 방법을 알아냈습니다. 단계별 가이드를 따라 시각적으로 매력적인 배너를 만들고, 모양을 사용자 정의하고, 스크롤 동작에 따라 가시성을 제어하는 방법을 배웠습니다.

플로팅 배너를 사용하면 중요한 메시지를 전달하고, 주요 제안을 강조하고, 웹사이트의 전반적인 사용자 경험을 향상시킬 수 있습니다. 약간의 창의성과 사용자 정의를 통해 웹사이트 디자인에 완벽하게 통합되고 방문자의 시선을 사로잡는 플로팅 배너를 만들 수 있습니다.