베스트셀링 인기 워드프레스 테마 Top 30 자세한 정보

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

Last Updated: 2020년 11월 14일 | 댓글 남기기
  • 네이버 블로그 공유하기
  • 네이버 밴드에 공유하기
  • 페이스북 공유하기
  • 트위터 공유하기
  • 카카오스토리 공유하기

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

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

참조 URL은 http://uhakpay.com/입니다.

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

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

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

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

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

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

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

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

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

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

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

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

Divi 테마에서 배경 이미지 위에 반투명한 텍스트 상자 배치하기 11여기에서 데모를 확인할 수 있습니다.

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

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

참고:



댓글 남기기

Leave a Comment