워드프레스 Hestia테마 사용자정의 사이트아이덴터티 설정방법 동영상

Step-by-step guide to customizing a WordPress Hestia theme site. Install the theme, use the customizer to set your site title and tagline, create a logo and 512×512px icon in Canva, upload them to WordPress, then save and publish your changes.
Chapters
제일 먼저 들어오시면 여러분들이 하셔야 되는 게 뭐냐면 바로 이제 외모라고 보이시는 여기 테마 워드프레스의 디자인이죠 왜냐하면 지금은 우리가 여기 보시면 아시겠지만 잠시만요 이 워드프레스의 메인을 한번 볼게요 지금은 우리가 아무것도 디자인이 없단 말이에요 그래서 이제 디자인을 먼저 세팅을 해줘야 됩니다 그래서 일반적으로 저는 여러분들이 그냥 가장 쉽게 보실 수 있는 그런 거를 하나 해 드릴게요. 테마에 들어오셔서 외모 테마에 새로 추가를 누르시고 새로 추가 이렇게 누르시면 우리가 설치할 수 있는 테마들이 나와요. 이제 공짜죠. 공짜로 제공해주는 테마라고 생각하시면 될 것 같아요. 그래서 여러분들이 쉽게 좀 따라해 보실 수 있는 걸로 저는 Hestia 라는 테마를 한번 선택해 보겠습니다. 자 그러면 Hestia 라고 이렇게 검색을 하시면 나오구요 자 요거를 설치 버튼을 눌러보겠습니다 자 이렇게 설치를 하고 나면 이제 활성화를 해줘야겠죠 활성화 활성화까지 그냥 바로 여기서 해버릴게요 자 활성화를 이렇게 눌러줍니다 자 그러면 이제 활성화 됐고 여기에 사용자 정의하기라고 제일 먼저 뜨죠 이제 여기에서 클릭하고 들어가셔도 되구요 어떻게 하시면 되냐면 여기 사이트 방문이라고 보이실 겁니다 이쪽으로 누르시면 이제 내 사이트 메인으로 나옵니다 자 그러면 이게 테마가 지금 설치된 게 보이시죠 자 여기에서 사용자 정의하기라는 요 버튼을 한번 눌러볼게요 자 사용자 정의학 이라는 요 버튼을 눌렀구요 그 다음에 뭐 이런 권장사항 같은게 나오죠 자 요런거는 그냥 일단 끌게요 끄고 여기 이제 다양하게 요즘에는 많이 발전이 돼서 요런 부분을 그냥 내가 바로 여기서 보면서 수정을 할 수 있게끔 가이드를 제공을 합니다 이렇게 누르잖아요 그러면 이 부분에 대한 수정을 해라 사이트 제목을 그러면 음 저는 이 사이트를 뭐 음 슬기로운 마케터 생활이라고 한번 해 볼게요 자 슬기로운 마케터 생활 뭐 그냥 가볍게 접근을 한번 해 볼게요 자 이렇게 바꾸니까 여기에서 바로 바뀌었죠 그죠 예 그 다음에 여기 뒤쪽에도 이렇게 뭐가 이렇게 보이시죠? 클릭해보면 어느 부분이 활성화되는지 여기 나옵니다. 로고를 지금 하나 또 선택을 하라고 되어있죠? 그러면 이제 로고 파일이 있으면 여기 누르시고 입력하시면 되고 만약에 로고 파일이 없으면 로고를 이제 하나 만들어 와야겠죠? 그거는 좀 이따 한번 만들어 볼게요. 그 다음에 여기 보면은 뭐 more contact 뭐 이런 식으로 지금 또 돼 있죠 이런 거는 이제 메뉴 메뉴를 어떤 거를 선택을 할 것이고 메뉴를 어떻게 구성할 것이냐 그 다음에 여기 이 영역도 한번 눌러볼까요 welcome to 자 여기 이미지 뒷배경에 깔린 이미지가 똑같죠 그 다음에 welcome to hestia 여기에 이제 제 걸로 한번 바꿔 볼게요 슬기로운 마케팅 닥터의 디지털 마케팅 브이로그 뭐 이런 식으로 할게요 그냥 브이로그 그냥 이런 식으로 했습니다 조금 너무 기네요 그러면 좀 줄이는 게 나을 것 같아요 그냥 슬기로운 마케터 슬기로운 마케팅 닥터의 브이로그 뭐 그렇게 해볼게요. 조금 이게 이제 안 맞긴 하네요. 조금 더 띄워볼까요? 이게 안되는구나. 어쨌든 이렇게 적었구요. 그 다음에 거기 밑에는 잠시만요. 이거는 그냥 이렇게 해버리죠. 마케팅 닥터의 브이로그 그죠? 자 요렇게만 하면 될 것 같습니다. 훨씬 더 깔끔해졌죠. 그 다음에 텍스트 디지털 마케터의 일상을 공유합니다. 자 그죠? 요렇게 해도 되겠죠? 그 다음에 버튼 텍스트 씨 몰 라고 되어있죠 씨 몰 자 요것도 뭐 더 알아보기 뭐 이런 식으로 그죠? 더 알아보기 이런식으로 얼마든지 바꿀 수 있습니다. 그 다음에 버튼 url은 아직 여기서는 정의를 안 내려도 상관은 없으십니다. 이런식으로 해서 이거를 변경할 수 있다는 걸 확인할 수 있었죠. 그 다음에 여기 내려오면 이 영역이 또 있고 그 다음에 블로그 영역이 또 있네요. 그죠? 블로그 영역은 또 여기 또 누르면은 이 영역의 제목을 뭘로 바꿀 건지 그죠? 자 이런 거 보이시죠? 그 다음에 다시 또 뒤로 가서 그 다음에 get in touch 해서 contact form이 이제 여기에 있죠. 그리고 이 영역에 contact form을 추가하려면 wp-forms-write-plugin을 설치해야 된다라고 되어 있죠. 어쨌든 지금은 이 개념만 먼저 이해를 하시면 될 것 같아요. 사용자 정의하기 버튼을 누르면 메인 화면의 구성들을 내가 일일이 보면서 하나씩 하나씩 수정을 할 수 있다. 하나씩 보면서 그 다음에 이 영역들 갖다 대면 고칠 수 있는 영역들이 다 나오죠. 그죠? 이런 부분들을 다 고칠 수 있다. 여기까지만 일단 먼저 이해를 하세요. 자 좀 전에 이제 우리가 전체적으로 이제 한번 다 훑어 봤잖아요 전체적으로 다 한번 훑어 봤는데 이제 아주 디테일하게 아주 디테일하게 이제 이 부분들을 메뉴들을 이제 사용자 정의 설정 이라는 이 메뉴에서 세팅을 하실 수가 있어요 그러면은 이제 프로기능 보기는 이제 유료 버전을 얘기하는 거구요 먼저 이제 사이트 아이덴티티 들어오면 아까 우리 수정한 부분이 보이죠 네 타이틀하고 로고 자 로고는 없으니까 하나 만들어 와야 될 거 아니에요 그죠? 이때는 이제 어떻게 하시면 되냐면 자 여러분들 미리 캔버스라는 아주 좋은 사이트가 있습니다 자 여기로 한번 가볼게요 미리 캔버스라는 사이트로 이렇게 들어오셔서 해원가입이 안되있으신 분들은 반드시 해원가입을 하시고 쓰세요. 그래야 내가 작업한 작업물들을 저장을 해놓고 다음에 또 오셨을 때 로그인을 해서 또 사용을 하실 수가 있어요. 이 미리 캔버스라는 이 사이트는 미리 디자인된 이런 템플릿들을 많이 제공을 해줘요. 그러면 그걸 우리는 그냥 가져다가 쓰기만 하면 되는 겁니다. 여기에서 보시면 간단하게 지금 로고를 만들 수 있는 요런 메뉴들이 있어요. 보이시죠? 그러면 저는 여기에서 간단하게 제 로고를 하나 만들어 볼게요. 그러면은 슬기로운 마케터의 로고니까 뭐 그런 거를 넣을 수 있는 그런 글자를 넣을 수 있는 그런 걸로 한번 만들어 볼게요 한번 보면 최대한 거기에 가까운 그런 걸로 한번 찾아 보겠습니다 자 로그에서 이제 고르다 보니까 저는 이게 마음에 들어서 요거를 한번 로고로 만들어 볼게요 그냥 여기에다가 그냥 내 걸로만 바꿔 주기만 하면 됩니다 슬기로운 마케터 생활 그죠? 그리고 요런거 사이즈를 좀 조절을 해주면 되겠죠? 자 이렇게 자석이 있어서 이렇게 중앙을 표시를 해줍니다. 그죠? 자 요렇게 딱 중앙이 됐을 때 요렇게 되어있구요. 자 그러면 요거는 슬기로운 마케터 생활 로고, 그죠? 로고라고 이렇게 해주고 이거를 저장을 눌러 주시면 이제 요 로고가 나의 이 계정 히스토리에 저장이 되는 겁니다. 자 그러면 이걸 다운로드 한번 받아 볼게요. 저는 편의상 바탕화면에다 다운을 받도록 하겠습니다. 바탕화면에 로고 나오죠? 자 그러면 이제 로고가 저장이 됐습니다. 그렇죠? 자 그러면 이번에는 이제 다시 가서 로고를 한번 선택을 해 보도록 할게요. 로고 파일 선택 그 다음에 바탕화면에 아까 우리 저장을 했었죠? 그렇죠? 그래서 바탕화면을 눌러 주시고 저장된 로고를 한번 찾아 볼까요? 여기 있네요. 슬기로운 마케터 생활 자 이렇게 됐죠 그 다음에 선택 버튼을 눌러줍니다 아이고 그러니까 이렇게 잘라야 되네요 또 아 이렇게 되는구나 자 이렇게 풀 사이즈로 이렇게 하고 이미지 자르기 됐죠 슬기로운 마케터 생활 그럼 이렇게 이제 로고가 형성된게 보이실 겁니다 조금 글씨가 좀 덜 보이긴 하네요 자 그래도 뭐 테스트니까 이렇게 넘어가도록 할게요 자 그렇게 해서 지금 사이트 아이덴티티를 요렇게 하셨고 여기 사이트 제목이 있고 태그 라인에는 사이트에 대한 설명을 적어 주시면 됩니다. 마케팅 닥터의 마케터 일기를 올려 드릴게요. 자 요런 식으로 설명 같은 거를 이렇게 해주시면 됩니다. 자 그 다음에 자 여기 보시면은 사이트 아이콘 이라는게 있어요 사이트 아이콘 최소 512 곱하기 512 픽셀 이어야 한다 라고 돼 있는데 사이트 아이콘은 요런걸 얘기하는 거에요 이렇게 도메인 앞에 요렇게 아이콘 예 요런거를 사이트 아이콘 이라고 합니다 자 그러면 512 곱하기 512 로 만들어서 가져와야 겠죠 그래서 여기서 우리가 어 여기 사이즈를 제가 한번 바꿔 볼게요 직접 입력 자 여기서 512 곱하기 512 로 그냥 적용만 해주면 되겠죠 적용하기 자 바뀌었습니다 그죠 바뀌었죠 바뀌었으니까 또 요거는 또 저장을 해주시고 그 다음에 다운로드 버튼을 누르구요 png 로 받으시면 되겠죠 png 로 자 이렇게 해서 다른 이름으로 저장 누르시고 자 이거는 마케팅 마케터 생활 사이트 아이콘 그리고 이제 나중을 위해서 우리가 이런 것도 하나 받아 놓으면 좋을 것 같아요 다운로드 누르고 투명한 배경 배경이 투명한 거예요 말 그대로 약간 워터마크 식으로도 활용을 하실 수 있겠죠 자 이것도 다운로드를 한번 눌러볼게요 그러면 이거는 또 투명한 배경이라고 저장을 해놓으시면 되겠죠. 생활로고가 아니라 사이트 아이콘 사이트 아이콘 투명 배경 그쵸 투명 배경 자 저장 됐습니다 그래서 워트마크로도 앞으로 활용하실 수 있을 것 같아요 사이즈가 괜찮으니까요 자 그러면은 여기에서 이제 사이트 아이콘을 한번 선택을 눌러 볼게요 자 그러면 이렇게 올라와 있는데 잠시만요 파일 업로드 누르시고 파일 선택 512 곱하기 510 이라고 되어있죠 바탕화면에 그러면 투명 배경 말고 그냥 이걸로 하시면 될 것 같아요 512 곱하기 512 그대로 그죠 그리고 나서 선택 자 그러면 정상적으로 이렇게 적용이 된게 보이시죠 그러면 앞으로 요런 식으로 보여진다라는 거에요 자 근데 로고가 이게 지금 글자가 좀 제가 보기에는 너무 좀 진하지가 않아서 별로네요. 그래서 글자를 조금 더 진하게 만들어서 가져와서 다시 재설정을 할게요. 제가 아까보다는 조금 더 진하게 이렇게 바꿨습니다. 잘 적용이 됐죠? 이렇게 다 하셨으면 여러분들이 여기만 하고 다음 메뉴를 설정하러 넘어 가실 때는 그냥 여기에서 요걸 누르시면 되요. 그러면 메뉴들이 쫙 나와요. 근데 내가 또 혹시 모르니까 저장을 미리 해놓고 싶다 그럴 때는 공개 버튼을 누르시면 됩니다. 그러면 이 상태의 설정으로 저장이 되는 겁니다. 그리고 나서 X표를 눌러보세요. X표를 누르면 어떻게 되나요? 내 사이트가 지금 사용자 정의 한대로 나오고 있죠. 그렇죠? 블로그도 나오고 있고 이런 부분들도 나오고 있죠.










