워드프레스 Hestia테마 사용자정의 외모설정방법 동영상

다시 사용자 정의하기로 또 들어가 보도록 하겠습니다 외모 설정 한번 해보도록 하겠습니다. 외모 설정 이렇게 들어오시면 일반 설정이 있고 글자, 색상, 배경 이미지, 버튼 이런 것들이 있어요. 자 보시면 일반 설정 이라는건 들어오시면 자 요렇게 페이지 사이드바 레이아웃을 요렇게 가져가겠다 아니면 좌측에 이렇게 사이드바가 있는 형태로 가져가겠다 아니면 우측에 사이드바가 있는 형태로 가져가겠다 그 다음에 두번째 블로그의 사이드바 레이아웃을 사이드바가 없는 형태로 가져가겠다 아니면 좌측 아니면 우측 저는 둘 다 좌측으로 한번 해볼게요 그 다음에 공유아이콘 활성화 상단으로 스크롤 황을 활성화 공유아이콘 이라는 것은 이 게시물을 공유하는 그런 아이콘을 얘기하는 거구요 상단으로 스크롤을 활성화하는 이렇게 이제 밑에서 밑에까지 내려갔다가 스크롤을 이렇게 누르면 상단으로 올라가는 요거를 말하는 겁니다. 그 다음에 박스 레이아웃이라는 건 뭐냐면요 여기 지금 요런 블로그 영역에 박스 보이시죠? 요거를 없앴다가 생겼다가 없앴다가 생겼다가 요렇게 하는 겁니다. 자 그러면 요렇게 해 놓으시고 제가 공개를 한번 해볼게요. 그리고 나서 제가 자 이미 만들어 놓은 여기에다가 한번 새로 고침을 해서 한번 확인을 해 볼게요 자 먼저 페이지 사이드바 레이아웃 자 맨 밑으로 내리면 예제 페이지라고 있어요 요거를 한번 클릭을 해 보면 페이지의 지금 레이아웃이 사이드바가 좌측에 이렇게 있죠 사이드 메뉴가 자 확인을 했죠 그 다음에 블로그 블로그 사이드바 레이아웃 블로그 영역으로 들어가야겠죠 블로그는 마찬가지로 사이드바가 좌측에 있죠 그 다음에 콘텐츠 하나를 클릭하고 들어가면 또 여기서도 마찬가지로 좌측에 이렇게 있습니다 자 이게 블로그 사이드바구요 그 다음에 또 우리가 공유 아이콘 활성화 라고 했었죠 그러면 여기 보시면 요런거 요런거 얘기하는 겁니다 페이스북 공유 트위트 공유 그 다음에 share on email 그 다음에 또 내려 오시면은 상단으로 스크롤 활성화 자 요거는 여기 있죠 그죠 요렇게 활성화 시키는 거고 그 다음에 박스 레이아웃 활성화되면 테마는 박스 레이아웃으로 사용됩니다 라고 되어 있죠 박스 레이아웃 메인에서 한번 볼까요 자 요게 박스 레이아웃 인것 같습니다 다시 한번 이게 이제 적용이 됐을 때 인것 같구요 자 다시 한번 요렇게 누르고 한번 나와서 볼게요 제대로 맞는지 예 박스가 적용이 됐을 때 이 박스 레이아웃이 요런 식으로 보여진다 라는 것 같습니다 자 근데 이거를 그러면 해제를 해서 한번 해 볼게요 다시 다시 들어와서 한번 이제 해제를 했을 때는 어떤 식으로 보여지는지 한번 보도록 할게요 해제를 했을 때는 박스 레이아웃을 해제를 한번 해보겠습니다 그리고 공개 버튼을 이렇게 눌러버릴게요 자 그러면 여기에서 한번 새로고침을 눌러볼게요 어떻게 바뀐지 보세요 자 좀 전에 그런 박스 형태가 없어졌죠 근데 저는 이게 더 좀 더 나은 것 같기도 해요 오히려 박스가 있으니까 조금 더 제가 봤을 때 좀 지저분해 보였던 것 같아요. 그래서 차라리 저는 제 취향은 좀 요런 스타일이네요. 이게 더 깔끔한 것 같습니다. 저는 이렇게 하겠습니다. 자 그리고 나서 이제 본인들의 취향에 따라서 이렇게 정하시면 되구요. 그 다음에 이제 글자는 각 영역에 이제 글자의 크기 그 다음에 폰트 이런 거를 정하는 거예요. 근데 이제 문제는 여기에서는 지금 이제 우리가 쓸 수 있는 폰트가 정해져 있다는 거죠 그래서 이런 식으로 한글 폰트 같은 거는 적용이 안 됩니다 지금 보시는 것처럼 자 그래서 여기에 있는 폰트를 가지고 한번 해보도록 하겠습니다 저는 어 여기에서 뭐 이렇게 많이 있는데요 기본을 누르고 arial 뭐 뭐 쭉쭉쭉쭉 있고 뭐 구글 폰트 이렇게 있는데 여기에서 이제 마음에 드시는 폰트를 선택을 하시면 되겠죠. 저는 Abel 이라는 폰트를 한번 선택을 해 볼게요. 어떻게 바뀌나 한번 보죠. 약간 나쁘지 않네요. Abel 이라는 폰트. 약간 세로 모드 이긴 한데 상당히 나쁘지 않은 것 같습니다. 그러면 저는 바디 폰트 패밀리라는 것도 좀 전에 그 Abel 이라는 걸로 한번 해 보도록 하겠습니다. 어디 갔어? 잠시만요. 바디 폰트 패밀리도 제가 여기서 아벨을 이렇게 찾아요. AB만 해도 이렇게 찾아질 수 있겠죠? 이렇게 찾아 보겠습니다. 그죠? 자 바뀌었죠? 뭔가 조금 바뀌었습니다. 그죠? 아까랑은 좀 달라졌어요. 자 이런 식으로 폰트 이렇게 찾아서 본인이 쓰시고 싶은 걸로 이거는 일일이 이제 본인이 마음에 드는 걸 대입을 해보셔야 될 겁니다. 자 그렇게 해서 일단 대충 이렇게 해서 마무리 하고요. 자 이번에는 색상, 색상 들어가서 배경 색상을 한번 바꿔 보도록 하겠습니다. 좀 눈에 띄게끔 노란색으로 한번 해볼게요. 그랬을 때 어디가 바뀌는지 자 그런거를 한번 공개 버튼을 누르고 한번 바꿔 보도록 하겠습니다. 자 노란색을 누르니깐 요런 부분이 지금 바뀌었네요. 그리고 메인화면에서는 뒷부분이 잘 안보이니까 안바뀌었네요. 그리고 컨택트 화면에 한번 가볼게요. 컨택트 화면에서도 별로 바뀌는 부분은 없네요. 그러면 예제 페이지로 한번 가볼까요? 예제 페이지 예제 페이지에서도 크게 바뀌는 부분은 없네요. 블로그 쪽에서만 주로 바뀌네요. 보니까 지금 블로그도 이렇게 해서는 뒷배경이 나오는 부분이 별로 없고 이렇게 클릭을 했을 때 클릭을 했을 때 이런 부분이 관련 글 이런 식으로 나오는 거니까 요런식으로 아이템이 구성되어 있는 뒷배경을 주로 이제 바꾸는 색상이라고 보시면 될 것 같아요. 자 그래서 마음에 드시는 걸로 하시구요. 그 다음에 여기 포인트 색상 요거는 이제 요런 색상을 얘기하는 것 같아요. 자 요것도 이제 일단 다른것 다른걸로 한번 바꿔 볼까요? 녹색 계열로 한번 바꿔 볼까요? 녹색 계열로 했을 때 어떻게 되는지 이렇게 보이시죠? 그죠? 보이시죠? 녹색 계열보다는 요 색상이 훨씬 낫네요. 지금 보니까 아까 요 색상이었나요? 포인트 색상이 요런 색상이었나요? 약간 헷갈리네요. 자 요런 색상 그죠? 색상이 좀 촌스러워졌네. 조금 더 밑으로 내리겠습니다. 요런 색상이었던 것 같아요. 자 어쨌든 요렇게 누르고 이제 색상을 정하니까 이 색상이 이제 적용이 되겠죠? 그죠? 그 다음에 이제 배경 이미지. 배경 이미지는 보시면 또 알 것 같아요. 한번 바꿔 보도록 하겠습니다. 이런 여러가지가 있는데 여기에서 배경 이미지를 이걸로 한번 바꿔 볼게요. 어디가 바뀌는지 한번 보자고요. 이것도 배경이 있는 영역에만 적용이 될 것 같습니다. 보이시죠 배경이 이렇게 뒷배경이 있는 영역에만 지금 적용이 되고 있네요 그 다음에 콤텍트도 한번 가볼게요 콘택트 같은 곳에는 이제 적용이 전혀 안되고 있죠 예제 페이지 같은 데도 한번 가보도록 하겠습니다 예제 페이지에도 여기 배경화면이 지금 요렇게 적용이 되고 있는게 보이시죠 자 요런게 요 영역을 이제 확인을 하시면 될 것 같아요 여러분들이 그래서 요 이미지를 다른 걸로 바꿔 주시면 될 것 같습니다 자 여기 배경 이미지에 이렇게 옵션 설정이 있는데요 여기 보시면은 기본이 있고 뭐 화면 채우기 화면에 맞춤 이런게 있는데 아무래도 이제 화면 채우기가 낫겠죠 화면 채우기를 했을 때 어떻게 되는지 한번 볼게요 지금 기본으로 했을 때는 요런 식으로 나옵니다 예제 페이지에서 확인을 해본 결과 자 그러면 요거를 화면 채우기로 했을 때 어떻게 나오는지 보시자구요 자 요런식으로 화면이 채워졌죠 그 다음에 지금 스크롤이 이렇게 올라가는데 지금 보시면은 잠시만요 화면에 맞춤으로 또 한번 해보도록 하겠습니다. 화면에 맞춤은 또 어떻게 되는지 자 화면에 맞춤 공개 자 눌러보도록 할게요 자 화면에 맞춤 자 화면에 맞춤 하니까 요쪽 부분만 있고 요쪽은 또 배경이 어떤 색깔이 나오죠 자 그 다음에 반복으로 한번 해보도록 할게요 반복은 또 어떻게 나오는지 자 반복 자 그 다음에 여기 클릭을 하면 두 개가 반복되죠. 그리고 지금 자세히 보시면 여기 페이지와 함께 스크롤이라는 옵션이 여기에서는 이제 적용이 되죠. 그럼 이거는 페이지와 함께 이렇게 움직인다는 뜻입니다. 그런데 만약에 이걸 해제를 한번 해볼까요? 해제를 했을 때는 어떻게 될까요? 스크롤과는 상관없이 움직인다는 거겠죠. 이런 식으로 잠시만요. 보이시죠? 이렇게 그죠? 배경 이미지는 그대로 있고 페이지 스크롤은 따로 움직이는 겁니다. 요런식으로 자 요런 디테일한 부분들이구요. 그 다음에 뭐 사용자 정의 사용자 정의 해볼까요? 사용자 정의는 그냥 사용자가 말 그대로 정의하는 거고 위치 이런거 조절하실 수 있고 이미지 크기를 원본으로 할 수 있고 화면 채우기로 하는게 좋겠죠 그 다음에 페이지와 같이 스크롤 하는게 좋을 것 같네요 자 요렇게 옵션을 정해놓고 이제 한번 해보도록 하겠습니다 그러면 자 완벽하게 아 근데 이게 너무 화면에 다 채워지니까 위에 부분밖에 안 보이는 이런 또 단점이 있네요 그리고 같이 이제 움직여 버리네요 자 그러면은 이거를 그렇게 하지 말고 화면에 맞춤 원본으로 갈까요? 아까 제일 좋았던 게 제가 봤을 때는 배경 이미지 반복, 이건 페이지와 함께 스크롤은 같이 가져가도 될 것 같고 차라리 여기에서 화면 채우기를 하는게 더 나을 것 같습니다. 여기에서 화면 채우기를 하면서 이렇게 한번 가져가 볼게요. 아까 이게 훨씬 좋았던 것 같아요. 자 훨씬 낫죠 그죠? 위에 부분이 그래도 좀 보이면서 자 요런 식으로 그냥 할게요. 자 이렇게 하고 자 그 다음에 이제 이건 다 여러분들이 한번 해보시면 될 것 같습니다. 그 다음에 넘어와서 이번에는 버튼. 버튼이라는 것은 결국에는 뭐예요? 이런 것들이죠. 잠시만요. 이런 더 알아보기 버튼 같은 거죠. 둥근 모서리를 이렇게 올리면 올릴수록 지금 어떻게 되요 둥글어지고 있죠 그죠 이런걸 좋아하시는 분들이 이렇게 하시면 되고 끝으로 가면 이제 완전히 사각형으로 바뀌었죠 약간만 끝에만 좀 둥글게 하겠다 요 정도만 그러면 요렇게 하시면 되는 겁니다 자 그리고 나서 공개 버튼을 누르면 여기도 마찬가지로 그렇게 적용이 되겠죠 메인화면으로 한번 가서 확인해 볼게요 자 이렇게 나왔죠 자 이런식으로 어 외모의 어떤 기본적인 옵션들 설정 옵션들을 여기는 세팅해 놓는 그런 메뉴라고 생각하시면 될 것 같아요 외모 설정은