作成講座 ②フロントページの構成

メスメライズ:カスタマイズ

Mesmerize コンパニオンを適用

必須プラグインの一つ Mesmerize コンパニオンをインストール後、有効化します。
たったそれだけの作業で、あっという間にフロントページが完成します。

文字入力も全てカスタマイザーから画面を見ながら出来るので迷うことはほぼ無いでしょう。

 

 

■コンテンツの構成確認

フロントページ(トップページ)を開いたら、ページ上部の管理バーから『カスタマイズ』をクリックします。
ページの表示が右にずれ、左側にカスタマイズ画面が現れます。

フロントページのデザインは、Manage page sections で行うので、まずはこちらの操作に慣れましょう。

ページを上下にスクロールしてみましょう。
フロントページの各セクションを移動する毎に、左側の Manage page sections の色が変わるのがわかりますでしょうか?

 

メスメライズ:カスタマイズ

画像の例では、右ページ部分で Overlappable のセクションを選択しているので、左 Manage page sections でも Overlappable 部分が『緑色』にハイライト表示されています。

右ページで各セクションを上下に移動すると、左部分も『緑色』のハイライト表示が上下するので、どのセクションが何というセクション名か確認してみましょう。

 

 

■Manage page sections

こちらの並び通りにフロントページがデザインされています。
フロントページの各セクションの表示順を変更したり、セクション自体の削除や変更もこちらで行います。

各セクションの若干のスタイル変更は Manage page sections 配下の各パーツ横にある歯車(Edit section settings)にて行います。
セクション自体のパターン変更は Manage page sections 表示上部にある Page Content をクリックします。

 

Overlappable

こちらのセクションは無料で使えるデザインはこのパターンだけです。
ボタン内の Font Awesome アイコンの変更は、カスタマイザーにて行います。

 

About

About は、無料で5パターン用意されています。

パターンの変更は Page Content から行います。
Page Content をクリックすると About セクション内で使用できるデザインが数パターン表示されます。
気に入ったパターンを見つけたら Add Section をクリックします。

Manage page sections の最下部に表示されるので、パーツをつかんで上部に移動するとページ内のセクションも移動します。

 

Features

Features は、無料で6パターン用意されています。

 

Content

Content は、無料で5パターン用意されています。

 

Portfolio

Portfolio は、無料で2パターン用意されています。

似たようなセクションに Gallery がありますが、無料での使用はできません。

 

Testimonials

Testimonials お客様の声セクションは無料で2パターン用意されています。

 

Cta

Cta コールトゥアクションのセクションです。

無料で使用できるのはこのパターンのみ、他に有料で2パターン用意されています。

 

Team

Team は、無料で2パターン用意されています。

 

Latest-news

Latest-news 最新のニュースセクション。

無料で使用できるのはこのパターンのみ、他に有料で3パターン用意されています。

 

Contact

Contact セクション。

無料で使用できるのはこのパターンのみ、他に有料でマップ表示などが5パターン用意されています。

 

 

作成講座 まとめ

今回は Mesmerize の構造についてお勉強しました。

どうですか?
皆さん理解出来ましたでしょうか??

 

今日はここまでです!

また次回続きをアップしますね。

 

 

 

 

 

 

この記事を書いたのは

白馬のおんじ
名古屋市の情報通信システム会社に勤務。生活の大半をブログ運営に捧げています(笑)WordPress や BiND を使用したサイト制作承ります!

"ZERO"で作るゼロ円ホームページ

レカムジャパン名古屋第一支店で作るホームページ。"ZERO"ならドメインの取得や管理にかかる初期費用も一切ゼロ。もちろん製作費も更新費用もかかりません。ホームページにかかる4つの費用を全てゼロにした名古屋第一支店だけのオールフリープラン"ZERO"。是非ご利用ください!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です