워드프레스 Jupiter 테마 Accountant 데모에서 페이지 헤더 이미지 변경하기

2021. 5. 5. 00:01 | 댓글 9

인기 워드프레스 테마 중 하나인 Jupiter는 420개가 넘는 데모 템플릿을 제공합니다. 마음에 드는 데모를 로드하여 활용하면 사이트 구축 시간과 노력을 절감할 수 있을 것입니다. Jupiter 테마의 Accountant 데모에서 페이지 헤더 부분의 배경 이미지를 변경하고 싶은 경우 참고해보세요.

워드프레스 Jupiter 테마 Accountant 데모에서 페이지 헤더 이미지 변경하기

주피터 테마는 엘리멘터 페이지 빌더가 탑재되어 속도가 빠른 것으로 평가받고 있습니다. 베스트셀링 테마인 아바다(Avada)는 많은 기능과 테마 옵션을 제공하지만 최적화를 제대로 하지 않으면 속도 저하 우려가 있습니다. 속도가 중요한 경우 다목적 테마로는 Jupiter 테마가 괜찮은 선택일 수 있습니다. 블로그를 운영하는 경우에는 GeneratePress와 같은 테마를 사용하면 속도가 빠르게 나올 것입니다.

Jupiter 테마를 사용하는 경우 Jupiter X > Control Panel > Templates에서 데모(템플릿)를 검색하여 적용할 수 있습니다.

현재 400개가 넘는 템플릿이 제공됩니다. 

페이지 헤더 템플릿

Accountant 데모를 로드하면 각 페이지의 헤더에 배경 이미지가 아래 그림과 같이 표시됩니다.

Jupiter 테마 Accountant 데모의 Services 페이지.

페이지의 헤더에는 Main Header 템플릿이 적용되어 있습니다.

헤더 템플릿을 수정하려면 템플릿 > 저장된 템플릿으로 이동한 다음, Main Header 위에 마우스를 올리고 편집하기를 클릭하면 Elmentor 페이지 빌더에서 편집이 가능해집니다.

페이지 헤더 배경 이미지 변경하기

페이지를 수정하려면 페이지를 브라우저에서 연 상태에서 상단의 편집하기를 클릭하면 됩니다.

그러면 엘리멘터 페이지 빌더에서 페이지를 편집할 수 있습니다.

문구 등을 자유롭게 변경하고, 새로운 위젯(엘리먼트)을 추가하거나 페이지 내의 위젯 등을 제거하여 원하는 대로 페이지를 꾸밀 수 있습니다.

헤더 부분의 배경 이미지를 변경하려고 한참 시름하다가 겨우 방법을 찾았습니다.ㅎ

헤더 부분의 상단의 점 여섯 개 모양의 아이콘(편집 아이콘)을 선택하려면 하면 Edit Header로 바뀌면서 헤더 섹션을 원하는 대로 편집할 수가 없습니다. 대신, 헤더 섹션에서 마우스 오른쪽 버튼을 클릭하도록 합니다. 그러면 다음과 같은 컨텍스트 메뉴가 표시되는데, 섹션 편집을 클릭합니다.

섹션 편집 패널이 왼쪽에 표시되면 스타일 탭을 선택합니다. 그러면 아래 그림과 같이 배경 이미지를 삭제/교체할 수 있는 섹션이 표시됩니다.

이미지 선택을 클릭하여 새로운 이미지로 대체하거나 휴지통을 클릭하여 배경 이미지를 삭제할 수 있습니다.

새로운 이미지를 지정하면 헤더 부분의 배경 그림이 새로 지정한 이미지로 바뀝니다.

간단히 헤더 배경 이미지를 교체할 수 있지만, 처음 접하면 배경 이미지를 교체하는 방법을 찾기가 쉽지 않을 것 같습니다.

참고

avada.tistory.com/2204

 

워드프레스 주피터 테마 데모 설치하기

인기 워드프레스 테마 중 하나인 주피터 (Jupiter)는 엘리멘터를 기본 페이지 빌더를 탑재하고 있고 베스트셀링 테마인 아바다 등의 테마에 비해 속도가 비교적 빠른 편입니다. 이 글에서는 주피

avada.tistory.com

avada.tistory.com/2183

 

워드프레스 엔폴드 테마 데모 설치하기 (Enfold)

워드프레스 인기 테마 중 하나인 엔폴드 테마는 우리나라에서 많이 사용되는 테마 중 하나입니다. 제 워드프레스 사이트에도 Enfold 테마를 몇 개월 정도 사용한 적이 있습니다. 당시에는 블로그

avada.tistory.com

 

  • 네이버 블러그 공유하기
  • 네이버 밴드에 공유하기
  • 페이스북 공유하기
  • 트위터 공유하기
  • 카카오스토리 공유하기

댓글을 달아 주세요

">
  1. thumbnail
    Q쩡이Q

    티스토리도 힘겨운데,,,
    워드프레스 언젠간 하고 말꼬야!!!

  2. thumbnail
    空空(공공)

    페이지 헤더 이미지 변경하는 방법이로군요
    어린이날 잘 보내시기 바랍니다^^

  3. thumbnail
    모모 박연상
    2021.05.05 11:04

    워드님 글 잘 읽고 갑니다.
    제가 알고 있는 방법에서 크게 다르지 않은데 뭐지 하면서 읽었습니다.

    알려주신 방법에서 지정된 템플릿의 "Main Header" 수정하는 부분에서 힌트를 얻었습니다.
    템플릿을 "카테고리별로 만들어서 저장"을 해 주면 된다는 것을 알게 되었습니다.

    Main Header, 404 Header등 필요한 헤더를 "Template/New"로 신규로 추가 생성해서 템플릿을 만들고 각 카테고리별로 템플렛을 선택해서 해주면 다양하게 헤더 이미지 상단과 카테고리 상단을 시각적ㅇ로 구분을 할 수 있었습니다.

    Template를 목적에 맞게 다양하게 제작해서 적용을 하면 된다는 것을 알게 되었습니다.^^

    • thumbnail
      홈페이지 제작, 워드프레스, 웹호스팅 정보를 제공하는 블로그 Avada
      2021.05.05 11:13 신고

      안녕하세요? 엘리멘터 프로 버전 ( https://elementor.com/?ref=1425 )을 사용하면 테마에 구애받지 않고 테마 빌더를 사용하여 카테고리 등에 따라 템플릿을 만들 수 있습니다.

      https://avada.tistory.com/2029

      Divi 테마도 비슷한 기능을 제공합니다.

      https://www.thewordcracker.com/basic/themes/divi-4-0-%ec%97%85%eb%8d%b0%ec%9d%b4%ed%8a%b8/

      또한, 아바다와 같은 테마에서도 엘리멘터와 Divi 테마 등에 자극을 받아서 헤더에서 푸터까지 템플릿(레이아웃)을 만들어 지정할 수 있도록 바뀌었습니다.

      https://www.thewordcracker.com/basic/%ec%95%84%eb%b0%94%eb%8b%a4-%ed%85%8c%eb%a7%88-%eb%a0%88%ec%9d%b4%ec%95%84%ec%9b%83-layout/

      워드프레스 기본 에디터인 구텐베르크가 점점 기능이 향상됨에 따라 페이지 빌더와 자체 페이지 빌더를 탑재한 테마들이 경쟁이 심한 환경에서 생존하기 위해 이런 기능을 제공하는 쪽으로 나가는 것이 아닌가 생각됩니다.

    • thumbnail
      모모 박연상
      2021.05.05 13:57

      죄송합니다.
      워드님이 작성한 글을 읽고, 링크된 곳을 방문해서 읽어서, 워드님 글인 줄로 알았습니다.

      죄송합니다.
      좋은 정보 감사합니다.