현재 위치
  1. 게시판
  2. 유용한 웹 팁

유용한 웹 팁

쇼핑몰 운영에 도움이 되는 정보들입니다.

게시판 상세
제목 쇼핑몰에 새 페이지 추가하는 방법
작성자 별모아디자인 (ip:)
  • 평점 0점  
  • 작성일 2021-08-07
  • 추천 추천하기
  • 조회수 30



쇼핑몰에 새 페이지를 추가하고싶으실 경우 아래 설명대로 해주세요.



< PC디자인 새 페이지 추가하기 >



1. 디자인관리> 디자인보관함 > 수정 버튼 클릭


2. 스마트디자인 편집창이 뜨면 편집창 좌측 하단의 '화면추가' 버튼 클릭


3. 쇼핑몰 화면 추가 팝업창이 뜨면 폴더 중에 쇼핑정보(shopinfo) 폴더를 클릭한 상태에서

   파일명 입력칸에 파일명.html 을 입력 (파일명은 영어 이름으로 원하시는대로 지어주세요.)저장 버튼 클릭

   새 페이지가 생성되며 페이지 주소는 /shopinfo/파일명.html 이 됩니다.


   예를들어 파일명이 intro 인 html 파일을 shopinfo 폴더에 생성했다면 

   페이지 주소는 /shopinfo/intro.html 이 됩니다.






4. 편집창에 새로 생성된 파일이 나타나며 편집창 하단의 작은 아이콘 3개 중 가장 우측의 아이콘을

클릭하면 html 편집창을 넓게 사용 가능


5. 새로 생성된 파일에 있는 html 소스를 모두 삭제한 후 아래 소스를 복사하여 붙여넣습니다.

    아래 소스에서 '페이지 제목'이라고 된 부분이 두 군데가 있는데, 둘 다 글자를 해당 페이지 제목에 맞게 동일하게 수정하시고

   '내용 삽입하는 곳'이라고 된 글자를 삭제한 후, 그 자리에 직접 삽입하실 내용을 넣어줍니다. 

 

  이미지를 삽입하고 싶으시면 이미지를 파일 업로더로 업로드하신 후 이미지 태그를 넣어주시면 됩니다. 

   < 파일 업로더로 이미지 업로드 하는 방법 (아래 주소 클릭해주세요.) >

  https://byulmoa.com/article/%EC%9C%A0%EC%9A%A9%ED%95%9C-%EC%9B%B9-%ED%8C%81/3/8698/page/2/



   아래 소스 중 초록색으로 표시된 center 라고 된 부분은 내용이 페이지 중앙에 정렬된다는 뜻으로 

   페이지 왼쪽으로 정렬을 원하시면 center 를 left 로 수정해주시면 됩니다.

    내용을 모두 넣고나면 반드시 편집창 상단 좌측의 '저장' 버튼을 클릭해주세요.



<!--@layout(/layout/basic/layout.html)-->

<style>

#page_contents { text-align:center; }

#page_contents img { max-width:100%; height: auto !important; }

</style>


<div class="path">

    <span>현재 위치</span>

    <ol>

        <li><a href="/">홈</a></li>

        <li title="현재 위치"><strong>페이지 제목</strong></li>

    </ol>

</div>


<div class="titleArea">

    <h2>페이지 제목</h2>

</div>


<div id="page_contents">

내용 삽입하는 곳

</div>



6. 차후에 페이지를 다시 열어 수정 작업을 할 경우 

디자인관리> 디자인보관함 > 수정 버튼 클릭하여

편집창 좌측 하단의 화면명 검색창에서 해당 페이지의 파일명 검색하여

파일 열어 수정 가능


예시)  intro.html


--------------------------------------------------------------------------



< 모바일 디자인 새 페이지 추가하기 > 



1. 모바일쇼핑몰 > 디자인보관함 > 수정 버튼 클릭


2. 스마트디자인 편집창이 뜨면 편집창 좌측 하단의 '화면추가' 버튼 클릭


3. 쇼핑몰 화면 추가 팝업창이 뜨면 폴더 중에 쇼핑정보(shopinfo) 폴더를 클릭한 상태에서

    파일명 입력칸에 파일명.html 을 입력 (파일명은 영어 이름으로 원하시는대로 지어주세요.)저장 버튼 클릭

   새 페이지가 생성되며 페이지 주소는 /shopinfo/파일명.html 이 됩니다.

  

   예를들어 파일명이 intro 인 html 파일을 shopinfo 폴더에 생성했다면 

   페이지 주소는 /shopinfo/intro.html 이 됩니다.


 

 

4. 새로 생성된 파일에 있는 html 소스를 모두 삭제한 후 아래 소스를 복사하여 붙여넣습니다.

    아래 소스에서 '페이지 제목'이라고 된 글자가 한 군데 있는데, 해당 페이지 제목에 맞게 수정하시고

    '내용 삽입하는 곳'이라고 된 글자를 삭제한 후, 그 자리에 직접 삽입하실 내용을 넣어줍니다.

     (PC디자인과 삽입할 내용이 동일하다면 내용 부분을 복사하여 붙여넣기 해주시면 됩니다.)

    내용을 모두 넣고나면 반드시 편집창 상단 좌측의 '저장' 버튼을 클릭해주세요.



<!--@layout(/layout/basic/layout.html)-->

<style>

#page_contents img { max-width:100%; height: auto !important; }

</style>


<div id="titleArea">

    <h2>페이지 제목</h2>

    <span module="Layout_MobileAction">

        <a href="#none" onclick="{$go_back}"><img src="//img.echosting.cafe24.com/skin/mobile_ko_KR/layout/btn_back.gif" width="33" alt="뒤로가기"></a>

    </span>

</div>

<div id="page_contents"><br>

내용 삽입하는 곳

</div>



5. 

차후에 페이지를 다시 열어 수정 작업을 할 경우 

모바일쇼핑몰 > 디자인보관함 > 수정 버튼 클릭하여

편집창 좌측 하단의 화면명 검색창에서 해당 페이지의 파일명 검색하여

파일 열어 수정 가능


예시)  intro.html


첨부파일
비밀번호 수정 및 삭제하려면 비밀번호를 입력하세요.
댓글 수정

비밀번호 :

/ byte

비밀번호 : 확인 취소

댓글 입력
댓글달기 이름 : 비밀번호 : 관리자답변보기

영문 대소문자/숫자/특수문자 중 2가지 이상 조합, 10자~16자

/ byte

왼쪽의 문자를 공백없이 입력하세요.(대소문자구분)

관리자에게만 댓글 작성 권한이 있습니다.