1.4 twenty seventeen 테마 메인페이지 만들기

안녕하세요 웅블로그 입니다. 

오늘은 드디어 본격적으로 웹사이트를 만들어 보는 과정인 메인 페이지 제작에 들어갑니다.  테마는 twenty seventeen 테마를 사용하고, 주 플러그인으로 기존에 영상에서 설명드렸던 사이트 오리진 페이지 빌더 플러그인을 사용했습니다. 

이번 제작에서는 사이트 오리진 플러그인을 사용하면 함께 들어있는 다양한 데모 페이지를 사용해서 메인페이지를 만들어 보려고 하는데요. 우선 데모 페이지를 쉽게 사용하기 위해서는 또 다른 하나의 플러그인인 사이트 오리진 위젯 번들 (site origin widget bundle)을 플러그인 다운 및 설치를 해주셔야 합니다. 

그 이유는, 사이트 오리진 페이지 빌더에서 받아서 사용하게 될 데모 페이지의 경우, 부분별로 다양한 레이아웃과 기능이 들어 있는데, 그런 기능은 페이지 빌더 플러그인 자체만으로는 지원되지 않고, 페이지 빌더 내에서 사용하게 될 기능을을 뭉쳐놓은 곳에서 사용할 기능을 최적화 시켜주어야 사용이 가능하기 때문입니다.

만약 위의 위젯 번들을 설치 없이 바로 사이트 오리진 데모 파일을 다운받아 사용하게 되면, 일부 번들기능이 활성화 되지 않은 부분이 화면에서 이상하게 나타나거나 보이지 않을 수 있습니다. 그렇기 때문에 꼭 메인 페이지 제작 하시기 전에 사이트 오리진 위젯 번들을 활성화 시켜주세요. 꼭 처음에 아니더라도 나중에 설치하고 켜서도 상관은 없습니다.

번들을 설치하고, 페이지 메뉴로 들어가서 새로만들기 (Add new) 후,  우측 상단 부분에 페이지 빌더 [page builder] 를 선택하게 되시면 바로 사이트 오리진 페이지 빌더를 이용하여 페이지를 만들수 있게 됩니다.

 그리고 나서 prebulit layout 을 선택하시면 사이트 오리진에서 미리 데모로 제작해둔 페이지를 가져와서 사용할수 있게됩니다. 이런 데모 페이지를 사용하게 되면 시간이 많이 단축되고 디자인 센스가 없는 분들도 조금 쉽게 어느정도 갖춰진 레이아웃에서 웹사이트를 만들 수 있게 됩니다. 저도 기본적으로 데모 페이지를 사용하고, 필요한 특정 디자인이나 요소가 있을 때, 그 부분을 커스터 마이징 하는 형태로 사용하게 됩니다. 그렇게 하는 것이 편하고 좋습니다.

그렇게 원하시는 데모 페이지를 다운 받으시면 레이아웃을 고칠 수 있는 창이 보이게 됩니다. 여기서 부터는 쉽습니다. 원하시는 부분을 메인 화면에서 비교해보고, 한글과 원하는 이미지 및 디자인으로 수정해주시면 됩니다. 

그렇게 하나하나 원하시는 내용으로 변경해주세요

메인 페이지 한쪽으로 치우치는 현상 고치기:

이상하게 메인 페이지가 예제로 보이던 모습과 다르게 오른 편으로 기울어 있나요? 아래 코드를 외모 - 에디터 - style.css 에 붙여 넣으세요

.wrap {

  /* margin-left: auto; */

  /* margin-right: auto; */

  max-width: 100%;

  /* padding-left: 2em; */

  /* padding-right: 2em; */

}

@media screen and (min-width: 48em) {

  .wrap {

     max-width: 100%;

     /* padding-left: 3em; */

     /* padding-right: 3em; */

  }

}

.page.page-one-column:not(.twentyseventeen-front-page) #primary {

  /*margin-left: auto;*/

  /*margin-right: auto;*/

  max-width: 100%;

}

@media screen and (min-width: 30em) {

  .page-one-column .panel-content .wrap

  {

     max-width: 100%;

  }

}

그리고 외모 - 커스터마이즈 메뉴에서 - Homepage setting 에 들어가서 - Static page 를 선택해 주세요. 그리고 아래에 홈페이지 부분에서 메인페이지가 되길 바라는 페이지를 선택해주세요

그리고 나서, 커스터마이즈 안에서 Theme option 이라는 곳을 선택해서 상단에 One column을 선택해주시면 문제없이 화면이 나타나게 될거에요

쉽고 빠르게 만드는 것을 주목적으로 하였기에 보고 따라만 하시면 어느정도 구성이 괜찮은 메인 페이지를 만드실수 있을것 같습니다.

영상을 통해 더 쉽게 배워 보세요!