ボタンの作成

ボタンの作成(通常の設定)

ブロックを選択し、左上か少し右上に表示されている”+”をクリック

レイアウト要素⇒”ボタン”をクリック

 

右側にもボタンのカスタマイズ画面が表示されます。

①ボタンのデザインを選択

②文字入力

③リンクさせたいページがある場合は、URLを入力

④ボタンの色

⑤文字の色

ボタンの作成(入力補助で作成)

1.ブロックを選択し、左上か少し右上に表示されている”+”をクリック

2.入力補助⇒”ボタン”をクリック

3.右側のブロックタブをクリックすると詳細設定ができます。

①リンク先URL

②別タブで開く場合
⇒右側をクリック

③サイズ
大、中、小と3サイズあるので、プレビューを見ながらいいサイズを探してクリック

④ボタンデザイン設定
10種類の中から選択

⑤ボタンカラー
・背景
・テキスト
・枠線

②text color
文字の色

見出しのデザイン変更(入力補助で作成)

1.ブロックを選択し、左上か少し右上に表示されている”+”をクリック

2.入力補助⇒”見出し”をクリック

3.右側のブロックタブをクリックすると詳細設定ができます。

①見出し詳細設定

H2、H3、H4、H5を設定

②見出しデザイン設定

③見出しカラー設定
・枠線色
・背景色
・テキスト色

見出しのデザイン(通常の設定)

1.ブロックを選択し、左上か少し右上に表示されている”+”をクリック

2.一般ブロック⇒”見出し”をクリック

3.右側のブロックタブをクリックすると詳細設定ができます。

見出し設定
・レベル
・テキストの配置

テキストの色

リンク先を入力したり、太字にする場合は、こちらのブロック内で設定します。

違うデザインで表示したいときに便利

「通常の設定」はワードプレスに備わった機能ですが、「入力補助」はDiverに備わった機能です。
H2やH3の見出しデザインを変えたいときに便利な機能です。

プレビュー画面で見てみると、このような感じ。

Diverで新エディター「Gutenberg」に対応した機能

Diverでは、新エディター「Gutenberg」に対応した機能がたくさんあります。
関連記事は、こちら

*【入力補助】Gutenberg対応について

*【入力補助】アイコンボックスの使い方【Gutenberg】

*【入力補助】セクションの使い方【Gutenberg】