ウィジェット(固定ページなどの編集ページでのElementorの機能)のうち、一般グループ – 画像ボックスについて説明します。
画像ボックスウィジェットでは、アイコンボックスウィジェットを使用する代わりに、機能セクションでよく使用される、画像と見出しとテキストを組み合わせた画像ボックスを追加することができます。
各項目のタイトルをクリックすると詳細説明が表示されます。
画像のサイズをサムネイルからフルサイズまで選択するか、カスタムサイズを入力してください。
画像の位置をタイトルと説明文に対して左、上、右のいずれかに設定します(モバイルビューでは中央に表示されます)。
タイトルのHTMLタグをH1…H6, div, span, paragraphに設定します。
画像とタイトルの間に正確なスペースを設定します。
:デスクトップ、タブレット、モバイルそれぞれで設定可能な項目です。
画像の幅を0から100%に設定します。
:デスクトップ、タブレット、モバイルそれぞれで設定可能な項目です。
枠線の角を丸くできます。
:デスクトップ、タブレット、モバイルそれぞれで設定可能な項目です。
なし(デフォルト) | Grow | Shrink | Pulse |
Pulse Grow | Pulse Shrink | Push | Pop |
Bounce in | Bounce out | Rotate | Grow Rotate |
Float | Sink | Bob | Hang |
Skew | Skew Forward | Skew Backward | Wobble Vertical |
Wobble Horizontal | Wobble to Bottom Right | Wobble to Top Right | Wobble Top |
Wobble Bottom | Wobble Skew | Buzz | Buzz Out |
通常状態とホバー状態で、ぼかし、明るさ、コントラスト、彩度、色相のCSSフィルタのスケールを変更して、画像のスタイルを調整します。
通常状態とホバー状態での画像の不透明度をコントロールします。
各スライドが表示されるまでの時間を設定します。この時間はミリ秒単位なので、1000ミリ秒は1秒に相当します。
コンテンツを左、右、中央、または端揃えに整列させます。
:デスクトップ、タブレット、モバイルそれぞれで設定可能な項目です。
コンテンツをボックスの上部、中央、または下部に整列させます。
タイトルと説明文の間のスペースを設定します。
:デスクトップ、タブレット、モバイルそれぞれで設定可能な項目です。
タイトルの書体オプションを設定します。
説明の色を設定します。
説明の書体オプションを設定します。
ドロップダウンをクリックしてアニメーションを選択します。
:デスクトップ、タブレット、モバイルそれぞれで設定可能な項目です。
Fading | Zooming | Bouncing | Sliding |
---|---|---|---|
Fade in | Zoom in | Bounce in | |
Fade in Down | Zoom in Down | Bounce in Down | Slide in Down |
Fade in Left | Zoom in Left | Bounce in Left | Slide in Left |
Fade in Right | Zoom in Right | Bounce in Right | Slide in Right |
Fade in up | Zoom in Up | Bounce in Up | Slide in Up |
Rotating | Attention Seekers | Light Speed | Specials |
---|---|---|---|
Rotate in | Bounce | Light Speed in | Roll in |
Rotate in Down Left | Flash | ||
Rotate in Down Right | Pulse | ||
Rotate in Up Left | Rubber Band | ||
Rotate in Up Right | Shake | ||
Head Shake | |||
Swing | |||
Tada | |||
Wobble | |||
Jello |
1つ目の色を選択します。
1つ目の色の位置を選択します。
2つ目の色を選択します。
2つ目の色の位置を選択します。
グラデーションの種類を選択します。
タイプ:線状を選んだ際の角度を設定します。
タイプ:放射状を選んだ際の位置を選択します。
ボーダー(枠線)タイプを選択します。
枠線の角を丸くできます。
:デスクトップ、タブレット、モバイルそれぞれで設定可能な項目です。
デスクトップ表示のとき、このセクションを表示または非表示にするかを設定します。
注:レスポンシブ表示はプレビューやライブページでのみ有効で、Elementor での編集中は使えません。
タブレット表示のとき、このセクションを表示または非表示にするかを設定します。
注:レスポンシブ表示はプレビューやライブページでのみ有効で、Elementor での編集中は使えません。
モバイル表示のとき、このセクションを表示または非表示にするかを設定します。
注:レスポンシブ表示はプレビューやライブページでのみ有効で、Elementor での編集中は使えません。
のメッセージが出てPRO版の利用をアナウンスします。属性を満たす
Attributes では、任意の要素にカスタム HTML 属性を追加することができます。
のメッセージが出てPRO版の利用をアナウンスします。カスタム CSS のご紹介
カスタム CSS を使用すると、任意のウィジェットに CSS コードを追加して、エディタでライブ表示することができます。