처리중 입니다

둘러보기

Home sample

모바일전용 홈페이지 예제

🔗 참고 예시

실제 적용 사례 보기: https://sptbox.xlink.kr/

0. 준비물

🖼️ 이미지

메인 이미지 [필수]

  • 용도: 카카오톡이나 SNS에 사이트 링크를 공유할 때 나타나는 대표 이미지입니다.
  • 규격: 500px × 500px 이상의 정사각형 권장

로고 이미지 [선택]

  • 특징: 등록 시 사이트 상단에 브랜드 로고가 표시됩니다. 미등록 시에는 설정한 '사이트 타이틀'이 텍스트로 깔끔하게 노출됩니다.
  • 규격: 가로 200px ~ 400px 가로형 이미지 권장
    ⚠️Tip: 배경색이 없는 투명 PNG 파일을 사용하면 어떤 테마에서도 이질감 없이 깔끔하게 노출됩니다.

기타 이미지 (게시글 및 슬라이드 배너용)

  • 규격: 가로 500px 이상 권장
    예시 가이드에서는 가로 720px × 세로 900px 이미지 2장을 사용했습니다. 운영 목적에 맞춰 필요한 수량만큼 자유롭게 준비해 주세요.
    ⚠️Tip: 슬라이드 배너는 세로형 이미지를 사용했을 때 화면이 꽉 차 보여서 훨씬 보기 좋고 깔끔하게 노출됩니다!



📝 정보 및 링크

브랜드 상세 정보

구성하고자 하는 섹션에 들어갈 텍스트를 준비해 주세요.

  • 예시: 서비스 요금표, 오시는 길(버스·지하철 노선 등 구체적인 경로), 운영자 프로필 등

SNS 및 외부 연결 링크

고객과 소통할 다양한 채널의 URL 주소를 준비합니다.

  • 종류: 카카오톡 상담 채널, 인스타그램, 유튜브, 네이버 블로그 등

💡 운영 가이드 (Check!)

XLINK는 최소한의 정보만으로도 멋진 사이트 개설이 가능합니다! 이미지는 고화질로 준비하시되, 용량이 너무 크면 로딩 속도에 영향을 줄 수 있으니 적절한 크기로 최적화하여 등록해 주세요. 🚀




1. 사이트 개설 및 기본 설정

가장 먼저 내 브랜드를 상징하는 아이디와 타이틀을 설정하여 사이트를 생성합니다.


사이트 생성

  • 링크타입: 쇼핑몰
  • 사이트 ID: sptbox
    사이트 ID는 최소 6자리 이상 입력가능합니다.
  • 사이트 타이틀: PTBOX

  • 사이트 분류: [헬스/건강/다이어트] 선택
  • 대표 이미지: 준비한 공유용 썸네일 이미지를 등록합니다.

  • 설정을 마치고 하단 **[등록]**을 누르면 sptbox.xlink.kr 주소로 나만의 사이트가 즉시 생성됩니다.


📋사이트/SEO 설정
해당 페이지에서 결제 정보>협력사 연동부터 설정하시면 됩니다.

모바일홈페이지_02.jpg 

  • 공유상품 연동: 필요한 경우 파트너사(예: 홀리셔스)를 선택하여 관련 공지사항 및 FAQ를 자동으로 동기화합니다.
  • 정산은행 입력: 정산은 최대 3개월까지 유예가 가능하며 3개월이 지나면 정산이 불가능합니다.



📱첫화면 설정 > 사이트설정

  • 레이아웃 설정: 모바일 전용
  • 모드설정 : 다크모드





2. 랜딩 페이지(메인 슬라이드) 설정

사이트 접속 시 가장 먼저 보이는 첫 화면을 화려한 슬라이드 배너로 꾸미는 단계입니다.

  • 섹션 추가: [첫화면설정] > [섹션추가] 클릭 후, 섹션 유형을 **[슬라이드 배너]**로 선택합니다.
  • 배너 등록: 생성된 섹션을 클릭하고 [배너추가]를 눌러 이미지를 업로드합니다.
    ⚠️Tip: 모바일 전용 사이트이므로 PC와 모바일 칸에 동일한 세로형 이미지를 등록해도 무방합니다.



🧱 콘텐츠 페이지 제작 (강사 소개 및 정보)

브랜드의 상세 정보를 담을 서브 페이지들을 구성합니다.

  • 섹션 생성: **[섹션추가]**를 눌러 유형은 **[D]문서**을 선택, 제목()과 서브타이틀을 입력합니다.
    메인타이틀:
    PTBOX 정보
    서브타이틀: 😎언제나 최선을 다하는 PTBOX가 되겠습니다🥰 
  • 페이지 상세 등록: 생성된 섹션 내 [새글쓰기] 버튼을 통해 세부 내용을 구성합니다.
    트레이너 소개: 이미지 업로드 기능을 통해 강사 프로필 사진을 본문에 삽입합니다.
    이용 요금 및 안내: 동일한 방식으로 텍스트와 가격표 이미지를 등록합니다.
  • 오시는 길: 주소 찾기 기능을 이용하면 카카오 지도가 자동으로 연동됩니다.
  • 스타일 다듬기: [레이아웃]탭에서을 [디자인 설정 > 형식설정]에서 원하는 스타일로 변경합니다.





    3. 메뉴 구성 및 이름 변경

    사이트 상단이나 측면에 노출될 메뉴의 이름을 서비스 성격에 맞게 수정합니다.

    모바일홈페이지_03.jpg

    • 메뉴 활성화: [메뉴설정]에서 '쇼핑'과 '문서' 메뉴를 [사용함]으로 변경합니다.
    • 이름 맞춤 변경:
      쇼핑 → [단백질]: 판매할 상품 카테고리로 변경합니다.
      문서 → [PTBOX 이용안내]: 앞서 만든 정보 페이지들이 담길 메뉴명으로 변경합니다.





    4. SNS 및 상담 링크 연결

    고객이 즉시 상담을 요청하거나 SNS로 이동할 수 있도록 버튼을 추가합니다.

    • 링크 등록: **[첫화면설정] > [SNS링크설정] > [SNS링크추가]**를 클릭합니다.
    • 링크 선택: [카카오톡], [인스타그램] 등 아이콘 선택
      링크 제목: 카카오톡 상담 등 버튼에 표시될 문구 입력
      링크 주소: 해당 SNS나 상담 채널의 URL을 복사하여 붙여넣습니다.


    💡 운영 가이드 (Check!)

    위 과정을 모두 마치면 전문적인 PT샵 모바일 홈페이지가 완성됩니다!
    XLINK 관리자 페이지 왼쪽의 미리보기 기능을 활용해 실시간으로 변경 사항을 확인하며 최적의 스타일을 찾아보세요. 🚀

    ?
    도움이 필요하신가요?
    XLINK 상담 상담불가능
    평일 10:00 ~ 17:00 / 점심 11:30 ~ 13:30
    새로운 메세지가 있습니다.