WoodMartブランド表示ブロックの設定とスタイルの最適化

もし、あなたのウェブサイトに共同ブランドや販売ブランドのロゴを表示したいのであれば、複雑なプラグインを使う必要はない。ウッドマートレイアウトツールを持参すること。カスケーディングスタイルシートこの記事では、素材の準備からCSSの美化まで、ブランド・ディスプレイ・モジュールの構築プロセスを順を追って説明します。この記事では、素材の準備からレイアウトの構築、CSSの美化までをステップ・バイ・ステップで行い、ブランド・ディスプレイ・モジュールの構築を完成させます。

ステップ1：ブランドロゴ素材の準備

デザインを始める前に、展示するブランドを整理する。ロゴ.このように操作することが推奨される：

画像加工ツール（Photoshop、Figma、Canvaなど）を開く。
すべてのブランドロゴを、幅200px、高さ100pxなど、均一の縮尺に調整する。
視覚的な一貫性を向上させるために、背景を透過したPNGまたはSVGとして保存します。
命名規則（例 ブランドnike.png属ブランドadidas.png)で簡単にアップロード管理できる。

ステップ2：Elementorでブランド表示構造を構築する

WoodMartはElementorに対応しています。ホームページの作成とカスタムテンプレートの使い方を紹介しよう：

WordPressのバックエンドにログインし、「ページ」>「ホームの編集」に進みます。

Elementorで編集をクリックする。
エディターで "+"をクリックし、新規の セクションセレクション 6カラムレイアウト.

の各列をクリックする。 + ボタンをクリックして "Image "ウィジェットを追加します。

アップロードボタンをクリックし、対応するブランドロゴを選択します。
ジャンプ機能が必要な場合は、画像をクリックしてカスタムリンクを追加してください（例：ブランド製品ページへのジャンプ）。

ロゴが6つ以上ある場合は、このブロックをコピーして次の行に続ける。

ヒント：組版の柔軟性を高めるために、「内部ブロック」を使って画像を入れ子にし、クラス名で統一することができます（たとえば ブランドロゴ)で、スタイルを簡単かつ統一的に管理できる。

ステップ3：ブランディング・ブロックにクラス名を追加する

Elementorでブランド表示領域全体を選択し、次のようにします：

ブランド表示ブロックの一番外側をチェックする。
左側の設定欄で 高いレベル > CSSクラス.

入力クラス名 ブランドロゴ(ドットなし）。
更新をクリックして保存します。

これは、スタイル制御を容易にするために、表示モジュール全体に統一されたCSSマークアップを設定します。

ステップ4：WordPressにカスタムCSSを追加する

次に、このスタイルを ブランドロゴ ブロック

WordPressのバックエンドに戻る。
入り込む 外観 > カスタマイズ > 追加CSS.
以下のコードを貼り付ける：

.brand-logos {
  display: flex; flex-wrap: wrap；
  flex-wrap: wrap; justify-content: center；
  justify-content: center; margin: 0; margin: 0
  gap: 20px; padding: 30px 0；
  padding: 30px 0; padding: 30px 0；
}

.brand-logos img {
  max-width: 160px; max-height: 80px; }.
  max-width: 160px; max-height: 80px; } { .brand-logos img { max-width: 160px; max-height: 80px; } }
  object-fit: contain; filter: grayscale(100%); }.
  filter: grayscale(100%)；
  filter: grayscale(100%; transition: filter 0.3s ease; }.
}

.brand-logos img:hover { { } }.
  filter: grayscale(0%); }.
}

Publish "をクリックしてスタイル設定を保存します。
フロントページを更新して、効果があるかどうかを確認する。

ステップ5：表示効果をモバイルに合わせる（オプション）

携帯電話でブランドロゴをよりきれいに表示するには、メディアクエリを追加することをお勧めします：

メディア (max-width: 767px) { { .brandlogos img
  ブランドロゴ
    max-width: 45%。
  }
}

上記のように、追加したCSSの最終行に追加する。

ステップ6（上級）：プレゼンテーション機能の強化（オプション）

このブランディングエリアを盛り上げたいなら、以下のエクステンションを試してみてほしい：

タイトル追加ブランドエリアの上にタイトルを追加する。
回転機能の使用: ウッドマート独自の「商品ブランディングスライダー」またはElementorのカルーセルで実装。ローリング・ショーケース.
ロゴ画像の読み込み遅延インストールと有効化 WPロケットもしかしたら Lazy Load プラグインホームページへの負荷が軽減される。
カテゴリー・ジャンプ各ロゴには、そのブランドのカテゴリーページにジャンプするリンクがあります。

概要

支出ウッドマート歌で応えるカスケーディングスタイルシート軽量で統一されたスタイルのブランド表示ブロックを作成でき、さまざまなEコマースホームページ、ブランドプロモーションページ、テーマページに適しています。素材さえ準備すれば、20分もあればすべての構築が完了します。

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