WordPressとElementor2020を使用してeコマースWebサイトを作成する方法

公開: 2022-07-10

このチュートリアルでは、完全にカスタマイズできるWordPressとElementor2020を使用してeコマースWebサイトを作成する方法を説明します。

WordPressは、eコマースWebサイトを含むすべてのタイプのWebサイトを構築するために最も使用されているCMSプラットフォームです。また、Elementorページビルダーを使用してすばらしいウェブページを作成する方法を学びます。これは現在、WordPressで最も人気のあるページビルダーです。 WordPressはインターネットの1/3以上を制御しています。 Sony、Bata、eBayなどの大手eコマース企業の大多数は、自社のWebサイトの開発と保守にifを使用しています。WordPressを使用することの最大の利点は、あらゆる種類のコーディング言語やその他の言語を学ぶ必要がないことです。あなたのウェブサイトを作るための専門用語。これはシンプルなドラッグアンドドロッププラットフォームであり、魅力的なユーザーフレンドリーなWebサイトを作成するのに役立つ多くの組み込みのテンプレートとレイアウトを提供します。また、EコマースWebサイトを簡単にインポートして、数分で稼働させることができる既成のテンプレートを提供します。

このチュートリアル全体を実行するだけで、外部の支援なしで独自のWebサイトを立ち上げて実行する準備が整います。このチュートリアルは、多くの人々がWebサイトを作成し、この残忍なeコマース業界での競争に勝ち抜くのに役立ちました。したがって、この簡単で自明のチュートリアルを実行し、生涯にわたって役立つスキルを習得してください。全体のプロセスは段階的なアプローチで教えられており、すべての情報グラフィックと絵の表現は、可能な限り理解しやすいように与えられています。

それでは、WordPressとElementor2020を使用してeコマースWebサイトの作成を始めましょう

eコマースウェブサイトの紹介

上の画像は、一般的なeコマースWebサイトのホームページまたはランディングページの例です。ランディングページは、eコマースウェブサイトでのコンバージョンと販売に非常に重要です。したがって、ランディングページは、特にeコマースWebサイトの場合、販売や値下げ、または新着のバナーや通知を含む魅力的なものである必要があります。コンバージョンを獲得するには、ランディングページで最も売れている商品に重点を置き、それらの商品への簡単なリンクを提供する必要があります。ランディングページに商品カテゴリを表示して、それらへのリンクを提供できます。

上部には、場所、電話番号、連絡先番号を含むヘッダーがあり、左側と右側には、Facebook、Twitter、YouTubeなどのソーシャルメディアページのアイコンがあります。その下には、ショップがあります。当ウェブサイトの商品ショッピングページにリンクするボタン。また、[アカウント]ボタンがあり、クリックすると、ユーザーは自分の個人用ダッシュボードにアクセスして、情報や購入にアクセスして管理できます。ヘッダー自体にも当社のビジネスのロゴがあります。真ん中に、私たちのページへのリンクがあります。ホーム、会社概要、ショップ、マイアカウント、お問い合わせ。

その後、すべての製品とバナーが完成しました。これらは、このチュートリアルで作成する方法を学習し、非常に魅力的な方法で示されています。 その後、ニュースレターセクションもあります。このセクションでは、ユーザーは製品、オファー、クーポンなどに関する通知やメールではなく、Webサイトを購読できます。その下に、私たちに関する情報を提供するフッターと電子メール購読ボタンがあります。

画像でわかるように、ショップページには当社のウェブサイトで入手可能なすべての製品がリストされており、ユーザーはそれらをクリックすることで任意の製品を確認できます。サイドバーには、価格フィルター、カテゴリのリスト、レビュー、製品のビデオ広告があります。すべての製品の下に、レビューフォームと関連製品もあります。次に、会社概要ページにあなたのビジネスの説明とチームに関する情報が表示されます。次に、ユーザーが連絡フォームを使用して連絡できる連絡先ページがあります。次に、個人情報、購入情報、支払い情報を含む各顧客の個人ダッシュボードを含むマイアカウントダッシュボードがあります。

画像にあるように、何かを購入した後、カートページが表示されます。ここで、購入の詳細を変更したり、合計金額を確認したり、支払いを続行したりできます。その後、訪問者は配送の詳細を入力し、購入代金を支払うことでチェックアウトできます。このチュートリアルでは、これらすべてのページを段階的に作成して、Webサイトが完全にビジネスを開始できるようにする方法を学びます。

ホスティングを取得し、WordPressとElementorをインストールします

NameHeroドメイン購入

ウェブサイトを作成するために最初に行う必要があるのは、ウェブサイトのドメイン名とホスティングを取得することです。ウェブサイト全体がホスティングサイトに基づいてサポートされるため、適切なホスティングを選択する必要があります。したがって、信頼性、テクニカルサポート、スペース、セキュリティ、デザイン、SEOの機会などの基準に基づいて、さまざまなホスティングを確認および比較する必要があります。

市場にはいくつかのホスティングプロバイダーがあり、それらのほとんどは異なるサービスを提供しています。私はそれらの多くを試しました、そして私は最終的に私のすべてのウェブサイトのためにNameHeroに落ち着きました。私はそれを個人的に使用し、他の22のホスティングと比較して、それらが最高であることがわかりました。画像でわかるように、4つの異なるオプションがあり、eコマースWebサイトにはPlusCloudオプションをお勧めします。あなたは割引を受けるために私のリンクを使うことができます。 www.namehero.com/darrelwilson

プランを注文すると、ドメイン名、つまりWebサイトの名前を選択できるようになります。名前は自由に選択できます。 .net、.bizなどの必要に応じてドメインを選択できます。次の最後のステップは、アカウントと支払いの詳細に関する情報を入力することです。スパマーからユーザーを保護するため、[アドオン]チェックボックスでID保護を取得することを強くお勧めします。次のページをクリックして支払いプロセスを実行し、購入を完了します。

WordPressをインストールする

ホスティングにWordPressをインストールするには、ホスティングページの[クライアントエリア]に移動し、[クラウドWebホスティング]をクリックします。次に、マイ製品とサービスがあります。ここに、ドメイン名が記載されたPlus Cloudパッケージが表示されます。画像に表示されているように、その横にある[アクティブ]ボタンをクリックします。次に左側に、「Gotocpanel」ボタンが表示されます。それをクリックします。画像に表示されている次のページで、ソフトウェアカテゴリまで下にスクロールし、[WordPress ManagerbySoftaculous]をクリックします。

これにより、WordPressインストーラーが開き、[今すぐインストール]ボタンをクリックします。画像に表示されているように、バージョン、ドメイン名、ディレクトリを含むセットアップページが開きます。ディレクトリの下に書かれたものはすべて削除してください。 PROTOCOLCHOOSE'https：/'にもあります。サイト設定では、サイト名と説明を変更できます。これは後で行うこともできます。ユーザー名、パスワード、メールアドレスなどの管理者の詳細を入力します。これがWordPressのログイン情報になります。次のページで、テンプレートを使用していないので下にスクロールして、[インストール]をクリックします。次のページにある管理URLリンクをクリックすると、新しいWordPressが作成され、インターネット上で公開されます。これで、Webサイトを編集できる画像のようにWordPressダッシュボードが表示されます。

WordPressの一般設定

Webサイトを設計する前に、WordPressダッシュボードの設定を変更する方法を学びましょう。 WordPressダッシュボードでは、画像に示されているように、ページの左側にいくつかのタブが表示されます。最も重要なものの1つは、一般的なWordPress設定を見つけることができる[設定]タブです。 Webサイトのアドレスを理解しやすくするために、パーマリンクを「曜日と名前」から「投稿名」に変更する必要があります。これはSEOにとっても非常に重要です。 WordPressダッシュボードのもう1つのタブは、プロファイルとWordPressダッシュボードの外観をカスタマイズする「ユーザー」です。 [変更を保存]をクリックして更新します。

ログアウト後にWordPressに再度ログインするには、アドレスバーにURLを入力し、続いて「/ wp-admin」を入力する必要があります。これにより、WordPressのログインページが表示され、ユーザー名とパスワードを入力してログインできます。

ページとメニューの作成

これで機能的なWebサイトが作成されましたが、まだ完全なWebサイトではありません。次に、Webサイトにページを追加する必要があります。 WordPressダッシュボードで、[ページ]タブをクリックし、[新規追加]オプションを選択します。ページ上部の[新規追加]ボタンをクリックして、これを行うこともできます。これを行うと、ダッシュボードは次の画像に示すようにページエディタを開き、ここで新しいページを作成できます。ここでは、ページの名前を入力して、ページのレイアウトをデザインできます。 [公開]ボタンをクリックすると、Webページが作成されます。このチュートリアルでは、すべてのWebサイトに必要なHome、About Us、Contactなどの基本的なページを作成します。今のところ、後で行うページの内容については説明していません。これらのページを表示するには、WordPressダッシュボードのページ名の下にある[表示]をクリックします。

個別のページを作成したら、これらのページをナビゲートできるようにメニューを作成する必要があります。 WordPressを使用すると、メニューの作成は非常に簡単です。ダッシュボードに移動し、[外観]タブを見つけて、[メニュー]をクリックするだけです。これによりメニューエディタが開き、下の画像に示すようにメニューを作成して名前を付けることができます。メニューを作成したら、Webサイトのさまざまなページをメニューに割り当てることができます。メニュー項目の年表はいつでも再割り当てでき、ドラッグアンドドロップで一方の項目をもう一方の項目の下に置くことでドロップダウンメニューを作成できます。

次に、画像に示すように左上の[カスタマイズ]をクリックして[ホームページの設定]に移動し、ホームページを[静的ページ]に変更して、ホームページを静的ページとして選択します。ドロップダウンリストから選択します。これを行うと、誰かがあなたのWebサイトにアクセスするたびに、常にあなたのホームページに誘導されます。 About Us、Contactページ、最新の投稿など、他のページに直接アクセスしても、視聴者には意味がありません。

Elementorをダウンロード

次に、eコマースWebサイトのWebページを構築するために使用するページビルダーElementorproを購入する必要があります。私のリンクを使用して購入できます。www.darrelwilson.com/elementor。彼らのページから、利用可能なさまざまなパッケージを確認できます。テーマビルダーとWoocommerceビルダーサービスが必要なため、無料版を使用することはできません。パッケージを購入すると、画像に示されているように、[プラグインのダウンロード]をクリックする必要があるアカウントにパッケージが開き、ダウンロード中にzipが表示されます。

次に、WordPressのWebサイトにアップロードする必要があります。 WordPressのダッシュボードに移動し、左側のツールバーの[プラグイン]をクリックし、[新規追加]をクリックすると、画像に示すようにプラグインの追加が開きます。「プラグインのアップロード」をクリックし、Elementorzipファイルを選択してインストールします。「プラグインのアクティブ化」をクリックすると、WordPressツールバーに新しい「Elementor」ボタンが作成されます。そこに移動し、[接続してアクティブ化]をクリックします。

WordPressテーマをインストールする

それでは、WordPressテーマをWebサイトにインストールしましょう。 WordPressは、Webサイトの外観のために、選択可能な多数の事前に設計されたテーマを提供します。 WordPressダッシュボードの「外観」タブには、テーマをインストールできる「テーマ」ボタンがあります。利用可能な選択肢から任意のテーマを選択できます。このチュートリアルでは、人気のメニューにあるAstraテーマを使用します。テーマ名の下にある[アクティブ化]をクリックします。 'このテーマを使用することの最大の利点は、Webサイトの実行に必要なすべての基本的なセットアップと機能が含まれており、Elementorページビルダーと非常に互換性があることです。

Elementorでページを編集する

それでは、Elementorを使用してページを編集する方法を学びましょう。 WordPress Webサイトのホームページに移動し、上部の黒い行にある[ページの編集]をクリックすると、ページエディターが開きます。まず、画像のように右側のページ設定を変更しましょう。コンテンツレイアウトを「全幅ストレッチ」に変更し、ホームページの設定に応じて「タイトルを無効にする」を選択します。

次に、「Elementorで編集」をクリックして、画像に示すようにElementorEditorを開きます。ここでElementorエディターの簡単なチュートリアルを見てみましょう。ページに新しいセクションを追加するには、[プラス]ボタンをクリックして、目的の列パターンを選択します。要素を追加するには、左側のツールバーにある9つのドットをクリックすると、画像のように要素のリストが表示されます。これらの要素をページにドラッグアンドドロップして編集できます。

ページ上のモジュールをクリックすると、その編集ツールバーが左側に表示されます。この画像では、見出しを編集しているため、3つのタブを含む「見出しの編集」が表示されています。 ¹つ目は、要素のコンテンツにさまざまなオプションを提供するコンテンツです。 ²つ目は、要素の色、サイズ、フォントなどのスタイルをデザインできるスタイルです。そして3つ^目は、アニメーションなどを配置できるAdvancedです。同様に、見出しの下に同じ方法でテキストボックスを追加、編集、スタイル設定できます。

ボタンを追加して、クリックすると開く他のWebサイトへのリンクを指定できます。ユーザーが当サイトを離れないように、設定を「新しいウィンドウを開く」に変更できます。アイコンギャラリーからボタンのアイコンを選択することもできます。これはすべて、画像に示すように、左側の[編集ボタン]ツールバーにあります。

これで、各要素を個別に設計する代わりに、Elementorのフォルダーアイコンをクリックして、事前に作成されたテンプレートとブロックを使用できます。ライブラリから、ページ全体または特定のセクションまたはブロックを選択できます。必要に応じて、利用可能なブロックのすべてのカテゴリがあります。ランディングページでは、ヒーローカテゴリから任意のブロックを選択します。例では未来の音を選択しました。

ホームページの作成

次に、このブロックを使用して、イントロセクションで見たホームページに似たページを作成しましょう。まず、背景をセクション全体に変更しましょう。セクション全体を編集するには、画像に示すように、セクションの上部にある6つのドットをクリックします。これで、[セクションの編集]ツールバーが表示され、そこから[スタイル]を使用してタブで背景を変更できます。これは、eコマースWebサイトで使用できる無料のデモ画像へのリンクです。次にこれらの画像をElementorにアップロードし、背景の画像を選択します。暗く見える場合は、背景オーバーレイを変更できます。

これで、前に行ったようにブロックの要素を編集できます。テキスト、色、フォント、地形などを変更します。要素の右上にある青いボタンをクリックすると、複製を使用できます。テキストボックスの間に仕切りを追加し、[仕切りの編集]を使用して好きなようにスタイルを設定できます。次に、パディングを追加または削減して周囲のスペースを変更するなど、デザインに従ってボタンを編集します。このボタンは後でショップページにリンクします。アイコンを追加することもできます。画像に示すように、[編集ボタン]ツールバーの下にあるすべてにカーソルを合わせると、スタイルとアニメーションを変更できます。

次に、要素ツールバーを下にスクロールして、プロ要素セクションからアニメーションの見出しを配置します。画像に示すように、[アニメーション化された見出しの編集]ツールバーを使用して、見出しのスタイル、形状、色、地形などを変更できます。すべての要素とスタイルをチェックして、思い通りにデザインすることができます。完璧なデザインを見つけるには、試行錯誤がたくさんあります。これらの変更をWebサイトに適用するには、[更新]ボタンをクリックします。

次のランディングページでは、女性のセクション、男性のセクション、新着などのさまざまなカテゴリにリンクするセクションを作成する必要があります。新しい3列のセクションを追加し、見出し、テキスト、ボタンを追加します。時間と労力を節約するために、1つ作成して2回複製することができます。ここでも、上記のセクションで行ったように、このセクションのテキスト、スタイル、背景などを編集する必要があります。私が提供した画像は、3つのカテゴリすべての背景に使用できます。テキストエディタを使用しているときに、行を終了して次の行に移動するには、ここで女性セクションで行っているように、画像に示すように<br>を使用します。

ここでは、このセクションにテンプレートやブロックがないため、すべてのセクションを最初から作成してスタイルを設定する必要があります。これは、初めて長い作業に^見えるかもしれませんが、すべてのドラッグアンドドロップや複製などのトリックを使用できます。上記のセクションで作成した[今すぐ購入]ボタンをコピーして、最初から作成するのではなく、ボタンのスタイルを変更するか、ホバーします。すべての要素の編集ツールバーにあるすべてのオプションを確認して、好みに最適なオプションを見つける必要があります。これは芸術的な感覚にとって素晴らしい演習になります。列内のコンテンツの間隔を変更するには、列の左上にある[列の編集]アイコンをクリックして[列の編集]ツールバーを開き、そこでパディングを変更できます。下の画像でわかるように、advancedsection。

行の列を複製してから、男性用セクションと新着のその他の2つのカテゴリのテキストと背景を編集して、スタイルを変更する必要がないようにすることができます。各セクションの背景画像とテキストの色のスタイルを変えて、各カテゴリがはっきりと見えるようにする必要があります。最初の画像の背景画像が暗い場合、テキストの色が明るい場合、次の画像は反対になります。これらすべてのテクニックは、デザインを開始するときに学び、これらの効果を自分で確認します。背景画像を使用して画像の上のテキストを強調します。また、ドラッグアンドドロップまたは配置オプションを使用してテキストの位置を調整し、背景画像の顔が覆われないようにします。前と同じように「列の編集」を使用して背景画像の位置を変更することもできます。セクションの上部にある青いボタンをクリックして[セクションの編集]を開くと、セクションの幅を100％まで伸ばすことができます。

次にその下にアイコンを追加します。そのためには、最初に新しいセクションを追加し、Elementorツールバーから画像ボックスを挿入します。画像に示されているように、私が提供した画像のアイコン画像を選択します。これらのアイコンボックスは、「送料無料」のような魅力的なタイトルを付けて購入を促し、以下のテキストに説明と条件を記入するためのものです。 [画像の編集]ツールバーから画像の位置、サイズ、タイトルと説明の色、テキストなどを変更して、画像ボックスのスタイルを自由に設定します。すべてのアイコンを再度デザインする必要がないように、デザイン後に複製します。その後、必要に応じて各ボックスのテキストを編集できます。詳細セクションから、パディングを使用して余白を追加し、ページが混雑しすぎないようにすることができます。

列に境界線を追加して、キャッチーなようにすることができます。 [列の編集]ボタンをクリックし、[スタイル]カテゴリの下で、境界線を追加して境界線をデザインできます。境界線のタイプ、幅、配置、半径などを選択できます。ここで右の境界線を作成したように、1つまたは複数の特定の側面でのみ境界線を選択できます。ツールバーで使用可能なすべての設計ツールを確認して、自分で選択してください。自分でやればやるほど、すべてのツールや機能に慣れ、より速く簡単になります。

次に、「新着」セクションを追加します。ただし、これらの行の間に仕切りを追加する前に、明確で区別できるように見えます。再度新しいセクションを追加し、Elementorツールバーから「Divider」を追加し、画像に示すように「EditDivider」ツールバーを使用してデザインします。次のセクションの見出しとして使用される仕切りに「新着」というテキストを追加します。画像に示されているようにサイズやフォントなどを変更して、見栄えを良くします。

製品の作成

私たちは今、eコマースのウェブサイトで販売する製品を作成する必要があります。製品はシンプルまたは可変にすることができます。シンプル製品にはサイズ、色、スタイルなどの選択肢がありませんが、可変製品にはサイズや衣服の色などのさまざまな選択肢があります。両方を作成する方法を学びます。

Woocommerce

製品を作成するには、新しいプラグインを追加する必要があります。それでは、WordPressダッシュボードに移動し、ツールバーの[プラグイン]をクリックしてから、前に行ったように[新規追加]をクリックします。プラグインライブラリから、「Woocommerce」を検索します。 Woocommerceは私の個人的な経験の中で最高のeコマースプラグインです。 [インストール]をクリックし、[アクティブ化]をクリックします。これで、画像に示すようにWoocommerceプラグインが開きます。フォームに記入し、[続行]をクリックします。次に、業界を選択します。このチュートリアルでは、ファッションとアパレルのWebサイトを作成しています。次に、物理とダウンロードの2つのオプションが指定されているタイプの製品があります。両方を選択し、[続行]をクリックします。次に、いくつかの質問が表示され、それらに回答して、もう一度[続行]をクリックします。

次に、プラグインのテーマを選択する必要があります。「Astra」テーマを選択します。次に、Jetpackサービスをアクティブ化するオプションが表示されます。これは、Jetpackアカウントページを表示し、詳細を入力してアカウントを作成する[はい]を選択します。 WordPressダッシュボードにリダイレクトされますが、画像に示すように、ツールバーで新しい「Woocommerce」が利用可能になります。これらの税金の設定はすべて、後で行います。

それでは、製品の作成を始めましょう。まず、画像に示すように、WomanGreenShirtの簡単な製品を作成します。

下の画像に示すように、ツールバーの「製品」をクリックすると、「新しい製品の追加」ページが開きます。製品の名前と説明を入力します。以下の製品データで、最初に単純な製品を作成するため、「単純な製品」を選択します。下の次の画像に示すように、下にスケジュールできる通常価格とセール価格を入れてください。これらの日付には、セール価格が自動的に適用されます。

次に、在庫状況を入力できる[一般]の下の[在庫]設定をクリックします。ここでバックオーダーを許可または禁止することもできます。「許可しない」と入力すると、商品の在庫がない場合に注文は受け付けられません。在庫が少なくなったときに通知を受け取るには、「在庫が少ないしきい値」を設定します。

次に「配送」カテゴリで、配送用に製品の重量と寸法の詳細を入力します。「リンクされた」商品では、関連商品を表示する「アップセル」と、ユーザーが元の商品を購入した後にカートに関連商品を表示するクロスセルを使用できます。関連商品を追加します。購入者がこの特定の商品を購入しているときに表示します。「詳細」カテゴリでは、購入者にメモを付けてレビューを有効にすることができます。

この設定の下に下にスクロールすると、画像のように「製品の簡単な説明」が表示されます。ここに、サンプル製品に従って完全な説明を記述します。ここでも説明のフォントとスタイルをデザインできます。右側に画像が表示されている場合は、[製品画像]オプションがあります。 [商品画像の設定]をクリックすると、[商品画像]ページが開き、商品の画像を選択してアップロードできます。「商品画像」の下には「商品ギャラリー」があり、画像に示されているように、視聴者をよりよく理解するために、さまざまな角度から商品の他の画像を配置できます。

画像に示すように、上部の右側のツールバーに「製品カテゴリ」があります。ここでは、製品を分類できます。それでは、「新しいカテゴリの追加」をクリックして、新しいカテゴリを作成しましょう。「Women's」という名前を入力し、[公開]をクリックします。これで、[製品の表示]ボタンをクリックして製品を表示できます。視聴者がクリックしたときに製品がどのように表示されるかが表示されます。新しい製品ポップアップが開き、製品を表示したり、画像を拡大して見やすくしたりすることができます。何でも編集できます。

表示ページのスタイルとテーマが気に入らない場合は、画像に示すように、右側のツールバーの[Astra設定]を使用して変更できます。たとえば、サイドバーを削除する場合は、[サイドバー]をクリックして[サイドバーなし]を選択します。 [更新]をクリックして変更を保存し、もう一度[製品の表示]をクリックして変更を確認できます。これは、簡単な製品を作成する方法の例です。これと同じ手順を使用して、必要な数の製品とカテゴリを追加できます。製品ページのカテゴリボタンをクリックすると、カテゴリの新しいページが開き、このカテゴリのすべての製品が表示されます。この時点では、これは非常に当たり障りのないものになりますが、後でこのページもデザインします。

次に、可変積を作成する方法を学びましょう。ここでも、前と同じように「新製品の追加」ページに移動する必要があります。今回はメンズ可変商品を作成しましょう。以前と同じように、製品のタイトルと説明を入力します。これは主な説明ではなく、以下に示す追加の小さな説明であることに注意してください。主な説明は「製品の簡単な説明」に記載されています。ここでは、「商品データ」を「変数商品」に変更します。 Inventory、Shipping、Linked Productsなどの他のすべての設定は、前に作成したSimple Productと同様であるため、これらの詳細を自分で完了することができます。

次に、[属性]をクリックして、製品に新しい属性または特性を追加します。これを行うには、[追加]をクリックします。次に、画像に示すように、サイズ、色などの製品の新しい属性を作成します。最初に、[名前]ボックスに[サイズ]を入力します。 [値]ボックスに、最初に「小さい」と入力し、次に「|」記号（角かっこなし）を入力します。 'Shift'キー+Enterボタンの上にあるキーを押して、画像に示すようにこの記号を書き込み、次に中、もう一度同じ記号、次に大を書き込みます。そのシンボルを使用して、S、M、L、XLなどの変数をいくつでも追加できます。 [すべてのバリエーションに使用]チェックボックスをオンにして、[属性の保存]をクリックします。

次に、別の属性を追加します。 [追加]ボタンをもう一度クリックし、[名前]ボックスに「色」と入力し、[値]ボックスに、サイズ属性で使用した記号で区切って必要な色の名前を追加します。ここでは、使用可能な2つのオプションとして「白|青」と書いています。もう一度[バリエーションに使用]チェックボックスをオンにして、[属性の保存]をクリックします。

次に、これらの属性を製品に適用します。「属性」の下の「バリエーション」をクリックし、「すべての属性からバリエーションを作成」を選択して、「実行」をクリックします。このオプションを確認するには、ポップアップで[はい]をクリックします。これにより、画像に示すようにオプションが開きます。 3つのサイズと2つの色、つまりスモールホワイト、スモールブルー、ミディアムホワイト、ミディアムブルー、ラージホワイト、ラージブルーを組み合わせることで、6つのバリエーションが追加されていることがわかります。

最初のものをクリックして、画像に示すように編集設定を開きます。まず、このバリエーションの画像をアップロードする必要があります。 [画像のアップロード]をクリックして、ギャラリーから画像を選択します。次に、このバリエーションの通常価格を設定する必要があります。これは必須フィールドであるため、価格が同じであっても、ここに入力する必要があります。ここでも、Simple Productで行ったように、セール価格を追加してスケジュールすることができます。 Simple Productで行ったように、在庫の詳細と出荷の詳細を入力できます。

繰り返しますが、他のバリエーションについても同じプロセスを実行する必要があります。したがって、Variationnameをクリックし、画像をアップロードして、価格をSmallBlueなどに設定します。ここでは、必要なすべてのバリエーションの画像と価格のみを掲載していますが、他のすべての詳細は、独自の条件に従ってWebサイトに掲載できます。バリエーションの名前の上に、ユーザーが製品を表示したときに製品ボックスにデフォルトとして表示されるバリエーションを選択できる「デフォルトのフォーム値」を配置するオプションが表示されます。

製品の簡単な説明などの他の設定は、前に行ったシンプルな製品と同様になるため、製品ごとに詳細を入力します。商品画像についても同じです。デフォルトのバリエーションの画像を配置する必要があります。これは、商品を見るときに最初に視聴者に表示されるためです。最も売れるバリエーションをデフォルトの商品として配置する必要があります。ビューはバリエーションのさまざまな画像を見ることができるため、可変商品の商品ギャラリーを配置する必要はありません。 Simple Productの場合と同様に、新しい'Men's'カテゴリを作成し、そのチェックボックスを選択します。これらの変更をWebサイトに適用するには、[公開]をクリックします。

これで、[製品の表示]をクリックして、視聴者にどのように表示されるかを確認できます。 画像でわかるように、製品が開きます。これは可変製品であるため、ドロップダウンボックスに属性とその値のリストが表示されます。これらのボックスをクリックすると、この製品のさまざまなバリエーションを表示できます。クリックすると、バリエーションに設定した画像と価格が表示されます。繰り返しになりますが、Astra設定を使用して気に入らない場合は、製品ページのテーマを変更することもできます。一貫性を保つために、単一の製品で行ったように、設定を変更してサイドバーを削除し、コンテンツレイアウトを全幅に変更しましょう。必要な数のバリエーションを持つ可変製品をいくつでも作成できますが、ここで行ったように、各バリエーションの詳細を入力する必要があります。したがって、属性とそれらの値が増えると、バリエーションが増えます。注意すべき点の1つは、製品の価格が範囲として表示されていることです。これは、最低価格の変動の価格と最も高価な変動の価格が範囲として表示されているためです。これで、単純な製品と可変的な製品の両方を作成する方法を学びました。

次に、これらの製品をホームページに追加しましょう。ホームページに移動し、「Elementorで編集」をクリックします。 NewArrivalsディバイダーを作成した最後までスクロールダウンします。右側のElementorツールバーで、[ウィジェットの検索]バーをクリックし、productと入力します。商品要素を選択し、ページの新着仕切りの下のボックスにドラッグアンドドロップすると、そこに商品が表示されます。

画像に示されているように、[製品の編集]ツールバーには、ここに表示する製品の列と行の数があり、すべての製品がこのページに表示されるわけではありません。スタイルカテゴリを使用して、画像の列のギャップと行のギャップ、配置、境界線を変更することもできます。ここで、製品名のタイトルを、色、フォント、間隔、地形などのようにスタイル設定できます。塗りつぶされたものと空の場合の両方の評価星についても同じです。価格についても同様に、フォント、色、地形などを通常価格と販売価格の両方で変更できます。次はボタンです。背景色、テキストの色、境界線の色など、好きなようにボタンをデザインできます。 Elementorを使用すると、このすべての編集が非常に簡単になります。利用可能なすべての編集ツールを使用して試してみるだけで、すべての結果が目の前に表示されます。

また、セールがあったときに表示されるように設計できる「セールスフラッシュ」オプションがあります。これは、商品のセールがあるときに商品の上にフラッシュバナーを表示します。これを使用して、顧客がホームページにアクセスしたときに製品に顧客を引き付けます。すべてのデザインオプションは、これまでに学んだことと似ているため、すべてを成長させて、自分に最適なデザインを選択できます。

[クエリ]オプションで、このセクションに表示する製品を選択できます。たとえば、このセクションに女性向け商品のみを表示する場合は、[ソース]ボックスで、[最新の商品]を選択します。これは、ドロップダウンボックスからの新着セクションであるため、[含める]をクリックします。次に、[含める]ボックスに用語を入力し、[用語]オプションを選択します。これにより、用語ボックスが表示されます。用語ボックスに「女性」と記入し、画像に示すように「製品カテゴリ：女性」を選択します。 Webサイトに影響を与えるには、[更新]をクリックします。このようにして、Webサイトの任意の部分に製品表示セクションを作成できます。

Elementoreコマーステンプレート

このリンクhttps://darrelwilson.com/product/elementor-ecommerce-template-packageで、私たちが今作成したeコマースWebサイトのテンプレートを無料で提供しました。そこからテンプレートzipファイルをダウンロードして、Elementorでテンプレートをインポートおよびエクスポートする方法を学びましょう。 First, extract all the .json flies from the zip file. These are the templates for specific pages. Go back to your Elementor editor page and click on the folder icon next to the Add section icon on the page. This will open up the Template library and go to 'My templates' as shown in the image and click on Add templates. Here you can drag and drop those template files. Select the Homepage template and click on insert and your template will be loaded. You can edit the template according your taste but using the template, you won't have to create everything from scratch. Just remove the unwanted elements or sections and add new ones you like such as countdown, form etc. and style them the way you want.

Now let us create the other pages using our template. First, create a Menu for the rest of the pages. Woocommerce automatically adds the Shop, My Account, Cart and Checkout pages. Go the Appearance in WordPress and add these to the menu. Go to the About Us page, click on 'Edit Page, first disable the title and select Full Width in content layout. Now similar to Homepage template, insert the About Us template and edit the page as you want. You can add other pages too. Complete the website design using this process.

テーマカスタマイザー

Theme customizer is where we design the structure and theme of the website and not the actual webpages. For opening the theme customizer, click on the 'Customize' button next you website button and it will open the Theme Customizer dashboard. We have used the Astra theme in this tutorial. Let us create a logo for your website, go to Header, then Site Identity and select Logo and upload your Logo. You can get a logo from www.fiverr.com. In the same way you can edit your site icon. You can design your Primary Header here too as shown in the image. You can select the layout, width, colour, etc. of the Header. Also you can design and style your menu from here.

Same way, you can design the footer. You can add upto 4 footer widgets here and customize as you want as shown in the image. Select 'Widgets' on your WordPress toolbar and you will get 4 Widgets to add to your footer. When you click on it and then click on 'Add a widget', you will get a list of widgets. You will get a widget toolbar where you can edit the contents of widget such as title, description, image and also your social media links. Once you click publish, it will appear on the footer of your webpage.

From the Woocommerce option on the toolbar, we can customize the Checkout page as in the image. You can assign 'Terms and conditions' page and 'Privacy Policy' page from the toolbar for the customers but first you'll have to first create these pages and write the details as the legal requirements. Next select the page from the drop down below their respective box. You can add new fields in the Checkout form and make them 'Required' or Optional.

Next in the Woocommerce toolbar, you can customize your Product catalog as shown in the image.You can customize, how products are shown in the catalog, their design an also you can hide some of the components that you don't want show like for example Ratings by clicking on the eye icon next to its name. This will control how your products are shown on your Shop page and also on the products section anywhere on the website.

Here we are using the free version of Astra Theme customizer, but you can buy the pro version where you will get tons of different option and templates for your website. You can import entire customized websites from this service.

プラグイン

Plugins are small apps for your website which helps creating and upgrading your website. You have to add plugins to your WordPress to help you create your website in way more efficient manner.To add a new plugin to your WordPress, go to your WordPress homepage and then click on plug-in from the Option list on the left side. It will open an 'Add plugin' page as shown in the image where different type of plugins are available to choose from. You can search for the type of plug-in that you need in the search box and you will find so many plugins to use for that specific purpose. It is like an app store on your mobile and just like your app store, you can check the usage, reviews and success of these plugins before installing. And all these plug-ins are available for free. And if you need any plugin later, you can always come back and install it here. You can add plugins for social media sites, translator and so many things. Just search for the plugin use you want, select the one you want, click on 'Install' and 'Activate'. For every plugin, a new option will be created on the toolbar from where you can add and edit elements.

Elementorテーマビルダー

The Elementor theme builder allows you to create a custom Shop Page and Product Page using the page builder instead of the themes, so that these pages match the design of other pages of your website. Using Elementor page builder, you can edit any part of any page of your website unlike the themes which are preset and normally can't be edited. So now we are going to edit the Shop Page and Product Page that we created using the Woocommerce theme using Elementor theme builder and design it to match our demo website's design we saw in the beginning.

Go to your WordPress dashboard, click on 'Templates' and then select 'Theme Builder' from the list which will open the Theme Builder as shown in the image. Elementor allows us to build the theme of different parts of the site. So if want to have a different header, click on '+' icon on header. And you can select any header theme from the library and click 'Insert'. Your Header will be created and now you can edit anything in using the Edit Toolbar as we did earlier. You can the change the style of the Logo or the Menu or anything, just click on the part you want to edit and the edit toolbar will appear.

Custom Header

Now you can add other elements on this header one by one as we did earlier, or you can insert another one or more blocks which contains similar elements and delete the common ones. For example, here as you can see in the image, we inserted a Header Block which has a bar for contact no, info and social icons. We can delete the rest of the elements of the block as we don't need them. Again you may not find the exact design of each element in the block templates, so you can now edit and style as you want to instead of creating and editing each element from scratch. This way you can create different part of your website very quickly.

Remember we have just created a part of website but it's not applied on our website yet. So when you click 'Publish', it will ask you where you want to display this template on your website. Here we created a header, so we will display it on entire website by click 'Entire Site' on 'Include' box as shown in the image. You can put different conditions by adding Include or Exclude conditions as to where you show this template.

Custom Footer

Now you can do the same thing for footer as we did for the header and create a footer for your website using templates. You can edit the footer content to your pages by pasting the URL link of the page to its button using the editor as shown in the image. Here we have selected a footer block template with for columns and added link to various parts of our Shop, About, Contact Us and social media pages. You may design it anyway you want.

Custom Shop Page

Now let us design a custom Shop Page using the Theme Builder. Elementor has very less themes for shop page so we will design from scratch. So we will have to create each element like for the banner we will have 2 text boxes and animated heading over a background image. Edit the elements and style the section as we learned earlier. Use all the styling features such as font, colours, size, shadows, margins, paddings, etc. to make the banner section look eye catchy like here in the example as shown in the image below.

Now we need to design our product section with a filter column in the side. So add a new section, and use the 2 column structure. On the right, add 'Products' from the toolbar and design it as we did on the Homepage or you can save the Homepage Template and insert it here. On the left, insert 'Sidebar' from the Elementor elements bar and select 'Woocommerce sidebar'. Right now, we haven't created a sidebar so we will have to exit to WordPress dashboard. But first click 'Publish' and in the condition include 'Shop page' to apply it to the website.

Go to 'Appearance' on the dashboard where we have all our widgets are shown as shown in the image. On the right, we have our Woocommerce Sidebar where we can place the 'Filter Products by Price' by drag and drop. You can add other filters too. Below it we will add 'Product Category', then 'Products' and the 'Video' on our sidebar. You can edit the title, contents and other stuff like link the URL of the video here. You can add as many widgets that you want from here.

If you want to edit the style of this sidebar, you can't use the Elementor editor as these are prepared by WordPress theme customizer. So in order to customize it, you will need click on 'Customize' button WordPress. Click on 'Global', then 'colours' where you can change the colours as in the image. Here we are customizing the WordPress theme which is the Astra theme that we are using, and not just the sidebar.

Custom Category Page

Now we will design the category pages for our product. We are going to copy the template of page we created earlier and save to use it for all our Product Category pages. First, click on 'Edit with Elementor' on the top and select 'Product Archive' as shown in Image. Then, on the bottom left click on the button next to Update and select 'Save as a Template' as shown in the next Image. Give a name to the template like 'Main Shop Page Template' and click Save. Next select the given name and click on 'Export' and then 'Save File' to save this file to use this template on other pages or even other websites.

Now, go back to the Elementor theme builder and click on Add New. Here you have the Elementor templates but we will use the template we created, so click on 'My Templates' and click on 'Insert' next to the name of new template you created. Now we have to edit it using the tools which we have learned already. So change the Title text to 'Men's Product'. Next as this is Men's Category, you have to edit it to show only Men's Product. So click on the Product box and on the 'Query' button on the toolbar, write 'term' in the 'Include By' button and put 'Men' in the term box as we did earlier. Click on Publish and put the condition to put it only in 'Men's' in 'Products category' as you can see in the image below. You can go the website and on the Shop page, click on the Men's category on the sidebar and view the effect on the page. You will have to do the exact same process for Women's category page and any other category you want to put on your website too.

カスタマイズされた製品ページ

次に、同じ手法を使用して製品ページをカスタマイズします。ここで製品をクリックすると、製品の作成時に表示されたデフォルトのテーマで製品ページが表示されます。もう一度、Elementortheme Builderに移動し、横にある+アイコンをクリックして新しい単一製品テーマを追加します。ここで提供されているテンプレートを使用できますが、このチュートリアルでは最初からテンプレートを作成します。したがって、最初に2つの部分からなるセクションを追加し、[要素]タブをクリックします。ここでは、ページを作成するときに表示されない画像に示されているように、製品用に特別に作成されたすべての要素を確認できます。

まず、製品の分類に似たパンくずを追加します。これで、画像に表示されているように、ツールバーを使用して、色、サイズ、パディングなどのパンくずのスタイルを編集できます。 右側で、サイドバーから「Product Title」要素を追加し、前と同じようにツールバーを使用してそのスタイルも設計します。次に、同じ方法で製品画像を追加しましょう。製品画像要素をクリックし、ツールバーを使用してそのスタイルを編集します。次に、同様に簡単な説明を追加します。タイトルと説明の間に仕切りを追加できます。次に、製品カテゴリを配置する必要があります。そのためには、「Product Meta」要素を選択し、説明の下にドロップしてスタイルを設定します。次に、その下に「Price」要素を追加すると、スタイルを再度変更できます。次に、価格の下に[カートに追加]ボタンを配置します。可変商品であるため、バリエーションオプションが自動的に提供されます。次に、必要なソーシャルアイコンやレビューフォーム、追加情報などの要素を追加できます。製品ページに必要な要素の追加と設計が完了したら、[公開]をクリックします。表示ページの状態に「すべての商品」を含めて、作成したすべての商品にこのテンプレートの効果を与えます。必要に応じて、製品カテゴリごとに異なるテーマを作成できます。条件を変更するだけで、その特定のカテゴリにのみ含めることができます。すべての製品に適用したため、すべての製品ページがこのテンプレートに更新されます。

カスタムチェックアウトとカートページ

次に、カスタマイズされたチェックアウトページとカートページをデザインします。チェックアウトページとカートページはテーマビルダーに含まれていないため、Elementorで編集します。カートページに移動し、Elementorで編集をクリックします。他のページと同じように、Elementor要素を使用して好きなように編集およびスタイル設定できます。これで、テキスト、アイコン、クーポンボタンなどを編集し、フォント、色、地形などを自分でスタイル設定できます。ただし、Elementorでは、タイトルCartなどの実際のテーマの一部をここで編集することはできません。 WordPressitselfで編集する必要があることを編集するには、[ページの編集]をクリックし、右下隅にある[無効にする]セクションの下の[タイトルを無効にする]チェックボックスをオンにします。ワードプレスのテーマ。

チェックアウトページを編集およびデザインし、同じ方法で使用できます。同様に、顧客の「マイアカウント」ページをデザインすることもできます。そのページのデフォルトのテーマは見栄えがよくないからです。 Elementorで編集できます。また、リンクを以前に提供しました。このリンクでは、これらすべてのページのテンプレートのzipファイルを配置して、すばやくデザインできるようにしています。

Woocommerce設定

これで、ElementorとTheme Builderを使用してページを作成する方法を学び、Webサイトの構築が完了しました。次に、このWebサイトを実行するために、Woocommerceの設定について学習する必要があります。 WordPressダッシュボードに移動し、Woocommerceをクリックして、[設定]を選択すると、画像に示すようにWoocommerceの一般設定タブが開きます。

一般設定

ここに住所を入力して、販売先の国を選択し、税金を有効にし、クーポンコードを有効にすることができます。これらすべてのチェックボックスをオンにして、有効にします。その下では、国に応じて通貨を変更できます。

[製品]タブ

次のタブは、[設定]の一番上の行にある[製品]タブです。ここには、製品のレビューと星評価を有効にできるレビューセクションを除いて、ここでは使用しない多くの設定があります。また、画像に示すように、レビューで実際の購入者に確認済みのユーザータグを表示することもできます。重量、寸法など、商品の発送詳細を記載することもできます。

[税]タブ

次に、[税]タブで、自動税計算を有効または無効にできます。国や事業によっては税金の計算が非常に複雑になる場合があるため、自動計算が機能しない場合があります。ただし、カートのアイテムに基づいて、さまざまな配送先住所に税金を設定するオプションがあります。 www.taxjar.comへのリンクを提供しました。ここでは、税金の計算に役立つ無料および有料のサービスを利用できます。また、ショップなどのさまざまな場所で税込みまたは税抜きの価格を表示するように選択することもできます。税抜きの価格をカートとチェックアウトに表示する必要があります。通常、税込みで表示する必要があります。

[配送]タブ

次のタブは「配送」です。まず、[配送ゾーンの追加]をクリックし、ゾーンの名前、ゾーンの特定の地域を追加して、画像に示すようにさまざまな配送方法で配送料金を設定します。ここでは、定額制を使用しており、5ドルの定額料金を設定し、もう1つは送料無料の方法です。下の[編集]ボタンをクリックして、最小注文額またはクーポン要件の条件を追加します。ここでは、最低50ドルの注文要件が選択されています。複数のゾーンと、それぞれに複数の配送方法と料金を追加できます。また、特定のレートが指定されていない、どのゾーンでもカバーされていない場所のデフォルトがあります。したがって、ここでは、これらのゾーンにデフォルトで10ドルのデフォルト率を設定しました。

[アカウントとプライバシー]タブ

[アカウントとプライバシー]タブでは、購入前に顧客のアカウントを作成するオプションを選択するか、最初にアカウントなしで購入し、後でチェックアウト時にアカウントを作成するオプションと、作成時の他のさまざまなオプションを選択できます。ユーザー名、パスワードなどのアカウント。これらは非常にわかりやすいので、自分で確認できます。また、ここで法律で義務付けられているプライバシーポリシーを追加することもできます。また、[個人データの保持]で、ユーザーの個人データが削除される時間に関するオプションもあります。

メールタブ

また、[メール]タブがあり、新しい注文やキャンセルされた注文など、ウェブサイトから顧客に送受信するすべての自動メールに関する設定があります。ここでは、このようなすべての状況で顧客に送受信する電子メールの形式を編集できます。この目的のためにプラグインを追加して、より高品質の電子メールを受信できます。プラグインに移動し、「KadenceWoocommerceEメールデザイナー」とをインストールします。このプラグインを使用すると、画像に示すようにWoocommerceサイドバーのプラグインに移動して、ここで編集可能なカスタムスタイルを使用して、電子メールの内容、ヘッダー、フッター、テキストなどをデザインできます。

支払い

次に、[支払い]タブに移動し、顧客に許可されている支払い方法を選択できます。選択できるオプションはたくさんありますが、下の画像に示すように、有効化ボタンをクリックして、ここで「ストライプ」と「PayPal」を有効にします。

PayPal

まず、PayPalの支払い設定を設定しましょう。[設定]をクリックしてPayPal設定ページを開き、支払いボックスとPayPalメールアカウントのタイトル、説明を入力して、[変更を保存]をクリックします。 'あなたのウェブサイトをPayPalと統合します。 PayPalをお持ちでない場合は、PayPalのWebサイトにアクセスして、無料でサインアップすることでPayPalを作成できます。画像に示すように、PayPalの電子メールボックスに入力する電子メールアドレスを使用してサインアップする必要があります。これは、利用可能な最も人気のある支払い方法の1つです。

次に、ストライプで支払いを設定します。そのため、その横にある[管理]ボタンをクリックします。 PayPalの設定と同じように、最初に支払いボックスのタイトルと説明を入力します。次に、テスト公開可能キーとテスト秘密キーがあります。 www.stripe.comにアクセスして、そこで無料のアカウントを作成できます。アカウントを作成するには、銀行口座が必要です。無料のサービスであるストライプアカウントを作成した後、ストライプアカウントをWebサイトに統合できます。そのためには、ストライプアカウントにログインした後、[開発者]をクリックし、画像に示すように[APIキー]を選択します。 Webサイトに表示される公開可能キーを公開可能キーボックスにコピーし、秘密キーを秘密キーボックスにコピーします。 [変更を保存]をクリックすると、ウェブサイトで世界中のどこからでも非常に低い取引手数料でクレジットカードによる支払いを受け入れる準備が整います。ここでは、ストライプアカウントの[テストデータの表示]ボタンを有効にしており、Woocommerce設定ページで[テストモードを有効にする]チェックボックスをオンにしていますが、支払いシステムを使用する準備ができたら、無効にします。。

これで、注文して何かを購入することでWebサイトをテストできます。また、支払いを行って、すべてが正常であることを確認できます。[マイアカウント]ページでは、顧客は自分の個人用ダッシュボードを使用して、自分の注文、配送先住所と請求先住所の編集、支払い方法とアカウントの詳細の設定。過去のすべての注文ビューも、ステータスとともに注文リストに表示されます。

モバイル向けの最適化

モバイルの最適化とは、ウェブサイトをモバイルデバイスにとって使いやすいものにすることを意味します。今日のシナリオでは、モバイルの最適化が非常に重要です。これは、a）多くの人がモバイルデバイスを使用してインターネットを閲覧しているためです。b）新しいGoogleアルゴリズムによると、ウェブサイトがモバイルに最適化されていない場合、ランクが下がり、壊滅的な打撃を受ける可能性があります。ウェブサイトのトラフィックとSEO。

Elementorエディターを使用すると、モバイルの最適化は非常に簡単です。 Elementorダッシュボードに戻りましょう。ツールバーの下部にある[レスポンシブモード]ボタンをクリックすると、3つのオプションを示すドロップダウンリストが開きます。デスクトップ、タブレット、モバイル。これまで、デスクトップビューアの検索方法に基づいてWebサイトを設計していました。次に、[タブレット]をクリックして、タブレットブラウザでどのように表示されるかをプレビューします。同様に、「モバイル」モードについても確認できます。何かが故障しているように見える場合、または視覚的に魅力的でないと感じた場合は、Webページを編集できます。

画像でわかるように、最初のタイトルはタブレットモードには大きすぎ、「50％OFF」は小さすぎるため、調整する必要があります。ページのすべての要素をチェックして、再設計が必要かどうかを確認してください。これらの変更はすべて、[更新]をクリックするとタブレットモードに適用されます。モバイルモードにも同じことが適用されます。見出しのテキストのサイズ、ボタン、バナー、見出しの配置を調整します。

モバイル版またはタブレット版で必要なセクションが重要でないと思われる場合は、それらを無効にすることができます。そのためには、非表示にするセクションを選択し、[セクションの編集]ツールバーの[詳細]カテゴリに移動し、[レスポンシブ]をクリックします。[表示]で、デスクトップ、タブレット、またはモバイルバージョンのセクションを非表示にすることを選択できます。画像。他のセクションや要素でできることと同じです。背景画像やフォントサイズなど、タブレットモードやモバイルモードでさまざまなデザインを作成できます。

お問い合わせフォーム

それでは、先に進んで、訪問者が連絡先情報を入力できる「連絡先」ページを作成する方法を学びましょう。このページから直接メールにアクセスできます。ページの基本的なデザインは、Elementorエディターまたはテーマカスタマイザーを使用して自分で行うことができます。唯一重要なのは、画像に示されているお問い合わせフォームです。したがって、Elementorツールバーでフォームを検索し、セクションにドラッグアンドドロップすると、[フォームの編集]ツールバーを使用してテキストとフォームのデザインを編集できます。これは、今では自分でできると思います。 [フォームの編集]ツールバーには、ここでは説明していませんが、作成できる基本的なフォームの詳細設定が多数あります。

クーポン

サイトにクーポンを追加するには、カスタマイズボタンの横にあるトップバーの[+新規]をクリックして、[クーポン]を選択します。 WordPressサイドツールバーのクーポンは、画像に示すように[マーケティング]セクションの下にあります。ここでは、新しいクーポンコードを追加し、割引の種類をパーセンテージ割引、固定カート割引、または固定製品割引として選択し、割引の金額またはパーセンテージとクーポンの有効期限を入力できます。「使用制限」では、最低費用、個人使用、他のクーポンとの組み合わせなどの条件を設定したり、クーポンに商品や商品カテゴリを含めたり除外したりできます。利用制限では、このクーポンの利用回数を選択したり、特定の商品に限定して利用を制限したりすることができます。 [公開]をクリックしてこのクーポンをWebサイトに適用し、購入時にクーポンコードを適用してカートページでテストします。

これらのチュートリアルが読者にとって有益であり、今では自分でWebサイトを最初から作成できることを心から願っています。ヘルプが必要な場合は、私のWebサイトとFacebookページにアクセスして、コメントを残すことができます。ウェブサイトの構築とElementorの使用については、他にもたくさんのリソースがあり、チェックアウトできます。このチュートリアルをお読みいただきありがとうございます。フィードバックやクエリはいつでも歓迎します。