마옵션 가이드|theme options

프리홈 테마 신청시, 세팅완료 후 고객님의 회원정보에 있는 이메일정보로 관리자 로그인정보를 보내드립니다. 로그인을 하시면 데모페이지에 있는 레이아웃과 디자인이 세팅되어 있습니다. 변경을 할때에 필요한 페이지와 포스트와 이미지와 콘텐츠를 서로 조합하여 나만의 홈페이지를 만들 수가 있습니다. 먼저 세팅완료된 페이지의 상단에 있는 블랙박스부터 차근차근 보겠습니다.

  • 워드프레스 사이트 및 워드프레스 솔루션에 대하여 소개하는 페이지로 이동됩니다.
  • 고객님사이트의 관리자 및 사이트로 이동이 됩니다.
  • 댓글관리 페이지로 바로 이동이 됩니다.
  • 주로 자주 이용하는 기능들이 있으며, 새로추가시 바로 해당 페이지로 이동이 됩니다.
  • 해당 창의 편집창으로 바로 이동됩니다. 보고 계시는 창이 페이지로 만들어져있으면 페이지 편집, 글로 만들어져있으면 글편집으로 되어있습니다.
  • 관리자 편집창으로 가지않고 해당 창에서 바로 편집이 가능합니다. 
  • 프리홈 서비스의 테마옵션 기능들을 편집 할 수 있습니다.자세한 사항은 아래 리스트에서 타이틀을 클릭하면 해당 가이드로 이동됩니다.
  • 고객님의 계정프로필로 이동이됩니다. 

테마옵션 (7.0버전) 

  • 일반설정(General) : 테마의 스타일, 전체 배경이미지, 레이아웃, CSS등을 설정할 수 있습니다.
  • 스킨설정(Skins) : 테마에서 제공중인 다양한 스킨을 변경할 수 있습니다. 스킨 선택만으로도 웹사이트에 새로운 느낌을 전해줄 수 있습니다.
  • 브랜드설정(Branding) : 사이트대표로고, 하단로고, 카피라이트 정보를 입력하는 페이지입니다.
  • 탑바설정(Top Bar) : 사이트 최상단에 위치하는 탑바영역에 대한 옵션을 설정할 수 있습니다.
  • 헤더설정(Header) : 메인메뉴가 위치하는 사이트 상단의 색상, 레이아웃, 기능정의를 설정할 수 있습니다.
  • 슬라이드쇼 설정(Slidershow) : 슬라이드쇼의 배경색이나 배경이미지를 변경할 수 있습니다.
  • 콘텐츠 영역설정(Content Area) : 콘텐츠 영역의 텍스트 색상과 구분라인 색상을 변경할 수 있습니다.
  • 줄패턴설정(Stripes) : 줄무늬 패턴을 변경하는 영역입니다. 사용자정의의 패턴 텍스트, 구분라인 스타일을 Stripe1, Stripe2, Stripe3로 저장하여 비주얼 레이아웃빌더를 통해 페이지, 블로그게시물, 포트폴리오등에 줄무늬패턴을 삽입할 수 있습니다.
  • 사이드바설정(Sidebar) : 사이드바의 배경레이아웃과 구분라인, 텍스트를 변경할 수 있습니다.
  • 푸터설정(Footer) : 사이트하단 영역의 배경색과 배경이미지, 구분라인, 텍스트를 변경할 수 있습니다.
  • 바텀설정(Bottom Bar) : 사이트 최하단영역으로 Bottom 로고와 카피라이트를 작성하는 공간입니다.
  • 블로그&포트폴리오설정(Blog & Portfolio) : 블로그와 포트폴리오에 관련된 일반적인 기능을 정의합니다.
  • 폰트설정(Fonts) : 기본폰트와 헤더폰트(H1~H6) 스타일을 설정하는 공간입니다. 현재까지 국문은 지원되지 않으므로 특별히 설정하지 않으셔도 됩니다. 저희 테마에는 나눔고딕폰트가 기본으로 설정되어있어 한글이 더욱 심미적으로 보여집니다.
  • 버튼설정(Button) : 대/중/소 사이즈의 미리 정의된 버튼의 폰트크기, 폰트패밀리, 보더라운드 수치를 설정할 수 있습니다.
  • 이미지스타일링설정(Image Styling and Hovers) : 블로그에 보여지는 이미지의 스타일과 마우스 Hovers 스타일을 설정합니다.
  • 공유버튼설정(Share Buttons) : 블로그, 포트폴리오, 미디어, 페이지에 소셜 공유버튼을 위치할 여부를 설정합니다.
  • 위젯설정(Widget Areas) : 위젯영역을 무제한으로 만들수 있습니다. 원하는 위젯을 만들어 각종 페이지, 블로그, 포트폴리오 등에 위치시킬 수 있습니다. 위젯영역에서 새로운 위젯영역을 생성시킨 후 외모 > 위젯에서 사용하고자 하는 위젯을 드래그앤드랍으로 끌어놓기하면 됩니다.
  • 테마옵션저장(Import & Export) : 다양한 테마옵션사항을 Import & Export할 수 있습니다.

테마옵션 (7.2버전)

브랜드 설정

Side bar 설정

Stripes

– Footer&Bottom bar

– 블로그,포트폴리오,갤러리 포스트

– 페이지제목 설정

– 폰트 설정

– 버튼 설정

– 이미지 스타일링&마우스

– SNS 공유버튼 설정

– 위젯영역 설정

– 테마옵션 저장

외모

전체적인 스타일에 대해서 지정하는 곳입니다

  • 두가지의 스타일로 선택 할 수 있습니다.
  • 사이트의 레이아웃
    1. 레이아웃 : 박스로 보일건지 와이드로 볼건지 체크 할 수 있습니다.

    2. 박스형레이아웃 배경관리 : 박스형태시 밑에 배경색상과 이미지 설정 할 수있습니다.
  • 기본 사이트의 배경 색상과 이미지를 설정 할 수 있습니다.
  • 기본 텍스트의 색상을 지정하는 곳입니다.
  • 악센트되는 곳의 색상을 지정하는 곳입니다.
  • 버튼,사이드바의 경계선에 사용됩니다.

Custom css

  • 사이트의 css를 총괄적으로 관리 할 수 있는 곳이며, 이 곳에서 수정을 하면 적용되어있는 공간이 수정이 됩니다.

고급설정

더 상세하게 지정이 가능한 설정란입니다.

  • 사이트를 반응형으로 활성화를 할지 안할지에 대해 유무를 체크합니다.
  • 레티나이미지를 어느 공간에 활성화를 할것인지에 체크합니다.
    (*레티나이미지란? : 일반 맥북PRO보다 최대 4배 선명하고, Full-HD(1920×1080) 해상도보다 2.5배 선명한 고해상도 LCD입니다.)
  • 스크롤 사용을  부드러운 스크롤로 사용할지 유무를 체크합니다.
  • 로딩시 로딩아이콘이 나오게끔 할건지 안나오게 할건지 유무를 체크합니다.
  • 중요한 의미를 담은 단어로 검색엔진최적화에 유용하게 사용됩니다.
  • 콘텍트폼 사용시 받을 기본 이메일주소를 기재합니다.
  • 사이트에 대한 추적 코드를 추가합니다.

스킨 설정

  • 사이트의 스킨을 적용하는 곳입니다.(*주의사항 : 스킨변경시 기존에 등록되어있던 css코드 및 레이아웃이 깨지니 변경에 유의 해주세요!)

Top bar 설정

Topbar에 대하여 설정 하는곳입니다.

  • topbar의 폰트 사이즈를 변경 할 수 있습니다.
  • 폰트색상을 변경 할 수 있습니다.
  • 상단바의 위아래를 조절 할 수 있습니다.

 

  • topbar의 배경색으로 지정할건지 라인으로만 보이게 할건지에 대해 체크하는 곳입니다.

 

  • 배경이나 라인의 색상을 지정하는 곳 입니다.
  • 배경과 라인에 투명도를 지정하는  곳입니다.
  • 배경이미지를 기존에 등록되어있는 이미지로 업로드 할 수 있고, 내컴퓨터에서 불러올 수 있습니다.

 

Header 설정

  • Header를 비활성화,그림자,라인 세가지 영역에서 고르실 수 있습니다.
  • 라인을 줄때 라인의 색상값을 주는 곳입니다.
  • Header의 배경색상을 지정해주는 곳입니다
  • Header의 배경에 대한 투명도를 지정하는 곳입니다.
  • 배경이미지를 선택하거나 내컴퓨터에 있는 이미지를 불러 올 수 있습니다.
  • Header 영역을 전체화면으로 늘려서 보여줄건지 체크하는 곳입니다.
  • Header 영역을 고정시켜보여줄건지 체크하는 곳입니다.

Layout

Header와 Top영역의 레이아웃을 지정 할 수 있습니다.

  • Header의 레이아웃을 설정하는 곳입니다.
  • 선택한 레이아웃을 전체적으로 보이게 할건지 체크하는 곳입니다.
  • Top bar쪽에 메뉴를 두고 싶을때 두고 싶은 요소를 클릭하여 드래그해서 활성화쪽에 놓으면 노출됩니다.
  • 검색란에 아이콘을 표시할건지와 박스안에 들어갈 문구를 넣을 수 있습니다.
  • Top bar쪽에 나올 정보를 기재하는 곳입니다.
  • 로그인에 아이콘으로 표시할건지 머리말문구를 기재 할 수 있습니다.
  • 추가적인 다른 정보를 넣을려면 텍스트부분에 넣을 수 있습니다.
  • 소셜아이콘에 대해서 설정하는 공간입니다.

모바일 Header

모바일상에서의 메뉴를 설정 할 수 있습니다.

  • 모바일상으로 봤을때 메뉴의 넓이 사이즈를 기재하고, 로고형식을 어떻게 보이게건지 체크하는 곳입니다.
  • 두번째 반응형일때의 메뉴넓이와 로고 형식을 어떻게 보이게 할건지 체크하는 곳입니다.
  • 메뉴를 클릭했을때의 색상을 지정하는 곳입니다.
  • 모바일상에서 Topbar의 메뉴를 오픈할건지 클로즈시킬건지 비활성화할지 체크하는 곳입니다.

브랜드 설정

사이트의 로고를 설정 할 수 있습니다.

  • Header영역에 나오는 로고를 지정하는곳입니다.
  • Bottom영역에 나오는 로고를 지정하는 곳입니다.
  • 따라다니는 유동적메뉴에 있는 로고를 지정하는 곳입니다.
  • 모바일상에 나오는 로고를 지정하는 곳입니다.
  • 즐겨찾기아이콘을 지정하는 곳입니다.
  • 다른 디바이스별로 볼 수있는 로고를 지정 할 수 있습니다. 
  • 저작권의 표시를 기재하는 곳입니다.

Stripes1,2,3

다양한 배경과 내용영역의 행을 만들 수 있습니다

    • Stripe1,2,3을 지정 할 수 있습니다. 

다음과 같이 지정 하실 수 있습니다.
– 배경색상및이미지
– 텍스트와 헤더색상
– 분할 및 라인 색상

Bottom 설정

Bottom영역에 대한 옵션을 설정하는 곳입니다.

  • 콘텐츠 영역만 라인&전체라인을 체크할때에는 폰트색상값과 텍스트 영역만 지정 할 수 있지만, 단색배경을 지정할 때에는  배경이미지와 폰트색상과 텍스트영역을 설정 할 수 있습니다.
  • 배경에 대한 색상을 정할 수 있습니다.
  • 기본 이미지를 설정 할 수 있고, 내컴퓨터에서 이미지를 불러 배경으로 설정 할 수 있습니다.
  • 폰트색상을 설정하는 곳 입니다.
  • Bottom영역에 간단한 홈페이지 소개를 할 수 있습니다.

블로그 포스트

블로그를 쓸 때 기본 옵션기능입니다.

  • 포스트를 작성하면 저자정보를 노출할것인지의 여부를 체크하는 곳입니다.
  • 블로그를 버튼을 통해서 이동을 할 수 있는 기능으로, 노출유무를 체크하는 곳입니다.
  • 포스트안에 이전과 다음버튼의 중심버튼으로써,지정한 페이지로 이동 할 수 있습니다.
  • 포스트의 작성일&저자&카테고리&댓글&태그를 노출할것인지 유무를 체크하는 곳입니다.
  • 포스트의 연관되어있는 포스트를 바로가기 할 수 있는 기능입니다. 활성화의 유무 체크와 기본 제목 및 연관게시물의수를 기재 할 수 있습니다.

포트폴리오 포스트

포트폴리오를 쓸 때 설정하는 기본 옵션기능입니다.

  • 포트폴리오를 작성하면 저자정보를 노출할것인지의 여부를 체크하는 곳입니다.
  • 포트폴리오를 버튼을 통해서 이동을 할 수 있는 기능으로, 노출유무를 체크하는 곳입니다.
  • 포트폴리오의 메타정보의 사용유무와 어떤 정보를 보일건지 체크하는 곳입니다.
  • 포트폴리오의 연관되어있는 포트폴리오를 바로가기 할 수 있는 기능입니다. 

페이지 제목 설정

포스트나 페이지 편집창을 보시면 페이지 타이틀을 설정하는 란이 있습니다. 그곳에 대한 기본 설정 옵션입니다.

  • 제목영역에 대한 레이아웃 및 영역의 높이를 지정하는 곳입니다.
  • 페이지 편집이나 포스트 편집시 기본적으로 페이지타이틀을 활성화를 시킬건지에 대한 유무를 체크하고, 기본 폰트 사이즈 및 색상을 지정하는 곳입니다.
  • 보고있는 창의 경로를 보여주는 곳으로써, 해당 경로를 보여줄건지의 유무를 체크하고, 폰트색상 및 백그라운드 배경을 설정 할 수 있는곳입니다.
  • 위에 지정했던 백그라운드의 색상의 영역에서 어떤 스타일로 보여줄건지 체크하는 곳입니다.

폰트 설정

사이트의 기본 폰트에 대하려 설정하는 곳입니다.

  • 폰트체와 사이즈별로 줄간격과 크기를 지정 할 수 있습니다.
  • 문단을 설정할 때, H1부터 H6까지의 폰트사이즈 및 줄간격과 영문으로 쓸때 대문자로 노출할건지에 대해 체크하는 곳입니다.

버튼 설정

버튼을 사용할 때 기본설정 할 수 있는 기능옵션입니다.

  • 버튼의 스타일를 지정하는 곳입니다.
  • 버튼에 대한 색상을 지정하는 곳입니다.
  • Small버튼에 폰트체 및 폰트사이즈 줄간격과 모서리를 지정하는 곳입니다.
  • Medium버튼의 폰트체 및 폰트사이즈 줄간격과 모서리를 지정하는 곳입니다.
  • Big버튼의 폰트체 및 폰트사이즈 줄간격과 모서리를 지정하는 곳입니다.

이미지 스타일링&마우스 오버시

  • 이미지를 마우스 오버시 어떠한 효과를 줄것인지 체크하는 곳입니다.
  • 이미지를 마우스 오버시 색상을 어떤 방식으로 보일건지 체크하는 곳입니다.
  • 일반 마우스 오버시 불투명도를 몇으로 줄것인지 지정하는 곳입니다.
  • 텍스트 및 아이콘의 마우스 오버시 불투명도를  몇으로 줄것인지 지정하는 곳입니다.

SNS공유버튼 설정

각 영역마다 소셜 아이콘을 어떤걸 보여줄지 지정하는 곳입니다.

  • 블로그 페이지에  sns버튼을 어떤걸 지정할지에 대해 지정하는 곳입니다.
  • 포트폴리오 페이지에 SNS버튼을 어떤걸 지정할지에 대해 지정하는 곳입니다.
  • 미디어페이지에 SNS버튼을 어떤걸 지정할지에 대해 지정하는 곳입니다.
  • 일반 페이지에 SNS버튼을 어떤걸 지정할지에 대해 지정하는 곳입니다.

위젯영역 설정방법

  • 위젯지역을 관리하는 곳으로써, 기본적으로 사이드바 및 footer영역에 대해서 지정 할 수 있습니다.

테마옵션 설정방법

  • 테마의 암호화된 코드를 복사하여 내보낼 텍스트 파일에 저장을 합니다. 디플리케이션을 하신 후에 구현될사이트에 설치를 하시고 해당 테마옵션코드까지 넣어야합니다.