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