[IT관리자]

엘리멘터 페이지 빌더에서 header에서 로고가 들어있는 컬럼을 %가 아니라 px로 하고 싶은데 단위가 %만 있어서요 ㅠㅠ

게시글

[IT관리자]

플러그인을 사용하면 간편하게 가능하지만, 플러그인을 사용하지 않고 기본적인 CSS로도 가능합니다.

플러그인 사용은 가급적 최소화하는 것이 바람직합니다.

이 기능 하나 때문에 여러 가지 기능이 포함된 플러그인을 설치하다 보면 사이트 속도는 산으로 갈 수 있습니다.

​

예를 들어, 엘리멘터 페이지 빌더 편집 화면에서 두 개의 컬럼으로 된 섹션을 추가하고,

오른쪽 컬럼은 300px, 왼쪽 컬럼은 100%-300px 너비를 적용하고 싶은 경우를 생각해보면...

왼쪽 컬럼과 오른쪽 컬럼에 CSS 클래스를 지정합니다.

예: custom-col-1, custom-col-2

​

그런 다음, Custom CSS 섹션이나 외모 > 사용자 정의하기 > 추가 CSS에 다음과 같은 CSS 코드를 추가할 수 있습니다.

/* 컬럼 너비 */

@media (min-width: 768px) {
.custom-col-2 {
width: 300px !important;
}

.custom-col-1 {
width: calc(100% - 300px) !important;
}
}

 

​그러면 해상도가 768px 이상인 화면에서는 왼쪽 컬럼은 100%-300px 너비로, 오른쪽 컬럼은 300px 너비로 표시됩니다.

이 방법을 사용하면 모바일, 태블릿, PC 등 기기 해상도에 따라 원하는 대로 컬럼 너비를 지정하는 것이 가능합니다.

참고로 엘리멘터 페이지 빌더에서 모바일 분기점을 사용자 지정할 수 있습니다.

https://avada.tistory.com/2845

[글쓴이]

답변