파라디소 그룹 홈페이지 구축

도구 · 도료 · 시공 세 브랜드와 이탈리아 페인트 제품 15종을 한 사이트에 담은 파라디소 그룹 홈페이지

SCROLL
클라이언트명
파라디소 그룹(PARADISO GROUP)
기술
WordPress · Elementor · PHP · JavaScript · CSS3
프로젝트 유형
기업 브랜드 홈페이지 · 제품 카탈로그 · 반응형 웹
담당 범위
워드프레스 구축 · 퍼블리싱 · 개발
주요 기능
  • 홈 · 발페인트 첫 화면 영상(모바일은 720p 영상을 따로 재생)
  • 발페인트 제품 15종: 대표 5종 목록 · 10종 사진 카드, 영문 · 한글 이름과 분류로 바로 거르는 검색
  • 제품 상세: 사양 6칸, 컬러칩 6개씩 쪽 넘김, 제품별 카탈로그 PDF 다운로드, 시공 사진
  • 프로젝트 5건: 목록에 마우스를 올리면 그 프로젝트 사진이 커서를 따라다님, 상세 영상 4편 · 사진
  • 회사소개: 1F · 2F · 3F 층별 사진 탭과 넘김, 국내 본사 · 경기 대리점 · 이탈리아 본사 지도
  • 관리자: 제품 · 프로젝트 · 포트폴리오를 글처럼 등록, 컬러칩 사진 여러 장 한 번에 올리기 · 끌어서 순서 바꾸기, 푸터 회사 정보 설정
프로젝트 개요
  • 파라디소 그룹은 이탈리아 프리미엄 페인트 발페인트(Valpaint), 전문 장비와 솔루션을 제공하는 센트럴툴스(Central Tools), 시공팀 마크(Mark) 세 브랜드를 운영합니다.
  • 피그마 디자인(웹 26화면 · 모바일 10화면)을 워드프레스와 엘리멘터로 구축했습니다.
  • 홈과 회사소개 같은 페이지는 엘리멘터 화면에서 글자와 사진을 바로 고치고, 제품과 프로젝트는 관리자 메뉴에서 등록합니다.
개발 목표
  • 세 브랜드와 발페인트 제품, 협업 프로젝트를 한 사이트에서 차례로 보여 줍니다.
  • 제품이 늘거나 컬러칩이 바뀌어도 파라디소 그룹이 관리자에서 직접 고치게 합니다.
홈페이지 바로가기

DESIGN SYSTEM

primary Color
secondary Color
text Color
Kor Pretendard
Eng Pretendard
파라디소 그룹 홈페이지 목업 — 모니터에 홈 첫 화면, 노트북에 발페인트 제품 상세 화면을 띄우고 미장 흙손 · 페인트 통 · 색 견본을 둔 모습

DESIGN

파라디소 그룹 홈 화면 — 바다 영상 위 PARADISO 첫 화면, What We Do 4줄, 브랜드 3개, 프로젝트 목록, 브랜드별 연락처
발페인트 제품 상세 화면(Valrenna) — 설명과 사양 6칸, 대표 사진, 컬러칩 6개, 시공 사진
프로젝트 목록 화면 — 협업 프로젝트 5건과 연도·브랜드 표시
발페인트 화면 — 영상 첫 화면, 제품 검색창, 대표 제품 5종 목록, 나머지 10종 사진 카드
프로젝트 상세 화면(KSA 대한서핑협회 후원) — 대표 사진, 설명, Partner · Product · Date, 사진 9장

제품 15종을 한 틀로 만들고,
관리자에서 직접 고치도록

제품 상세 15장과 프로젝트 상세 5장은 같은 틀을 씁니다. 화면을 한 장씩 따로 만들지 않고 제품과 프로젝트를 관리자에서 글처럼 등록하면 틀이 화면을 만들어 줍니다. 그래서 내용을 고칠 때도 해당 글 하나만 고치면 됩니다.

  • 발페인트 제품 목록

    위쪽에는 대표 5종을 큰 글씨 목록으로, 아래에는 나머지 10종을 사진 카드로 보여 줍니다. 대표 목록에 넣을지와 순서는 관리자에서 정합니다. 검색창에 영문 · 한글 이름이나 분류를 치면 목록이 바로 걸러집니다.

  • 제품 상세

    Effect · Packaging · Type · Drying Time · Surface · Recoat Time 사양 6칸, 대표 사진, 컬러칩, 시공 사진을 차례로 보여 주고, 제품마다 카탈로그 PDF를 내려받게 합니다.

  • 컬러칩 직접 등록

    컬러칩 사진을 여러 장 한 번에 고르면 파일 이름이 색 코드로 들어갑니다. 끌어서 순서를 바꾸고 지울 수 있으며, 화면에는 6개씩 쪽으로 나뉘어 보입니다.

  • 프로젝트

    목록에 마우스를 올리면 그 프로젝트 사진이 커서를 따라다니고, 누르면 상세로 넘어갑니다. 상세는 위쪽 영상(KSA는 사진), 설명, Partner · Product · Date, 사진 순서이고, 부산 서핑 대회는 세로 영상을 사진 목록 첫 칸에 넣었습니다.

  • 회사소개

    대표 인사말 아래 1F · 2F · 3F 버튼을 누르면 층별 사진 묶음이 바뀝니다. 국내 본사 · 경기 대리점 · 이탈리아 본사 지도는 마우스를 올리면 컬러로 바뀌고, 누르면 구글 지도가 새 창으로 열립니다.

  • 포트폴리오 준비중 화면

    공개된 포트폴리오가 없으면 준비중 화면을 보여 주고, 관리자에서 하나라도 공개하면 펼쳐 보는 목록으로 자동으로 바뀝니다.

관리자에서 등록한
제품과 프로젝트

피그마 디자인에서 문구와 사진을 옮겨 제품과 프로젝트를 처음 등록해 두었습니다. 화면에 보이는 숫자는 모두 이렇게 등록한 글에서 나옵니다.

  • 15종

    발페인트 제품 (대표 목록 5종 · 사진 카드 10종)

  • 90개

    컬러칩 (제품마다 6개)

  • 82장

    제품 시공 사진 (제품마다 3~8장)

  • 5건

    협업 프로젝트 (영상 4편 · 사진 35장)

제품마다 사양과 사진, 카탈로그가 따로 있으신가요?
워드프레스 구축부터 제품 관리 화면까지 상담해 드립니다.
지금 웹셀러에 상담하세요.

카카오 채널 카카오 1:1 문의