Divi 테마에서 배경 이미지 위에 반투명한 텍스트 상자 배치하기

워드프레스 카페에서 아래 그림과 같이 이미지 위에 반투명한 텍스트를 배치하는 방법과 이런 식으로 여러 개를 배치하여 원 페이지 레이아웃을 만드는 방식에 대한 질문이 올라와서 Divi 테마에서 비슷하게 구현하는 방법을 정리해보았습니다.

업데이트: 이 글을 작성한 후에 Divi 테마의 기능이 크게 향상되었고 거의 매주 새로운 무료 레이아웃 팩이 Divi 빌더에 추가되고 있습니다. 마음에 드는 레이아웃 페이지를 로드하여 활용하면 보다 수월하게 원하는 페이지를 만들 수 있습니다.

Divi 테마에서 배경 이미지 위에 반투명한 텍스트 상자 배치하기

원페이지 사이트 구성은 그리 어렵지 않습니다. 이 부분은 다른 글을 통해 간단히 정리해보겠습니다. 기본적으로 섹션에 CSS ID를 지정하고 메뉴에서 /#ID 형식으로 링크를 걸어서 해당 항목으로 연결되게 할 수 있습니다.

참고 사이트처럼 배경을 배치하고 텍스트를 배치하는 것은 직접 코딩으로도 (별 어려움 없이) 가능할 것 같습니다. 가능하면 직접 코딩을 해도 좋습니다.

페이지 빌더를 사용하면 보다 수월하게 가능합니다. Divi 테마에서 제공되는 Divi 빌더에서는 비교적 수월하게 참고 사이트처럼 구성할 수 있습니다.

섹션을 추가하고 아래와 비슷하게 행(Row)을 추가한 다음 원하는 곳에 Text 모듈을 추가합니다.

텍스트 모듈 설정(위의 그림에서 텍스트 모듈의 제일 왼쪽에 있는 세 줄 아이콘을 클릭)에서 원하는 텍스트를 입력하고 배경색에서 색상을 지정합니다.

여기서 중요한 것은 투명도(Transparency)를 지정하는 것입니다. 위의 그림에서 제일 오른쪽에 있는 막대에서 적절히 투명도를 지정해줄 수 있습니다.

배경 이미지는 Section 설정에서 지정하면 됩니다.

글자 크기 등을 적절히 조정하고, 텍스트 상자의 여백, 패딩 값, 투명도(불투명도)을 적절히 지정하도록 합니다.

그러면 참조 URL과 비슷한 효과를 구현할 수 있습니다.

여기에서 데모를 확인할 수 있습니다.

Divi 테마에서는 특히 전체 너비 페이지에서 쉽게 여러 개의 섹션을 전체 너비 혹은 표준 너비로 추가하여 원하는 효과를 구현할 수 있는 것 같습니다. Fusion Builder를 사용하는 Avada에서 비슷한 효과를 내려고 하니까 사용법이 익숙지 않아서 그런지 전체 폭으로 표시되도록 하는 작업이 만만치 않았습니다.