Flatsomeテーマを使用して自分のウェブサイトを構築するチュートリアル

FlatsomeはThemeforestウェブサイト上で販売実績No.1のWooCommerceテーマです。この記事では、NaibaがFlatsomeを使用して自分のウェブサイトを構築する。

Flatsomeを使用してウェブサイトを構築する前提条件

方法を説明します。Flatsomeを自分のWordPressテーマとして使用したい場合、まず第一に自分のWordPressウェブサイトを持っている必要があります。Naiba サイト構築ノートでは多くの関連チュートリアルを共有しているため、ここでは繰り返し説明しません。

1. ウェブサイト構築の手順
2. 外国貿易ユーザーにおすすめのSiteGroundホスティングでのWordPressインストールチュートリアル

WordPressウェブサイトをインストールしたら、Flatsomeを使用して自分の外国貿易向け独立サイトを構築できます。

Flatsome使用チュートリアル

一、Flatsomeテーマのインストール

1、Themeforestで購入後、テーマファイルをダウンロードする購入リンク2、ダウンロードした圧縮ファイルを解凍し、テーマのインストールパッケージをWordPress管理画面にアップロードしてインストールします。 3、テーマを有効化し、ウィザード画面に入ります。下図の通り：4、ウィザードに従って操作します。途中でkeyの入力、子テーマの有効化、プラグインのインストール、コンテンツのインポートなどが求められます。 keyの再取得方法がわからない場合ここをクリック。 コンテンツのインポートが完了すると、ロゴのアップロードとプリセットテンプレートの選択が求められます。お好みのデモスタイルを選択してください。LOGO画像は後から変更することも可能です。 5、インポート完了インポート完了後、Setup WooCommerceを選択してショッピングプラグインの設定を行うか、View your new websiteをクリックしてサイトを閲覧できます。

二、Flatsomeテーマのカスタマイズ

サイトのトップページでカスタマイズ（customize）ボタンをクリックすると、テーマに対して一連のカスタマイズ変更を行うことができます。ここではテーマの多くの部分を変更・設定でき、実際の状況に応じてパラメータを調整してください。 例えば、HeaderのPresets内でサイトナビゲーションバーのスタイルを選択でき、Header Builder画面ではドラッグ＆ドロップでヘッダーに表示するコンテンツを選択できます。もしサイトに中国国内のユーザーがいる場合は、StyleのTypography内でGoogleフォントを無効化することをお勧めします。外国貿易向けのサイトではこの操作は不要です。なぜならGoogleフォントは比較的豊富で、スタイルも美しいからです。 カスタマイズ内容の設定が完了したら、公開ボタンをクリックしてください。

三、Flatsomeページレイアウトの変更

例えば、サイトトップページのレイアウトを再編集したい場合は、サイトトップページで上部の編集ボタンをクリックするか、WP管理画面のページセクションからトップページを見つけて編集します。 Edit with UX Builderを選択し、ページビルダー編集画面に入ります。下図の通り：上図では、左側のナビゲーションが現在のページのレイアウトです。最上部に2つのバナーがあることがわかります。最初のバナーのコンテンツをクリックすると、直接テキストを編集できます。 Bannerの設定optionsをクリックすると、バナーの詳細設定に入り、背景画像やレイアウトなどの内容を変更できます。 セクションとセクションの間では、➕プラス記号をクリックして新しいセクションを追加できます。追加可能なコンテンツは下図の通り：これらの機能モジュールを使用して、ページのレイアウトとコンテンツを自由にカスタマイズできます。 すべてのコンテンツのデバッグが完了したら、更新をクリックして新しいページを公開します。 すべての設定が完了したら、商品をアップロードし、サイトを公開して運用を開始できます。 以上がNaibaがご紹介したFlatsomeテーマを使用して自分のサイトを構築する方法チュートリアルを選択する必要があります。