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

elementor 未分類
elementor

erementor で検索します。

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

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

それでは「固定ページ」の「新規追加」でページを作っていきます。

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

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

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

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

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

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

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

「T」の見出しを画像の上にドラッグします。

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