Elementor를 사용하여 WordPress에 사용자 정의 리본을 추가하는 방법

Muneeb 워드프레스 튜토리얼 Oct 21, 2021

리본은 웹사이트에 발표하는 시각적으로 즐거운 방법입니다. 리본을 사용할 수 있는 상황이 많이 있지만 Woocommerce 매장의 판매, 할인 또는 품절 알림에서 종종 찾을 수 있습니다.

리본은 방문자가 웹 사이트에 도착하는 즉시 판매 또는 할인에 대해 알리는 데 사용됩니다. 이 자습서에서는 Elementor를 사용하여 리본을 추가하는 방법을 이해합니다.

리본을 사용해야 하는 이유

리본은 발표할 때 즉시 방문자의 관심을 끌 수 있는 좋은 방법입니다. 예를 들어 특정 제품에 대한 할인을 발표한 다음 해당 제품의 썸네일에 할인 리본을 적용하면 사용자가 즉시 해당 제품을 클릭하게 됩니다.

리본은 특정 방식으로 사용할 때 시각적으로 매력적입니다. 사용자가 관련 없는 제품을 살펴보고 웹사이트의 전환 및 판매를 개선하는 데 도움이 될 수 있습니다.

놀라운 웹사이트 만들기

최고의 무료 페이지 빌더 Elementor와 함께

지금 시작

Elementor를 사용하여 사용자 지정 리본을 추가하는 방법

프로세스를 시작하려면 위젯을 추가할 내부 섹션 을 추가해야 합니다.

다음으로 섹션에서 을 끌어야 합니다. 이 튜토리얼에서는 1열 구조를 사용할 것 입니다.

위의 설정을 완료하면 리본 제목 을 만들 수 있습니다.

다음 단계를 위해 고급 탭의 CSS 클래스 로 이동하고 필드에 " gc-ribbon-style "을 추가합니다.

그 아래에 다음 Custom CSS 를 추가해야 합니다.

.gc-ribbon-style {
text-shadow: 0em 0em 0.3em rgba(0,0,0,0.2);
background: #61CE70;
color: #ffffff;
font-size: 17px;
display: block;
width: calc(100% + 20px);
height: 50px;
line-height: 50px;
text-align: center;
margin-left: -10px;
margin-right: -10px;
position: relative;
top: 0px;
Z-index:10;
}

.gc-ribbon-style:before {
border-top: 10px solid #63a06c;
content: "";
position: absolute;
height: 0;
width: 0;
bottom: -10px;
left: 0;
border-left: 10px solid transparent;
}

.gc-ribbon-style:after {
border-top: 10px solid  #63a06c;
content: "";
position: absolute;
height: 0;
width: 0;
right: 0;
bottom: -10px;
border-right: 10px solid transparent;
}

거의 다 되었습니다. 그것을 게시 하고 웹사이트가 어떻게 작동하는지 확인하십시오.

이것이 Elementor를 사용하여 제품에 리본을 추가하는 방법입니다. Facebook과 Twitter에 가입하여 콘텐츠에 대한 업데이트를 자주 받아보세요.