Elementor로 홈페이지 편집하기: 모듈(텍스트, 이미지, 버튼 등) 추가하기

기본 모듈을 추가하는 방법을 배우는 것은 Elementor로 페이지를 디자인하기 위한 핵심 기술입니다. 이 장에서는 텍스트, 이미지, 버튼 및 기타 일반적인 요소를 직접 추가하고 스타일을 조정하여 홈페이지의 첫 번째 모양을 만드는 방법을 보여 줍니다.

준비: 엘리멘터 편집 모드로 들어가기

1. 워드프레스 백엔드에 로그인하고 "페이지" → "홈"(또는 편집하려는 페이지)으로 이동한 다음 "편집"을 클릭합니다.
2. 페이지 상단의 '엘리멘터로 편집' 버튼(엘리멘터 아이콘이 있는 파란색)을 클릭하여 시각적 편집 인터페이스로 들어갑니다.

들어가면 인터페이스는 세 개의 섹션으로 나뉩니다:

• 왼쪽: 모듈 패널(추가할 수 있는 모든 요소 포함)
• 중앙: 편집 영역(페이지 효과의 실시간 표시)
• 오른쪽: 스타일 패널(세부 스타일은 요소를 선택하면 조정할 수 있습니다.)

1단계: '제목' 모듈(텍스트 제목) 추가하기

제목은 페이지의 '골격'으로, 콘텐츠 계층 구조를 통해 방문자를 안내하는 데 사용됩니다.

1. 헤더 모듈 찾기왼쪽 모듈 패널에서 '기본' 카테고리 아래의 '제목' 모듈(아이콘 'T')을 찾습니다.
2. 드래그 앤 드롭하여 페이지에 추가'제목' 모듈을 길게 누른 상태에서 중앙 편집 영역의 '+ 요소를 여기로 드래그' 위치로 드래그한 다음 마우스를 놓습니다. 이 시점에서 페이지에 기본 제목인 '제목입니다'가 표시됩니다.
3. 제목의 콘텐츠 수정방금 추가한 제목 모듈을 선택하면 오른쪽에 편집 패널이 나타납니다:
   • '콘텐츠' → '제목 텍스트'에서 기본 텍스트를 삭제하고 제목을 입력합니다(예: "내 개인 블로그에 오신 것을 환영합니다").
   • "헤더 레벨"에서 레벨을 선택합니다(H1은 가장 큰 것으로 메인 헤더에 적합하고, H2는 두 번째로 큰 것으로 부제목에 적합하며 콘텐츠 레벨에 따라 선택됨).
4. 제목 스타일 조정하기오른쪽 패널의 '스타일' 탭을 클릭하여 사용자 지정합니다:
   • 캘리그래피 스타일'글꼴' 드롭다운 상자에서 원하는 글꼴(예: "Microsoft Black" "Arial")을 선택합니다.
   • 크기: '글꼴 크기' 슬라이더를 드래그하거나 값을 직접 입력합니다(권장 제목 크기는 24-48px 사이입니다).
   • 색상'텍스트 색상' 상자를 클릭하여 제목 색상(예: 검정, 진한 파란색)을 선택합니다.
   • 올바른 순서로 정렬'텍스트 정렬' 버튼을 클릭하여 제목을 왼쪽, 가운데 또는 오른쪽으로 설정합니다(홈 페이지의 기본 제목은 가운데로 설정하는 것이 좋습니다).

2단계: '단락' 모듈(본문 텍스트) 추가하기

단락은 시놉시스, 설명 등과 같은 세부 정보를 표시하는 데 사용됩니다.

1. 단락 모듈 추가왼쪽의 '기본' 카테고리에서 문단 모듈(아이콘은 문단 기호)을 찾아 제목 모듈 아래로 끌어다 놓습니다.
2. 단락의 콘텐츠 수정단락 모듈을 선택하고 내용을 입력합니다(예: "여기에서는 제 인생의 교훈과 공부 노트를 공유합니다, 자주 교류하는 것을 환영합니다!"). 자주 소통하는 것을 환영합니다!
3. 단락 스타일 최적화스타일 탭으로 전환합니다:
   • 글꼴 크기읽기 쉽도록 16~18px로 설정하는 것이 좋습니다.
   • 줄 높이1.5-1.8배로 조정합니다(보다 편안한 텍스트 간격을 위해).
   • 색상제목과 구분할 수 있는 색상을 선택합니다(예: 배경색에 너무 가깝지 않도록 진한 회색).

3단계: '사진' 모듈 추가(사진 삽입)

이미지는 페이지에 생동감을 불어넣어 주므로 선명하고 관련성 있는 이미지(예: 개인 사진, 제품 이미지, 풍경)를 선택하는 것이 좋습니다.

1. 이미지 업로드 또는 선택왼쪽의 "기본" 카테고리에서 "사진" 모듈을 찾아 단락 하단으로 드래그합니다. 사진 모듈을 선택하고 오른쪽의 '콘텐츠' → '사진'에서 '사진 선택'을 클릭합니다:
   • 사진이 이미 컴퓨터에 있는 경우 '파일 업로드' → 사진 선택 → '선택'을 클릭합니다.
   • 이전에 업로드한 적이 있는 경우 미디어 라이브러리에서 기존 이미지를 바로 선택할 수 있습니다.
2. 사진 표시 조정하기스타일 탭으로 전환합니다:
   • 크기'너비'에서 페이지에서 이미지의 비율을 설정합니다(예: 100%는 전체 화면 너비, 80%는 더 좁은 너비를 의미).
   • 둥근 모서리테두리 반경 슬라이더를 드래그하여 이미지의 모서리를 둥글게 만듭니다(값이 클수록 모서리가 더 뚜렷하게 둥글게 표현됩니다).
   • 그림자'상자 그림자'를 켜서 사진에 약간의 그림자를 추가합니다(레이어드 효과를 주기 위해).
3. 이미지 설명 추가(선택 사항)'콘텐츠' → '대체 텍스트'에 이미지에 대한 설명(예: "내 여행 사진")을 입력하면 검색 엔진이 이미지의 콘텐츠를 이해하고 SEO를 개선하는 데 도움이 됩니다.

4단계: '버튼' 모듈 추가(안내 클릭)

버튼은 '자세히 보기', '문의하기', '지금 구매' 등의 조치를 취하도록 방문자를 안내하는 데 자주 사용됩니다.

1. 버튼 모듈 추가왼쪽의 '기본' 카테고리에서 '버튼' 모듈을 찾아 이미지 아래로 끌어다 놓습니다.
2. 버튼 콘텐츠 및 링크 설정오른쪽의 '콘텐츠'에서 버튼 모듈을 확인합니다:
   • 복사본버튼 텍스트(예: "내 글 보기")를 입력합니다.
   • 링크'동적' 옆의 입력 상자를 클릭하고 링크 주소(예: 블로그 롤 페이지 주소 또는 외부 링크)를 입력합니다.
     • 스테이션의 페이지에 링크하는 경우 입력 상자 오른쪽에 있는 '페이지 선택' 아이콘을 클릭하여 대상 페이지를 직접 선택할 수 있습니다.
3. 버튼 스타일 디자인하기'스타일' 탭으로 전환하여 눈길을 끄는 버튼을 만들 수 있습니다:
   • 색상'텍스트 색상'은 흰색을 선택하고 '배경 색상'은 밝은 색상(예: 페이지의 주 색상과 조화를 이루도록 파란색, 주황색)을 선택합니다.
   • 크기버튼을 클릭하기 쉽게 하려면 '버튼 크기'에서 '중간' 또는 '큰'을 선택합니다.
   • 지오메트리'테두리 반경'을 5~10px로 설정합니다(모서리가 약간 둥글수록 미적으로 더 보기 좋습니다).
   • ** hover 效果 **：点击「hover」选项卡，设置鼠标悬停时的颜色（如颜色加深），提升交互感。

5단계: 모듈 간격 조정(깔끔한 페이지를 위해)

여러 모듈을 추가한 후 간격을 너무 가깝게 또는 너무 멀리 두면 문제가 발생할 수 있으며 레이아웃을 조정해야 합니다:

1. 선택한 모듈: 모듈의 가장자리를 클릭합니다(파란색 테두리가 나타납니다).
2. 바깥쪽 여백 조정오른쪽 패널의 "고급" -> "여백"에서 모듈과 위쪽 및 아래쪽 요소 사이의 거리를 설정합니다(예: "상단 여백"을 30px로 설정하여 위쪽 모듈과의 간격을 늘림).
3. 라인업길게 누르기 Ctrl 키 (또는 Command 키) 여러 모듈을 동시에 선택하고 상단 도구 모음에서 '정렬' 버튼(예: '중앙 정렬')을 클릭하면 요소를 더 깔끔하게 정렬할 수 있습니다.

6단계: 저장 및 미리보기

1. 변경 사항 저장페이지 왼쪽 하단에 있는 '업데이트' 버튼을 클릭합니다(수정할 때마다 변경 사항을 저장하는 것이 좋습니다).
2. 미리보기 효과왼쪽 상단의 '미리보기' 버튼을 클릭하고 '데스크톱 미리보기', '태블릿 미리보기', '휴대폰 미리보기'를 선택하여 다양한 기기에서 표시 효과를 확인합니다(휴대폰에서 텍스트가 겹치지 않고 이미지가 왜곡되지 않는지 확인).

초보자를 위한 팁

• 모듈을 반복해서 추가할 수 있습니다. 단락이나 그림이 두 개 이상 필요한 경우 해당 모듈을 여러 번 직접 끌어다 놓을 수 있습니다.
• 모듈 삭제: 모듈을 선택한 후 키패드를 누릅니다. Delete 버튼을 클릭하거나 모듈 상단의 '휴지통' 아이콘을 클릭합니다.
• 모듈 복사: 모듈을 선택한 후 '복사' 아이콘을 클릭하면 동일한 스타일의 요소를 빠르게 복사할 수 있습니다(콘텐츠만 수정하면 됩니다).

위의 단계를 통해 Elementor의 핵심 모듈 추가 기술을 마스터했습니다. 다음으로 "아이콘", "디바이더", "목록" 및 기타 모듈을 추가하여 홈페이지를 더욱 풍성하게 만들 수 있습니다!