FlatsomeはThemeforestウェブサイト上で販売実績No.1のWooCommerceテーマです。この記事では、NaibaがFlatsomeを使用して自分のウェブサイトを構築する。
Flatsomeを使用してウェブサイトを構築する前提条件
方法を説明します。Flatsomeを自分のWordPressテーマとして使用したい場合、まず第一に自分のWordPressウェブサイトを持っている必要があります。Naiba サイト構築ノートでは多くの関連チュートリアルを共有しているため、ここでは繰り返し説明しません。
WordPressウェブサイトをインストールしたら、Flatsomeを使用して自分の外国貿易向け独立サイトを構築できます。
Flatsome使用チュートリアル
一、Flatsomeテーマのインストール
1、Themeforestで購入後、テーマファイルをダウンロードする
2、ダウンロードした圧縮ファイルを解凍し、テーマのインストールパッケージをWordPressの管理画面からアップロードしてインストールします。
3、テーマを有効化し、ウィザード画面に進みます。下図の通り：
4、ウィザードに従って操作します。途中でキーの入力、子テーマの有効化、プラグインのインストール、コンテンツのインポートなどが求められます。
キーをどこで確認すればわからない場合ここをクリック。
コンテンツのインポートが完了すると、ロゴのアップロードとプリセットテンプレートの選択が求められます。好きなデモスタイルを選択してください。ロゴ画像は後から変更することもできます。
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の設定オプションをクリックすると、バナーの詳細設定に入り、背景画像やレイアウトなどを変更できます。
セクションとセクションの間では、➕プラスボタンをクリックして新しいセクションを追加できます。
追加可能なコンテンツは下図の通り：
これらの機能モジュールを使って、ページのレイアウトやコンテンツを自由にカスタマイズできます。
すべての内容を調整したら、「更新」をクリックして新しいページを公開します。
すべての設定が完了したら、商品をアップロードしてサイトを公開・運営できます。
以上がNaibaがご紹介した内容です。Flatsomeテーマを使用して自分のサイトを構築する方法チュートリアルを選択する必要があります。