ヒーローブロックをBlocksy Proコンテンツブロックでカスタマイズ：完全チュートリアル

ある ワードプレス デフォルトの記事ヘッダー画像と情報表示エリア（ヒーローセクション）は、サイト構築の過程で個性に欠ける傾向があります。ブロックジー・プロ コンテンツ・ブロック機能は、以下の方法でコンテンツを作成できるように提供されています。 グーテンベルク エディタはこれらのデフォルトモジュールをカスタマイズして置き換えることで、動的にロードされるカスタム投稿レイアウトを可能にします。

この投稿では、完全にパーソナライズされたヒーローブロックを構築し、それをすべてのシングル投稿テンプレートに適用して、ウェブサイトのコンテンツを美しくモジュール化する方法をハンズオンで紹介します。

I. コンテンツブロックの作成（コンテンツブロック）

まず、バックオフィスにログインし、順番に進む：
Blocksy > コンテンツブロック > 新規追加 > フック新しいコンテンツブロックを作りたい場合は、「カスタム・ヒーロー・セクション」など好きな名前をつけてください。

入り込む グーテンベルク エディターが完成したら、ページ構成の構築を開始する。

カスタム・ヒーロー構造の構築

1.グループブロックを追加し、背景を設定する

• を挿入する。 グループ・ブロック

• の幅を設定する。 全幅

• 背景色を選択する（例：ダークグレー）

• カスタムクラス（例えば：カスタム・ヒーロー・セクション)

2.2カラムレイアウトの作成

• スティック コラム(2列構造)

左列::

• スティック 注目画像を投稿する ブロック: このモジュールは、現在の記事のヘッダー画像をフォアグラウンドで動的にロードします。

右列::

• 以下のダイナミック・モジュールを挿入して、情報エリアを形成する：
  • 投稿者
  • 投稿日
  • 投稿タイトル
  • スペーサーが視界を調整
  • 任意の段落内容または説明文

として保存することもできます。 再利用可能モジュールその後の再利用のために。

第三に、パンくずナビゲーション（Breadcrumb）を追加する。

ユーザーナビゲーション体験を向上させるために、パンくずナビゲーションを追加することができます：

• スティック ショートコード・ブロック

• 以下のコードを貼り付ける：

[bloxy_breadcrumbs】。］

ブロックシー 現在地ナビゲーションは、記事のパスに基づいて自動的に生成される。

IV. ダイナミック・コンテンツのリアルタイム・プレビュー

動的データ（タイトル、画像など）をエディターでプレビューするには、開く：
ブロックシー設定 > ダイナミックコンテンツプレビュー任意の記事をプレビューソースとして選択し、コンテンツがどのように読み込まれるかをリアルタイムで確認できます。

V. フック位置と表示条件の設定

デザイン完成後、右側に ブロックシー 設定パネル：

• 場所（フック位置）セレクション コンテンツの前に
• 表示条件すべてのシングル投稿」を選択します。

コンテンツブロックを保存し、公開する。

VI.効果検証

どの記事を訪問しても、カスタムHeroブロックが正常に適用され、現在の記事のコンテンツ情報を自動的にロードしていることがわかります。コードを書く必要がなく、すっきりと美しく、レスポンシブです。

概要

レバレッジ ブロックジー・プロ できるコンテンツブロック機能：

• 再利用可能な記事テンプレート・モジュールを自由に作成できる
• 動的コンテンツの構造化されたプレゼンテーションを可能にする
• とおす グーテンベルク 外部のページビルダーに頼ることなく、エディターがすべてを行う！

カスタムヒーローセクションは、コンテンツブロックの一つの用途に過ぎません。また、ヘッダー、フッター、カスタムヒーローセクションの作成にも使用できます。 404ページなど、サイト全体にブランドの統一性と柔軟性を与えている。

最近の更新

お問い合わせ
チュートリアルが読めない？無料でお答えします！個人サイト、中小企業サイトのための無料ヘルプ！	カスタマーサービス WeChat
① 電話：020-2206-9892
② QQ咨询：1025174874
三 Eメール：info@361sale.com
④ 勤務時間: 月～金、9:30～18:30、祝日休み