주요 내용으로 건너 뛰기

글로벌 Divi 헤더에 동적 사이트 제목 및 슬로건을 추가하는 방법

Divi : 사용하기 가장 쉬운 WordPress 테마

Elementor로 웹 사이트를 쉽게 만들 수 있습니다

Elementor를 사용하면 전문적인 모양으로 웹 사이트 디자인을 쉽게 만들 수 있습니다. 자신이 할 수있는 일에 대해 비용을 지불하지 마십시오. [무료]

Divi 글로벌 헤더에 동적 사이트 제목과 슬로건을 추가하는 방법을 아는 것은 Divi 웹 사이트를 만들 때 유용합니다. 그렇게해야하는 몇 가지 좋은 이유가 있습니다. 한편으로 모든 사이트에 로고가있는 것은 아닙니다. 사이트 제목은 좋은 로고 대체물입니다. 또 다른 이유는 모든 사람이 볼 수있는 중요한 정보를 사이트에 포함하여 브랜드를 높이는 것입니다.

이 튜토리얼에서는 Divi 글로벌 헤더에 동적 사이트 제목과 슬로건을 추가하는 방법을 보여줍니다. 이 솔루션은 WordPress 백엔드에서 사이트 제목과 태그 라인을 동적으로 추출합니다. 또한 제목과 슬로건을 원하는대로 사용자 정의 할 수있는 Divi의 모든 강력한 디자인 옵션이 제공됩니다!

가능한 결과

다음은이 튜토리얼에서 빌드 할 디자인의 미리보기입니다.

동적 사이트 제목 전체 헤더 템플릿 6

동적으로 표시되는 헤더의 상단 중앙에있는 사이트 제목과 태그 라인을 확인합니다.

Divi 제목 수정 예

무료 다운로드

Divi Newlsetter에 가입하면 Ultimate Divi 랜딩 페이지 레이아웃 팩과 기타 수많은 무료 및 놀라운 Divi 리소스, 팁 및 요령을 이메일로 보내드립니다. 따라 가면 곧 Divi 마스터가 될 것입니다. 이미 가입 한 경우 아래에 이메일 주소를 입력하고 다운로드를 클릭하여 레이아웃 팩에 액세스하십시오.다운로드

템플릿을 가져 오려면 Divi> 테마 생성기로 이동합니다.

페이지 오른쪽 상단에있는 이동성 아이콘을 클릭합니다.

이동성 팝업 창에서 가져 오기 탭을 선택하고 컴퓨터에서 다운로드 파일을 선택합니다.

그런 다음 가져 오기 버튼을 클릭합니다.

divi 템플릿 선택

완료되면 전체 헤더 템플릿을 Divi Theme Builder에서 사용할 수 있습니다.

전역 divi 헤더 수정

다음은 디자인으로 넘어갑니다.

사이트의 제목과 워드 프레스의 슬로건

각 WordPress 사이트에는 사이트 제목과 태그 라인이 있습니다. 사이트 제목은 기본적으로 사이트의 이름이고 태그 라인은 일반적으로 그것이 무엇인지 설명하는 짧은 문구입니다.

Divi : 모든 시간의 최고의 WordPress 테마!

901.000 다운로드Divi는 세계에서 가장 인기있는 WordPress 테마입니다. 그것은 완전하고, 사용하기 쉽고 62 무료 템플릿 이상을 제공합니다. [추천]

WordPress를 설치할 때 사이트 제목을 추가하고 잊어 버리는 것은 드문 일이 아닙니다.

divi 제목 사용자 지정

그리고 어떤 사람들은 태그 라인이 존재한다는 사실조차 깨닫지 못하고 시간을내어 업데이트하기도합니다. 또한 Divi 테마를 사용하면 사이트 제목과 슬로건이 기본적으로 사이트에 표시되지 않으므로 무시하기 쉽습니다. 그러나 사이트 제목과 태그 라인은 웹 사이트의 필수 부분이며 검색 엔진에서 인식됩니다.

WordPress 대시 보드로 이동하고 설정> 일반으로 이동하여 언제든지 WordPress에서 사이트 제목과 태그 라인을 찾고 업데이트 할 수 있습니다.

또는 테마 맞춤 설정 도구를 사용하여 다른 설정을 사용하여 일반 설정에서 사이트 제목을 업데이트 할 수 있습니다.

워드 프레스 아이덴티티 사용자 지정

WordPress 백엔드에서 사이트 제목과 슬로건이 어디에 있는지 알았으므로 Divi 헤더에 사이트 제목을 추가하는 방법을 알아 보겠습니다!

Divi의 글로벌 헤더에 동적 사이트 제목 및 슬로건을 추가하는 방법

미리 디자인 된 글로벌 헤더 템플릿 가져 오기

이 자습서에서는 처음부터 전체 헤더를 만드는 대신 동적 사이트 제목과 태그 라인을 기존 헤더에 추가하는 방법에 중점을 둘 것입니다. 시간을 절약하고 선명도를 높일 수 있습니다. 따라서이 헤더 디자인을 시작하기 위해 미리 정의 된 전역 헤더 템플릿을 네 번째 테마 생성기 팩 .

일단 당신이 팩을 다운로드 생성 테마 파일의 압축을 풀고 기본 웹 사이트 템플릿 JSON 파일을 찾습니다.

그런 다음 Divi> Theme Builder로 이동하십시오.

오른쪽 상단의 이동성 아이콘을 클릭합니다. 이식성 팝업 창에서 기본 웹 사이트 템플릿 JSON 파일을 선택하고 가져 오기 버튼을 클릭합니다.

Divi 모델 가져 오기

테마 빌더에 템플릿이 추가되면 바닥 글 템플릿을 삭제하고을 클릭하여 전체 머리글을 편집합니다.

바닥 글에서 템플릿 제거

헤더에 동적 사이트 제목 및 태그 라인 추가

템플릿 레이아웃 편집기 내에서 이미 디자인 된 미리 만들어진 헤더를 볼 수 있습니다. 사용자 지정을 즉시 시작할 수 있습니다.

최고의 WordPress 테마 및 플러그인을 찾고 계십니까?

Envato에서 최고의 플러그인과 WordPress 테마를 다운로드하고 쉽게 웹 사이트를 만드십시오. 이미 49.720.000 다운로드 이상. [EXCLUSIVE]

로고 이동

시작하려면 로고를 동적으로 표시하는 이미지 모듈을 맨 위 행의 중간 열에서 맨 위 행의 왼쪽 열로 드래그합니다.

클릭 유도 문안 모듈을 추가하여 사이트 제목과 태그 라인을 표시합니다.

그런 다음 새 클릭 유도 문안 모듈을 맨 위 행 (로고가 있던 위치)의 중간 열에 추가합니다.

클릭 유도 문안 맞춤 설정

클릭 유도 문안 모듈을 사용하여 사이트 제목과 태그 라인을 표시합니다.

그러나 콘텐츠 추가를 시작하기 전에 먼저 아니요를 선택하여 배경색을 사용하십시오.

클릭 유도 문안 작업 구성

동적 사이트 제목 추가

콘텐츠 설정에서 제목 입력 상자 위로 마우스를 가져가 "동적 콘텐츠 사용"아이콘을 클릭합니다. 그런 다음 목록에서 "사이트 제목"을 선택합니다.

동적 사이트 슬로건 추가

그런 다음 마우스를 본문 영역 위로 가져가 "동적 콘텐츠 사용"아이콘을 선택합니다. 그런 다음 목록에서 "사이트 태그 라인"을 선택합니다.

divi 사이트 슬로건 추가

동적 홈페이지 링크 추가

특히 로고를 교체하는 경우 사이트 제목이 클릭시 홈페이지로 리디렉션되는 것이 일반적입니다. 전체 코스를 홈 페이지로 리디렉션하려면 홈 페이지 링크를 코스 링크 URL에 동적 콘텐츠로 추가합니다.

홈페이지에 링크 추가

제목의 텍스트 디자인 및 사이트의 슬로건

이제 사이트 제목과 태그 라인이 헤더에 동적으로 표시됩니다. 이제 스타일을 추가하기 만하면됩니다. 사이트 제목을 디자인하려면 제목 텍스트를 사용자 지정하고 태그 라인을 디자인하려면 본문을 사용자 지정해야합니다.

디자인 탭으로 이동하여 다음을 업데이트하십시오.

  • 제목 글꼴 : Heebo
  • 제목 글꼴 무게 : 굵게
  • 제목 글꼴 스타일 : TT
  • 제목 텍스트 크기 : 32px (데스크톱), 24px (태블릿 및 전화)
  • 제목 글자 간격 : 0.3em
  • 바디 폰트 : Roboto
  • 바디 폰트 스타일 : 이탤릭체
  • 본문 텍스트 색상 :
  • 본문 크기 : 13px
  • 본문 글자 간격 : 0.1em
  • 바디 라인 높이 : 1em
divi 제목 글꼴 사용자 지정

센터링을 돕기 위해 프로모션 설명에 다음 맞춤 CSS를 추가하여 본문 아래에 기본 패딩을 가져옵니다.

안쪽 여백 : 0px
사용자 지정 divi css 코드 추가

추가 설계 조정

튜토리얼의 마지막 부분에서는 각 열에서 항목이 세로 중앙에 유지되도록하고 버튼에 고유 한 디자인을 제공하기 위해 헤더에 대한 추가 디자인 조정을 수행합니다. 또한 태그 라인에 전후 라인을 추가합니다 (킥만).

세로로 열 / 컨텐츠 중심

현재 맨 위 행은 flex 속성을 사용하는“Equalize Column Heights”입니다. 작은 CSS 스 니펫을 추가하여 모든 열이 세로로 중앙에 유지되도록하여이를 활용할 수 있습니다. 이렇게하려면 맨 위 행의 설정을 열고 다음 요소를 기본 요소에 추가하십시오.

정렬 항목 : 중심;

버튼으로 열 업데이트

그런 다음 맨 위 행에서 열 3에 대한 설정을 열고 배경색과 패딩을 제거하십시오.

온라인 상점을 쉽게 만들 수 있습니다.

무료 WooCommerce를 다운로드하십시오. 전자 상거래 플러그인은 WordPress에서 실제 제품과 디지털 제품을 판매하는 플러그인입니다. [추천]

divi 연락처 버튼 사용자 지정

버튼 배경 업데이트

그런 다음 버튼 모듈 설정을 열고 다음과 같이 새 배경 그라데이션으로 배경을 업데이트합니다.

  • 그라데이션 배경 왼쪽 색상 : #ffffff
  • 오른쪽 배경 그라데이션 색상 : # 1dbf73
  • 그라데이션 방향 : 135deg
  • 시작 위치 : 10 %
  • 최종 위치 : 0 %
divi 버튼의 배경 사용자 지정

슬로건에 전후 문자 추가

각 동적 콘텐츠 요소는 톱니 바퀴 아이콘을 클릭하여 변경할 수 있습니다. 슬로건에 앞뒤 문자를 추가하려면 슬로건이 포함 된 클릭 유도 문안 모듈의 설정을 열고 사이트 슬로건의 동적 콘텐츠에서 수정 아이콘을 클릭합니다. 그런 다음 이전 및 이후 항목에 문자를 추가하십시오.

divi 슬로건 표시

최종 결과

결과를 보려면 사이트의 아무 페이지 나여십시오. 동적 사이트 제목과 태그 라인이 아름답게 표시되어야합니다!

최종 결과 divi

마지막 생각

동적 사이트 제목과 태그 라인으로 전체 헤더를 맞춤 설정할 수 있다는 점이 정말 좋습니다. 이것은 많은 사이트에서 유용 할 것 같습니다. 더욱 강력한 브랜드 표현을 위해 로고와 함께 사이트 제목과 태그 라인을 포함하는 아이디어도 마음에 듭니다.

출처: 우아한 테마

이 문서에는 메모의 0을 포함

코멘트를 남겨주세요

귀하의 이메일 주소는 공개되지 않습니다. 필수 필드는 표시됩니다 *

이 사이트는 원하지 않는 것을 줄이기 위해 Akismet을 사용합니다. 댓글 데이터 사용 방법에 대해 자세히 알아보기.

맨 위로
0 주식
짹짹
레지스터