メイソンリーレイアウトは、人気のあるモダンなスタイルです。ブロックエディターのウェブサイトで簡単に使用できます。GutenKit Advanced Masonry ブロックは、WordPress ウェブサイトで Pinterest のようなメイソンリースタイルをデザインするために必要なすべての機能を提供します。

このドキュメントに従って、ブロック エディター Web サイトに Masonry レイアウトを追加する方法を学習します。 

GutenKit アドバンスド メイソンリー ブロックの使い方 #

GutenKit Advanced Masonry ブロックのさまざまな部分を見ていきましょう。

石積みアイテムを追加する #

GutenKit Advanced Masonry Blockに入ると、デフォルトで3つのMasonryアイテムが読み込まれます。 「石積みアイテムを追加”ボタンをクリックします。これらの項目の中から、任意のタイプのブロックを追加できます。 

ご了承ください 石積みアイテムにブロックを追加すると、すべてのブロック設定が利用可能になります。 

石積み設計の設定 #

ブロック設定を開いて、 コンテンツタブ.

コンテンツタブ

• スタイルの選択: Masonry と Grid の間でスタイルを選択します。
• 列の数: 列の数を定義します。
• ギャップ: 列間の間隔を調整します。
• カテゴリ別にフィルターを表示: この切り替えボタンを有効にすると、カテゴリ名が表示されます。

スタイル 石積みデザイン #

から スタイルタブでは、メイソンリーアイテムとフィルターアイテムのカスタマイズ部分に焦点を当てます。

スタイルタブ

アイテム

• パディング: I石積みアイテム内のスペースを増やします。
• 境界半径: 石積みアイテムの境界の丸みを調整します。

以下の設定は通常状態とホバー状態の両方に適用されます。

• 背景の種類: 背景の種類を単色とグラデーションから選択します。
• 国境: 境界線の色を選択し、スタイルと太さを変更します。 
• ボックスシャドウ: 編集アイコンをクリックすると、ボックスのシャドウ設定がすべて表示されます。

フィルター項目

• 位置合わせ: フィルター カテゴリ項目の配置を左、中央、右に調整します。
• ギャップ: フィルター カテゴリ項目間のギャップを定義します。
• タイポグラフィ: フィルター カテゴリ名のすべてのタイポグラフィのカスタマイズ設定を取得します。

以下の機能は、通常、ホバー、アクティブの各モードで調整できます。ここで、アクティブ モードとは、ディスプレイに表示されている、またはクリックしたときに表示される現在の石積みセクションを指します。

• フォントの色: フィルター カテゴリのフォントの色を変更します。
• 背景: 背景スタイルを単色とグラデーションから選択します。
• 国境: 色、太さ、スタイルなどの境界線の設定を取得します。
• ボックスシャドウ: ケータリング枠に影効果を与えます。
• パディング: 間のスペースを調整します 
• 境界半径: フィルター カテゴリの境界の丸みを定義します。

フィルターラッパー

• 下の間隔: 石積みコンテンツの間にスペースを確保します。
• 背景の種類: 背景の種類を単色とグラデーションから選択します。
• パディング: フィルター カテゴリの周囲にスペースを作成します。
• 境界線の半径: 境界線の丸みを調整します。

これで完了です。ブロック エディターの Web サイトで、魅力的でレスポンシブな石積みデザインを設計できるようになります。