웹문어 홈페이지 만들기 가이드 5강 – 워드프레스 홈페이지 테마 설치 & 수정하기

5강 - 워드프레스 홈페이지 테마 설치 & 수정하기

웹문어 가이드 전체 중 50% 가까이 완료한다고 수고하셨습니다!

이번 5강에서는 4강까지 완료한 워드프레스 기본 사이트를 기반으로 디자인을 담당하는 테마를 설치해서 적용하고 사이트 로고부터, 텍스트, 버튼, 배경화면등 어떻게 수정할 수 있는 모두 단계별로 알아볼 예정입니다.

이번 강의를 모두 보시고나면, 정말 아무것도 모르던 초보자도 쉽게 “나도 나만의 전문적인 홈페이지를 한번 만들어볼 수 있겠구나”라는 생각을 할 수 있을 것입니다.


Contents

  1. 테마 설치하기
  2. 테마 템플릿 설치하기
  3. 로고 수정하기
  4. 메뉴 버튼 수정하기
  5. 텍스트 수정하기
  6. 일반 버튼 수정하기
  7. 배경 수정하기
  8. 새 섹션 추가하기 (수동)
  9. 새 섹션 추가하기 (템플릿)
  10. 모바일 화면 수정하기
  11. 푸터 수정하기

1. 테마 설치하기

1테마 디자인” > “테마“를 클릭하세요.

아스트라 테마 설치하기 1

2Add New” 버튼을 클릭하세요.

아스트라 테마 설치하기 2

3 (1)”astra” 를 검색하고, 검색결과로 아스트라가 나오면 (2)”설치” 버튼을 클릭하세요.

Astra 테마를 선택한 이유?

  • 빠르고 정말 다양하고 깔끔한 테마 디자인을 많이 포함하고 있습니다.
  • 항상 인기있는 Best 10 워드프레스 테마에 속하고, 유료 버전도 있지만 무료 버전으로도 충분히 원하는 디자인을 만들 수 있습니다.
  • 비즈니스, 개인 포트폴리오, 블로그등 목적에 따른 다양한 홈페이지를 제작할 수 있도록 도와줍니다.
아스트라 테마 설치하기 3

4 설치가 완료되면, 아래 “활성화” 버튼을 클릭해서 테마를 적용해주세요.

아스트라 테마 설치하기 4

2. 테마 템플릿 설치하기

  • 테마를 이미 설치했는데, “테마 템플릿은 무엇이냐?” 라고 질문할 수 있습니다. 테마 템플릿은 해당 테마를 통해 주제별로 미리 제작된 데모 사이트로 사용자들이 단순히 원하는 디자인에 가까운 템플릿을 다운받아서 단순히 수정만 함으로써 전문적인 사이트를 완성할 수 있도록 도와줍니다.
  • 아무래도 디자인 감각이 없는 일반적인 사용자들이 처음부터 사이트를 만들어나가는 것은 어려움이 있기 때문에 미리 제작된 전문적인 디자인의 사이트를 그대로 다운받아서 단순히 로고, 텍스트, 배경, 버튼, 이미지등의 요소들만 변경해서 완성하는 것이 효율적이기 때문에 보통 많이 사용합니다.

1테마 디자인” > “아스트라 옵션” 을 클릭하세요.

아스트라 템플릿 설치하기 1

2가져오기 플러그인 설치” 버튼을 클릭하세요.

아스트라 템플릿 설치하기 2

3Elementor” 를 클릭하세요.

아스트라 템플릿 설치하기 3

4 검색창 왼편에 있는 “All” 을 클릭하세요.

아스트라 템플릿 설치하기4

5 옵션 중에 “Free“를 클릭하세요.

아스트라 템플릿 설치하기5

6 검색 결과로 무료로 제공되는 템플릿들만 선별해서 볼 수 있고, 저는 아래 “Digital Agency“를 선택하겠습니다.

  • 여기서 제공되는 템플릿은 모두 무료이기 때문에 본인이 원하는 디자인에 가까운 사이트를 선택하고 다음 단계를 따라하셔도 됩니다.
  • 다른 템플릿을 선택하더라도 디자인만 다를 뿐, 뒤에서 배울 수정 방법은 같기 때문에 참고하시길 바랍니다.
  • 만약 Digital Agency 데모 템플릿을 못 찾는 경우, 검색창에서 검색해보거나, 디자인은 비슷하지만 이름이 변경될 수도 있으니 참고하시길 바랍니다.
아스트라 템플릿 설치하기6

7Import Complete Site” 버튼을 클릭하세요.

  • 이 곳에서 데모 사이트를 다운받기 전에 미리 살펴볼 수 있고, 원하는 디자인이 아니라면 단순히 뒤로가서 다른 디자인의 데모 템플릿을 다시 선택하시면 되겠습니다.
아스트라 템플릿 설치하기7

8 원하는 옵션들이 체크되어 있는지 확인하고, “Import” 버튼을 클릭하세요.

  • 참고로 import 버튼을 누르고 나면 데모 사이트를 다운받고 자동으로 적용하기까지 시간이 다소 걸릴 수 있습니다.
  • 이 때 오랫동안 기다려도 진행이 없다면, 다른 방안으로 모바일로 접속해서 import 과정만 진행해보시길 바랍니다.
아스트라 템플릿 설치하기8

9 아래 보는 것과 같이 데모 사이트 다운 및 적용이 성공이 완료되었고, “View Site” 버튼을 클릭하세요.

아스트라 템플릿 설치하기9

10 아래 “Digital Agency” 데모 사이트가 성공적으로 적용된 것을 확인할 수 있습니다.

아스트라 템플릿 설치하기10

3. 로고 수정하기

로고 수정하기

1 관리자 페이지에서 테마 디자인 -> 사용자 정의하기를 클릭하세요.

워드프레스 로고 수정하기 STEP 1

2 헤더를 클릭하세요.

워드프레스 로고 수정하기 STEP 2

3 사이트 아이덴티티를 클릭하세요.

워드프레스 로고 수정하기 STEP 3

4 A에 나온 로고 변경을 클릭하세요.

이 곳에서 일반 로고, 높은 해상도를 위한 레티나 로고로고 폭을 조절합니다.

  • A: 일반 로고를 수정할 수 있습니다.
  • B: 레티나 로고로, 일반 로고보다 더 높은 사이즈로 적용하면 되고, 필요없다면 “레티나 기기에 다른 로고?” 부분에 체크를 지우면 됩니다.
  • C: 너무 큰 사이즈로 로고가 나올 경우, 여기서 로고 폭을 제한해서 원하는 사이즈로 맞춰줄 수 있습니다.
워드프레스 로고 수정하기 STEP 4

5 파일 선택을 클릭해서 로고 이미지를 업로드 하거나, 드래그앤드롭으로 이미지를 가져다 놓으면 업로드가 됩니다.

  • 로고는 .png 형태를 추천합니다.
워드프레스 로고 수정하기 STEP 5

4. 메뉴 버튼 수정하기

워드프레스 홈페이지 메뉴 버튼 수정하기

1 테마 디자인 > 사용자 정의하기를 클릭하세요.

워드프레스 홈페이지 메뉴 버튼 수정하기 1단계

2 헤더를 클릭하세요.

워드프레스 홈페이지 메뉴 버튼 수정하기 2단계

3 주 메뉴를 클릭하세요.

워드프레스 홈페이지 메뉴 버튼 수정하기 3단계

4 아래 버튼을 어떻게 수정할 수 있는지 참고하세요.

  • A: 클릭하면 “아니오/검색/버튼/텍스트/위젯” 옵션이 나오고, 여기서 버튼을 없애고 싶다면 “아니오”를 클릭하고 유지하고 싶다면 그대로 두면 됩니다.
  • B: 버튼 안에 텍스트를 변경할 수 있습니다.
  • C: 버튼 클릭시 이동되는 페이지 링크를 입력할 수 있습니다.
  • D: 버튼 클릭시 이동되는 페이지가 새 창으로 생성되길 원한다면 체크하시면 됩니다.
워드프레스 홈페이지 메뉴 버튼 수정하기 4단계

5. 텍스트 수정하기

워드프레스 홈페이지 텍스트 버튼 수정하기

1 페이지 > 모든 페이지를 클릭하세요.

워드프레스 홈페이지 텍스트 버튼 수정하기 1단계

2 Home 페이지에 마우스를 가져다대면 아래 나오는 “편집하기“를 클릭하세요.

워드프레스 홈페이지 텍스트 버튼 수정하기 2단계

3 아래와 같이 텍스트가 나와있는 부분을 클릭하세요.

워드프레스 홈페이지 텍스트 버튼 수정하기 3단계

4 아래 텍스트를 어떻게 수정할 수 있는지 참고하세요.

  • A: 이 곳에서 현재 나와있는 텍스트를 변경할 수 있습니다.
  • B: 텍스트를 클릭했을 때 이동되길 원하는 링크가 있다면 추가할 수 있습니다. (없다면 추가하지 마세요.)
  • C: 텍스트 정렬을 변경할 수 있습니다. (왼쪽 | 가운데 | 오른쪽 | 양쪽)
워드프레스 홈페이지 텍스트 버튼 수정하기 4단계

6. 일반 버튼 수정하기

1 아래와 같이 버튼을 클릭하세요.

워드프레스 홈페이지 버튼 수정하기 1단계

2 아래와 같이 버튼을 수정할 수 있습니다.

  • A: 버튼에 나온 텍스트를 변경할 수 있습니다.
  • B: 버튼을 클릭했을 때, 이동되길 원하는 링크를 추가할 수 있습니다.
워드프레스 홈페이지 버튼 수정하기 2단계

3 버튼을 포함해 삭제하고 싶은 부분이 있다면, 아래와 같이 마우스를 가져다댔을 때 나오는 편집 아이콘오른쪽 마우스 버튼을 클릭하세요.

워드프레스 홈페이지 버튼 삭제하기 1단계

4 나오는 옵션들 중에서 “삭제” 옵션을 클릭해서 삭제할 수 있습니다.

워드프레스 홈페이지 버튼 삭제하기 2단계

7. 배경 수정하기

워드프레스 홈페이지 배경 변경하기

1 수정하길 원하는 배경 부분을 클릭하세요.

워드프레스 홈페이지 배경 변경하기 1단계

2 스타일 탭을 클릭하세요.

워드프레스 홈페이지 배경 변경하기 2단계

3 아래와 같이 이미지가 나온 부분을 클릭하세요.

워드프레스 홈페이지 배경 변경하기 3단계

4a 준비된 이미지가 있다면, 아래 파일 선택을 클릭해서 이미지를 업로드하세요.

워드프레스 홈페이지 배경 변경하기 4단계

4b 무료 이미지를 찾고 있다면, 상단에 “Free Images from Pixabay“를 클릭하세요.

워드프레스 홈페이지 배경 변경하기 5단계

5 아래와 같이 원하는 무료 이미지를 자유롭게 찾을 수 있고, 원하는 이미지를 선택하시면 됩니다.

  1. 원하는 이미지 주제를 검색해보세요. ex) business
  2. 원하는 이미지를 클릭하세요.
워드프레스 홈페이지 배경 변경하기 6단계

6 Save & Insert 버튼을 클릭하세요.

워드프레스 홈페이지 배경 변경하기 7단계

7 보시는 것과 같이 적용된 배경 이미지를 확인할 수 있고, 아래 “업데이트” 버튼을 클릭하세요.

워드프레스 홈페이지 배경 변경하기 8단계

8. 새 섹션 추가하기 (수동)

여기선 아래와 같이 현재 페이지에 새로운 섹션을 추가하는 방법을 소개하려고 합니다. 방법으로는 2가지 방법이 있는데, 하나는 수동으로 하나씩 추가하는 방법이 있고, 이미 존재하는 템플릿 디자인을 가져와서 단순히 변경만 해주는 방법이 있습니다.

1 아래와 같이 새 섹션을 추가하길 원하는 부분에 + 아이콘을 클릭하세요.

워드프레스 새 섹션 추가하기 1단계

2 빨간색 + 아이콘을 클릭하세요.

워드프레스 새 섹션 추가하기 2단계

3 원하는 구조를 선택하여 클릭하세요.

워드프레스 새 섹션 추가하기 3단계

4 추가된 구조를 바탕으로 우선 위, 아래 간격을 수정하기 위해 가운데 점점점 아이콘을 클릭하세요.

워드프레스 새 섹션 추가하기 4단계

5 아래 순서대로 (1)고급을 클릭하고, (2)에서 원하는 간격을 입력하면, (3)번과 같이 간격이 늘어난 것을 확인할 수 있습니다.

워드프레스 새 섹션 추가하기 5단계

6 새 요소들을 추가하기 위해 우선 아래와 같이 메뉴 아이콘을 클릭하세요.

워드프레스 새 섹션 추가하기 6단계

7 뒤로가기 아이콘을 클릭하세요.

워드프레스 새 섹션 추가하기 7단계

8 아래와 같이 제공되어 있는 제목, 이미지, 텍스트 에디터등 요소들을 자유롭게 드래그앤드롭으로 옮겨보세요.

워드프레스 새 섹션 추가하기 8단계

9 이전 단계를 통해 아래와 같이 요소들이 추가된 것을 확인할 수 있습니다.

이와 같은 방식으로 제공되는 다양한 요소들을 자유롭게 추가해보고, 변경해보면서 익힌다면 홈페이지를 어느정도 자유롭게 수정할 수 있는 능력을 가지실 수 있을 것입니다.

워드프레스 새 섹션 추가하기 9단계

9. 새 섹션 추가하기 (템플릿)

이전에 배운 새 섹션을 수동으로 추가하는 방법과 다르게, 이번엔 기존에 제공하는 템플릿을 이용하여 단순히 변경만 함으로써 사용할 수 있는 방법을 알려드리겠습니다.

워드프레스 새 섹션 추가하기

1 이전에 수동으로 추가하는 방법과 다르게 플러스 아이콘이 아닌 가운데 “폴더 아이콘” 을 클릭하세요.

워드프레스 새 섹션 템플릿으로 추가하기 1단계

2 상단에 “블럭” 을 클릭하세요.

워드프레스 새 섹션 템플릿으로 추가하기 2단계

3 원하는 블럭 디자인을 클릭하세요.

워드프레스 새 섹션 템플릿으로 추가하기 3단계

4 삽입 버튼을 클릭하세요.

워드프레스 새 섹션 템플릿으로 추가하기 4단계

5 사용하기 위해 필요한 엘리멘토 무료 계정을 생성하려면시작하기” 버튼을 클릭하세요.

워드프레스 새 섹션 템플릿으로 추가하기 5단계

6Create an Account“를 클릭하세요.

워드프레스 새 섹션 템플릿으로 추가하기 6단계

7 계정을 생성하기 위해 (1)이메일을 입력하고, (2)원하는 비밀번호를 입력하고, (3) “CREATE ACCOUNT” 버튼을 클릭하세요.

계정을 생성한 후, (1)에서 입력한 이메일로 이메일 컨펌이 요구되는 메일이 도착하면 확인 후 컨펌해주시면 되겠습니다.

워드프레스 새 섹션 템플릿으로 추가하기 7단계

8CONNECT” 버튼을 클릭하세요.

워드프레스 새 섹션 템플릿으로 추가하기 8단계

9 아래 보시는 것과 같이 블럭이 성공적으로 삽입된 것을 확인할 수 있고, 자유롭게 수정하시면 되겠습니다.

워드프레스 새 섹션 템플릿으로 추가하기 9단계

10. 모바일 화면 수정하기

사이트를 보면 기본적으로 모바일에 최적화는 되어있지만 모바일에서 보기에 텍스트 크기가 너무 크다는등 변경을 하고 싶은 부분이 생길 것입니다. 이 때 모든 요소들을 PC와 다르게 수정할 순 없지만, 모바일 화면에서만 수정할 수 있도록 허용되는 한에서 어떻게 수정할 수 있는지 알려드리도록 하겠습니다.

1 아래 PC 아이콘이 나와있는 부분을 클릭하세요.

워드프레스 모바일 버전으로 수정하기 1단계

2 모바일을 클릭하세요.

워드프레스 모바일 버전으로 수정하기 2단계

3 화면에서 수정하고자하는 부분을 클릭하세요.

워드프레스 모바일 버전으로 수정하기 3단계

4 왼쪽에 나오는 편집 창 중에서 정렬 오른쪽에 나온 모바일 아이콘이 있는 부분이 있다면, 현재 모바일 화면용으로 수정이 가능하다는 뜻으로, 자유롭게 수정하시면 되겠습니다.

워드프레스 모바일 버전으로 수정하기 4단계

11. 푸터 수정하기

홈페이지 가장 아래에 있는 푸터 부분을 어떻게 수정하는지 알려드리겠습니다.

워드프레스 홈페이지 푸터 수정하기

1 테마 디자인 > Header Footer & Blocks 를 클릭하세요.

워드프레스 홈페이지 푸터 수정하기 1단계

2 Footer에 마우스를 가져다대면 아래 나오는 “편집하기“를 클릭하세요.

워드프레스 홈페이지 푸터 수정하기 2단계

3 푸터를 수정할 수 있는 편집창으로 넘어왔고, 이 곳에서 자유롭게 수정하시면 되겠습니다.

워드프레스 홈페이지 푸터 수정하기 3단계

여기까지 어떻게 테마를 설치 및 적용하고 로고부터, 배경 이미지, 텍스트, 버튼등 어떻게 수정하는지 모두 알아보았습니다.

이 강좌에서 포함하지 않은 좀 더 디테일하게 수정하는 방법과 관련해서는 하나씩 변경해보면서 직접 익히면 더욱 빨리 익힐 수 있고, 문의사항이 많이 생기는 부분에 대해서는 따로 콘텐츠로 제작해서 수정하는 방법에 관해 좀 더 자세하게 다뤄보도록 하겠습니다.

그럼 다음 6강에서는 사이트의 기능을 담당하는 플러그인을 어떻게 설치하고 적용하는지 살펴보도록 하겠습니다.

Leave a comment

error: 무단 복제와 배포를 금지합니다.