BizVektorで1カラムのランディングページの作り方

内藤です

WordPressを使っていて、1カラムの販売ページ(ランディングページ)が作れないか? という質問をたびたびいただきます。

商品やサービスの個別記事は、サイドバーやメニューバーなどなくして、その記事に集中してもらいたいです。その方が反応も高まります。

1カラムの販売ページが作れるテーマ(テンプレート)も最近はありますが、ないテーマも多々あります。

今回はBizVektorテーマを使用している場合に、1カラムの販売ページを作る方法を解説します。

固定ページのテンプレートで「サイドバーなし」を選ぶ

固定ページ ⇒ 新規追加 から、販売ページ用の固定ページを作ります。

次に、右側にあるページ属性のテンプレートから「サイドバーなし」を選びます

これでサイドバーなしの1カラムレイアウトになりました。

販売ページのカスタマイズ

ただし、このままでは通常のページと同じ幅に、記事幅が広がってしまいます。広すぎてかえって見づらくなりますので、カスタマイズします。

外観 ⇒ CSSカスタマイズ  を開きます。

BizVektor CSSカスタマイズエリアに以下を追加します

@media (min-width: 970px) {

/*1カラム幅*/
.page-template-page-onecolumn #main #container {
width:800px;
}

}

これで幅が800pxになります。(ウィンドウ幅が970px以上の場合800pxになり、ウィンドウ幅がそれ以下なら自動的に縮小されていきます)

(カスタマイズ前)

 ↓↓↓
(カスタマイズ後 1カラム幅が800px)

さらに、ヘッダー部分やメニューバーなども不要な場合

BizVektor CSSカスタマイズエリアに以下を追加します

/*1カラムヘッダー部なし*/
.page-template-page-onecolumn #headerTop,
.page-template-page-onecolumn #header{
display:none;
}

これでヘッダーなしの1カラムページになりました

さらに、ページタイトル、ぱんくずリストが不要な場合

BizVektor CSSカスタマイズエリアに以下を追加します

/*1カラム ページタイトルなし*/
.page-template-page-onecolumn #pageTitBnr{
display:none;
}

/*1カラム パンくずリストなし*/
.page-template-page-onecolumn #panList{
display:none;
}

これでページタイトル、ぱんくずリストなしになります

最後に

1カラムにすることでサイドバーやメニューバーも表示されなくなります。販売ページは例えサイト内だとしても出口になるリンクは減らしたいものです。

BizVektorで1カラムの販売ページを作る場合は参考にしてみてください

7つの質問
事例から学ぶ!
自然体で自分らしく、ネットでファンを作る7つの質問を用意しました

詳細はこちら

セミナー情報

■ブログのはじめ方セミナー
4/22 受付中 詳細はこちらから

自然体で自分らしく、もっとファンを増やすメディア構築セミナー

詳細はこちらから

4/7 東京 残5席
3/16 福岡 満席
2/24 東京 満席

シェアする

フォローする

個人サロンSNS集客講座

個人サロンSNS集客講座


Facebookとブログで、自分にあったいいお客様を引き寄せませんか?
そして、身につけた技術を多くの方に提供して喜んでもらいませんか?

個人サロンの方のためのSNSを使った動画の集客講座です

詳細をみる