도어웹 원페이지1 — 사용자 정의(Customizer) 사용설명서 doorwebonepage1 · 산업기계 기업형 원페이지 테마
이 문서는 워드프레스 관리자가 코드를 만지지 않고 ‘사용자 정의(Customizer)’ 화면에서 홈페이지의 로고, 색상, 히어로 문구, 각 섹션 내용을 직접 수정하는 방법을 안내합니다. 도어웹 원페이지1은 회사 홈페이지를 한 페이지(원페이지)로 구성한 테마로, 히어로부터 문의까지 모든 섹션을 이 화면에서 켜고·끄고·바꿀 수 있습니다.
메인 화면 ↔ 사용자 정의 연결 지도
홈 화면의 번호를 클릭하면 오른쪽 설명으로 이동합니다. 각 번호는 외모 → 사용자 정의(Customizer)의 어느 항목에서 바꾸는지 알려줍니다.
- 색
전역 색상 테마 색상
프리셋 6종·개별 9색을 사이트 전체에 일괄 적용 - 1
로고 · 상단바 사이트 아이덴티티 · 기업 정보 · 상단 SNS
로고 이미지, 상단바 전화번호·SNS 아이콘 - 2
상단 메뉴 외모 → 메뉴
내비게이션 항목·순서(원페이지 앵커 이동) - 3
히어로 히어로 (메인 상단)
슬라이더 이미지 또는 동영상 배경 · 제목{강조}·부제·버튼 2개 - 4
통계 통계 (Stats)
배경, 4개 항목 숫자·라벨(자동 카운트업) - 5
주요 제품 주요 제품
제품 카드(최대 18개) 캐러셀 - 6
솔루션 솔루션
단계별 카드·배경색 - 7
기술력 기술력
아이콘 카드 목록 - 8
연혁 연혁
연도별 타임라인·이미지 - 9
프로젝트 프로젝트
프로젝트 카드(최대 18개) 3개씩 슬라이드 - 10
인증 & 특허 인증 & 특허
인증 카드(최대 12개) 4열, 클릭 확대 - 11
뉴스 뉴스 · 관리자 뉴스
최신 글 자동 노출(개수·분류·더보기) - 12
FAQ FAQ
자주 묻는 질문 아코디언 - 13
오시는 길 지도 / 오시는 길
지도 임베드·높이·표시 여부 - 14
문의 문의 폼 · 기업 정보
문의 폼(숏코드)·전화·이메일·운영시간
1. 사용자 정의란?
‘사용자 정의’는 화면 왼쪽에서 항목을 고르고, 오른쪽 미리보기에서 바뀌는 모습을 실시간으로 확인하며 홈페이지를 편집하는 워드프레스 기본 도구입니다. 도어웹 원페이지1은 여기에 회사 원페이지에 필요한 모든 섹션(히어로·제품·솔루션·기술력·연혁·프로젝트·인증·뉴스·FAQ·지도·문의)을 넣어 두었습니다.
2. 사용자 정의 화면 열기
- 방법 A: 관리자 화면 왼쪽 메뉴에서 외모 → 사용자 정의 클릭
- 방법 B: 홈페이지 상단 검정 관리 바의 ‘사용자 정의’ 클릭 (보고 있는 페이지가 그대로 미리보기로 열립니다)
3. 기본 사용법
- 왼쪽 목록에서 편집할 패널/섹션을 클릭해 들어갑니다. (패널은 안에 여러 섹션이 들어 있습니다)
- 값을 바꾸면 오른쪽 미리보기에 즉시 반영됩니다. (아직 저장 전 상태)
- 상단의 파란 ‘공개’(게시) 버튼을 눌러야 실제 사이트에 저장됩니다.
- 상위로 돌아가려면 왼쪽 위 ‘뒤로(‹)’ 버튼을 누릅니다.
- 저장하지 않고 나가면 경고가 뜨며 변경 내용은 사라집니다.
중요: 아무리 많이 수정해도 ‘공개’ 버튼을 누르기 전에는 실제 사이트에 반영되지 않습니다. 공개를 누르면 즉시 모든 방문자에게 적용됩니다.
4. 메뉴 구성 한눈에 보기
| 항목 (패널/섹션) | 무엇을 바꾸나 |
|---|---|
| 사이트 아이덴티티 · 로고 | 사이트 제목, 태그라인, 파비콘, 헤더 로고 |
| DOORWEB 기업 정보 | 대표 전화·이메일·운영 시간 (상단바·문의·푸터 공통) |
| 테마 색상 | 프리셋 6종 또는 개별 9색 |
| 상단 SNS | 상단바 SNS 아이콘 1~4 |
| 히어로 (메인 상단) | 슬라이더/동영상, 문구·버튼·배경 |
| 통계 (Stats) | 실적 숫자 4칸·배경 |
| 주요 제품 / 프로젝트 | 카드 캐러셀(각 최대 18)·이미지 비율·자동재생 |
| 솔루션 / 기술력 / 연혁 / 인증 & 특허 | 각 섹션 제목·카드·타임라인·인증 이미지 |
| 뉴스 | 최신 글 자동 노출(개수·분류·더보기) |
| FAQ | 자주 묻는 질문 항목 |
| 지도 / 오시는 길 | 지도 임베드·높이·표시 |
| 문의 폼 | 라벨·제목·안내·폼 숏코드 |
| 섹션 설정 | 섹션 표시 on/off·바로가기 라벨·배경색 |
| 푸터 | 로고·기업정보·저작권·약관 링크·배경색 |
5. 항목별 설명
대부분의 항목은 아래 공통 규칙을 따릅니다.
- ‘…표시’ 체크박스: 슬라이드/카드/섹션을 켜거나 끕니다. (끄면 홈에서 사라짐)
- 제목 / 부제 / 설명: 텍스트를 입력합니다.
- 링크: 같은 페이지 내 이동은
#solutions처럼#+영역 이름, 내부/외부 페이지는/about/처럼 입력합니다. - 이미지: ‘이미지 선택’으로 미디어 라이브러리에서 업로드/선택합니다.
- {중괄호} 강조: 히어로 제목에서
{ }로 감싼 글자는 포인트 색으로 강조됩니다. 예)설계부터 {제작·설치}까지
5.1 사이트 기본 정보 · 로고
사이트 제목, 태그라인(한 줄 설명), 파비콘(탭 아이콘)을 설정합니다. 태그라인은 검색엔진 설명에도 쓰입니다. 로고는 이미지를 올리면 표시되고, 없으면 기본 톱니 마크가 나옵니다.
5.2 DOORWEB 기업 정보
대표 전화 · 이메일 · 운영 시간을 한 곳에서 입력하면 상단바·문의 섹션·푸터에 공통 반영됩니다.
5.3 테마 색상 도어웹2 방식
색상 프리셋(도어웹 블루·포레스트 그린·로얄 퍼플·슬레이트 그레이·코랄 오렌지·틸 블루)에서 고르거나, ‘직접 설정’으로 9색(포인트 / 포인트 Hover / 포인트 연하게 / 제목·본문·보조 글자 / 구분선 / 배경 / 메인 어두운색)을 개별 지정합니다. 개별 지정값이 프리셋보다 우선합니다.
5.4 상단 SNS
상단바에 표시되는 SNS 아이콘 1~4개를 설정합니다. 항목별 표시·아이콘 종류(YouTube·Facebook·Instagram·LinkedIn·X·카카오톡·네이버)·이름·URL을 지정합니다.
5.5 히어로 (메인 상단)
메인 최상단 큰 화면입니다. ‘표시 방식’에서 유형을 고릅니다.
- 이미지 슬라이더: 여러 장 슬라이드. 자동 재생·간격(초), 슬라이드별 제목({} 강조)·부제·버튼2개·배경 이미지.
- 동영상 배경: mp4 URL 또는 YouTube 링크를 넣으면 배경 영상(무음 반복). 포스터 이미지·문구·버튼도 지정.
5.6 통계 (Stats)
실적 숫자 4칸입니다. 섹션 표시, 배경(색·이미지), 항목별 숫자·단위·라벨·설명을 설정합니다. 숫자는 화면에 들어올 때 자동 카운트업됩니다.
5.7 주요 제품 / 프로젝트 (캐러셀)
- 섹션·캐러셀 설정: 상단 라벨·제목, 이미지 비율, 자동 재생·간격.
- 카드 1~N: 이미지·태그·제목·설명·링크·표시 여부. (각 최대 18개)
5.8 솔루션 / 기술력 / 연혁 / 인증 & 특허
- 솔루션: 섹션 배경과 단계별 카드(제목·설명·아이콘).
- 기술력: 섹션 제목과 강점 아이콘 카드.
- 연혁: 섹션 제목·이미지와 연도별 타임라인 항목(연도·제목·설명).
- 인증 & 특허: 인증 카드(최대 12개, 4열). 이미지 크기 조절·클릭 확대.
5.9 뉴스
글 내용은 관리자 ‘뉴스’ 메뉴에서 작성합니다. 사용자 정의에서는 아이브로우·섹션 제목·표시 개수·분류 필터·더보기 버튼을 설정하면 최신 글이 자동 노출됩니다.
5.10 FAQ
상단 라벨·제목과 질문/답변 항목을 등록합니다. 방문자 화면에서는 클릭해 펼치는 아코디언으로 동작하며, 안 쓰는 항목은 표시를 끕니다.
5.11 지도 / 오시는 길
지도 표시 여부, 종류, 임베드 코드/URL(구글·카카오맵의 ‘공유 → 퍼가기(iframe)’ 코드나 src URL), 높이(px), 라벨·제목을 설정합니다.
5.12 문의 폼
상단 라벨·제목·안내 문구와 폼 숏코드를 설정합니다. WPForms/Contact Form 7에서 폼을 만든 뒤 숏코드(예:
)를 넣으면 표시됩니다. 전화·이메일·운영시간은 ‘기업 정보’에서 옵니다.
5.13 섹션 설정 (표시 · 바로가기 · 배경)
각 섹션을 한 곳에서 켜고/끄고, 우측 점(●) 내비게이션의 바로가기 라벨과 배경색을 지정합니다. 섹션을 끄면 홈과 바로가기에서 함께 사라집니다.
5.14 푸터
- 푸터 로고 · 배경색.
- 기업정보: 상호·주소·전화 등.
<p>같은 HTML을 쓸 수 있습니다. - 법적 고지 · 저작권: 저작권 문구와 이용약관·개인정보처리방침 링크.
5.15 메뉴 / 홈페이지 설정 (워드프레스 기본)
- 메뉴: 상단 내비게이션 항목·순서. 원페이지 이동은 링크에
#products처럼 앵커를 씁니다. - 홈페이지 설정: 첫 화면을 ‘고정 페이지(홈)’로 둡니다. (본 테마는 원페이지가 첫 화면)
6. 자주 하는 작업 (따라하기)
로고 바꾸기: 사용자 정의 → 사이트 아이덴티티(로고) → 로고 선택 → 업로드 → 공개.
메인 문구 수정: 사용자 정의 → 히어로 (메인 상단) → 슬라이드 1 → 제목/부제 수정(강조는 { }) → 공개.
전체 색상 바꾸기: 사용자 정의 → 테마 색상 → 프리셋 선택 또는 직접 설정 → 공개.
전화번호 바꾸기: 사용자 정의 → DOORWEB 기업 정보 → 대표 전화 → 공개. (상단바·문의·푸터 동시 반영)
섹션 숨기기: 사용자 정의 → 섹션 설정 → 해당 섹션 ‘표시’ 해제 → 공개.
문의 폼 연결: WPForms/CF7에서 폼 생성 → 숏코드 복사 → 사용자 정의 → 문의 폼 → 붙여넣기 → 공개.
7. 이미지 권장 규격
| 용도 | 권장 크기 |
|---|---|
| 헤더/푸터 로고 | 가로 240~400px, 투명 PNG |
| 히어로 배경(슬라이드·포스터) | 1600×900px 이상 (가로형) |
| 히어로 동영상 | mp4 720p, 5~15초 무음 루프 (또는 YouTube 링크) |
| 주요 제품 / 프로젝트 카드 | 가로 800px 이상 (설정한 비율에 맞춤) |
| 연혁 / 인증 이미지 | 가로 600~800px |
| 파비콘 | 512×512px 정사각형 |
이미지는 되도록 용량을 줄여(장당 수백 KB 이하) 업로드하면 페이지가 빠릅니다.
8. 팁 & 주의사항
- 변경 후 반드시 ‘공개’ 버튼을 눌러야 저장됩니다. 안 보이면 새로고침/캐시 비우기.
- 슬라이드·카드를 없앨 땐 지우지 말고 ‘표시’ 체크 해제로 숨기면 나중에 다시 켤 수 있습니다.
- 제목의
{ }강조는 한 슬라이드에 한두 군데만 쓰는 것이 깔끔합니다. - 색을 되돌리려면 테마 색상에서 ‘도어웹 블루’ 프리셋을 다시 선택.
- 색상·로고 등 큰 변경 전에는 현재 설정을 메모해두면 되돌리기 편합니다.
9. 자주 묻는 질문 (FAQ)
Q. 수정했는데 사이트에 안 보여요. A. ‘공개’를 눌렀는지 확인하고, 새로고침/캐시 비우기를 해보세요.
Q. 슬라이드/카드를 완전히 없애고 싶어요. A. 지우기보다 해당 항목의 ‘표시’를 끄세요.
Q. 버튼을 같은 페이지 안에서 이동시키고 싶어요. A. 링크 칸에 #contact처럼 #+영역 이름을 넣으세요.
Q. 색을 원래대로 되돌리고 싶어요. A. 테마 색상에서 ‘도어웹 블루’ 프리셋을 다시 선택하세요.
Q. 뉴스 글 내용은 어디서 쓰나요? A. 사용자 정의가 아니라 관리자 → 뉴스 메뉴에서 작성합니다.
도어웹 원페이지1 (doorwebonepage1) · 사용자 정의 사용설명서