WordPress Elementor 페이지 헤더 만들기WordPress & Elementor Page Header

WordPress / Astra / Elementor 를 이용해 “워드프레스 Elementor 페이지 헤더 만들기”를 진행해 보도록 하겠습니다.

- 주의 -
Elementor 무료 버전으로는 일부 기능을 사용할 수 없어서 추가적인 플러그인 설치로 기능 확장을 해야 할 수 있습니다. 많은 플러그인 설치는 사이트 속도 저하에 원인이 되므로 필요한 플러그인만 설치하여 사용하시기를 추천드립니다.

이 포스팅에서는 Astra Theme / Elementor Page Builder를 이용하여 페이지를 만드는 과정을 설명하고 있습니다.

< 준비물 >



워드프레스 관리자 페이지 메뉴에서 “페이지 > 새로 추가”버튼 클릭 후 “제목”에 페이지 제목을 입력하고 저장한 후 “Elementor 편집”모드로 들어갑니다.

컬럼 추가 및 타이틀 추가하기

헤더 콘텐츠가 자리잡기 위해 섹션을 추가하도록 하겠습니다.

  1. +”버튼을 클릭합니다.
  2. 1 칼럼“을 선택하여 추가합니다.
  3. 제목”위젯을 추가한 칼럼에 드레그 합니다.
워드프레스 Astra Elementor - 컬럼추가
타이틀추가

타이틀 텍스트 수정하기

플러그인 설치가 완료되었으면 플러그인 기능들을 인스톨하도록 하겠습니다.

  1. 추가한 위젯의 “제목” 항목의 텍스트를 수정합니다.
  2. HTML 태그” 항목을 “H1”으로 변경합니다.
  3. 정렬” 항목에서 위치하고자 하는 위치로 정렬합니다. “좌측 정렬”, “중앙 정렬”, “우측 정렬”, “양쪽 맞춤”을 선택할 수 있습니다.
타이틀텍스트수정



배경이미지 추가하기

헤더 부분에 텍스트만 있으니 꾸미지 않은 것처럼 보입니다. 헤더 부분임을 확실히 알 수 있도록  좀 더 꾸며 보도록 하겠습니다.

  1. 섹션 편집 모드 클릭합니다.
  2. 섹션 편집 탭에서 “스타일”을 클릭합니다.
  3. “배경”을 클릭합니다.
  4. “배경 타입”에서 “붓 모양” 기본 아이콘을 클릭합니다.
  5. “이미지” 항목에서 “+” 버튼을 클릭 후 배경 이미지를 추가합니다. 추가 방법으로는 “미디어 라이브러리”에서 추가하는 법과 “이미지 업로드”방식이 있습니다.
  6. “위치” 항목에는 “정 가운데” 로 설정합니다. (다양한 항목이 있으니 필요한 위치 항목을 사용하시면 됩니다.)
  7. “고정여부” 항목에는 “기본값”으로 설정합니다. (기본, 스크롤, 고정이 있습니다.)
  8. “반복” 항목에는 “반복 안 함”으로 설정합니다. (반복 안 함, 반복, 가로 반복, 세로 반복이 있습니다.)
  9. “크기” 항목에는 “Cover”로 설정합니다. (자동, Cover, Contain, 사용자 정의가 있습니다.)

배경이미지추가

헤더 섹션 여백 설정하기

이번에는 페이지 제목과 배경 사이의 여백을 주도록 하겠습니다.

  1. 섹션 편집 탭에서 “고급”을 클릭합니다.
  2. “안쪽 여백”을 설정합니다. (위쪽: 130, 오른쪽: 0, 아래쪽: 90, 왼쪽: 0)
헤더섹션여백설정하기

마지막으로 타이틀 색상까지 바꾸고 나면 모든 작업이 완료됩니다.

  1. “제목” 위젯을 클릭 후 “편집” 모드로 들어갑니다.
  2. “스타일” 탭 버튼을 클릭합니다.
  3. “텍스트 컬러” 항목에서 컬러를 “흰색”으로 변경합니다.
타이틀색상바꾸기

이것으로 워드프레스 Elementor 페이지 헤더 만들기를 마치겠습니다.



Leave a Comment