Gutenberg完全対応のSANGO Gutenberg について

SANGO Gutenbergを使ってLPページを作る方法

注意事項

この記事を実践するには、SANGO 2.7.0以上、SANGO Gutenberg 1.28.0以上である必要があります。もしバージョンがこれらのバージョンより低い場合はバージョンアップ後にお試しください

SANGO Gutenbergプラグインをご存知ない方はこちらの記事をお読みください。

SANGO gutenberg SANGO Gutenberg プラグインのインストール方法と注意点
プラグインをインストール

はじめて導入する場合は、以下のボタンよりSANGO Gutenbergプラグイン(zipファイル)をダウンロードしてください。

最新版をダウンロード

(ライセンス:GPL)

この記事では、SANGO Gutenbergのみを使って綺麗なLPページを作る方法を解説していきます。

固定ページの設定

まずは固定ページを作ります。画面上部にあるadminメニューより、固定ページに移動します。

固定ページのテンプレートをトップページ用1カラム(タイトルなど出力なし) に設定します。

コンテンツ下に表示されるシェアボタンを非表示に設定します。

コンテンツ設定にて、コンテンツの最大幅を設定し、コンテンツ上下の余白をなくす にチェックを入れます。

LPページを作るのに最適なブロックを設置

以下のブロックを使うとLPページを使うのに最適かもしれません。

  • SANGO ヒーローブロック
  • SANGO スライダーブロック
  • SANGO フル背景ブロック

SANGO ヒーローブロック

ヒーローブロックはトップページのメインビジュアルや記事の途中に注意を引きたいコンテンツがある場合に有効なブロックです。

SANGOヒーローブロックを記事の先頭に設置するとLPページっぽさが出ると思います。ツールバーの右から2番目の項目をクリックすると、幅を指定できますので、全幅 を選択します。

SANGO スライダーブロック

ページの先頭にスライダーブロックを設置してもLPページ感が出ると思います。スライダーブロックは画像をスライドショーで表示するためのブロックです。画像にリンクを設定することも可能です。

こちらも同じく全幅を選択してスライダーを画面いっぱいに表示していただくことができます。

SANGO フル背景ブロック

SANGOフル背景ブロックは、コンテンツの途中に背景色もしくは背景画像を設定することでコンテンツごとの区切りを強調するのに利用できます。フル背景ブロックの中には全てのブロックを入れることができます。

フル背景ブロック

完成したページのDEMO

デモページを作りましたので実際にどのように見えるかご確認ください。

6 COMMENTS

コメントを残す

* は入力必須項目です。
コメント投稿ガイドラインを読んでから投稿してください。
メールアドレスは公開されませんが、名前は公開されます。

HTMLやPHPのコードを掲載するときはHTMLエスケープツールで特殊文字を変換してから貼り付けてください。