トップページをおしゃれに自作カスタマイズしたいなら、このプラグイン

どうも、スマコマのコマ太郎です。元気もりもり

今日はトップページをもっとおしゃれにカスタマイズしたい、そんなあなたにピッタリのプラグインをご紹介しようと思います。

ページをカスタマイズするプラグインで有名なものがいくつかあります。

特に日本では次のプラグインが良く使われている印象です。

1. Page Builder by SiteOrigin
2. Elementor Page Builder
3. Beaver Builder Plugin (Lite Version)

3番目は、日本語に対応しているので、英語が苦手という人はいいかもしれません。でも、個人的におすすめなのが 1番目の Page Builder by SiteOrigin です。

理由は、無料版でも十分使えるからです。他の2つは無料版だと結構、面倒で静的な設定に限定されている感じでした。(HTMLタグや文字を手打ちする)

Page Builder by SiteOrigin で出来ること

プラグイン「Page Builder by SiteOrigin」を使うことで、ページを視覚的に作成できるようになります。

ドラッグ&ドロップで配置できる

ドラッグ&ドロップで配置できる

必要なパーツをドラッグ&ドロップして、配置できて、とっても便利。しかもカテゴリーを指定して記事の一覧を表示する機能が無料版で使える!

トップページの作成例

Page Builder by SiteOriginには、便利機能がある

これが欲しかったんです(笑)

ちなみに、これは、「SiteOrigin Post Carousel」というウィジェットで実現しています。使い方は別の記事で説明しますね。

あわせて読みたい記事
トップページにカルーセルを配置する
どうも、スマコマのコマ太郎です。 ページをカスタマイズできるプラグインとして、以前「Page Builder by SiteOrigin」...

Page Builder by SiteOrigin をインストールしてみよう

[プラグイン]-[新規追加] をクリックし、検索窓に「Page Builder by SiteOrigin」と入力してください。(コピー&ペーストしてください)

プラグインを追加する

[今すぐインストール] をクリックし、[有効化] をクリックします。

さらに、もう1つセットでインストールするプラグインがあります。

[プラグイン]-[新規追加] をクリックし、検索窓に「SiteOrigin Widgets Bundle」と入力してください。(コピー&ペーストしてください)

[今すぐインストール] をクリックし、[有効化] をクリックします。

Page Builder by SiteOrigin の初期設定

次に初期設定を行います。デフォルトのままでもOKですが、ぼくが変更した部分を説明しておきます。

まず、[設定]-[ページビルダー] をクリックします。

ページビルダーの設定画面(一般)

[一般]タブにある [投稿タイプ] を [固定ページ] のみにしました。ぼくはトップページ(固定ページ)のみに使用するので、[投稿] を外しました。[投稿] にチェックを入れておけば、[投稿]でも利用できますが使わないなら外しておきましょう。

※画面に [CTA] という項目がありますが、これはこのサイトのテンプレートの独自機能です。通常は表示されません。

設定を変更したら、[設定を保持] をクリックします。

ページビルダーの設定画面(ウィジェット)

次に、[ウィジェット]タブに移動します。[ウィジェットタイトルの HTML] でウィジェットのタイトルタグを変更できます。

テンプレートによって、<h2> または <h3> と使われているタグが違うので、このように変更できるのは有り難いです。ちなみにデフォルトは、<h3> です。

設定を変更したら、[設定を保持] をクリックします。

ページビルダーの設定画面(レイアウト)

次は、[レイアウト]タブです。ここでタブレットとモバイルの幅を変更できます。これは使っているテンプレートに合わせるといいです。このサイトのテンプレートは、モバイル幅が 640px だったので、モバイル幅を 640px に変更しました。

設定を変更したら、[設定を保持] をクリックします。

[コンテンツ]タブは、そのままでOKです。

以上です。

何か分かりにくい点があれば、コメント欄からご質問ください。

続きは、こちら↓↓

あわせて読みたい記事
どうも、スマコマのコマ太郎です。 今日はプラグイン「page builder by siteorigin」を使ってトップページをカスタマイ...

 コメント/質問、お気軽にどうぞ。

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

関連記事

WordPressのエディタだけバージョンアップ前に戻し、以前のビジュアルエディ...

増えてしまったリビジョンを一括で削除し、最適化できるプラグインWP-Optimi...

体験記事にリンクを自動挿入する

体験記に最適!記事内にリスト型リンクを自動で追加できるプラグイン

サイドバーに追加したウィジェットのデザインが合わない

サイドバーに追加したウィジェットのデザインが合わないときに使えるプラグイン

カテゴリーの順番を手軽に並び替えたいなら、このプラグイン

WordPress を簡単にバックアップして復元できるプラグイン