반응형 배경 이미지 만들기 & Elementor에서 더 보기

Rifat Jun 17, 2022

사용자 경험을 향상시키기 위해 Elementor 는 배경 그래픽에 대한 모바일 제어, 디버깅을 위한 안전 모드 등과 같은 새로운 기능을 제공합니다.

Elementor 는 항상 모바일 장치용으로 설계할 수 있다는 자부심을 가지고 있습니다. Elementor 사용자의 경우 배경 그림 위치를 정확하게 맞추는 것이 여전히 문제였습니다. 웹 개발자는 종종 다음과 같은 문제에 직면할 수 있습니다. 개의 얼굴을 보여주고 싶지만 모바일에서는 꼬리만 표시합니다.

Elementor 의 반응형 배경 이미지 컨트롤을 사용하면 모든 장치의 크기와 해상도에 맞는 배경 이미지를 만들 수 있습니다.

반응형 배경 이미지 컨트롤

최신 Elementor 버전 을 통해 고객은 데스크톱, 태블릿 및 모바일 배경 이미지 제어를 포괄적으로 제어할 수 있습니다. 이 컨트롤에는 배경 이미지 컨트롤이 포함됩니다(이미지, 위치, 첨부 파일, 반복 및 크기).

놀라운 웹사이트 만들기

최고의 무료 페이지 빌더 Elementor와 함께

지금 시작

사상 최초로 개별 장치의 위치를 ​​사용자 지정할 수 있습니다. 모바일 장치의 경우 'center-top'을 선택하고 데스크톱의 경우 'center-center'를 선택하여 모든 플랫폼에서 이미지가 균일하게 표시되도록 합니다. 각 장치에 대해 다른 크기를 선택할 수 있습니다. 모바일의 경우 데스크탑의 경우 "포함"을 선택하고 "커버"를 선택합니다.

이것은 많은 사람들에게 중요한 문제였기 때문에 많은 사람들이 이 새로운 기능을 좋아할 것이라고 확신합니다.

Elementor 는 각 개별 장치에 대해 완전히 다른 그림을 설정할 수 있는 기능을 제공합니다. 첫 번째 추가 반응형 컨트롤은 장치별 크기와 위치의 형태로 제공되었습니다. 크기와 위치를 조정할 수 있어 한 단계 더 나아가 더욱 유연한 디자인 경험을 제공합니다.

사용자 정의 배경 이미지 크기 & 위치

이전에는 배경 이미지의 크기를 설정하는 옵션이 자동, 표지 또는 포함의 세 가지뿐이었습니다. '왼쪽 상단'과 유사하게 일반적인 배경 이미지 배치만 지정할 수 있습니다.

배경의 크기와 위치는 이제 앞으로 사용할 수 있는 두 가지 새로운 사용자 지정 컨트롤입니다.

사용자 정의 배경 위치를 사용하면 배경 이미지의 정확한 X축 및 Y축 좌표를 선택할 수 있습니다. 결과적으로 이제 페이지 배경을 정확하게 정렬할 수 있습니다.

사용자 정의 배경 크기도 가능합니다. 배경 이미지의 너비를 픽셀 단위의 정확한 값으로 설정합니다.

반응형 디자인의 경우 이러한 설정—특히 사용자 정의 배경 크기 및 위치—가 중요합니다. 데스크탑, 태블릿 및 모바일 플랫폼의 경우 이러한 사용자 정의 설정을 사용하여 이미지의 주요 초점에 특정 초점을 설정합니다.

반응형 테두리 제어

또한 이제 배경 이미지 외에도 각 장치의 테두리 반경과 너비를 개별적으로 사용자 지정할 수 있습니다.

열 테두리는 링크 행이 열 테두리로 분할되는 경우와 같이 다양한 방법으로 사용할 수 있습니다. 행이 더 이상 인라인이 아니고 각 링크가 자체 행에 배치되기 때문에 모바일에서는 필요하지 않습니다.

이 상황에서 모바일 레이아웃의 테두리를 제거하는 것은 쉬운 일이 아닙니다. 새로운 동적 경계 기능을 사용하면 간단하게 수행할 수 있습니다.

모바일 장치에 더 이상 "고아 테두리"가 없습니다!

문제 해결을 위한 안전 모드

Elementor 는 모든 고객에게 원활하고 버그 없는 경험을 제공하기 위해 최선을 다하고 있습니다. 선택할 수 있는 플러그인과 테마는 수만 가지이며 서로 작동하게 하는 방법은 무한합니다. Elementor의 관련 여부와 관계없이 이러한 조합은 분쟁으로 이어질 수 있습니다.

Elementor 는 항상 사용자의 작업 프로세스에서 마찰을 줄여 작업을 더 쉽게 만들 수 있는 방법을 찾고 있습니다.

사람들이 편집기를 열 수 없는 것은 일반적인 문제입니다. 이 문제에 대해 많은 이름이 지정되었습니다. 빈 화면이 표시되고 편집할 수 없으며 컴퓨터에서 로딩이 멈춥니다…

안전 모드가 답입니다!

Windows가 처음 나왔을 때 다양한 문제를 해결하는 데 사용할 수 있는 안전 모드 기능이 포함되어 있었습니다. Elementor는 자체적으로 유사한 솔루션을 개발했습니다.

로드를 거부하는 페이지를 만날 때마다 버튼을 클릭하여 '안전 모드'를 활성화할 수 있습니다.

Elementor 및 WordPress는 문제를 일으킬 수 있는 모든 테마 또는 플러그인으로부터 "안전 모드"로 보호됩니다.

80% 이상의 로딩 문제는 안전 모드에서 일시적으로 수정할 수 있습니다.

안전 모드에 들어가면 모든 것이 올바르게 로드됩니까?

이는 테마 또는 플러그인 중 하나가 실수에 대한 책임이 있음을 나타냅니다. 가해자를 식별하기 위해 하나씩 비활성화하십시오.

안전 모드를 켰지만 여전히 로드되지 않습니다.

이는 솔루션을 찾기 위해 다른 곳을 탐색해야 한다는 것을 의미하며 사용자 지정 코드 또는 호스팅 관련 문제일 가능성이 큽니다.

"안전 모드가 내 웹사이트?에 영향을 미칠까요?"

웹사이트 방문자는 안전 모드를 사용하는 경우 차이를 느끼지 못할 것입니다. 설치된 모든 플러그인과 테마가 사이트에 표시되며 방문자는 평소처럼 사용할 수 있습니다.

플러그인 및 테마는 Elementor 편집기 로드 프로세스 전체에서 활성화되지 않습니다.

Elementor 사용자는 보다 안정적이고 원활하며 오류가 없는 경험이라는 측면에서 안전 모드의 이점을 크게 누릴 수 있습니다.

더 읽기 태그 & 위젯

WordPress의 더 읽기 태그는 요소 또는 기능 요청으로 받은 첫 번째 항목 중 하나였습니다.

이것은 간단한 요청이었지만 페이지 빌더는 마침내 그것을 구현했습니다.

블로그 게시물에서 "자세히 알아보기" 태그를 사용하면 아카이브의 게시물 표시가 나머지 텍스트를 잘립니다. 이를 통해 콘텐츠 티저가 이제 모든 사람이 볼 수 있도록 기본 블로그 페이지에 바로 표시될 수 있습니다.

텍스트 편집기 위젯에서 또는 별도의 위젯으로 이제 더 읽기 태그를 빠르게 추가할 수 있습니다. Elementor의 새로운 '자세히 보기' 위젯을 사용하면 아카이브 페이지에 발췌문을 표시하는 것이 훨씬 더 쉬워집니다. 이 위젯은 두 개의 텍스트 편집기 위젯 사이에 삽입할 수 있고 선택한 위치에서 정확히 멈출 수 있습니다.

혼동을 피하기 위해 이 위젯은 콘텐츠에서 '콘텐츠'를 활용하는 일반 WordPress 아카이브 페이지에만 적용할 수 있습니다. Elementor 아카이브 템플릿은 영향을 받지 않습니다.

마지막 단어

Elementor 는 엄청나게 개발된 WordPress 페이지 빌더 중 하나입니다. 새로운 기능을 통해 점점 더 강력해지고 있습니다. 이 플러그인을 사용하면 말 그대로 웹사이트를 디자인하고 장식하는 거대한 바다를 탐험할 수 있습니다. 이 게시물을 통해 도움이 되시기 바랍니다. 더 많은 요소 튜토리얼 을 방문하여 친구들과 공유하십시오.

Divi WordPress Theme