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