홈페이지 헤더 디자인 혼자서 워드프레스 홈페이지 만들기
엘리멘터 빌더로 워드프레스 홈페이지 만들기, 이번 시간은 홈페이지 헤더 디자인 과정을 확인해보고 따라할 수 있는 설정 값을 공유하도록 하겠습니다. 지난 강의와 동일하게 세부 영상은 카페에 등록 되었으니, 헤더 디자인에서 주의해야 할 부분과 설정 값을 확인한 뒤 참고하세요.
워드프레스 헤더 디자인 무작정 따라하기 관련 영상은 네이버 카페를 통해 확인할 수 있습니다. 단, 왜 그래야 하는지를 모른다면 이해도 늦고 창의력을 발휘하기 어려우니 글을 끝까지 읽고 영상을 참고 바랍니다.
홈페이지 헤더 디자인 요소 "폰트, 배경 이미지"
가장 기본적인 헤더 디자인 따라하기
기본이란 게 꼭 품질이 떨어지는 디자인은 아닙니다. 또한 홈페이지 헤더 디자인 과정에서 화려한 레이 아웃이 필요한 비지니스 분야가 흔한 것도 아니며, 엘리멘터 초보자가 어려운 구조를 배우려면 시간이 필요합니다.
따라서 워드프레스 홈페이지 만들기 프로젝트로 준비한 헤더 디자인은 배경 이미지를 깔고, 타이틀과 텍스트를 넣은 투 컬럼 좌측 폰트 배열 레이 아웃으로 준비했습니다.
섹션 기본 설정을 이미지와 같이 세팅하면 영상과 동일한 섹션 구조에서 디자인이 가능합니다.
또한 헤더 고급 설정도 중요한 포인트인데, 섹션 좌우 여백은 100px, 섹션 높이 기본값으로 설정, 페이지 와이드 값은 1400px로 설정 했습니다.
그 외, 알아야 할 요소로는 폰트와 텍스트 간격이나 배경 이미지 좌측을 포토샵 작업을 통해 전경 색을 검정으로 한 뒤 그라데이션으로 보정했다는 정도입니다.
엘리멘터로 워드프레스 홈페이지 만들기
지난 시간에 이어 두 번째 강의가 되었습니다. 홈페이지 헤더 디자인 과정은 모든 웹사이트 제작에서 가장 먼저 결정하는 디자인 콘셉트와 연결되는 영역입니다.
따라서 이번에 준비한 헤더 스타일로 제작된 워드프레스 홈페이지 결과물은 깔끔한 스타일과 정돈된 레이 아웃으로 나타날 것입니다.
엘리멘터 빌더 하나로 워드프레스 웹사이트 디자인을 완성하게 되면 여러분은 아마도 이론적인 지식을 10회 이상 수강한 것 보다는 훨씬 빠른 성장을 할 수 있을 거라 확신합니다.
필자가 개인적으로 우려하는 부분은 실제 오프라인 강의와 다르게 이렇게 이론적인 이유를 설명하는 데 한계가 있기 때문에 여러분이 왜 이렇게 디자인해야 하는지에 대한 인사이트를 직접적으로 확인할 수 없다는 것인데요.
따라서 이번 디자인 강의 프로젝트를 꾸준하게 확인하면서 질문이 있는 경우라면 카페 게시판이나 본사 카카오 채널을 이용해 언제든 질문해 주시길 바랍니다. 물론 무료입니다.
혼자서 워드프레스 홈페이지 만들기
폰트와 텍스트 디자인에 대한 이해가 부족하더라도 영상과 관련 글을 참고하면 혼자서 워드프레스 홈페이지 만들기가 가능하도록 제공하고 있는 이번 프로젝트가 여러분이 워드프레스 디자인 결과물이 효과적이란 걸 이해하는 데 도움이 되길 바랍니다.
본사는 이번 프로젝트 강의가 좋은 반응을 얻게되면 2차 3차 워드프레스 디자인 관련 정보를 준비해서 누구나 웹사이트를 구축할 수 있는 디자인 실력을 만들 수 있게 노력하겠습니다.
따라서 이 분야에 관심은 있었지만 코딩이나 개발 지식을 배우는 게 어렵다고 느꼈던 분이나 웹디자인 실무에서 배울 수 있는 디테일을 찾는다면 저희가 제공하는 정보를 꾸준하게 관심을 두기 바랍니다.
더 나은 영상과 정보를 들고 다시 인사 드리겠습니다.
2024.02.02
에디터 – 민서인
