워드프레스 엘리멘터, 입문자용 6단계 튜토리얼

“워드프레스라면, 다들 엘리멘토부터 시작하세요!”
“엘리멘토가 짱이에요!”

라고 하는데.. 당췌 어디서부터 시작해야할지
막막하실거에요😂

안녕하세요.
4년 차 워드프레스 제작사를 운영하며
비전공자분들을 가르쳐온 헨리입니다.

워드프레스 엘리멘터란?
초보자들도, 워드프레스를 쉽게
접근할 수 있도록, drag and drop 방식의
워드프레스 내의 확장 프로그램(엘리멘터)인데요.

워드프레스 역사는 엘리멘토 전과, 후로
나뉘어진다고 할 정도로, 워드프레스의
거대한 발전중에 하나로 손꼽히고 있습니다.

워드프레스 엘리멘터(Elementor)라는 강력한 페이지 빌더만 있다면
초보자분들도 정말 빠르게 고퀄리티
웹사이트 제작이 가능하다고 볼수있습니다.

위 홈페이지는 수강생분이 실제로 워드프레스를
배우고 한달만에 엘리멘토로 만든 홈페이지인데요.

굉장히 깔끔하고, 퀄리티 높게 제작이 되었죠!

이번 포스팅에서는, 입문자들도 쉽게 따라할 수 있는
워드프레스 엘리멘토 6단계 튜토리얼을 준비했습니다.

1. [1단계] 엘리멘터를 사용하는 이유

워드프레스의 기본 편집기인 ‘구텐베르크’는 블로그 글을 쓰기에는 좋지만,
화려한 디자인의 랜딩페이지를 만들기엔 한계가 있습니다.

반면 엘리멘터는 ‘드래그 앤 드롭’ 방식을 사용합니다.

엘리멘터의 핵심 장점

디자인 감각이 없어도 미리 만들어진 템플릿 요소를 끌어다 놓기만 하면 되기때문에
-> 입문자분들도 워드프레스를 굉장히 쉽게 접근할 수 있습니다.

2. [2단계] 엘리멘터 설치 및 환경 세팅

본격적인 시작을 위해 도구를 준비해야 합니다.

무거운 테마보다는 엘리멘터와 찰떡궁합인
가벼운 테마를 고르는 것이 SEO 최적화의 첫걸음입니다.

🚨아직 워드프레스 테마가 익숙하지 않은분들은
입문자를 위한 워드프레스 테마추천에서,
참조해주세요.

1. 플러그인 설치: [플러그인 > 새로 추가]에서 ‘Elementor’를 검색해 설치하세요.
   혹은 엘리멘터 공식사이트에서 다운로드 받을 수 있습니다.
2. 추천 테마: Hello Elementor나 Astra 테마를 사용하세요.
   • 이 테마들은 불필요한 기능이 없어 사이트 속도가 매우 빠릅니다.

3. [3단계] 기본 구조 이해하기 (컨테이너, 칼럼, 위젯)

엘리멘터의 뼈대는 딱 세 가지만 기억하면 됩니다.
이 구조만 알아도 제작의 80%는 끝난 셈입니다.

4. [4단계] 실전! 첫 페이지 만들기 (Step-by-Step)

이제 빈 도화지에 내용을 채워볼까요? 다음 순서대로 따라 해 보세요.

• 제목 넣기: 왼쪽 메뉴에서 ‘제목’ 위젯을 화면으로 끌어오세요.
  텍스트를 바로 수정할 수 있습니다.
• 이미지 삽입: ‘이미지’ 위젯을 배치하고, 원하는 사진을 업로드하세요.
• 버튼 만들기: 클릭을 유도하는 ‘문의하기’ 버튼을 만들고 링크를 연결해 보세요.
• 스타일 수정: [스타일] 탭에서 폰트 설정과 색상을 바꿀 수 있습니다.
  • 꿀팁: 패딩(Padding)과 마진(Margin) 값을 적절히 주면
    훨씬 여유롭고 깔끔한 디자인이 됩니다.

5. [5단계] 모바일 화면 최적화 (반응형 디자인)

컴퓨터에서는 예쁜데 내 폰에서 보면 글씨가 너무 크거나 이미지가 잘릴 때가 있죠?
반응형 디자인은 현대 웹사이트의 필수 조건입니다.

1. 편집 화면 하단의 [반응형 모드] 아이콘을 클릭하세요.
2. 상단 바에서 ‘모바일’ 아이콘을 선택합니다.
3. 모바일 화면에 맞춰 글자 크기나 간격을 수정하세요.
   PC 화면에는 영향을 주지 않으니 안심하셔도 됩니다.

6. [6단계] 저장 및 발행 (실수 방지 팁)

다 만들었는데 저장을 안 하면 물거품이 됩니다.
하지만 저장 후에도 화면이 안 보일 때가 있죠.

• 업데이트: 화면 왼쪽 하단의 초록색 [업데이트] 버튼을 꼭 누르세요.
• 미리보기: 눈 모양 아이콘을 눌러 실제 방문자에게 어떻게 보이는지 확인하세요.
• 문제 해결: 수정 사항이 안 보인다면 브라우저의 **’캐시 삭제’**를 해보세요.
  대부분의 출력 오류는 여기서 해결됩니다.

엘리멘터 플러그인 관련 참조문헌(출처)

워드프레스 엘리멘토 공식홈페이지
워드프레스 속도 최적화 가이드
구글 모바일 반응형 최적화 가이드

💡워드프레스 초보자분들의 실제 성과 사례

워드프레스 엘리멘토 가이드를 통해,
실제 비전공자 수강생분들이 이뤄낸 결과입니다.

• 사례 1 (프리랜서 엘리님)
  워드프레스 홈페이지제작으로 월 2천만원 수주 성공

• 사례 2 (1인 기업 C님): 비전공자 직장인, 알맹이님
  육아와 회사, 부업을 병행하며, 건당 100만원 수주 성공

• 수강생 인터뷰: 학업과 사업을 병행하며,
  워드프레스 홈페이지 제작으로, 대학생 사장님이 되신
  철우님👍

💡워드프레스 입문자 전용 영상 튜토리얼 안내

워드프레스가 아직 어려우신 분들을 위해,
영상 가이드 튜토리얼을 만들었습니다.

좀 더 상세한 가이드가 필요하신 분들은 위
무료 튜토리얼 영상을 참조해주세요.

❓ 자주 묻는 질문 (FAQ)