今回の記事ではClickfunnels1.0を使って実際にノーコードでウェブサイトを編集していく方法について解説いたします。
その際に、サイトを構成する単位「セクション」「ロー」「エレメンツ」の違いと仕組みについて理解をしておくとサイト作成のコツを掴みやすくなりますので、ぜひその3つの違いを理解しておいてください。
前回の記事はこちら
そもそもClickfunnelsって何？という方は以下の記事もご覧ください。
ページ編集画面に入る方法
ファネルのテンプレートを選ぶと以下のようなページが表示されます。
様々なメニューがありますが、基本的に「STEPS（ステップス）」の中にある「Overview（オーバービュー）」にてfunnels（ファネル）を確認することができます。
まず、「Optin（オプトンページ）」を選んで編集していきます。
編集画面のメニューでできること
「EDIT PAGE」をクリックすると以下のようなページ編集画面に変わります。
文字をクリックすると文章を編集することができ、日本語に書き換えることができます。
・「SAVE」を押さないと保存されないので、画面右上にある「SAVE（保存）」ボタンを押して、こまめに保存するようにしましょう。
・SAVEボタンの1つ左にある「PREVIEW（プレビュー）」は新規タブで実際のページが表示されます。
・左上の「EXIT」を押すと、前の画面に戻ることができます。
こられがよく使う基本操作です。
最初はでデスクトップ表示が表示されていますが、メニューにあるスマホのアイコンを押して「MOBILE」にするとモバイル表示になります。
（モバイル表示最適化の方法はまた別の記事で解説いたします。）
メニューの左上にある「SETTING（設定）」ではいろいろな設定ができますが、こちらも同様に別の機会に解説いたします。
「POP UP」ではポップアップ画面の編集をすることができます。
ここからが本題になります。
サイトを構成する単位「セクション」「ロー」「エレメンツ」
右上部に「SECTIONS」「ROWS」「COLUMNS」「ELEMENTS」という4つメニューがありますが、これらがページを構成する要素になります。
１番大きな構成要素「セクション」（Section）
画面でカーソルを動かしていくと、それぞれの画面右端に緑色でメニュー画面が表示されていますが、その構成要素のことを「SECTION」（セクション）と呼びます。
セクションが一番大きなサイトのパーツの構成単位です。
実際に「SECTIONS」を見ていくと「MANAGE」の項目がありますが、ここではどのようなSECTIONで画面が構成されているのかが分かります。
カーソルを動かしていくと、どのSECTIONを選んでいるのかが表示されます。
例えば、このページでは背景画面の上に3つのSECTION（セクション）で構成されているという設計図がわかります。
SECTIONをドラッグ＆ドロップで追加することもでき、追加したSECTIONの中にも新しいSECTIONを追加することも可能です。
セクションの次の構成要素「ロー」（ROW）
右に移ると「ROWS」があります。
ROWとは画面上でカーソルを充てると青い枠で囲われている箇所です。
セクションが一番大きなサイトの構成単位ですが、ROWはその次に大きな構成単位です。
「MANAGE」の項目では、画面上に構成されているROWを編集することができます。
新たなROWを追加することもでき、その際は1COLUMNS、2 COLUMNSなどカラムの数を選ぶことができます。
例えば2 COLUMNSで追加してみると、画面上で2つのCOLUMNSが表示されます。
基本は1 COLUMNSで問題はありませんが、画像を並べたい時などには複数のCOLUMNSを設定することをお勧めします。
基本的に、一つのSECTIONの中に複数のELEMENTSを入れたい場合は、2つ以上のCOLUMNSを選択して構成します。
最小の構成単位「エレメンツ」（ELEMENTS）
その横の「ELEMENTS」が最後の構成要素になります。
「MANAGE」を見てみると、ページ全体の構成を見ることができます。
ヘッドライン（キャッチコピー）、イメージ（画像）、ボタンなど、様々な構成要素が積み重なってサイトができていることがわかりますが、それらの文章、画像、ボタンなどの1つ1つの要素のことを「エレメンツ（ELEMENTS）」と呼ぶのです。
ROWの中にELEMENTSを追加したいと思えば、「ADD NEW ELEMENTS」を押下することでELEMENTSを追加できます。
すると、右側にメニューが現れHEADLINE（ヘッドライン）やSUB-HEADLINE（サブヘッドライン）などを選択することで文字の大きさなどを変えることができます。
同様にMEDIA やFAQなどを追加することもでき、ひとつのROWの中に様々なELEMENTSを追加することが可能です。
あらかじめテンプレートがありますので、設定自体はさほど難しくありません。
まとめると、Clickfunnelsの編集画面では一番下に背景写真などを構成することができ、その上にSECTIONという一番大きな単位があります。
SECTIONの中にはROWがあり、その中にELEMENTSという最小構成単位がある、という構成になります。
クリックファネルを使ったノーコードでのサイト作成をする際に、このようなサイト構成の単位と仕組みについて覚えておくと、初心者でもサイトを作ることが用意になりますので、ぜひこの記事内の動画も見ながら実際に編集画面をいじってみて、サイト作成に慣れていきましょうね！
それでは次の動画でも引き続きクリックファネル1.0で作成したページの編集方法を解説していきます。
この記事の解説動画はこちら
次のブログ記事はこちら
ClickFunnels1.0のアカウントを作成して14日間お試しに申し込む方法
現在クリックファネルの公式サイトからはClickfunnels2.0しか申し込むことができませんので、「クリックファネル1.0」に申し込むには、弊社のようなクリックファネル社のアフィリエイトパートナー経由でしか申し込めません。
以下の記事から値段やお申し込み方法をご確認の上、ぜひ導入を検討されてください。↓
