ElementorでWordPressサイトを1から作成してみよう

投稿ページのデザインtemp

【簡単】Elementorで画像の上に文字やボタンを設置する方法

画像の上にボタンなど設置する方法

画像ウィジェットではなく
画像を画面幅いっぱいに設定しようと思うといろいろといじらないといけないので、セクションの背景に設置する

1カラムを選択

セクションの編集をクリックします。

スタイルタブを選択して背景タイプでクラシック(筆)を選択し、画像を選びます。

背景画像を設定したセッションにウィジェットを設置

設置したウィジェットを好きな位置に移動させるには、『マージンを指定』する方法と『配置』で移動させる2つの方法

高度な設定で移動させたいウィジェットを選択し、詳細タブをクリックします。
すると、マージンの入力欄が表示されるので[値をまとめてリンク]を解除しておきましょう。

ドラック&ドロップで簡単にウィジェットを移動できる、Elementorの独自機能『配置』を使って文字やボタンを移動させる方法です。

まずは移動させたいウィジェットを選択して詳細タブ→配置を開きましょう。

そして位置のプルダウンを開いて『絶対』を選択してください。

そして、ライブプレビュー画面の移動させたいウィジェットにマウスオンすると手のマークになりドラッグ&ドロップで移動できるようになります。

 

ここに見出しテキストを追加Z-index

パソコンの前で足を組む男性

吾輩は猫である。名前はまだない。どこで生れたか頓と見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。

メモを書く女性

これは見出しです

吾輩は猫である。名前はまだない。どこで生れたか頓と見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。

吾輩は猫である。名前はまだない。どこで生れたか頓と見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。

パソコンの前で足を組む男性
パソコンの前で足を組む男性