Diviテーマで背景画像の上に半透明のテキストボックスを配置する

WordPress カフェでは、上記の図のように画像の上に半透明のテキストを配置する方法と、このように複数のを配置して、ワンページレイアウトを作成する方法についての質問が上がってきて Diviテーマで同様に実装する方法をまとめてみました。

参照URLは http://uhakpay.com/입니다。

ワンページサイトの構成は、それほど難しいことではありません。 この部分は、他の文を使用して簡単にまとめてみましょう。 基本的にセクションにCSS IDを指定して、メニューから/＃IDの形式でリンクをかけて、その項目に接続されるようにすることができます。

参考サイトのように背景を配置して、テキストを配置することは、直接コーディングでも（別の難しさせずに）できることです。 可能な場合は、直接コーディングをしても良いです。

ページビルダーを使用すると、より容易に可能です。 Diviテーマで提供されるDiviビルダーでは、比較的容易に参考サイトのように構成することができます。

セクションを追加して、以下の同様の（Row）を追加し、好きなところにTextモジュールを追加します。

テキストモジュールの設定（上の図で、テキストモジュールの一番左にあるXNUMX行のアイコンをクリック）で、目的のテキストを入力して、背景色で色を指定します。

ここで重要なのは、透明度（Transparency）を指定することです。 上の図で一番右にあるバーで適切に透明度を指定してくれることができます。

背景画像は、Section設定で指定します。

文字サイズなどを適切に調整し、テキストボックスの余白、パディング値、透明度（不透明度）を適切に指定するようにします。

その後、参照URLと同様の効果を実現することができます。

ここで デモを確認することができます。

Diviテーマでは、特に全体の幅のページで簡単に複数のセクションを全体の幅、あるいは標準的な幅に追加して、所望の効果を達成することができるようです。 Fusion Builderを使用している Avadaで同様の効果を出そうとするから使い方が慣れなくてそうなのか、全体の幅で表示されるようにする作業が少なくなかった。

メモ：

• Diviの投稿スライダーモジュールを Facebookのニュースルームポストスライダーのように変える方法