Elementor Proのアニメーションヘッドラインウィジェットの使い方
Elementor Proのアニメーションヘッドラインというウィジェットは、アニメーション機能を追加したヘッドラインを作成できるウィジェットです。
コンテンツのヘッドライン設定
まずは、「コンテンツ」にある「ヘッドライン」の設定をしていきましょう。
スタイル
「ハイライト」か「Rotating」のいずれかのスタイルを選択します。
「ハイライト」を選択すると以下の項目が表示されます。
形状
- Circle
- Curly
- Underline
- Double
- Double Underline
- Underline Zigzag
- Diagonal
- Strikethrough
- X
ハイライトの形式を上記の9つの選択肢から選びます。
Before Text
ハイライトするテキストの前のテキストを入力します。
Highlighted Text
ハイライトする部分のテキストを入力します。
After Text
ハイライトするテキストの後ろのテキストを入力します。
Alignment
テキストの配置を「左」、「中央」、「右」から選びます。
HTMLタグ
- H1
- H2
- H3
- H4
- H5
- H6
- div
- span
- p
テキストのHTMLタグを上記の9タイプから選びます。
「Rotating」を選んだ場合は、次のオプションが表示されます。
アニメーション
- Typing
- Clip
- Flip
- Swirl
- Blinds
- Drop-in
- Wave
- Slide
- Slide Down
アニメーションを上記の9種類の内から1つ選びます。
Before Text
アニメーションを追加するテキストの前のテキストを入力します。
Rotating Text
アニメーションを追加したいテキストを入力します。
After Text
アニメーションを追加するテキストの後ろのテキストを入力します。
配置
テキストの配置を「左」、「中央」、「右」から選びます。
HTMLタグ
- H1
- H2
- H3
- H4
- H5
- H6
- div
- span
- p
「ハイライト」同様に、テキストのHTMLタグを上記の9タイプから選びます。
スタイルの形状設定
この「形状」の設定に関しては、「ハイライト」を選んだ場合にのみ表示されます。
色
ハイライトの色を選択します。
幅
ハイライトの太さを設定します。
最前面に移動
「はい」にするとハイライトがテキストの前に表示され、「いいえ」にするろテキストの後ろにハイライトが表示されます。
Rounded Edges
「はい」にすると、ハイライトが丸みを帯びます。
スタイルのヘッドライン設定
最後に「スタイル」にある「ヘッドライン」の設定を確認していきます。
ヘッドラインの文字色
アニメーションを追加したテキストの前後のテキストの色を設定します。
ヘッドラインの書体
アニメーションを追加したテキストの前後のテキストの書体を設定します。
Animated Textの文字色
アニメーションを追加したテキストの色を設定します。
Animated Textの書体
アニメーションを追加したテキストの書体を設定します。
いつも拝見しています。ありがとうございます。
こちらを実装してみたのですが、文字が動くたびに周りのカラムが動いてしまいます。
防ぐ方法はありますでしょうか？
ちょっと経験したことがないので原因はわかりません。まずは、こちら（https://kohsukenemoto.com/elementor/not-working/）の記事をご覧ください。ここに記載している対策をしても解決できない場合は、バグの可能性がありますので、サポートにお問い合わせください。