コンテンツへスキップ

製造業・メーカー企業のコンサルティング、Web制作、BtoBマーケティング

Web活用経営株式会社
  • 私達の仕事
    • Web活用に対する考え方
    • BowNowについて
    • Elementorについて
    • Ahrefsについて
    • 実績・事例
  • サービス
    • Web運用
    • Google対策(SEO)
    • MAコンサルティング
    • Web制作
    • Web人材育成
    • お試し診断
    • レンタル メタバース会議室
  • ブログ
    • 製造業のWebマーケティング
    • SEO・Google対策
    • Web制作
    • メタバース ショールーム
    • オンライン工場見学
    • スタッフブログ
    • フィリピン(英語)
  • 動画
  • 料金表
  • おもちゃ箱
  • 会社案内
    • MVV
    • 会社概要
    • Q&A
    • バーチャル花屋
    • 3Dクリエーター CC
お問い合せ
お問い合せ
Web活用経営株式会社

エレメンター小技(1) スクロールするスクリーンショットの作り方

Home » Web制作 » Elementor動画講座 » エレメンター小技(1) スクロールするスクリーンショットの作り方

エレメンターの小技 スクロールするスクショ

WordPress Elementor(ワードプレス エレメンター)を使用して、Web制作事例を紹介するときに、縦長のページをスクロールして見せることができます。下記の画像にマウスカーソルを乗せると、画像がスクロールして全体を見ることができます。

スクロールするスクリーンショットの作り方

スクリーンショットの左側に見出しとテキストを入れるため「画像ボックス」を配置します。

Tips) 画像、タイトル、テキストのいずれかが組み合わさっているデザインでは「画像ボックス」から要らないパーツを非表示にして使用することで、たくさんのウィジェットを配置するよりも、Webページの表示が高速化されます。

画像ボックスの配置

画像は削除し、コンテンツは左寄せに指定します。

画像ボックスの編集

次に「スペーサー」を配置し、高さを400pxに指定します。

スペーサーの配置

画像ボックスとスペーサを2カラムに並べるため、「配置」を編集しましょう。まず、画像ボックスの配置を幅⇒「カスタム」、カスタム幅⇒50%に指定します。

配置の編集

次に、スペーサーの方も「配置」同じ設定にします。この時点で、画像ボックスが左に、スペーサーが右側に並びます。

スペーサーの配置の編集

スペーサーの背景画像にスクリーンショット(縦長の画像)を指定します。サイズ⇒カバー、位置⇒上 中央寄せに指定します。

スペーサーの背景に画像を指定

次に、スペーサーの背景の「マウスオーバー」にも同じ画像を指定します。サイズ⇒カバー、位置⇒「中央下」を指定します。

スペーサーの背景に画像を指定

画像の上にマウスカーソルを置くと、画像がスクロールします。初期設定ではスクロールが速すぎるため、「トランジション所要時間」をお好みの時間に指定して、完成です。

トランジション所要時間の調整

縦長の画像は見せ方に困ることが多いと思いますが、この方法で、コンパクトかつ効果的に見せることができます。

Elementorに関する記事の更新情報などをお届けしています。ぜひご登録ください↓

  • 製造業ホームページ制作はこちら
Elementor 動画講座一覧へ
BowNow・Elementorニュース
毎月1~2回、BowNowとElementorに関する
新着情報をお届けします。
購読する
New

関連記事

FAQスキーマ

WordPress Elementorと構造化マークアップ(FAQリッチリザルト編)

記事を読む »
ボイラープレート

SEOで、タイトルタグに共通で「サイト名」等を表示する必要はあるのか?

記事を読む »
画像ボックスのタイトルだけを左寄せにする

エレメンター小技(4) 画像ボックスのタイトルだけを左寄せにする

記事を読む »

メーカー企業、製造業のためのMETAディスクリプションの書き方

記事を読む »
エレメンター3カラム

エレメンター小技(3) テキストの内容量が違っても上下が揃う3カラム作成

記事を読む »
SEO

SEO・検索対策について

記事を読む »
  • Web制作TOP
  • Elementor(エレメンター)とは
  • SEO・検索対策について
  • 製造業 Web制作について
メニュー
  • Web制作TOP
  • Elementor(エレメンター)とは
  • SEO・検索対策について
  • 製造業 Web制作について

Home » Web制作 » Elementor動画講座 » エレメンター小技(1) スクロールするスクリーンショットの作り方

Elementor
製造業 Web制作について
SEO・検索対策について
Web施策優先度診断
Elementor カテゴリー
  • ElementorとSEO (1)
  • ElementorとWeb制作マネジメント (1)
  • Elementor動画講座 (6)
  • SEO・Google対策 (4)
Elementor 新着記事
画像ボックスのタイトルだけを左寄せにする
エレメンター小技(4) 画像ボックスのタイトルだけを左寄せにする
2022年2月4日
エレメンター3カラム
エレメンター小技(3) テキストの内容量が違っても上下が揃う3カラム作成
2022年1月29日
FAQスキーマ
WordPress Elementorと構造化マークアップ(FAQリッチリザルト編)
2022年1月26日
SEO改善事例
1年以上、ほとんど集客できなかったWebサイトの問題点を改善した方法~テクニカルSEOの現場から~
2022年1月23日
ニュースレター
中小製造業のデジタル戦略
  • バックナンバー
  • BowNow・Elementorニュースはこちら
Web活用経営株式会社

技術に対話を起こし、 より良い世界に貢献する。

BtoB専門 & 中小企業向けの、Webコンサルティング、MAツール導入、Web制作会社です。ものづくり企業がITを活用して営業を強化することを専門としています。

  • コンサルティング
  • Web制作
  • 無料コース
  • 営業DXおもちゃ箱
  • 料金表
  • ウェビナー
  • 会社案内
  • 優先度お試し診断
  • 利用登録
  • ニュースレター
  • お問い合わせ
  • サイトマップ
  • 187-0032 東京都小平市小川町1-2591-18
  • 042-508-2904
  • info@web-keiei.com
  • 私達の仕事
    • Web活用に対する考え方
    • BowNowについて
    • Elementorについて
    • Ahrefsについて
    • 実績・事例
  • サービス
    • Web運用
    • Google対策(SEO)
    • MAコンサルティング
    • Web制作
    • Web人材育成
    • お試し診断
    • レンタル メタバース会議室
  • ブログ
    • 製造業のWebマーケティング
    • SEO・Google対策
    • Web制作
    • メタバース ショールーム
    • オンライン工場見学
    • スタッフブログ
    • フィリピン(英語)
  • 動画
  • 料金表
  • おもちゃ箱
  • 会社案内
    • MVV
    • 会社概要
    • Q&A
    • バーチャル花屋
    • 3Dクリエーター CC
  • 日本語
  • WordPress について
    • WordPress.org
    • ドキュメンテーション
    • サポート
    • フィードバック
  • Elementor Debugger
    • Theme
      • Location: elementor_head > Added By Condition > google tag manager head
      • Location: elementor_head > Added By Condition > tracker bownow
      • Location: elementor_head > Added By Condition > GA4
      • Location: elementor_body_start > Added By Condition > google tag body
      • Location: Single > Added By Condition > single-el
      • Location: Footer > Added By Condition > footer
    • Developer Edition
      • Report an issue
      • Elementor v3.7.0-dev10
      • Elementor Pro v3.7.1
  • Report an issue