Elementor(Elementor Page Builder)とはWordPressのページビルダープラグインです
ページビルダーとは、ドラッグ&ドロップで直感的にページのレイアウトを作成したり、様々なウイジェットを組み込むことでプロフェッショナルな見た目のページの作成が可能となります。
ざっくり言うと簡単にかっこいいホームページが作れるんですw?
Elementorの特徴
・WordPressテーマのデザインにかかわらずページ単位で自由にレイアウトを変更
・テキストや写真、アイコンなどWordPressの要素を自由に取り入れる事が可能
・ほとんどの操作をドラッグアンドドロップで直感的に行える
Web制作のワークフローについて従来はAdobe PhotoshopやAdobe XS、Adobe illustratorなどでデザインを作成しAdobe Dreamweaverなどでコーディングしてデータをアップロードするという流れでした。しかしElementorを使用するとドラッグ&ドロップで直接デザインを組み上げていく事が可能となり制作時間の短縮と細かな微調整に時間をかける事が出来るようになります。
Elementorプラグインを追加
WordPressのプラグイン検索から「elementor」で追加をします。
Elementor編集画面へ進む
WordPressの新規固定ページを作成し「Elementorで編集」ボタンをクリックします。
ウィジェット、セクション、カラムについて
左側にウィジェット(ひと目で情報を得られるように小型化されたアプリ)と呼ばれるパーツを右側のセクション(点線部分)にドラッグしてデザインを組み上げていきます。この場合、1カラムのセクションとして表示されます。
レイアウトを先に組んでからウィジェットを入れたい場合、「新しいセクションの追加」ボタンをクリックして、まず構造を選択します。
ウィジェット
ドラッグ&ドロップでブロックを組み合せるようにページの見せ方を変更できる
セクション
章、節、項
カラム
列。2カラムの場合、横に2列のレイアウト構成の事
下の図は1カラム、2カラム、3カラムになります。左から入れたいウィジェットを「+」のカ所にドラッグします。
作業していてウェジェット一覧に戻りたい場合は、右上のアイコンをクリックします。
テンプレート
Elementorで新規作成時はヘッダー、フッター、サイドバーなど部分がありますが
何もない白紙状態から作業を進めたい場合、左下の設定アイコンからTemplete:Elementor Canvasを選択します。
Elementor編集を終了する
左上のリストアイコンをクリックして「EXIT TO DASHBOARD」を選択します。
https://elecre.net/2018/01/27/post-738/
https://elecre.net/2018/01/19/post-76/
おすすめウィジェット
えれくり的にElementorのウェジェットの中でおすすめなのがこちら!
https://elecre.net/2018/02/21/post-1898/
https://elecre.net/2018/01/25/post-571/