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

erementor で検索します。

Elementorな！これは、WordPressのサイト作るときにめっちゃ便利なプラグインやで。

普通、WordPressやとデザインとかレイアウト決めるのにちょっと難儀するやん？

でもElementor使うと、画面でポチポチしてデザインできるねん。ドラッグ＆ドロップで、テキストや画像、ボタンなんかも好きなとこに置けるから、初心者でもサクサクかっこええページ作れるんやわ。

ほんで、基本無料やけど、もっと凝ったデザインとか機能使いたかったら有料版もあるで。プロっぽいサイト作りたいときはかなり頼りになるで〜！

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

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

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

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

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

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

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

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

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

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

１．Elementorでの編集のしかた

１．Elementorの使い方を覚える

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

２．セクションを追加する

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

３．ウィジェットを配置する

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

４．ウィジェットのカスタマイズ

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

５．スタイルと高度な設定

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

６．保存とプレビュー

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

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

あとがき

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

WordPressのダッシュボードから「ページ」→「新規追加」で新しいページを作成するねん。ページのタイトルは好きなん付けたらええで。

ページ作ったら、「Elementorで編集」ボタン押して、Elementorの編集画面に入るんや。ここからが本番やで！

Elementorのサイドバーから「WooCommerce Products」っちゅうウィジェットを探して、それをドラッグ&ドロップして好きな場所に配置するんや。ウィジェット追加したら、商品一覧がバーッと表示されるはずやで。

ウィジェット追加したら、デザインやレイアウトを好みに合わせてカスタマイズできるんや。「列数」や「表示する商品数」、さらに「ソートオプション」なんかも調整できるさかい、自分の思うように設定したらええわ。

ええ感じに仕上がったら、「公開」ボタン押して完成や！これで、自分のサイトにオリジナルの商品一覧ページができるで。

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