当サイトには広告が含まれております

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

この記事は最終更新日から6年経過しています。内容が古い可能性があります。

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

記事をざっと見る

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

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

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

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

Elementorと入力すると

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

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

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

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

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

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

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

Elementorで使うために、

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

公開をクリック

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

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

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

ページの下の方で、

変更を保存をクリック

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

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

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

トップページ をクリック

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

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

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

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

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

動画は

あわせて読みたい
著作権フリーのかっこいい動画を使ってHTMLの背景に動画を入れる Facebookの公開グループ「webクリエイターのための情報交換所」は有用な情報が流れるので、いつも参考にさせてもらっています。先日も著作権フリーの動画についての情報...

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

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

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

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

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

画面下の更新をクリック

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

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

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

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

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

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

更新をクリック

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

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

セクションをクリック

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

更新をクリック

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

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

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

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

この記事が気に入ったら
いいね または フォローしてね!

あなたのシェアが励みになります!
  • URLをコピーしました!
  • URLをコピーしました!

コメント

コメント一覧 (3件)

  • Elementorってこちらで初めて知りました。詳しい説明ありがとうございます。
    ちなみに動画のみ全幅で、画像などの他のコンテンツは通常(750pxや80%など)というレイアウトは可能なんでしょうか。

    • CWさん、こんにちは!このブログで説明↓方法は各ブロックごとの指定なので、この通りやっても「動画」は全幅ですが他のブロックはデフォルトの状態のままである程度の余白があります。ということで動画のみ全幅で他のブロックの幅を好きなようにできると思います。

コメントを残す

記事をざっと見る