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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

참고:


댓글 남기기

* 이메일 주소는 공개되지 않습니다.