웹사이트 레이아웃을 최적화하는 방법을 알고 싶습니다. Elementor ?
웹사이트 성능 최적화는 웹사이트의 가장 중요한 측면 중 하나입니다. 사용자 경험. 로딩 속도가 느린 웹사이트는 사용자를 좌절시킬 수 있으며 종종 반송률 우리 사업의 성공에 부정적인 영향을 미칠 수 있습니다.
웹사이트의 성능은 큰 이미지 크기, 서버 구성, 너무 많은 플러그인 등과 같은 여러 요인의 영향을 받을 수 있습니다.
웹사이트 성능은 웹 제작자로서 우리의 가장 강력한 가치 중 하나입니다. 이것이 우리가 이 과정을 5개 부분으로 만든 이유입니다.
이제 최적의 기술을 사용하여 레이아웃과 게시물을 만드는 방법을 배울 수 있습니다. 이 지식은 웹 사이트에 필요하지 않은 중복 섹션, 열 또는 위젯이 포함되지 않도록 합니다. 또한 로딩 시간을 개선하기 위해 몇 가지 내장 위젯 기능을 살펴볼 것입니다.
이 튜토리얼을 마치면 모든 웹사이트의 성능을 최적화할 수 있습니다. Elementor 당신은 보상을 만들고 즉시 수확합니다.
1단원: 레이아웃 최적화 모범 사례
첫 번째 강의에서는 편집기에서 페이지와 게시물을 만드는 가장 효율적인 방법을 다룹니다. Elementor. 훨씬 적은 수의 요소를 사용하여 동일한 레이아웃을 얻을 수 있었음에도 불구하고 너무 많은 섹션, 열, 내부 섹션 및 위젯을 사용하는 경우를 종종 볼 수 있습니다.
과도한 양의 요소를 사용하면 웹 사이트 성능이 느려지므로 Elementor를 사용하여 가장 효율적인 방법으로 웹 사이트를 구축하는 방법에 대해 알아보겠습니다.
다음 주제를 다룰 것입니다.
- 올바른 페이지의 구조 자세히 살펴보기
- 웹사이트 성능 보기 및 테스트
- 머리글, 바닥글 및 페이지 콘텐츠 최적화
- 좋은 웹사이트 레이아웃 사례와 나쁜 웹사이트 레이아웃 사례
- 위젯, 위치 지정 및 전역 스타일의 올바른 사용
- 로드 지연을 방지하고 개선하기 위한 팁 SEO 그리고 로딩 시간을 늘려라
- 접근성 최적화
- DOM 요소의 양 줄이기
- 그리고 훨씬 더!
Elementor의 최적 레이아웃을 더 잘 이해하기 위해 섹션, 열 및 위젯의 일반적인 남용을 보여주는 Elementor 템플릿을 살펴보겠습니다. 이 강의가 끝나면 열과 위젯의 수를 줄여 이 전체 페이지를 완전히 다시 만들 것입니다. 초기 페이지는 31개의 섹션, 44개의 열, XNUMX개의 내부 섹션 및 XNUMX개의 위젯으로 구성됩니다.
튜토리얼이 끝나면 최적화된 페이지는 16개 섹션, XNUMX개 열 및 XNUMX개 위젯으로 축소됩니다.
우리는 무료, 빛을 사용할 것입니다 안녕하세요 테마템플릿의 각 섹션을 다시 만들고 모범 사례를 사용하여 웹 사이트의 전반적인 성능을 개선할 것입니다.
나쁜 관행에 대한 테스트
웹사이트 레이아웃 최적화에 대해 알아보기 전에 누군가가 우리 웹사이트를 방문할 때 어떤 일이 일어나는지 완전히 이해하기 위해 페이지에서 테스트를 실행해 보겠습니다. 모든 최적화가 완료되면 테스트를 반복하고 결과를 비교할 것입니다.
1단계: 시크릿 창에서 웹사이트 확인
- "시크릿 모드"에서 새 창을 열고 테스트할 웹 페이지의 URL을 입력합니다.
2단계: 직접 URL 경로를 사용 중인지 확인
페이지 링크가 확실하지 않은 경우 WP 대시보드로 이동하여 쉽게 찾을 수 있습니다.
- 웹사이트의 모든 페이지를 보려면 "페이지"를 클릭하십시오.
- 페이지 위에 커서를 놓고 "보기" 옵션을 클릭하십시오. 그러면 귀하의 페이지로 바로 이동합니다.
- 이 URL을 복사하여 시크릿 창에 붙여넣고 웹사이트가 로드되면 테스트할 준비가 된 것입니다!
성능 결과 테스트 및 보기
1단계: 성능 결과 테스트
과거에 Chrome 개발자 도구를 사용해 본 적이 있을 수 있습니다.
그렇지 않은 경우 페이지의 HTML 및 CSS 콘텐츠를 검사하고 표시하려면:
- 페이지의 아무 곳이나 마우스 오른쪽 버튼으로 클릭하고 "검사"를 선택하십시오. HTML 및 CSS를 읽고, 오류를 찾고, SEO 결과를 얻고, 다양한 테스트를 실행할 수 있는 여러 탭이 표시됩니다.
- 네트워크 탭을 선택하고 cmd 또는 ctrl + R 버튼을 눌러 결과를 로드합니다.
보시다시피, 현재 레이아웃은 2,88개의 요청을 로드하고 수행하는 데 81초가 걸립니다.
2단계: 성능 결과 보기
- Lighthouse 탭으로 전환하면 페이지에서 감사 보고서를 실행할 수 있습니다.
이렇게 하면 페이지의 현재 성능에 대한 자세한 정보가 제공됩니다.
- "보고서 생성"을 선택하십시오. 잠시 후 보고서가 표시됩니다.
우리는 현재 73/100의 성능 평가를 받고 있으며 확실히 작업할 수 있습니다.
이상적으로는 이 모든 숫자가 녹색이기를 바랍니다. 이제 페이지를 최적화하고 통계.
각 최적화 단계를 수행한 후 변경 사항에서 몇 가지 모범 사례를 취하고 향후 만들 웹 사이트를 위해 이를 염두에 둘 수 있습니다.
페이지 요소 최적화
1단계: 헤더 최적화
시작하자 헤더.
이 디자인에서 볼 수 있듯이 헤더는 세 개의 열로 만들어졌습니다.
첫 번째 열에서 로고는 두 개의 위젯으로 구성됩니다.
- Un 이미지 위젯 로고의 .png 이미지 파일을 표시합니다.
- 제목 위젯.
두 번째 열에서 헤더 메뉴는 탐색 메뉴 위젯으로 구성됩니다.
세 번째 열에는 다음이 포함됩니다.
- 내부 섹션 위젯(아이콘 위젯의 위치를 제어함).
- 헤더에 대한 연락처 정보
여기에서 섹션, 위젯 및 섹션의 수를 최소화하는 방법을 살펴보겠습니다.
2단계: 새 헤더 만들기
열 1:
- 1개의 열만 있는 1개의 섹션을 만듭니다.
- 추가 웹사이트 로고 위젯 섹션으로 끌어다 놓습니다.
이미지 모범 사례:
- 웹사이트의 각 이미지 파일에 미디어 라이브러리의 관련 제목과 대체 텍스트를 지정합니다.
이렇게 하면 페이지 접근성과 검색 엔진 순위가 향상됩니다. 원래 사용했던 로고에서 제목은 실제 이미지와 무관하며 대체 텍스트가 없습니다.
- 위젯 내부의 이미지 크기를 정의합니다.
이렇게 하면 이미지가 로드되기 전에 페이지를 적절한 공간으로 배치하여 레이아웃 지연(브라우저에서 측정한 요소)을 방지할 수 있습니다.
함께 작업 중인 예제에서 스타일 탭으로 이동하고 이미지 너비를 200px로 설정하여 이 문제를 해결합니다.
기둥 2
위젯 패널로 돌아가기:
- 로고 아래 탐색 메뉴 위젯을 끌어다 놓습니다.
- 포인터를 "없음"으로 설정
- "스타일" 탭으로 이동하여 원하는 글꼴을 추가합니다(이전 디자인과 일치하도록).
전체 스타일링을 위한 모범 사례:
- 여러 굵기(전역 글꼴).
- 색상 선택기를 사용하여 각 항목에 대해 다른 색상을 선택하지 마십시오(글로벌 색상).
- 더 적은 수의 쿼리(전체 글꼴)를 생성하여 웹사이트 로딩 속도를 향상시키십시오.
- 불필요한 코드를 두 번 반복합니다(전체 색상).
- 모델의 일관성과 제어를 유지하십시오(전체 스타일).
전역 글꼴:
이것은 전역 글꼴 기능을 사용하여 수행할 수 있습니다.
- "스타일" 탭으로 이동하여 원하는 글꼴을 선택하여(이전 디자인과 일치하도록) 추가하고 약간 변경한 다음 더하기 아이콘 위로 마우스를 가져갑니다.
- 더하기 아이콘을 클릭하고 필요한 글꼴 모음을 선택하십시오.
- 템플릿에서 사용할 스타일을 전역 글꼴로 저장
그런 다음 생성하는 모든 위젯에서 이 스타일을 사용할 수 있습니다.
전체 색상:
전체 색상에 동일한 방법을 사용할 수 있습니다.
- "글로벌"을 클릭하십시오.
- 색상 선택기 위로 마우스를 가져간 다음 클릭합니다.
- 색상을 선택하고 더하기 아이콘을 가리킵니다.
- "글로벌" 클릭 >> "주체" 선택
이 작업을 수행하면 색상이 템플릿의 색상 팔레트에 저장되므로 항목이나 위젯에 필요할 때마다 전역 색상 목록에서 선택할 수 있습니다.
헤더를 계속 진행하기 전에 수직 패딩을 XNUMX으로 설정하겠습니다.
3단계: 헤더 편집
3 열
- "위젯" 패널로 이동합니다.
- 메뉴 아래에 있는 아이콘 목록 위젯을 드래그하세요.
- 추가 목록 항목 제거
- 텍스트 추가
- 원하는 아이콘을 선택하십시오
- "스타일" 탭으로 이동
- 선택한 전체 색상과 글꼴을 정의합니다.
이제 한 가지 더 수정해야 합니다. 세 개의 헤더 요소가 현재 스택되어 있고 서로 정렬되어 있지 않습니다. 열의 모든 공간을 차지하지 않도록 각 요소의 너비를 실제 크기로 변경하여 이 문제를 해결할 수 있습니다.
이 문제를 해결하려면 다음을 수행하십시오.
- 사이트 로고 위젯 >> '고급' 탭 선택
- "Positioning"을 선택하고 너비를 "Inline"으로 설정합니다.
탐색 메뉴 위젯과 아이콘 목록 위젯에 대해 이 단계를 정확히 반복합니다.
이제 모든 헤더 요소가 일렬로 배치되었으므로 올바르게 배치하는 일만 남습니다.
인라인 요소로 열 위치 정의
- 열 선택 >> "레이아웃" 탭으로 이동
- "수직 정렬"에서 "하단"을 선택하십시오.
- "가로 정렬에서" "사이 간격" 선택
"사이 간격" 정렬을 선택하면 첫 번째 위젯과 마지막 위젯이 양쪽 끝에 배치되어 다른 모든 위젯 사이에 동일한 간격이 주어집니다.
그러나 첫 번째 위젯과 마지막 위젯의 너비가 다르기 때문에 동일한 공간이 항상 내부 위젯의 중앙에 있는 것은 아닙니다.
여백을 조정하여 이 문제를 해결할 수 있습니다.
- 탐색 메뉴 위젯 >> "고급" 탭 선택
- 여백을 그룹 해제하고 음수 값으로 간격을 제거합니다.
4단계: 헤더를 반응형으로 만들기
이제 우리 웹사이트의 현재 버전이 모바일 장치에서 어떻게 보이는지 봅시다.
모바일 응답성 모범 사례:
- 페이지 속도에 영향을 미치는 두 배의 코드를 사용하지 않도록 디자인을 단순화하고 동일한 섹션을 반응형으로 만드는 방법을 생각하십시오.
이 헤더에서 볼 수 있듯이 태블릿 및 모바일 장치용으로 특별히 재설계된 동일한 섹션을 보는 것이 일반적입니다. 이것이 우리가 여기서 볼 수 있는 것입니다. 두 가지 버전의 디자인이 생성되었습니다. 하나는 데스크톱용 버전이고 다른 하나는 모바일용입니다.
대신 디자인과 코드가 반응형이면 코드를 덜 사용하기 때문에 페이지 속도가 향상됩니다.
위젯과 요소에 대한 "사용자 정의 너비" 설정을 사용하여 이를 달성하는 방법을 살펴보겠습니다.
태블릿의 사용자 정의 너비 설정
- '내비 메뉴' >> '고급' 탭을 클릭합니다.
- "위치 지정" 선택 >> 너비를 "사용자 지정"으로 설정합니다.
- "%" 선택 >> 위젯 주변의 빈 공간과 동일한 너비(백분율)를 지정합니다.
- "콘텐츠" 탭 >> "정렬 토글"을 클릭하고 >> "오른쪽"을 선택합니다.
이렇게 하면 위젯 너비 내에서 토글 메뉴를 정렬할 수 있습니다.
이제 토글 메뉴 사용자 정의를 마치겠습니다.
- "콘텐츠" >> "전체 너비" 토글을 클릭하고 "예"로 설정합니다.
- "스타일" >> "색상 선택기" 막대를 왼쪽으로 끝까지 끌어 배경을 제거합니다.
이제 모바일 화면에서 어떻게 보이는지 봅시다.
모바일 사용자 정의 너비 정의
이 시나리오에서는 뷰포트 내부에 세 개의 헤더 위젯을 유지합니다. 그러나 일부 웹사이트의 경우 모바일이나 태블릿에서 볼 때 헤더에서 특정 요소를 생략하는 것이 더 합리적일 수 있습니다.
이 경우 모바일에 표시될 때 헤더에 발생하는 일은 탐색 메뉴와 로고 위젯이 한 행에 들어갈 수 없다는 것입니다.
이 문제를 해결하려면 다음을 수행하십시오.
탐색 메뉴의 위치 지정
- "탐색 메뉴" >> 탭 "고급"을 클릭합니다.
- "위치 지정" 선택 >> 너비를 "사용자 지정"으로 설정
- "%" 선택 >> 위젯 너비를 30%로 지정하여 로고 옆에 맞도록 합니다.
아이콘 목록의 위치
- "아이콘 목록" >> '' 고급 ' 탭을 클릭하십시오.
- "채우기" 선택 >> 값 그룹 해제
- "TOP"에 12px 패딩 추가
당신은 믿을 수 있습니까?
원래 사용된 헤더 2개의 섹션, 12개의 위젯 및 10개의 열. 이제 헤더는 다음을 사용합니다. 섹션 1개, 위젯 3개 및 열 1개.
그리고 결과는 동일합니다!
5단계: 영웅 섹션 최적화
웹사이트의 다음 섹션인 영웅 섹션으로 이동해 보겠습니다.
영웅 섹션에 대한 모범 사례:
- 특히 배경 이미지가 있는 경우 영웅 섹션 텍스트가 쉽게 보이는지 확인하십시오.
열에서 위젯의 위치 제어
Elementor 편집기에서 흔히 볼 수 있는 실수는 추가 열과 공백을 사용하여 위젯의 위치를 제어하는 것입니다.
우리의 예시 모델에서, 영웅 이미지 배경 이미지가 있는 섹션으로 구성됩니다. 제목과 텍스트는 두 개의 열을 사용하여 가로로 배치됩니다. 또한 섹션 내부에 요소를 수직으로 간격을 두는 스페이서가 있습니다.
하나의 섹션으로 동일한 디자인을 만드는 방법을 살펴보겠습니다.
- 텍스트 오른쪽에 있는 추가 열을 삭제합니다.
- 스페이서를 제거하십시오.
대신 영웅 텍스트를 원하는 위치에 배치하기 위해 열 정렬 옵션을 사용합니다.
- 열을 선택합니다.
- "수직 정렬"을 "중간"으로 설정합니다.
- "고급" 탭으로 이동합니다.
- "채우기" 선택 >> 값 그룹 해제
- 오른쪽 패딩을 50%로 설정합니다.
- 섹션을 선택합니다.
- "최소 높이"를 선택하고 >> 80으로 설정합니다.
텍스트와 배경의 대비 고정
모든 웹사이트는 텍스트와 배경이 잘 대조되도록 하는 것이 중요합니다. 읽을 수 없는 정보는 웹사이트 점수에 영향을 미치며 방문자를 멀어지게 할 수도 있습니다. 어느 쪽이든, 텍스트는 항상 명확하게 읽을 수 있어야 합니다.
배경이 컬러 이미지인 섹션의 선명도를 향상시키는 몇 가지 방법이 있습니다(이 템플릿에서 볼 수 있듯이).
- 헤더를 클릭합니다.
- "스타일" 탭으로 이동 >> "텍스트 그림자"를 선택합니다.
이렇게 하면 배경 이미지에서 텍스트가 눈에 띄게 만들어 가독성이 향상됩니다.
텍스트를 더 명확하게 만드는 또 다른 방법은 오버레이를 사용하는 것입니다.
- 섹션 >> '스타일' 탭 >> '배경 오버레이' 선택
- 전체 색상 중 하나를 선택하고 원하는 결과를 얻을 때까지 불투명도를 조정하십시오.
6단계: 아이콘 상자로 섹션 최적화
이제 다음 섹션으로 넘어가겠습니다. 현재 XNUMX개의 열이 있는 내부 섹션이 있습니다. 현재 각 열에는 이미지 위젯, 제목 위젯 및 텍스트 편집기 위젯의 세 가지 위젯이 포함되어 있습니다.
이 섹션을 단순화하여 성능을 향상시키는 방법을 살펴보겠습니다.
아이콘 영역의 내용
- 위젯 메뉴에서 »위젯 아이콘 상자« 버튼을 선택하고 열로 드래그하십시오.
- "아이콘 상자"를 선택하십시오
- 아이콘 이미지를 가리킵니다.
- "SVG 다운로드" 선택 **
- 사용자 정의 아이콘 삽입
** 참고: 배지는 SVG 파일입니다. 그렇지 않은 경우 WordPress 대시보드로 이동한 다음 Elementor >> 설정으로 이동합니다. 필터링되지 않은 파일 다운로드 활성화를 활성화해야 합니다.
- "제목"을 입력하십시오
- "설명"을 입력하십시오
- "스타일" 선택 >> 전체 색상 선택
- "크기"를 선택하고 막대를 원하는 크기로 끕니다.
- "패딩"을 선택하고 막대를 원하는 번호로 드래그하십시오.
8단계: "서비스" 섹션 최적화
이제 현재 두 개의 열, 두 개의 이미지, 제목 위젯 및 텍스트 편집기 위젯을 사용하는 "서비스" 섹션을 다시 작성합니다.
새 섹션에서 동일한 디자인을 만들어 보겠습니다. 단 하나의 열만 사용합니다.
- 열이 있는 새 섹션 만들기
- "레이아웃" >>에서 "콘텐츠 너비"를 "전체 너비"로 설정합니다.
- 위젯 패널에서 "위젯 이미지 상자"를 선택하고 열로 드래그하십시오.
(섹션의 모든 자산을 이 위젯에 통합할 수 있습니다)
- 제목 입력
- 설명 입력
이미지의 경우 이미지에 사용한 현재 디자인을 유지합니다.
- 미디어 라이브러리에서 동일한 이미지 삽입
- "콘텐츠" 탭으로 이동 >> "이미지 위치"를 "오른쪽"으로 설정
- "스타일" 탭으로 이동
- 요소 사이의 간격 늘리기
- 이미지의 "너비" 늘리기
- '콘텐츠' 섹션 확장
- "중앙" 정렬을 선택하십시오
- "수직 정렬"을 "중간"으로 설정하십시오.
- 선택한 전체 색상과 글꼴을 정의합니다.
- "고급" 탭으로 이동
- 위젯에 10% 채우기 추가
이제 서비스 섹션의 디자인은 동일하지만 자산이 더 적습니다.
9단계: 클릭 유도문안 섹션 최적화
CTA 링크에 대한 모범 사례:
- 모든 소셜 미디어 링크가 제대로 작동하고 버튼에 링크가 포함되어 있는지 확인하십시오.
- 다른 웹사이트에 대한 링크를 추가할 때 "rel | noopener" 속성을 포함하십시오.
(톱니바퀴 아이콘을 클릭하고 "사용자 정의 속성"에 속성을 입력하면 됩니다.) 그러면 새 브라우저 탭에서 링크가 열리고 성능 점수가 높아집니다.
다음 섹션에서는 당사 서비스에 대한 행동 촉구를 제시합니다.
섹션에는 현재 다음을 포함하는 두 개의 열이 있습니다.
- 스페이서가 있는 배경 이미지
- 두 개의 헤더, 내부 섹션, 텍스트 편집기 및 버튼
새 섹션에서 동일한 디자인을 만들어 보겠습니다. 단 하나의 열만 사용합니다.
- "레이아웃" 탭으로 이동 >> "콘텐츠 너비"를 "전체 너비"로 설정
- "고급" 탭으로 이동 >> 추가 채우기 제거
- 위젯 패널에서 "클릭 유도문안 위젯"을 선택하고 열로 드래그하십시오.
- "이미지 위치"를 "왼쪽"으로 설정
- 미디어 라이브러리에서 이미지 선택
- '콘텐츠' 섹션 확장
- 헤더를 입력하세요
- 설명 입력
- 버튼 텍스트 입력
- "스타일" 탭으로 이동
- 요소 사이에 "패딩" 추가
- 이미지 너비 조정
- '콘텐츠' 섹션 확장
- 제목의 전역 글꼴 선택
- 설명과 버튼 사이의 간격 늘리기
- 각 리소스에 적합한 전체 색상 선택
- "버튼"섹션 확장
- 크기를 "Large"로 설정하십시오.
- 배경색 및 테두리 반경과 같은 필요에 따라 사용자 정의
지금까지 2개의 위젯이 있는 6열 섹션이었습니다. 이제 위젯이 1개만 있는 1열 섹션입니다!
10단계: 이미지 캐러셀 최적화
이미지 캐러셀 섹션의 현재 디자인에는 여러 이미지를 표시하는 방식에 일반적인 실수가 있습니다.
이 디자인은 5개의 열로 구성되어 있으며 많은 사용자가 이미지 크기를 제어하기 위해 수행하는 경향이 있습니다.
웹사이트 성능을 최적화할 수 있는 더 간단한 방법을 살펴보겠습니다.
- 열이 1개인 새 섹션 만들기
- "레이아웃" 탭으로 이동 >> "콘텐츠 너비"를 "전체 너비"로 설정
- 위젯 패널에서 »Image Carousel Widget« 버튼을 선택하고 열로 드래그하십시오.
- 미디어 라이브러리에서 원하는 이미지 추가
- "콘텐츠" 탭으로 이동
- "이미지 크기"를 "중간 - 300 x 300"으로 설정하십시오.
- 기본 설정에 따라 "슬라이드 표시", "슬라이드 스크롤" 및 "내비게이션" 조정
- "스타일" 탭으로 이동
- "수직 정렬"을 "중앙"으로 설정하십시오.
- "간격" 사용자 지정
- "고급" 탭으로 이동
- 필요한 충전물을 추가하십시오
한때 5열 섹션이었던 것은 이제 1열만입니다.
다음 섹션으로 이동하여 웹사이트에서 비디오를 최적화할 수 있습니다.
11단계: 비디오 섹션 최적화
동영상 콘텐츠 모범 사례:
- 웹 사이트의 로딩 시간을 개선하기 위해 가능한 한 Lazy Load를 사용하십시오.
"Lazy Load" 옵션을 적용하면 어떻게 됩니까?
기술적으로 말하면 비디오 임베드 코드는 정적 이미지로 대체됩니다. 이렇게 하면 사용자가 이미지를 클릭할 때만 동영상이 로드됩니다. 이는 페이지 로드 시간에 큰 도움이 됩니다.
이제 비디오 위젯을 사용하는 방식을 변경하여 페이지 속도나 웹사이트 성능이 지연되지 않도록 할 것입니다.
- "비디오 위젯"을 선택하십시오.
- "스타일" 탭으로 이동
- "지연 로드"를 선택하십시오.
12단계: 바닥글 최적화 및 업데이트 유지
많은 웹사이트에서 흔히 볼 수 있는 실수는 바닥글이 날짜와 설명에 여러 헤더를 사용하고 저작권 기호 아이콘을 사용한다는 것입니다.
바닥글을 최적화하고 항상 최신 상태로 유지하는 방법을 살펴보겠습니다.
우리는 다음을 사용하여 이 지속적인 업데이트 프로세스를 구성할 것입니다. 동적 태그. 이렇게 하면 동적 태그가 자동으로 현재 연도로 업데이트되므로 매년 헤더 내용을 변경할 필요가 없습니다.
이를 위해 다음과 같이 진행합니다.
- Title 위젯만 남기고 추가 위젯을 제거합니다.
- 제목 위젯 선택
- "제목" 필드("상위 버튼"이라고도 함) 오른쪽에 있는 "동적 태그" 기호를 클릭합니다.
- 드롭다운 메뉴에서 "현재 날짜 및 시간" 메뉴 항목을 선택합니다.
- 키의 상위 아이콘을 클릭하십시오.
- "날짜 형식" 탭을 클릭하고 "사용자 지정" 메뉴 항목을 선택합니다.
- "Y"를 제외하고 현재 "사용자 지정 형식" 필드에 있는 것을 삭제합니다.
- "고급" 탭을 선택하십시오
- "Forward" 필드를 강조 표시하고 "option" 및 "G" 키를 동시에(또는 "control", alt "및" C "동시에) 눌러" © "symbol.
- "©" 뒤에 공백 추가
- "이후" 필드 선택
- 공백을 입력하고 "All rights reserved"와 같이 연도 이후에 표시할 텍스트를 작성합니다.
이 자습서의 예제 웹 사이트에서 각 위젯에는 고유한 섹션이 있습니다. 튜토리얼을 더 명확하고 따라하기 쉽도록 하기 위해 이 작업을 수행했습니다.
이상적으로는 섹션이 적을수록 추가 HTML 코드가 줄어듭니다.
위 섹션에서 일부 위젯을 드래그 앤 드롭한 다음 빈 섹션을 삭제하여 동일한 섹션에 있는 일부 위젯을 병합할 수 있습니다.
그게 다야 레이아웃이 최적화되었습니다!
새로운 웹사이트 성능 평가
DevTools(Inspector) 창에서 결과를 확인합니다.
- "네트워크" 탭을 선택합니다.
여기에 몇 가지 멋지고 긍정적인 변화가 있습니다.
- 이제 웹 사이트를 로드하는 데 568밀리초가 걸립니다.
- 81개 요청에서 46개로 늘어났습니다.
- "Lighthouse" 탭을 선택하면 성능 점수가 73에서 98로 증가한 것을 볼 수 있습니다.
타사 플러그인을 사용하지 않고 성능을 최적화했습니다. 간단한 조정과 모범 사례만 있으면 됩니다.
13단계: 모션 효과로 결과 테스트
우리는 사이트를 더 상호작용적이고 재미있게 만들고 싶지만 그것이 성능 점수에 어떤 영향을 미칠까요? 우리가 할 수 있는 일을 봅시다.
헤더를 "고정" 요소로 만듭니다.
- 헤더 선택
- "고급" 탭으로 이동
- "모션 효과" 탭 확장
- "고정"옵션을 "상단"으로 설정하십시오.
영웅 섹션을 "고정" 요소로 만듭니다.
- 영웅 섹션 선택
- "스타일" 탭으로 이동
- "첨부" 드롭다운 목록을 선택하고 "고정"을 선택합니다.
사용하십시오 입장 애니메이션 영웅의 텍스트(헤더):
- 헤더 위젯 선택
- "고급" 탭으로 이동
- "모션 효과" 탭 확장
- 입력 애니메이션을 선택하고 "페이드 인"으로 설정합니다.
영웅의 텍스트 설명에 입력 애니메이션 사용(텍스트 편집기 위젯):
- 텍스트 편집기 위젯 선택
- "고급" 탭으로 이동
- "모션 효과" 탭 확장
- "입력 애니메이션"을 선택하고 "페이드 인"으로 설정하십시오.
페이지가 로드될 때 미묘한 효과를 위해 뒤에 오는 위젯에 대해서도 동일한 작업을 수행합니다.
이제 성능 테스트를 다시 실행하여 모션 효과가 점수에 어떤 영향을 미치는지 살펴보겠습니다.
- "검사기" 창으로 돌아가기
- "등대" 탭을 선택하십시오
- "보고서 생성"을 클릭하십시오.
이제 성능 점수가 97로 감소했음을 알 수 있습니다. 이것은 확실히 큰 차이가 아니며 웹 사이트를 더 흥미롭고 재미있게 만듭니다.
우리의 새로운 성과 점수를 믿을 수 있습니까?
이제 귀하가 만드는 모든 Elementor 웹사이트에서 성능 점수를 높일 수 있는 완벽한 준비를 갖추게 된 것을 기쁘게 생각합니다. 웹 사이트 구축 목표와 비즈니스 성공에 큰 차이를 만들 것입니다.
나중에 참조할 수 있도록 이 자습서를 북마크에 추가하여 웹 사이트 페이지의 성능을 검사하고 레이아웃을 최적화하기 위한 모범 사례를 적용할 수 있습니다.
이것은 시작에 불과합니다. 이 과정의 다음 부분은이미지 최적화.
자습서에서는 샘플 웹 사이트의 각 이미지를 살펴보고 더 효율적인 로드 시간을 위해 이미지를 개선하는 방법을 배웁니다.
지금 Elementor Pro를 받으세요!
결론
그래서 ! Elementor를 사용하여 웹사이트 레이아웃을 최적화하는 방법을 보여주는 이 기사는 여기까지입니다. 가는 방법에 대해 우려 사항이 있는 경우 내부에 알려주십시오. commentaires.
그러나 상담 할 수도 있습니다 우리의 자원, 인터넷 사이트 제작 프로젝트를 수행하는 데 더 많은 요소가 필요하면 워드 프레스 블로그 제작 또는 Divi : 역대 최고의 워드 프레스 테마.
그러나 그동안, 이 기사를 다른 소셜 네트워크에서 공유하십시오.
...
