【プラグインElementor】トップページに動画を全幅で貼り付ける方法

トップページに動画が使ってあると、なんかちょっとかっこいい！という感じがします。テーマによっては動画がトップに貼り付けられるような仕組みになっているものもあるのですが、無料のテーマではまだ数が少ないです。Elementorという多機能なブロック型編集プラグインを使ってトップページに動画を貼り付けられるということがわかったので、その方法について書きます。

Elementorとは？インストール方法

Elementorとは、ブロック型編集のためのプラグインです。機能がとても豊富なので、今回は「動画をトップページに貼り付ける」という機能に絞って使い方を説明します。おいおい、他の方法についても書いていきたいと思っています。

Elementorをインストールします。

ダッシュボード プラグイン＞新規追加 をクリック

Elementorと入力すると

このプラグインが見つかりますので、今すぐインストールをクリック

有効化をクリック。これでインストールが終了です。

トップページを固定ページにしておく

トップページに動画を入れるためにはトップページを固定ページにしておきます。

トップページ用の固定ページを作成する

ダッシュボード　固定ページ＞新規追加 をクリック

タイトルに　トップページ　と入力します（名前はトップページ用とわかれば何でもいいです）

Elementorで使うために、

固定ページの属性＞テンプレート　で　Elementor全幅 を選びます。

公開をクリック

トップページを固定ページに指定する

ダッシュボード　設定＞表示設定をクリック

表示設定で固定ページにチェックをして、リストから先ほど作ったトップページを選択

ページの下の方で、

変更を保存をクリック

トップページに動画を全幅で貼り付ける方法

トップページに動画を全幅で貼り付けます。

ダッシュボード　固定ページ＞固定ページ一覧をクリック

トップページ　をクリック

Elementorで編集ボタンをクリック

このようにElementorの編集画面が表示されます。

左の エレメント＞ベーシック にある 動画をドラッグして、

右にあるこの枠にドロップします。

すると、このようにサンプルの動画が入った状態で貼り付けられます。

動画は

でご紹介した PIXELS VIDEOSでダウンロードしてきて、メディアにアップしてあるのでこれを使いたいと思います。

画面左の取得方法で、独自アップロードを選択

URLにある　＋　をクリックして、

アップロードした動画を選択します。

動画オプションで　自動再生を はい、ミュートを はい、ループを はい それ以外を 非表示にします。

画面下の更新をクリック

この状態で、トップページを見てみると、

このように動画が貼り付けられました。

動画の周りの余白をなくす方法

このままだと、動画の周りに余白が残っています。この余白をなくしたいと思います。

動画を編集の詳細をクリックして

マージン、パディングの値をすべて　0　にします。

更新をクリック

次に、動画の上で右クリックします。

メニューが表示されるのでNavigatorをクリック

セクションをクリック

セクションを編集＞レイアウトで、コンテンツの幅を全幅に、カラムのすき間を****すき間なし**にします

更新をクリック

できあがったトップページ

ということで、全幅の動画を貼り付けたトップページの動画はこちらになります。

動画だけだとさみしかったので、Elementorの機能で少しブロックを足してみました。Elementorを使うと、とても簡単に色々なコンテンツが入れられます。

また、動画にはボケなどのエフェクトをかけたり、文字などを入れた画像をオーバーレイすることもできます。多機能ですので、実際に色々触ってみるともっといろいろなこともできますので、是非お試し下さい！