Glassmorphism 은 반투명 유리 모양입니다: 그 뒤에 앉아있는 것이 무엇이든 흐리게하는 반투명 카드,Apple 과 Windows 가 인터페이스 전체에 기대어있는 스타일. Elementor 에서 손으로 제작한다는 것은 배경 필터와 몇 가지 브라우저의 단점이있는 사용자 정의 CSS 를 의미합니다. 무료 유리형성 확장 에서 Elementor용 마스터 애드온 모든 요소의 고급 탭에서 토글로 바꿉니다.
스위치를 켜고 흐림 값과 반투명 배경색을 설정하고 모서리를 둥글게 하면 요소가 유리 카드가 됩니다. 전체 설정은 다음과 같습니다.
Glassmorphism 확장이 수행하는 작업입니다 #
확장자는 다음을 추가합니다 유리형성 섹션으로 고급 전체 섹션부터 단일 위젯까지 모든 Elementor 요소의 탭입니다. 활성화하면 요소가 배경 흐려지므로 요소 자체 텍스트가 선명하게 유지되는 동안 배경 이미지나 그 뒤에 있는 콘텐츠가 반투명 유리로 번집니다.
사진 배경이나 그라데이션과 같이 시각적으로 바쁜 것 위에 요소가 놓일 때 모양이 가장 잘 작동합니다. 평범한 흰색 섹션 위에는 흐리게 할 것이 없으므로 효과를 보여줄 것이 없습니다.
시작하기 전에 #
- 워드 프레스 와 함께 엘리멘터 설치되고 활성화됩니다.
- Elementor용 마스터 애드온 설치 및 활성. 플러그인에 새로운? 따라 설치 가이드 첫번째.
- Glassmorphism은 무료 확장이므로 Pro 라이센스가 필요하지 않습니다.
- 이미지나 다채로운 배경 위에 배치된 요소로, 흐림에는 작업할 것이 있습니다.
Glassmorphism 확장을 활성화하는 방법 #
WordPress 대시보드에서 다음으로 이동하세요 마스터 애드온 그리고 열어보세요 확장 탭. Glassmorphism이 있습니다 디스플레이 위젯 패턴 옆에 인기 배지가 있는 그룹입니다 그리드 라인. 보라색으로 변하도록 토글을 클릭한 다음 누르세요 변경 사항 저장 페이지 상단에 녹색 “설정이 성공적으로 저장되었습니다” 공지를 기다리십시오.
Elementor 편집기에서 찾을 수 있는 위치 #
Elementor 로 페이지를 열고 유리로 바꿀 요소를 선택하십시오. 비디오 예제에서는 사진 배경에 앉아있는 Dual Heading 위젯입니다. 로 이동하십시오 고급 탭하면 찾을 수 있습니다 유리형성 표시 조건 및 부동 효과와 같은 다른 마스터 애드온 확장과 함께 보라색 MA 배지가 있는 섹션입니다.
Glassmorphism 설정이 설명되었습니다 #
뒤집기 Glassmorphism을 활성화합니다 예에 컨트롤이 나타납니다.
- 흐림 값: 요소 뒤에 있는 배경이 0 에서 100px (기본적으로 20px) 까지 얼마나 강하게 번지는지,흐림은 전체 컨테이너에 적용되며,2 와 같은 작은 값도 사진 위에 선명하게 읽혀집니다.
- 배경 색상: 유리의 색조. 패널 팁은 그것을 평범하게 말한다: 최상의 제어를 위해 RGBA 색상을 사용합니다. 일반 HEX 색상은 자동으로 30 퍼센트 불투명도로 RGBA 로 변환되므로 유리는 결코 단단하게 변하지 않습니다.
- 테두리 반경: 유리 카드의 모서리를 측면별로 둥글게 처리하거나 연결합니다.
- 테두리 너비: 0 부터 10px 까지 반투명한 흰색 윤곽선을 추가하는데,유리창의 가장자리처럼 읽혀집니다. 여기서 테두리 색은 조절이 안되죠.
- 오버플로 수정(흐림이 작동하지 않는 경우): 구조 스위치. 일부 레이아웃은 오버플로:hidden 을 전달하여 블러에 전원을 공급하는 백드롭 필터를 차단합니다. 모든 것을 활성화했지만 여전히 효과가 없으면 이 기능을 켭니다.
RGBA 색상의 유리 색조를 선택하세요 #
옆에 있는 사용자 지정 견본을 클릭합니다.Click the custom swatch next to 배경 색상 그리고 색상을 선택한 다음 알파 슬라이더를 아래로 당깁니다. 데모에서 값은 반투명 빨간색 (#DC4C4C8C) 으로,카드는 색조를 띠고 그 뒤에 있는 사진의 좌석은 흐림 현상을 통해 계속 보입니다.
모서리를 둥글게 돌고 누락 된 흐림을 구출하십시오 #
세트 a 테두리 반경 카드를 부드럽게 하기 위해서요. 유리 모양을 하기 위해서는 몇 픽셀이면 충분합니다. 그리고 흐림이 보이기를 거부하면 뒤집습니다 오버플로를 수정하세요 예: 일부 컨테이너의 백드롭 필터를 차단하는 오버플로:숨겨진 규칙을 제거합니다.
완성된 효과 #
여기 프런트 엔드의 결과가 있습니다: 빨간색 색조가있는 둥근 유리 카드, 그 뒤에 흐리게 된 사진, 그리고 상단에 제목과 텍스트가 선명합니다.
유리형태가 잘 작동하는 곳 #
- 영웅 오버레이. 헤드라인용 유리 패널과 전폭 사진 위에 CTA가 있습니다.
- 가격 및 기능 카드. 그라데이션 섹션 배경 위에 유리 카드.
- 사용후기 블록. 이미지를 숨기지 않고 떠다니는 인용문입니다.
- 끈적한 헤더. 미묘한 흐림은 그 아래에 콘텐츠가 스크롤될 때 메뉴를 읽을 수 있도록 유지합니다.
- 로그인 또는 가입 상자. 브랜드 이미지 위에 고전적인 반투명 패널이 있습니다.
자주 묻는 질문 #
Master Addons의 Glassmorphism 확장은 무엇입니까?
고급 탭의 모든 Elementor 요소에 반투명 유리 효과를 추가하는 무료 확장 기능입니다. 흐림 강도,반투명 배경색,경계 반경 및 경계 너비에 대한 컨트롤을 얻을 수 있으며 CSS 를 직접 작성할 필요가 없습니다.
유리형태가 흐릿하게 나타나지 않는 이유는 무엇입니까?
보통 부모 컨테이너는 오버플로: hidden 을 전달하여 효과 뒤에 있는 백드롭 필터를 차단합니다. Glassmorphism 섹션 하단에 있는 Fix Overflow 토글을 켭니다. 또한 일반 흰색 위에 흐림이 보이지 않으므로 요소가 이미지 또는 컬러 배경 위에 있는지 확인합니다.
어떤 요소가 glassmorphism 효과를 사용할 수 있습니까?
고급 탭이 있는 모든 Elementor 요소: 섹션,열, 컨테이너 및 개별 위젯. 마스터 애드온 대시보드에서 확장 기능을 한 번 사용하도록 설정하고 편집기의 모든 요소의 고급 탭에 Glassmorphism 섹션이 나타납니다.
glassmorphism을 위해 어떤 배경색을 사용해야 하나요?
반투명 RGBA 색상. 아무 색조나 선택하고 알파 채널을 낮추면 배경이 색조를 통해 계속 보입니다. 단색 HEX 색상을 입력하면 확장자가 30 퍼센트 불투명도로 RGBA 로 변환하므로 유리 효과가 계속 작동합니다.
Glassmorphism 확장은 무료입니까?
예. 확장 탭의 디스플레이 위젯 그룹에 있는 Elementor 용 Master Addons 무료 버전과 함께 제공됩니다. The 가격 페이지 무료 기능 외에 Pro 플랜이 추가하는 내용을 나열합니다.
감싸는 #
Glassmorphism 확장 기능은 까다로운 CSS 트릭을 고급 탭의 몇 가지 컨트롤로 바꿉니다: 활성화, 흐림, 색조, 반경 및 테두리. 사진 위에 위젯을 놓고 배경색을 반투명하게 유지한 다음 흐림이 숨겨지면 오버플로 수정에 도달합니다 Glassmorphism 확장 페이지 CSS 를 직접 작성하는 것과 비교합니다. 이와 같은 더 많은 편집기 업그레이드를 보려면 다음을 찾아보십시오 마스터 애드온 위젯 및 확장또는 기성품 디자인을 선택하세요 템플릿 키트 그리고 그 위에 유리를 넣는다.
