ElementorとWoodmartで柔軟なeコマース・ページ・レイアウト・ガイドを作成する

作動中 ワードプレス Eコマース・ウェブサイトを制作する際、ページレイアウトの自由度はウェブサイトの視覚的効果や訪問者の閲覧・購買体験に直接影響します。ウッドマート Elementorと互換性のあるプレミアムWooCommerceテーマとして、柔軟なページレイアウトと豊富なデザインオプションを提供します。Elementorページビルダーを使用すると、プログラミングの基礎なしでホームページ、製品ページ、カテゴリページやその他のページを自由にカスタマイズすることができます。

この記事では、Elementorを使ってWoodmartのページレイアウトをカスタマイズし、ブランドのポジショニングに合ったEコマースページを作成するためのプロセスとテクニックを紹介します。

画像[1]-ElementorによるWoodmartでの柔軟なeコマース・ページ・レイアウト作成ガイド

Elementorとテンプレートの継承を有効にする

Elementorプラグインをインストールして有効にする

  • ワードプレスのプラグインページへ
  • プラグイン」メニューをクリックし、「プラグインの追加」を選択します。
  • Elementor」を検索してインストールする。
  • インストールが完了したら、"Enable "を選択する。
画像[2]-柔軟なeコマース・ページ・レイアウト・ガイドを作成するためのWoodmartとElementor

新しいページを作成し、Elementorを有効にする。

  1. ページ」→「新規ページ」と進む。
  2. マイホーム」など、ページのタイトルを入力します。
  3. Elementorで編集 "ボタンをクリックして、ビジュアルエディタに入ります。

Elementorのページ編集インターフェイスに入ったら、レイアウトのカスタマイズを始めましょう。

画像[3]-ElementorによるWoodmartでの柔軟なeコマース・ページ・レイアウト作成ガイド

Elementorの基本構造を理解する

Elementorの編集エリアは3つの部分で構成されています:

  • トップバーページの上部に位置し、保存、プレビュー、レスポンスビューの切り替えなどの操作を行う;
  • パネル左側に位置し、利用可能なすべてのウィジェットと設定オプションが含まれています;
  • キャンバス真ん中のエリアは、実際にページを作り、コンポーネントをドラッグ&ドロップする場所です。

これらの要素を自由に組み合わせて、好きなページ構成を作ることができる。

画像[4]-ElementorによるWoodmartでの柔軟なeコマース・ページ・レイアウト作成ガイド

IV.よく使われる部品の紹介と使い方

ここでは、一般的な部品とその用途を紹介する:

  • キャプションメインタイトルまたはサブタイトルの追加
  • テキストエディタテキスト入力、フォント、サイズ、カラー調整可能
  • 写真商品画像、バナー、ロゴなどを挿入できます。
  • ボタンリンクのジャンプ、フォームの送信など。
  • ビデオYouTube、Vimeo動画の埋め込みに対応。
  • アイコンボックス/サービスブロック利点の紹介や機能のデモンストレーションに適している。
  • 画像回転/スライドショー複数の画像コンテンツを表示
  • グーグルマップショップの住所またはオフィスの所在地
  • けいしきプラグイン(例:WPForms)で使用するためにユーザー情報を収集します。

左側のコンポーネントを右側のページエリアにドラッグ・アンド・ドロップするだけで、リアルタイムでプレビューし、スタイルを調整することができます。

画像[5]-ElementorによるWoodmartでの柔軟なeコマース・ページ・レイアウト作成ガイド

V. タイポグラフィとスタイルの調整

Elementorは非常に多くのカスタマイズオプションを提供しています:

  • 段落/コラムの幅、内マージン、背景画像、背景色の設定
画像[6]-柔軟なeコマース・ページ・レイアウト・ガイドを作成するためのWoodmartとElementor
画像[7]-ElementorによるWoodmartでの柔軟なeコマース・ページ・レイアウト作成ガイド
  • 各コンポーネントのフォント、カラー、ボーダー、シャドウ、スペーシングなどの設定
画像[8]-ElementorによるWoodmartでの柔軟なeコマース・ページ・レイアウト作成ガイド
  • さまざまなデバイス(モバイル/タブレット/コンピュータ)に合わせてスタイリングできるレスポンシブ・ページ。
画像[9]-ElementorによるWoodmartでの柔軟なeコマース・ページ・レイアウト作成ガイド

さらに、ブロック全体をテンプレートとして保存し、他のページで簡単に再利用することもできます。

保存と公開

投稿する準備ができていない:。

下書きを保存」をクリックすると、後で修正するために保存することができます。

ページデザインが完成したら

  • 右上の "Publish "ボタンをクリックする。
画像[10]-ElementorによるWoodmartでの柔軟なeコマース・ページ・レイアウト作成ガイド

短い

ElementorとWoodmartを組み合わせると、ページコンテンツとタイポグラフィ柔軟な設定により、モジュールのドラッグ&ドロップ、タイポグラフィの調整、表示コンテンツのコントロールが可能で、ブランドのホームページ、カテゴリーページ、商品詳細ページなど、ブランドのトーンに合ったビジュアルスタイルを作成できます。この組み合わせにより、開発者に頼ることなく、プロフェッショナルなWooCommerceストアページを素早く構築することができます。


お問い合わせ
チュートリアルが読めない?無料でお答えします!個人サイト、中小企業サイトのための無料ヘルプ!
カスタマーサービス WeChat
カスタマーサービス WeChat
電話:020-2206-9892
QQ咨询:1025174874
Eメール:info@361sale.com
勤務時間: 月~金、9:30~18:30、祝日休み
© 複製に関する声明
この記事はzzzrによって書かれた
終わり
好きなら応援してください。
クドス153 分かち合う
おすすめ
解説 ソファ購入

コメントを投稿するにはログインしてください

    コメントなし