WordPressのElementorは自由にレイアウト可能

少し前から流行りだしたWebデザインの定番と言われるグリッドレイアウト

グリッドレイアウトとは、画面やページを縦横に分断する直線で格子状に分割し、これを組み合わせブロック要素の大きさや配置を決めるデザイン手法。

最近では良質なCSSフレームワークも豊富でBootstrap3とか使えば、割と簡単に実装出来る。ただ少なくとも最低限のhtml、css知識(floatやflexboxなど)が必要なので、片手間にブログ運営してる人や、馴染みの無い方にはかなーーりハードル高い。

htmlやcssとか意識せず、自由にレイアウト出来るプラグインは無いか!?

WordPressユーザーでもプラグインのElementorを利用すれば、Webサイトのトップページでよく見られるデザインのように、自由なレイアウトで簡単にデザインすることが可能。

スポンサーリンク

Elementor Page Builder導入

プラグイン検索欄で「Elementor」と検索すれば一番最初に出てくると思われる↓↓↓

インストールして有効化するだけで利用可能。有効化すると新規記事・新規固定ページを作る際、Elementorで編集のボタンが表示される。

Elementorで編集ボタンを押下すると、以下の編集画面が表示される↓↓↓

以下に使い方を簡単に紹介。

Elementor Page Builderの使い方

使い方は至ってシンプル。

基本は新しいセクションの追加でセクションを増やし、そのセクション内に自分が表示させたいコンテンツ(画像・動画・広告など)を当て込んでいくだけ。

まずはボタン押下し、構造の選択を行う。

今回は3分割にするレイアウトを利用し、セクション内が3つのカラムに分割される。ちなみにデフォルトでは均等に3分割されているが、設定でより詳細な比率も調整可能であり、PC・タブレット・スマホとそれぞれの微調整も可能。

各カラムに設定出来るコンテンツには、以下のものが挙げられる↓↓↓

画像や動画だけでなく、ギャラリー表示やGoogleマップなど扱えるコンテンツは多岐に及んでいる。コレが無料で使えるので、ちょっと特定の固定ページだけカスタマイズしたいとか思ったら、かなり活用出来るプラグインだと思われる。

ちなみに参考までに、私の地域ブログの一部でElementorを使っている↓↓↓

東中野さんぽ道

WordPressの多くのテーマは、デフォルトだと記事がリスト形式で表示される。コレはコレで見易いんだけど、Elementorを使えばより自由なレイアウトが可能なのでオススメ。

スポンサーリンク