Versatile Banner

음, 그렇다면 Versatile Banner의 “content” 설정 중 하나에 다음과 같은 내용을 추가할 수 있습니다:

<div class="xmas-banner-image"></div>

그리고 메인 테마나 새 컴포넌트에 CSS를 추가하세요. LINK_TO_MOBILE_IMAGE를 실제 이미지 링크로 교체할 수 있는 예시입니다:

.mobile-view .xmas-banner-image {
  background-image: url("LINK_TO_MOBILE_IMAGE");
  height: 50px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

.desktop-view .xmas-banner-image {
  background-image: url("LINK_TO_DESKTOP_IMAGE");
  height: 200px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

CSS를 조정해야 하지만, 이 정도면 시작하는 데 도움이 되길 바랍니다.

3개의 좋아요