뉴패브릭테마

메인페이지 디자인변경 – 섹션별 수정방법

Estimated reading: 1 minute 257 views
 

섹션별 수정방법

메인페이지는 아래와 같이 7개의 섹션으로 나뉘어 있습니다.
  1. 슬라이더 섹션
  2. Company – 큰원3개
  3. Product – 왼쪽 제목/소제목/설명/버튼 , 오른쪽 4개 아이콘박스
  4. Vision – 배경이미지에 원4개
  5. Media – 최근소식갤러리 4개
  6. Notice – 공지사항 4개
  7. Contact us – 왼쪽지도 오른쪽 주소 및 연락처
이중 1은 슬라이더 플러그인을 이용한 섹션입니다. 2,3,4,7은 엘리멘터의 위젯을 이용하여 페이지가 구성되어 있으며 5,6섹션은 케이보드 게시판과 연동이 되어 클릭하면 케이보드의 해당 글읽기 화면으로 이동 합니다.

슬라이더 섹션

슬라이더 섹션의 편집은 다음의메뉴에서 가능합니다. 관리자페이지 – Depicter – Dashboard 로 이동하면 생성된 슬라이더목록을 볼 수 있습니다. 1에서는 해당 슬라이더의 쇼트코드를 확인할 수 있으며 2의 “Edit”버튼을 통해서 수정페이지로 이동할 수 있습니다.  

메인페이지 구성

관리자로 로그인하여 메인페이지로 이동합니다. 메인페이지 상단에서 엘리멘터아이콘의 “편집하기” 버튼을 클릭합니다. 화면을 클릭하면 왼쪽에 html 코드가 표시됩니다. 각 코드는 다음의 기능을 합니다. 1. fullpage.js 파일 외부페이지 로딩 섹션 2. 메인페이지의 각 섹션별  숏코드 입력부분 : 숏코드를 변경할 경우 이곳을 수정합니다. 3. 사이드바의 따라다니는 메뉴이름 표시섹션 : 섹션의 이름을 변경할 경우 이곳을 수정합니다. *슬라이더 수정방법은 “이곳” 에서 확인하시기 바랍니다. *수정 전 전체내용을 복사하여 저정해놓으시기 바랍니다.    

엘리멘터 섹션 Company / Product / Vision / Contact us

관리자페이지에서 템플릿 – 저장된 템플릿 메뉴로 이동하면 위 화면과 같이 7개의 섹션이 표시되는 것을 볼 수 있습니다. Company – fabric_main_sec2 / Product – fabric_main_sec3 / Vision – fabric_main_sec4 / Contact us – fabric_main_sec7 각 섹션은 다음과 같이 연결이 됩니다. 따라서 Company 섹션을 수정하기 위해서는 fabric_main_sec2템플릿을 수정해줍니다. 더 정확히 하기 위해서는 fabric_main_sec2에 해당하는 shortcode를 확인해보시면 되겠습니다. 편집화면으로 들어가면 섹션을 편집할 수 있는 엘리멘터 화면이 표시됩니다. 각 요소들은 클릭할 경우 편집할 수 있는 화면이 왼쪽에 표시됩니다.

아이콘의 변경

아이콘을 클릭하면 <i class=”bi bi-bricks text-white display-4″></i> 와 같이 코드가 표시됩니다. 케이테마에서 사용되는 아이콘은 부트스트랩 5에서 제공하는 아이콘을 이용하며 아이콘페이지에서 확인이 가능합니다. 아이콘 변경을 위해서는 아이콘페이지의 원하는 코드를 삽입하시기 바랍니다.

색상의 변경

원의 배경색상은 테마의 색상설정과 연동되어 있습니다. 케이테마에서는 디자인 색상을 변경할 수 있도록 기능을 제공하고 있으며 아래의 링크를 참조하시기 바랍니다. 테마색상 변경

텍스트 변경

텍스트 변경은 텍스트에 마우스를 클릭할 경우 우측에 내용이 표시됩니다. 텍스트를 변경 후 아래쪽 “업데이트”버튼을 클릭하면 됩니다.  

엘리멘터 게시글 섹션 Media / Notice

Media / Notice 에 해당하는 섹션을 편집하면 쇼트코드를 입력하도록 설정이 되어 있습니다. 게시판을 글을 표시해야 하는 경우 케이보드의 최신글 코드를 사용하도록 되어 있습니다. 따라서 케이보드 쇼트코드 삽입/수정방법을 알아야 합니다.

케이보드 쇼트코드 확인하기

케이보드 쇼트코드 확인을 위해서는 관리자페이지에서 KBoard – 게시판 목록 및 관리 페이지로 이동합니다. 생성된 여러 게시판이 표시됩니다. 글을 가져오기 원하는 게시판을 선택하여 편집화면으로 이동합니다. 게시판 관리화면 중에서 “게시판 숏코드”와 “최신글 숏코드”가 있습니다. 게시판 숏코드는 게시판을 표시하는 코드이며 최신글 숏코드는 게시판의 글 중 일부를 표시할 수 있도록 도와주는 쇼트코드 입니다. 따라서 최신글 숏코드를 이용합니다. 해당 코드를 복사합니다. 이제 fabric_main_sec5 편집화면으로 이동하여 위에서 복사한 코드를 삽입합니다. 기존의 코드는 삭제해줍니다. 이후 저장하고 화면을 확인하면 원하는 게시물을 표시한 것을 확인할 수 있습니다.    

답글 남기기

이메일 주소는 공개되지 않습니다. 필수 필드는 *로 표시됩니다