(↑Pinterestでシェアお願いします!)

Elementor Proのアニメーションヘッドラインウィジェットの使い方

執筆者 | 更新日 2020年02月10日 | Elementor Proの使い方 | コメント0件

Elementor Proのアニメーションヘッドラインというウィジェットは、アニメーション機能を追加したヘッドラインを作成できるウィジェットです。

【限定】Elementor Proの使い方を動画で網羅的に学びませんか?こちらから無料でコースを受講できます。

コンテンツのヘッドライン設定

まずは、「コンテンツ」にある「ヘッドライン」の設定をしていきましょう。

スタイル

「ハイライト」か「Rotating」のいずれかのスタイルを選択します。

Elementor Pro アニメーションヘッドライン コンテンツ ハイライト

「ハイライト」を選択すると以下の項目が表示されます。

形状

  • 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タイプから選びます。

Elementor Pro アニメーションヘッドライン コンテンツ Rotating

「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タイプから選びます。

スタイルの形状設定

Elementor Pro アニメーションヘッドライン スタイル 形状

この「形状」の設定に関しては、「ハイライト」を選んだ場合にのみ表示されます。

ハイライトの色を選択します。

ハイライトの太さを設定します。

最前面に移動

「はい」にするとハイライトがテキストの前に表示され、「いいえ」にするろテキストの後ろにハイライトが表示されます。

Rounded Edges

「はい」にすると、ハイライトが丸みを帯びます。

スタイルのヘッドライン設定

Elementor Pro アニメーションヘッドライン スタイル ヘッドライン

最後に「スタイル」にある「ヘッドライン」の設定を確認していきます。

ヘッドラインの文字色

アニメーションを追加したテキストの前後のテキストの色を設定します。

ヘッドラインの書体

アニメーションを追加したテキストの前後のテキストの書体を設定します。

Animated Textの文字色

アニメーションを追加したテキストの色を設定します。

Animated Textの書体

アニメーションを追加したテキストの書体を設定します。

Elementorの使い方を動画レクチャーで網羅的に学びませんか?
 

無料でオンラインコースを受講できます。

・Elementorのウィジェットの使い方

・ランディングページの作り方

・テンプレートの使い方

 

以下のボタンから、無料でオンラインコースに登録し、今すぐアクセスしてください。

0コメント

コメントを提出

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

Elementor Proの使い方

無料でElementor Proの使い方を

網羅的に学びませんか?
 

基本的なウィジェットの使い方から、ページを作成する方法までカバーしています。デザイン性の高いランディングページの作成を考えている方にオススメです。 下のボタンから無料で受講できます。

かっこいいLP作りたくないですか?