Divi 글로벌 헤더에 동적 사이트 제목과 슬로건을 추가하는 방법을 아는 것은 Divi 웹 사이트를 만들 때 유용합니다. 그렇게해야하는 몇 가지 좋은 이유가 있습니다. 한편으로 모든 사이트에 로고가있는 것은 아닙니다. 사이트 제목은 좋은 로고 대체물입니다. 또 다른 이유는 모든 사람이 볼 수있는 중요한 정보를 사이트에 포함하여 브랜드를 높이는 것입니다.
이 튜토리얼에서는 Divi 글로벌 헤더에 동적 사이트 제목과 슬로건을 추가하는 방법을 보여줍니다. 이 솔루션은 WordPress 백엔드에서 사이트 제목과 태그 라인을 동적으로 추출합니다. 또한 제목과 슬로건을 원하는대로 사용자 정의 할 수있는 Divi의 모든 강력한 디자인 옵션이 제공됩니다!
가능한 결과
다음은이 튜토리얼에서 빌드 할 디자인의 미리보기입니다.
동적으로 표시되는 헤더의 상단 중앙에있는 사이트 제목과 태그 라인을 확인합니다.
무료 다운로드
Divi Newlsetter에 가입하면 Divi Ultimate Landing Page Layout Pack 사본과 수많은 추가 정보를 이메일로 보내드립니다. 능숙, 무료의 놀라운 Divi 팁과 트릭. 그것을 따라하시면 곧 Divi 마스터가 될 것입니다. 이미 가입 한 경우 아래에 이메일 주소를 입력하고 다운로드를 클릭하여 레이아웃 팩에 액세스하십시오.다운로드
템플릿을 가져 오려면 Divi> 테마 생성기로 이동합니다.
페이지 오른쪽 상단에있는 이동성 아이콘을 클릭합니다.
이동성 팝업 창에서 가져 오기 탭을 선택하고 컴퓨터에서 다운로드 파일을 선택합니다.
그런 다음 가져 오기 버튼을 클릭합니다.
완료되면 전체 헤더 템플릿을 Divi Theme Builder에서 사용할 수 있습니다.
다음은 디자인으로 넘어갑니다.
사이트의 제목과 워드 프레스의 슬로건
각 WordPress 사이트에는 사이트 제목과 태그 라인이 있습니다. 사이트 제목은 기본적으로 사이트의 이름이고 태그 라인은 일반적으로 그것이 무엇인지 설명하는 짧은 문구입니다.
WordPress를 설치할 때 사이트 제목을 추가하고 잊어 버리는 것은 드문 일이 아닙니다.
그리고 어떤 사람들은 태그라인이 있다는 사실조차 깨닫지 못하고 업데이트하는 데 시간을 할애합니다. 또한, 디비 테마, 사이트 제목과 태그라인은 기본적으로 사이트에 표시되지 않으므로 간과하기 쉽습니다. 그러나 사이트 제목과 태그라인은 웹사이트의 필수 요소이며 검색 엔진에서 인식됩니다.
WordPress 대시 보드로 이동하고 설정> 일반으로 이동하여 언제든지 WordPress에서 사이트 제목과 태그 라인을 찾고 업데이트 할 수 있습니다.
또는 테마 맞춤 설정 도구를 사용하여 다른 설정을 사용하여 일반 설정에서 사이트 제목을 업데이트 할 수 있습니다.
WordPress 백엔드에서 사이트 제목과 슬로건이 어디에 있는지 알았으므로 Divi 헤더에 사이트 제목을 추가하는 방법을 알아 보겠습니다!
Divi의 글로벌 헤더에 동적 사이트 제목 및 슬로건을 추가하는 방법
미리 디자인 된 글로벌 헤더 템플릿 가져 오기
이 자습서에서는 처음부터 전체 헤더를 만드는 대신 동적 사이트 제목과 태그 라인을 기존 헤더에 추가하는 방법에 중점을 둘 것입니다. 시간을 절약하고 선명도를 높일 수 있습니다. 따라서이 헤더 디자인을 시작하기 위해 미리 정의 된 전역 헤더 템플릿을 네 번째 테마 생성기 팩 .
일단 당신이 팩을 다운로드 생성 테마 , 파일의 압축을 풀고 다음의 JSON 파일을 찾습니다. 웹 사이트 템플릿 기본.
그런 다음 Divi> Theme Builder로 이동하십시오.
오른쪽 상단의 휴대성 아이콘을 클릭합니다. 팝업 이식성 창에서 JSON 파일을 선택하십시오. 웹 사이트 템플릿 기본값을 선택하고 가져오기 버튼을 클릭합니다.
테마 빌더에 템플릿이 추가되면 바닥 글 템플릿을 삭제하고을 클릭하여 전체 머리글을 편집합니다.
헤더에 동적 사이트 제목 및 태그 라인 추가
템플릿 레이아웃 편집기 내에서 이미 디자인 된 미리 만들어진 헤더를 볼 수 있습니다. 사용자 지정을 즉시 시작할 수 있습니다.
로고 이동
시작하려면 로고를 동적으로 표시하는 이미지 모듈을 맨 위 행의 중간 열에서 맨 위 행의 왼쪽 열로 드래그합니다.
클릭 유도 문안 모듈을 추가하여 사이트 제목과 태그 라인을 표시합니다.
그런 다음 새 클릭 유도 문안 모듈을 맨 위 행 (로고가 있던 위치)의 중간 열에 추가합니다.
클릭 유도 문안 모듈을 사용하여 사이트 제목과 태그 라인을 표시합니다.
그러나 콘텐츠 추가를 시작하기 전에 먼저 아니요를 선택하여 배경색을 사용하십시오.
동적 사이트 제목 추가
콘텐츠 설정에서 제목 입력 상자 위로 마우스를 가져가 "동적 콘텐츠 사용"아이콘을 클릭합니다. 그런 다음 목록에서 "사이트 제목"을 선택합니다.
동적 사이트 슬로건 추가
그런 다음 마우스를 본문 영역 위로 가져가 "동적 콘텐츠 사용"아이콘을 선택합니다. 그런 다음 목록에서 "사이트 태그 라인"을 선택합니다.
동적 홈페이지 링크 추가
특히 로고를 교체하는 경우 사이트 제목이 클릭시 홈페이지로 리디렉션되는 것이 일반적입니다. 전체 코스를 홈 페이지로 리디렉션하려면 홈 페이지 링크를 코스 링크 URL에 동적 콘텐츠로 추가합니다.
제목의 텍스트 디자인 및 사이트의 슬로건
이제 사이트 제목과 태그 라인이 헤더에 동적으로 표시됩니다. 이제 스타일을 추가하기 만하면됩니다. 사이트 제목을 디자인하려면 제목 텍스트를 사용자 지정하고 태그 라인을 디자인하려면 본문을 사용자 지정해야합니다.
디자인 탭으로 이동하여 다음을 업데이트하십시오.
- 제목 글꼴 : Heebo
- 제목 글꼴 무게 : 굵게
- 제목 글꼴 스타일 : TT
- 제목 텍스트 크기 : 32px (데스크톱), 24px (태블릿 및 전화)
- 제목 글자 간격 : 0.3em
- 바디 폰트 : Roboto
- 바디 폰트 스타일 : 이탤릭체
- 본문 텍스트 색상 :
- 본문 크기 : 13px
- 본문 글자 간격 : 0.1em
- 바디 라인 높이 : 1em
센터링을 돕기 위해 프로모션 설명에 다음 맞춤 CSS를 추가하여 본문 아래에 기본 패딩을 가져옵니다.
안쪽 여백 : 0px
추가 설계 조정
튜토리얼의 마지막 부분에서는 각 열에서 항목이 세로 중앙에 유지되도록하고 버튼에 고유 한 디자인을 제공하기 위해 헤더에 대한 추가 디자인 조정을 수행합니다. 또한 태그 라인에 전후 라인을 추가합니다 (킥만).
세로로 열 / 컨텐츠 중심
현재 맨 위 행은 flex 속성을 사용하는“Equalize Column Heights”입니다. 작은 CSS 스 니펫을 추가하여 모든 열이 세로로 중앙에 유지되도록하여이를 활용할 수 있습니다. 이렇게하려면 맨 위 행의 설정을 열고 다음 요소를 기본 요소에 추가하십시오.
정렬 항목 : 중심;
버튼으로 열 업데이트
그런 다음 맨 위 행에서 열 3에 대한 설정을 열고 배경색과 패딩을 제거하십시오.
버튼 배경 업데이트
그런 다음 버튼 모듈 설정을 열고 다음과 같이 새 배경 그라데이션으로 배경을 업데이트합니다.
- 그라데이션 배경 왼쪽 색상 : #ffffff
- 오른쪽 배경 그라데이션 색상 : # 1dbf73
- 그라데이션 방향 : 135deg
- 시작 위치 : 10 %
- 최종 위치 : 0 %
슬로건에 전후 문자 추가
각 동적 콘텐츠 요소는 톱니 바퀴 아이콘을 클릭하여 변경할 수 있습니다. 슬로건에 앞뒤 문자를 추가하려면 슬로건이 포함 된 클릭 유도 문안 모듈의 설정을 열고 사이트 슬로건의 동적 콘텐츠에서 수정 아이콘을 클릭합니다. 그런 다음 이전 및 이후 항목에 문자를 추가하십시오.
최종 결과
결과를 보려면 사이트의 아무 페이지 나여십시오. 동적 사이트 제목과 태그 라인이 아름답게 표시되어야합니다!
마지막 생각
동적 사이트 제목과 태그 라인으로 전체 헤더를 맞춤 설정할 수 있다는 점이 정말 좋습니다. 이것은 많은 사이트에서 유용 할 것 같습니다. 더욱 강력한 브랜드 표현을 위해 로고와 함께 사이트 제목과 태그 라인을 포함하는 아이디어도 마음에 듭니다.
출처: 우아한 테마
