CocoonのCTAボックスウィジェットの使い方とプチカスタマイズ

Cocoon・使い方

2020.03.152024.01.25

この記事は約3分で読めます。

CTAとは「Call To Action」の略で、日本語では「行動喚起」。

「詳細はこちら」とか「お申込みはこちら」「ご購入はこちら」といった案内ボタンを好きな場所にいくつでも簡単に設置する事が出来る機能がCocoonにはあります。

サイドバーに出すとこんな感じ。濃いグレーの背景枠が付きます。

使い方

[C] CTAボックスウィジェットを表示したいエリアに追加します。

すべての項目が任意なので、何も入力しなくてもエリアに追加すると同時に保存されます。

必要な項目にだけ入力し再度、保存します。

画像の「選択」ボタンは、反応しない場合があり、説明にある通り、一旦保存するなどしてリロードすると押せるようになります。

ボタンの色は標準で以下の通り、18色も用意されています。

各色のサンプルは以下です。

※ボタンの配置される場所の背景色はグレー：#444です。

簡単なCSS追記のみです。

CSS追記は以下のいずれかから行って下さい。

外観→カスタマイズ→追加CSS

外観→テーマエディター→style.css

ボタンの色は１８色もあり、自在に変更できるので、背景を少し変える程度のプチカスタマイズです。

Before

CSS

.cta-box {
background-color: #000;
border-radius:8px;
}

CSS

.cta-box {
background-color: #fff;
color:#444;
}

CSS

.cta-box {
border: solid 1px #9d9d9d;
border-radius: 8px;
background-color: #fff;
color:#444;
}

お好きなカラー設定には以下もご利用下さい。