Elementor で WooCommercenの商品一覧ページを作成する

elementor ネットショップ
elementor

erementor で検索します。

するとElementor Website Builder とEssential Addons for Elementor 、この2つをインストールして有効化します。そして設定画面に移動します。

WooCommerce Elements の Prodoct Orid をOnに切り替えます。これで商品一覧が表示されます。

1.「固定ページ」の「新規追加」でページを作っていく

まずは「タイトル」に「商品一覧」と入力します。次に「Elemeter」で編集します。左側の一番下にある歯車マーク(設定)を押して、固定ページレイアウトのデフォルトから「Elementor Fll Wide」を選びます。

トップページには「Canvas」がいいと思います。「Elementor Canvas」を選びます。背景画像には「Canva」をクリックします。アカウントを持ってない方は検索をして作成してください。

Canvaが表示されたら「プレゼンテーション」を選びます。

「背景」の設定をします。上に「カラー」が表示されるのでクリックします。左上の「+」をクリックすると「新しいカラーを追加」が表示されるので、好みの色を選びます。私は薄いグリーンを選びました。家族の画像を使うので「写真」から「家族」と検索します。

「有料」でないと透明化できません。したがってこのまま使います。画像を選んだら右上の「共有」からファイルの種類を「jpg」に切り替えてダウンロードします。ダウンロードした画像はサイズが大きすぎるので「WebP」で20KB以下にします。

その画像を WordPress の「メディアライブラリー」へアップロードします。

再び Elementor に戻り、「画像を編集」から「高度な設定」にします。

1.Elementorでの編集のしかた

1.Elementorの使い方を覚える

まず、WordPressのダッシュボードから「ページ」か「投稿」を選んで、そのページを「Elementorで編集」ボタン押して開くんや。これで、Elementorの編集画面に入れるわ。

2.セクションを追加する

編集画面に入ったら、まず「+」ボタンを押して「セクション」を追加するんや。セクションっちゅうのは、ページの基本的なレイアウトの部分やね。横に何個の列を並べるかとか決められるんやで。

3.ウィジェットを配置する

次に、左側にあるウィジェットっちゅうパーツを、右の編集画面にドラッグ&ドロップするんや。「見出し」とか「テキストエディター」とか、「画像」なんかもあるさかい、好きなん選んで配置したらええわ。

4.ウィジェットのカスタマイズ

ウィジェットを配置したら、それをクリックして設定画面開けるねん。ここでテキストを編集したり、フォントや色を変えたり、画像のサイズを調整したりできるんやで。要は、自分の好きなようにデザインをカスタマイズできるってわけや。

5.スタイルと高度な設定

ウィジェットの「スタイル」タブでは、もっと細かいデザイン調整ができるんや。パディングやマージンを調整したり、背景色変えたり、ボーダーつけたりできるわ。あと、「高度な設定」タブでは、モーションエフェクトとかレスポンシブデザインの設定もできるで。

6.保存とプレビュー

編集が終わったら、画面下にある「更新」ボタンか「保存」ボタンを押して変更を保存するんや。その後、プレビューを見て、ちゃんと表示されてるか確認したら完璧や!

    これでElementorを使ったページ編集の流れはバッチリや!直感的で簡単やから、どんどん試してみてな。

    あとがき

    ElementorでWooCommerceの商品一覧ページ作るんやったら、まず「WooCommerce」のプラグインと「Elementor」がちゃんとインストールされとることを確認せなあかんで。

    1. 新しいページを作る:
      WordPressのダッシュボードから「ページ」→「新規追加」で新しいページを作成するねん。ページのタイトルは好きなん付けたらええで。
    2. Elementorで編集する:
      ページ作ったら、「Elementorで編集」ボタン押して、Elementorの編集画面に入るんや。ここからが本番やで!
    3. 商品一覧ウィジェットを追加する:
      Elementorのサイドバーから「WooCommerce Products」っちゅうウィジェットを探して、それをドラッグ&ドロップして好きな場所に配置するんや。ウィジェット追加したら、商品一覧がバーッと表示されるはずやで。
    4. デザインをカスタマイズする:
      ウィジェット追加したら、デザインやレイアウトを好みに合わせてカスタマイズできるんや。「列数」や「表示する商品数」、さらに「ソートオプション」なんかも調整できるさかい、自分の思うように設定したらええわ。
    5. 保存して公開する:
      ええ感じに仕上がったら、「公開」ボタン押して完成や!これで、自分のサイトにオリジナルの商品一覧ページができるで。

    こんな感じで、Elementor使ったら簡単にWooCommerceの商品一覧ページ作れるんやで。頑張ってな!

    何なりとお申し付けください。