Elementorのスライダーで画像を上にのせる

Share on facebook
Share on twitter
Share on pinterest
Share on email
このエントリーをはてなブックマークに追加

スライダーは頻繁に使うデザイン要素です。普通のデザイナーにとってウェブサイトにスライダーを実装するのって意外にハードルの高い作業でそれなりの知識が必要になります。そんなスライダーを簡単に実装できるのがElementorのスライドウィジェット。

基本的には以下のような

  • 見出し
  • 本文
  • ボタン
  • 背景

の構成で簡単にスライダーを設置することが可能です。

Elementorのスライダー
説明文も差し込めます
ボタンも設置可能
Elementorのスライダー
説明文も差し込めます
ボタンも設置可能
Previous
Next

一見スライドインしてくる要素は文字しかできないように見えるこのウィジェット、画像をスライドすることも可能です。

タイトルと説明部分はテキストしか入力できないように見えますが、この入力フィールド直接HTMLコードを入力することが可能です。下のスライドウィジェットには次のようなHTMLを書き込んであります。

ボタン部分も内容を削除することで、表示を省略することができます。

<img src="https://crft.jetsets.jp/wp-content/uploads/2018/01/crft_fav.png" alt="" width="100" height="100" class="alignnone size-full wp-image-152" />
Previous
Next

この方法で<span>などでCSSを入力することも可能です。

勝手マニュアル更新中

進捗状況 28%

Minoru Nitta(父)

Tetsuro Nitta(長男)