요소 간에 배경 전환을 생성하시겠습니까? Divi ?
요소 간의 원활한 배경 디자인 전환 만들기 Divi 당신의 디자인을 향상시키는 좋은 방법입니다 사이트 웹 Divi.
이를 통해 창의적인 방식으로 선과 섹션 사이의 그라디언트, 패턴 및 배경 마스크를 매끄럽게 전환할 수 있습니다.
예를 들어 디자인의 전체 정렬 및 대칭 모양을 잃지 않고 다른 색상으로 패턴 또는 마스크 전환을 가질 수 있습니다.
이 튜토리얼에서는 Divi의 기본 제공 배경 디자인 옵션을 사용하여 Divi 섹션과 라인 사이의 원활한 배경 디자인 전환을 생성합니다. 이 디자인의 응용 프로그램과 다양성은 무궁무진하여 Divi의 배경 디자인 옵션을 완전히 새로운 차원으로 끌어 올렸습니다!
시작하자.
측량
이 튜토리얼에서 만들 디자인을 간단히 살펴보겠습니다.
다음은 마스크와 배경 패턴에 대한 몇 가지 간단한 변경으로 가능한 몇 가지 다른 샘플 디자인입니다.
Divi Builder로 새 페이지 만들기
시작하려면 다음을 수행해야 합니다.
WordPress 대시보드에서 페이지> 새로 추가 새 페이지를 만듭니다.
이해하기 쉬운 제목을 지정하고 클릭하십시오. Divi Builder 사용
그런 다음 클릭 건물 시작 (처음부터 구축)
그 후에 Divi에서 디자인을 시작할 빈 캔버스가 생깁니다.
배경에서 Divi 섹션과 라인 사이의 원활한 전환 만들기
머리글을 자리 표시자 콘텐츠로 만들기
시작하기 전에 헤더를 다음과 같이 추가해야 합니다. 내용 허구. 시작하려면 페이지의 기본 섹션에 XNUMX열 행을 추가하세요.
그런 다음 라인에 텍스트 모듈을 추가합니다.
H1 크기 텍스트를 추가합니다.
탭 아래 디자인, 헤더 텍스트 디자인을 원하는 대로 업데이트합니다.
- 글꼴: Roboto Condensed
- 글꼴 두께: 굵게
- 스타일: TT
- 텍스트 정렬: 가운데
- 텍스트 색상: #000000
- 제목 텍스트 크기: 4vw
- 문자 간격: 0.1em
- 줄 높이: 1.3em
섹션 배경 디자인
섹션에 패딩 추가
가짜 헤더가 배치되면 섹션 설정을 열고 다음과 같이 간격을 업데이트합니다.
- 패딩(상단 및 하단): 15vw
섹션에 배경 그라디언트 추가
이제 작업할 공간이 더 있으므로 섹션에 배경 디자인을 추가할 준비가 되었습니다. 탭 아래 배경 그라데이션, 다음 그라데이션 포인트를 추가합니다.
- 그라데이션 중지:
- 0%: #4f0f75(0%에서)
- 25%: #2843c9(25%에서)
- 50%: #4ae2e0(50%에서)
- 75%: #3881ff(75%에서)
- 100%: #4f0f75(100%에서)
섹션에 배경 패턴 추가
탭 아래 배경 무늬, 다음을 업데이트합니다.
- 패턴: 대각선 줄무늬
- 패턴 색상: rgba(79,15,117,0.23)
- 변형: 회전
- 패턴 크기: 사용자 정의 크기
- 폭: 7vw
- 높이: 5vw
- 패턴 반복 원점: 중앙
참고 : 패턴의 너비와 높이는 반드시 VW 길이 단위를 사용하십시오. 또한 반복되는 원점을 "중앙"으로 설정해야 합니다. 이렇게 하면 나중에 행에 추가할 배경 패턴과 같은 위치에 배경 패턴이 유지됩니다.
섹션에 배경 마스크 추가
탭 아래 배경 마스크, 다음을 추가합니다.
- 배경 마스크: 레이어 블롭
- 마스크 색상: rgba(0,0,0,0.7)
- 마스크 폭: 100vw
- 위치: 센터
참고 : 패턴과 마찬가지로 VW 길이 단위를 사용하여 마스크의 크기를 조정해야 합니다. 또한 마스크에 중앙 위치를 지정해야 합니다.
라인 배경 디자인
섹션 배경을 복사하여 행 배경에 붙여넣기
라인 배경 디자인 프로세스의 속도를 높이려면 섹션 배경 설정을 복사하십시오.
그런 다음 기존 라인에 배경을 붙여넣습니다.
이 시점에서 배경 패턴과 선의 마스크가 섹션의 배경으로 매끄럽게 전환되는 방법을 이미 볼 수 있습니다.
선의 배경이 투명한 것처럼 보이지만 실제로는 크기와 위치가 동일한 섹션에 사용된 동일한 패턴과 마스크입니다.
VW를 사용하여 행 크기 및 패딩 조정
다음으로 VW 길이 단위를 사용하여 행에 사용자 정의 너비를 지정해야 합니다. 다음을 업데이트합니다.
- 폭: 75vw
- 최대 폭: 75vw
- 패딩(상단, 하단, 왼쪽 및 오른쪽): 10vw
라인에서 그라디언트 정지점 조정
다음으로 섹션 배경 그라디언트로 매끄럽게 전환하려면 선 배경에서 그라디언트 정지점을 조정해야 합니다.
탭 아래 배경 그라데이션, 섹션 배경에서 상속된 XNUMX개의 중간 그라디언트 점을 유지하고 첫 번째 및 마지막 그라디언트 정지점을 제거합니다.
그런 다음 첫 번째 정지를 0%로 설정하고 세 번째 정지를 100%로 설정합니다. 완료되면 다음과 같은 그라디언트가 있어야 합니다.
- 그라디언트 정지
- 0%: #2843c9
- 50%: #4ae2e0
- 100%: #3881ff
선에 상자 그림자 추가
디자인에 약간의 인상을 주고 배경의 원활한 전환을 강조하기 위해 행에 상자 그림자를 추가할 수 있습니다.
- 박스 섀도우: 스크린샷 참조
- 수직 위치: 0px
- 상자 그림자 흐림 강도: 4vw
- 그림자 색상: rgba(0,0,0,0.5)
선 배경 패턴 색상 조정
이제 모든 배경 요소가 준비되었으므로 보다 창의적인 디자인을 위해 색상 조정을 시작할 수 있습니다.
옵션 아래 배경 무늬 행에서 다음을 업데이트합니다.
- 패턴 색상: rgba(255,255,255,0.23)
선 배경 마스크 색상 조정
또한 라인의 마스크 색상을 업데이트하여 디자인을 눈에 띄게 만들 수도 있습니다.
탭 아래 배경 마스크, 다음을 업데이트합니다.
- 마스크 색상: #ffffff
- 마스크 변환: 반전
최종 결과
최종 결과를 보자.
지금 DIVI를 다운로드하세요!!!
더 많은 가능성
다음은 마스크와 배경 패턴에 대한 몇 가지 간단한 변경으로 가능한 몇 가지 다른 샘플 디자인입니다.
지금 DIVI를 다운로드하세요!!!
결론
Divi에서 원활한 배경 디자인 전환을 만드는 핵심은 이러한 VW 길이 단위를 현명하게 사용하는 것입니다.
먼저 (페이지의 중앙 위치에서) 브라우저 뷰포트의 너비에 맞는 섹션 배경 디자인을 만들어야 합니다. 완료되면 동일한 단선 배경 디자인을 사용할 수 있습니다. 그 다음에는 놀라운 디자인을 위해 약간의 그라디언트와 색상 조정만 하면 됩니다.
이 기술이 향후 프로젝트에 유용한 또 다른 디자인 기술을 추가할 수 있기를 바랍니다.
이 튜토리얼이 다음 Divi 프로젝트에 영감을 주기를 바랍니다. 우려 사항이나 제안 사항이 있으면 다음에서 저희를 찾으십시오. 댓글 섹션 그것을 논의하기 위해.
상담도 가능합니다 우리의 자원, 인터넷 사이트 작성 프로젝트를 수행하기 위해 더 많은 요소가 필요한 경우.
주저하지 말고 가이드와 상의하세요. 워드 프레스 블로그 제작 또는 Divi : 역대 최고의 워드 프레스 테마.
그러나 그동안, 이 기사를 다른 소셜 네트워크에서 공유하십시오.
...
