リボンは、Webサイトでアナウンスを行うための視覚的に楽しい方法です。 リボンを使用できる状況はたくさんありますが、Woocommerceストアでの販売、割引、または在庫切れのアナウンスでこれらを見つけることがよくあります。

リボンは、訪問者がWebサイトに到着するとすぐに、セールまたは割引について訪問者に通知するために使用されます。 このチュートリアルでは、 Elementorを使用してリボンを追加する方法を理解します。

なぜリボンを使用する必要があるのですか？

リボンは、アナウンスを行うときに訪問者を即座に引き付けるための優れた方法です。 たとえば、特定の商品の割引を発表した後、その商品のサムネイルに割引リボンを適用すると、ユーザーはすぐにその商品をクリックできます。

リボンは、特定の方法で使用すると視覚的に魅力的です。 彼らはユーザーが無関係な製品を通過し、あなたのウェブサイトのコンバージョンと販売を改善するのを助けることができます。

Elementorを使用してカスタムリボンを追加する方法

プロセスを開始するには、ウィジェットを追加する内部セクションを追加する必要があります。

次に、セクション内の列をドラッグする必要があります。 このチュートリアルでは、 1列の構造を使用します。

上記の設定が完了したら、先に進んでリボンのタイトルを作成できます。

次のステップでは、[詳細設定]タブの[ CSSクラス]に進み、フィールドに「 gc-ribbon-style 」を追加します。

その下に、次のカスタム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に参加して、コンテンツに関する最新情報を頻繁に入手してください。