Kadenceチュートリアル：Kadenceブロックでグラフィック・オーバーレイを作成しよう

画像表示ページでは、画像のオーバーレイ効果が視覚的な魅力を高め、メッセージをより直接的なものにする。ケイデンス・ブロック・プロ プラグインを 画像オーバーレイブロック 背景画像の設定、テキストの追加、設定のサポートホバーアニメーションやリンクジャンプにより、構造化された汎用性の高い画像表示モジュールとなっている。

このチュートリアルでは、イメージの選択、テキストの設定など、イメージオーバーレイの完全な設定プロセスについて説明します、ホバースタイル、ボーダーコントロールなど。

画像オーバーレイ挿入ブロック

ページエディターを開き、ブロックの追加をクリックし、ブロックのリストから 画像オーバーレイ そしてページに挿入される。

このブロックにはデフォルトでタイトルテキスト付きのプレースホルダー画像が含まれています。

背景画像の設定

画像エリアをクリックし、背景として使用する画像を選択します。テキストやオーバーレイ効果で表示しやすくするため、すっきりとした構図の画像を選択することをお勧めします。

リンクとホバー・アニメーションの設定

画像オーバーレイはブロック全体のクリックジャンプをサポートし、あなたはそれにリンクアドレスを追加し、新しいタブで開くかどうかを設定することができます。

右側の設定欄でホバーズーム、フェード、ぼかし、明るさの変化など、その時々のアニメーション効果。異なるアニメーションは、ページのスタイルに応じて柔軟に調整することができ、異なる視覚的な感情をもたらすでしょう。

見出しと小見出しの追加

このブロックは、メインタイトルとサブタイトルの追加をサポートしており、テキストエリアをクリックすると、コンテンツを直接入力することができます。

テキストは、フォント、フォントサイズ、色、行の高さ、文字の太さなどをカスタマイズして、さまざまなタイポグラフィスタイルのニーズに対応できます。

テキスト配置の設定

左揃え、中央揃え、右揃えなど、画像内のテキストの配置を調整できるほか、上下方向（上部、中央、下部）の配置設定にも対応。フレキシブルな配置は、ページを整然と保つのに役立ちます。

カスタムホバーオーバーレイスタイル

マウスホバーオーバーレイレイヤーは画像上に表示されます。オーバーレイの色、透明度、グラデーションの方向、アニメーションの遷移方法などを設定できます。

オーバーレイレイヤーの色と透明度を適切に設定することで、背景画像のメインコンテンツを隠すことなく、テキスト情報を強調することができます。

タイトルセパレータの追加

メインタイトルとサブタイトルの間にセパレーターラインを追加することで、コンテンツの階層を明確にすることができます。区切り線は太さ、長さ、色、スタイル（実線、点線など）を設定できます。

ボーダースタイルと角丸の設定

イメージ・オーバーレイ・ブロック全体にボーダーを追加し、ボーダーの幅、色、スタイルをコントロールすることができます。

ボーダー設定は、カードの境界線を強調し、視覚的な認識を高めるために、複数画像レイアウトで特に役立ちます。

ブロック内余白の設定

ケイデンス マージンの設定には2つの方法がある：

• ユニファイドセットアップ同じ値の4つのマージン

• 個別設定上下左右の4方向独立設定

余白を適切に設定することで、グラフィックは通気性を保ち、コンテンツの過密を避けることができる。

アプリケーション・シナリオの例

イメージ・オーバーレイ・ブロックは、次のような幅広い用途に使用できます。ページレイアウト例えば

• ホームページのグラフィック・セクションへの入り口

• 注目記事表示エリア

• 製品またはサービス・モジュール・カバー

• チーム・メンバー・カードのプレゼンテーション

• プロジェクトまたはポートフォリオの表紙

Row Layout、Advanced Grid、Tabsなどの他のKadenceブロックと組み合わせて、完全で美しいページ構造を構築できます。

概要

イメージ・オーバーレイ・ブロックは、イメージ表示の柔軟なコントロールを提供します。画像、テキスト、オーバーレイスタイル、インタラクティブアニメーションを設定することで、均一で構造化された表示モジュールを簡単に構築できます。

コードを書いたり、複雑な設定を必要とすることなく、さまざまなシナリオに対応した画像コンテンツのブロックを素早く構築できる。 ケイデンス・ブロック・プロ の非常に実用的な部分である。