Elementor의 새로운 주요 업데이트가 출시되었습니다. 버전 2.x에서 버전 3.0으로 이동했습니다 . 이 새 버전에는 WordPress 및 Elementor를 사용하여 웹사이트를 만드는 새로운 방법이 포함되어 있습니다. 우리는 이러한 새로운 기능을 변환하려고 노력할 것입니다.
Elementor 3.0의 주요 추가 사항은 무엇입니까?
Elementor 3.0에는 디자인 시스템 기능, 새로운 테마 빌더 및 상당한 성능 개선과 같은 3가지 주요 추가 사항이 있습니다.
디자인 시스템 기능
큰 회사가 어떤 플랫폼에 있든 그렇게 잘 수행하기 위해 어떻게 하는지 궁금해 한 적이 있습니까? 그들이 만드는 모든 것은 일관성이 있고 동일한 디자인을 가지고 있습니다. 그것은 " 디자인 시스템 "이라는 이름 덕분에 가능합니다. UnxDesign.cc에 따르면 디자인 시스템은 다음과 같습니다.
팀이 제품을 설계, 실현 및 개발할 수 있도록 하는 모든 요소를 그룹화하는 단일 소스입니다. 따라서 디자인 시스템 은 결과물이 아니라 결과물의 집합입니다. 제품, 도구 및 새로운 기술과 함께 끊임없이 진화할 것입니다.
UX Collective
디자인 시스템을 구현하여 전체 팀을 하나의 디자인 언어로 일관되게 유지하고 팀 작업 방식을 혁신하고 더 빠른 워크플로를 보장합니다.
놀라운 웹사이트 만들기
최고의 무료 페이지 빌더 Elementor와 함께
지금 시작Elementor 3.0의 디자인 시스템 기능은 다음과 같습니다.
- 글로벌 색상
- 새 사이트 설정 패널
- 글로벌 글꼴
이것이 어떻게 더 나은 전문 웹사이트를 구축하는 데 도움이 되는지 자세히 살펴보겠습니다.
글로벌 색상
Elementor 3.0은 사이트 색상으로 작업하는 새로운 방법을 추가합니다. 이 새로운 방법의 이름은 전역 색상입니다.
전역 색상을 사용하면 한 위치에서 색상을 변경하고 사용되는 모든 곳에서 해당 색상을 업데이트할 수 있습니다.
웹 사이트의 기본 전역 색상 을 선택하기 시작합니다. 그런 다음 Elementor의 색상 스타일로 이동하여 4가지 색상 중 하나로 정의합니다. 전체 목록 에 사용자 정의 색상을 원하는 만큼 추가할 수 있습니다.
이제 CSS 변수가 들어옵니다. Global Colors 로 돌아가서 색상 중 하나를 변경합니다. 전체 사이트의 색 구성표는 새로운 글로벌 색상에 따라 변경됩니다. 더 쉬운 일을 경험한 적이 있습니까?
또한 컨트롤 입력 내에서 다른 전역 색상을 디자인하거나 새로운 전역 색상을 생성할 수 있습니다. 이 모두는 컨트롤 입력 내에서 동일한 색상 선택기를 사용합니다.
사이트 설정
웹 사이트의 첫 번째 디자인 설정을 만드는 데 많은 시간이 소요됩니다. 테마 코드, Customizer, functions.php 사이를 저글링해야 합니다. 그것은 당신의 두통을 정당화하기에 충분한 이유입니다.
새로운 사이트 설정은 다양한 구성 도구를 보여줍니다. 그렇게 하면 이 모든 작업을 한 곳에서 계속 수행할 수 있습니다.
시작하려면 Elementor로 편집하는 페이지 내에서 왼쪽 패널에서 왼쪽 상단 아이콘을 클릭하십시오. 그러면 전역 설정 패널로 전환됩니다.
해당 전역 설정 패널 내에서 다음을 찾을 수 있습니다.
- 레이아웃: 기본 콘텐츠 너비 또는 기본 페이지 레이아웃과 같은 Elementor의 기본 레이아웃 설정을 구성합니다.
- 사이트 ID: 로고, 제목, 태그라인 및 Favicon과 같은 교차 사이트 ID를 사용자 정의합니다.
- 테마 스타일: 타이포그래피, 버튼 및 양식 필드에 대해 Elementor(일반적으로 테마로 설정)와 관련이 없는 HTML 요소를 사용자 정의합니다.
- Lightbox: Elementor Lightbox의 기본 스타일 정의
- 전체 색상 및 글꼴: 웹 사이트에 적용되는 전체 색상 및 글꼴을 구성할 수 있습니다.
글로벌 글꼴
색상과 타이포그래피는 모든 웹사이트의 구성 요소 중 일부입니다. Global Colors 기능과 동일한 논리를 사용하여 사이트의 텍스트 스타일로 작업하는 새로운 방법입니다.
전역 글꼴을 사용하면 모든 타이포그래피 설정을 전역적으로 적용할 수 있습니다. 이제 글꼴군, 글꼴 크기 및 크기, 글꼴 두께, 글꼴 변형, 글꼴 스타일, 글꼴 장식, 줄 높이, 문자 간격, 반응형 설정을 포함하여 모든 사이트 타이포그래피 설정을 전역적으로 설정할 수 있습니다. 또한 텍스트가 포함된 모든 위젯에 이러한 설정을 지정하고 고유한 전역 글꼴을 사용자 지정할 수 있습니다.
타이포그래피를 올바르게 디자인하면 이러한 변경 사항을 전역적으로 적용할 수 있습니다.
전체 사이트를 한 곳에서 시각화 및 정리
잘 알려진 테마 빌더 가 웹사이트 디자인에 대한 전체 개요를 제공한다는 면에서 업계 리더가 되었지만 이 새로운 UI는 한 단계 더 나아갑니다. 새로운 테마 빌더는 이제 매우 직관적인 방식으로 전체 웹사이트에 대한 개요를 제공합니다.
해당 테마 빌더는 헤더, 바닥글, 글로벌 페이지 템플릿, 글로벌 포스트 템플릿 등 모든 사이트 부분을 포함하는 사이트에 대한 개요를 제공합니다. 사이트의 모든 부분을 미리 볼 수 있으므로 전체 웹 사이트를 훨씬 쉽게 디자인할 수 있습니다.
성능 향상
애플리케이션이 성장하는 동안 개발자가 성능에 신경을 써야 하는 것은 분명합니다. Elementor 3.0에 대한 업데이트는 뛰어난 코드 인프라를 보장하기 위해 수행되어 놀라운 성능 향상을 가져왔습니다.
DOM 요소 제거가 많이 있어 Elementor가 더 빠르게 렌더링됩니다. 이렇게 하면 페이지 속도 순위와 웹사이트 사용자의 전반적인 경험이 확실히 향상됩니다.
구체적으로, 페이지 속도 측면에서 무엇이 변경되었습니까?
Elementor 3.0은 서버 측 렌더링 프로세스와 Elementor가 동적 CSS 값을 렌더링하는 방식을 크게 개선했습니다. 이를 통해 웹사이트 전체에 동적 요소와 값을 통합할 수 있습니다. 예를 들어 사이트 게시물에 대한 템플릿을 만들고 각 게시물의 추천 이미지를 게시물 제목 뒤에 배경으로 표시하도록 결정할 수 있습니다.
백그라운드에서 Elementor는 브라우저로 보낼 게시물을 준비할 때 게시물을 구문 분석하여 동적 값을 검색하고 CSS 값이 포함된 경우 해당 CSS를 인쇄합니다.
Elementor 3.0을 사용하면 이 프로세스에 소요되는 시간이 상당히 단축되었습니다. 각 게시물에 대해 저장된 동적 값 덕분입니다. 해당 목록이 저장되면 누군가 게시물을 방문할 때마다 Elementor가 이 목록으로 바로 이동하므로 프로세스가 더 빨라집니다. 이 최적화의 영향을 받는 동적 값에는 배경 이미지, 색상 등이 포함됩니다. 이러한 개선은 서버 부하를 눈에 띄게 감소시킵니다.
Elementor 3.0 업데이트 요약
위에서 언급했듯이 이 버전에는 일상 업무에 진정으로 영향을 미치는 흥미로운 기능이 포함되어 있습니다. 우리는 겪었습니다:
보다 일관되고 효율적으로 작업하는 데 도움이 되는 디자인 시스템 기능 .
새로운 테마 빌더 는 웹사이트의 모든 부분을 한 곳에서 관리할 수 있는 강력한 시각적 도구입니다.
성능 향상 Â 더 나은 사용자 경험을 제공합니다.
Elementor 3.0은 확실히 당신을 전문 웹 제작자로 이끌어 줄 것입니다. 아직 업그레이드하지 않았다면 지금 Elementor Pro로 업그레이드하십시오. 또한 Elementor가 WordPress에서 최고의 무료 페이지 빌더인 이유를 설명하는 게시물을 읽는 것도 고려해야 합니다.
