フラットサムのテーマ
Flatsome は、 e コマース Web サイト用に設計された強力な WordPress テーマであり、WooCommerce 統合が付属しています。
これは、ThemeForest で最も人気のある WooCommerce テーマの 1 つです。このチュートリアルの執筆時点で、販売数は 174,500 件を超え、6,600 件を超えるレビューから 4.8 つ星の素晴らしい評価を得ています。
Flatsome は主に初心者や技術に詳しくないユーザーを念頭に置いて設計されています。
これは、オンライン ビジネスを始めたいがコーディング方法がわからない、またはプロのコーダーを雇う予算がない人に最適です。 Flatsome を使用すると、シンプルで直感的なツールを使用して、プロフェッショナルな外観の Web サイトを作成できます。
Flatsome には、数多くの素晴らしい機能が満載されています。利用可能なものとその仕組みを紹介するために、Flatsome を使用して WooCommerce 製品ページを作成する方法を示す簡単なチュートリアルを用意しました。
それでは、さっそく始めましょう。
目次:
- フラットサムのテーマ
- Flatsome、WooCommerce、WordPress の違い
- Flatsome テーマを使用して WooCommerce 製品ページを作成する
- ステップ 1: 製品ページのレイアウトを選択する
- (オプション) ステップ 2: 製品ページを手動で作成する
- ステップ 3: 製品ページをカスタマイズする
- まとめ
Flatsome、WooCommerce、WordPress の違い
新しい読者を歓迎するにあたり、すべての読者が同じ認識を持っていることを確認するために、必要な情報をいくつか入力する必要があります。ここでは、この記事全体で使用する 3 つの用語すべての違いについて説明します。
WordPress から始めましょう。これは、Web サイトを作成するためにさまざまなテーマやpluginをインストールするプラットフォームです。要件に応じて他のタスクを実行するために利用できるpluginとテーマが何千もあります。
WooCommerce は、WordPress にインストールするpluginで、Web サイトにさまざまな機能を追加できます。このpluginをインストールすると、ショッピング カート、支払い処理、商品管理などの追加機能を備えた Web サイトやオンライン ストアを作成できます。
最後になりますが、最も重要な要素の 1 つは、当社の Web サイトの見通しです。 Flatsome は、希望に応じて Web サイトの視点をカスタマイズできるテーマです。たとえば、会社のロゴがオレンジの場合、Web サイトの色を反映させたいと思うでしょう。それがFlatsomeがあなたに提供できるものです。
Flatsome テーマを使用して WooCommerce 製品ページを作成する
読者は全員 WordPress、WoCommerce、Flatsome に関する知識を持っているため、Flatsome テーマに付属する素晴らしい UX ビルダーを使用して製品ページのカスタマイズに進みます。ドラッグ アンド ドロップ機能により、デザイナーの作業が非常に簡単になります。
おそらく過去数か月間、私たちが直面した困難な時期のせいで、ほぼ全員がオンラインで買い物をしたことがあります。家にいることが私たち全員にとって最も安全な解決策でした。これが、オンライン ストアが標準的な Web サイトに比べてはるかに複雑であるという事実に読者全員が同意する理由です。
しかし、WooCommerce と Flatsome の助けにより、この作業は非常に簡単になりました。座って、Web サイトがどのように見えるかを計画する必要があります。それだけです。 WooCommerce は、ビルダー オプションについてお手伝いします。ドラッグ アンド ドロップを使用するだけで、本格的なオンライン ストアをわずか数分で作成できます。
WooCommerce とFlatsome を、オンライン ストアのアイデアにまったく新しい命を吹き込むことができます。顧客を惹きつけるために、ウェブサイトはモダンで美しい外観を持っている必要があります。したがって、 Flatsome はすべての問題に対する最適なソリューションです。ここて始めましょう。
Flatsome にはいくつかの素晴らしい機能がありますが、その 1 つは、30 万人を超えるユーザーのトップの選択肢となっているということです。究極のツールは、一行もコーディングすることなく、非常に応答性の高い Web サイトを作成するのに役立ちます。さらに、非常に創造的でユニークなオンライン ストアを作成できるため、その価値はさらに高まります。
それでは、これ以上時間を無駄にすることなく、チュートリアルに進みましょう。このチュートリアルでは、製品ページをデザインする完全なプロセスを説明します。写真は、タスクがどのようにプロセスを経るかをよりよく理解するのに役立ちます。
ステップ 1: 製品ページのレイアウトを選択する
まず、商品ページのレイアウトを選択することから始めます。この選択により、オンライン ストアの基本ページが作成され、後で必要に応じてカスタマイズします。このステップバイステップのガイドでは、ページをカスタマイズするプロセスを順を追って説明します。
このampでは、引き続き Classic Shop オプションを使用します。ただし、あなたに制限はありません。カスタマイズのプロセスは、選択したすべてのレイアウトで同様です。唯一の違いは、ページの基本構造が他とは異なることです。
製品カスタマイザーに進むと、「フルハイトの左サイドバー」という名前が付けられました。
製品ページのカスタマイズには 2 つのオプションがあります。 1 つ目は UX ビルダーを使用して実行するもので、もう 1 つは手動でページを構築するものです。 2 番目のオプションを選択した場合は、公式ドキュメントにアクセスしてショートコードを見つける必要があります。あなたが初心者で、オンライン ストアを構築するのが初めての場合は、この最初のオプションを選択することをお勧めします。
(オプション) ステップ 2: 製品ページを手動で作成する
これは Flatsome の公式ドキュメント ページのスクリーンショットです。ショートコードという単語を入力して検索できます。
検索をクリックすると、画面にショートコードのリストが表示されます。商品ページにとって重要なショートコードを選択できます。ショートコードを使用するのに必要な労力はそれほど多くありませんが、WordPress とショートコードの使用に関する少しの実践経験があることが不可欠です。
Web サイトでページを作成するために使用できるショートコードのリストは次のとおりです。
このampでは、フルハイトの左サイドバーのレイアウトをカスタマイズします。したがって、デザインのコードをコピーします。以下は適用された図ですが、構造から簡単にコピーできます。
タイトル付きのブロックの作成から始めます。ヘッドを開発したい場合は、ダッシュボードに配置されたUXブロックの下にある「新規追加」をクリックする必要があります。
必要に応じてブロックに名前を付けることができます。このampでは、結合に「フルハイトの左サイドバー レイアウト」という名前を付けています。次に、ブロックエディター内のショートコードを確認できます。必要なショートコードのコピーが完了したら、「公開」をクリックします。
希望に応じてページをカスタマイズできるこの小さなステップを終えると、ほぼ同等の状態になります。次に、製品ページのテーマオプションに移動し、カスタムレイアウトアイコンをクリックします。
完了すると、[カスタム製品レイアウト] ドロップダウンからブロックを作成できるようになります。
作成したばかりのブロックを選択します。このブロックを作成する主な目標は、そこから製品ページを作成することでした。このampによれば、フルハイトの左側のサイドバー レイアウトがブロックですが、最終的には、名前を付けたとおりになります。
完了したら、「公開」ボタンを押すだけです。設定が保存されます。
ステップ 3: 製品ページをカスタマイズする
いよいよカスタマイズを開始します。まず、手順の前半で設定したフロントエンドから既存の製品ページに移動します。
セットアップが必要な特定の製品を選択することが重要です。カスタマイズする必要がある作業の完全な詳細と画像が必要です。こうすることで、作成するページセクションを視覚化するプロセスがより快適になります。
UX ビルダー オプションが表示されます。ボタンを押すだけでカスタマイズが開始されます。
UX ビルダーを開いた後、画像から、製品ページの要素が製品ページの左側のパネルで使用できることがわかります。
左側のパネルは最初に作成したブロックです。ドキュメントから取得したショートコードを利用して作成しました。
左側のパネルから要素を並べ替えたり、要素オプションから設定を変更したりするオプションがあります。このampでは、左側のメニューで利用可能な価格を並べ替えます。
さらに、ビルダーのプレビューから要素を再配置したり、ビルダーの製品ページに追加のコンポーネントを配置したりすることもできます。このデモでは、製品タブ セクションと関連製品が簡単なドラッグ アンド ドロップで再配置されています。
Flatsome は、重要なドラッグ アンド ドロップ機能を使用して、Web サイトで探しているものを提供する準備ができています。高度にカスタマイズ可能なモジュールを使用すると、素晴らしいページを簡単に作成できます。ドラッグ アンド ドロップ機能により、作業がさらに快適になります。
まとめ
人々は安全を保つために家にいることを好むため、この現代ではオンライン ビジネスを行うことが不可欠です。 Flatsome を使ってビジネス初のオンライン ストアを構築し、その独自性と創造性で顧客を魅了しましょう。さらに、コンテンツ エディターには複雑なコードはなく、数行のショートコードのみです。 Flatsome は間違いなく私が出会った最高のテーマです。そのため、他のテーマを探す必要はなく、ダウンロードボタンを押すだけで、すぐにカスタマイズされたオンライン ストアの構築を開始できます。
