WEBデザインをテーマにしている第0ユニットです。
技術者ブログとして日ごろ取り組んでいる学習内容をご紹介します。
今回はWordPressの人気プラグイン「Elementor」の使い方をご紹介します。
Elementorプラグインを利用することで、ドラッグ＆ドロップ操作で、直感的にウェブページのレイアウトを作成できます。
プログラミングのスキルは不要です。
今回はElementorの基本的な使い方を説明します。
Elementorのインストール＆有効化
Elemenetorは全てのWordPressテーマで使用できるというわけではありません。推奨されるテーマを使いましょう。
今回はElementor公式のHelloElementorのテーマを使用しています。
Elementorの起動
固定ページを新規作成し、Elementorを起動します。
Elementorのウィジェットについて
Elementorが提供する機能は「ウィジェット」と呼ばれています。左側にウィジェットのリストが並んでいることが分かります。
有料版であればより多くのウィジェットを利用可能です。2024年9月時点では有料版には4つのプランがあり、$59～$399／1年でアップグレードが可能です。
レイアウトの作成
先ずは、ウィジェットの「レイアウト」を利用しウェブページの構造を決めます。
ElementorではウェブページのレイアウトのタイプはFlexboxとGridの2種類があります。
少し前のバージョンでは、Elementorのレイアウトは「セクション」というもので構成されていましたが、バージョンアップを経て「コンテナ」という考え方が導入されたことにより「セクション」が廃止されています。
今回はGridでレイアウトを作成します。
デフォルトでは横3列、縦2行のGridレイアウトが作成されます。
詳細な設定は、画面左部の「Gridを編集」にて可能です。
Gridに要素を配置
基本のウィジェットから要素を配置することで、簡単にウェブページが作成できます。
マウス操作だけで、簡単にウェブページで多用するコンテンツが配置できます。
今後は細かい設定方法についても見ていきたいと思います。
前回ご紹介した「LOCAL」の環境で簡単に試作できるので是非試してください。
次回の技術者ブログもお楽しみに。