버튼 클릭으로 이미지를 변경하시겠습니까? 페이지 빌더 Elementor ? 이 새로운 튜토리얼에서는 그 방법을 보여줄 것입니다.

오늘 우리가 무엇에 대해 이야기하고 싶은지 잘 모르겠다면 다음 비디오를 시청하도록 초대합니다.

그런 다음 왜 우리가 여기 있는지 다시 돌아 갑시다.

읽기 : Elementor로 텍스트 위로 마우스를 가져갈 때 이미지를 변경하는 방법

이 튜토리얼을 완료하려면 다음이 필요합니다. Elementor의 Pro 버전이 버전에서만 지원되는 사용자 정의 CSS 코드를 사용할 것이기 때문에Elementor.

2개의 열이 있는 섹션을 만든 다음 측면 패널에서 고도 에 최소 높이그리고 최소 높이 클릭하자 VH 슬라이더를 100.

이미지 위젯을 왼쪽 열로 드래그하고 라이브러리에서 이미지를 삽입해 보겠습니다.

오른쪽 열에 타이틀 위젯 최고를 선택하십시오. 탭에서 스타일 클릭하자 활판 인쇄술 그리고 수정 1에서 줄 높이.

참조 : 이미지를 변경하는 방법Elementor로 텍스트 위로 마우스를 가져갑니다.

Title 위젯 아래에 추가해 보겠습니다. 텍스트 편집기 위젯.

Title 위젯 위에 Separator 위젯을 해당 탭에 놓습니다. 내용, 잡자 270 너비를 위해. 요소 추가에 대한 텍스트를 클릭한 다음 다음을 입력합니다. 경향 텍스트로. 탭에서 스타일, 그리스를 수정하고 격차 에 2.

발견 : Elementor로 이미지 위에 텍스트를 표시하는 방법

텍스트 섹션에서 활판 인쇄술, 글꼴을 변경해 보겠습니다. 허리 에 18은 유지 에 600.

편집기 위젯 아래 내용, 파일을 제출하자 내부 섹션, 내부 섹션의 열 중 하나를 삭제하고 후자를 삭제합니다. 버튼 위젯

측면 패널과 탭으로 이동하여 버튼을 수정해 보겠습니다. 내용, 클릭 아이콘 라이브러리 에 아이콘 아이콘을 삽입하고 쇼핑 백, 버튼의 내용도 지우자 텍스트

탭으로 가자 스타일 버튼과 내부 테두리 반경, 클릭 % 그리고 잡아 50 모든 연석 반경 및 내부 내부 여백, 잡자 20.

를 클릭하여 후자의 색상을 변경하여 버튼의 색상을 사용자 정의해 보겠습니다. 고전적인 용 배경 유형 그리고 이미지의 하이라이트 색상에 따라 색상을 변경해 보겠습니다.

그런 다음 탭을 클릭하십시오. 고급 버튼을 누른 다음 위치 과 폭 선택하자 인라인(자동). 고급 섹션에서고급 탭, 잡자 10 용 오른쪽 여백.

이 버튼을 4번 복제하고 이 버튼의 색상을 수정해 보겠습니다.

다음으로 이미지 위젯을 4번 복제한 다음 이미지를 수정해 보겠습니다.

안에'고급 탭, 잡자 모든 이미지 현장에서 CSS 클래스 우리의 각 이미지의.

그럼 현장에서 CSS ID 빨간색 강조 표시가 있는 이미지에는 red-image, 녹색 강조 표시가 있는 이미지에는 녹색 이미지, 갈색 강조 표시가 있는 이미지에는 갈색 이미지를 입력하는 식입니다.

우리를 선택합시다 섹션 그리고 에서고급 탭, 해당 영역에서 관습 CSS는 다음 코드 스니펫을 복사하여 붙여넣습니다.

.all-images{
    display: none;
}
#red-image{
    display: block;
}

(이 섹션이 없으면 Pro 버전이 없는 것입니다. 계속하려면 버전을 업그레이드해야 합니다.)

다음으로 HTML 위젯을 페이지에 드롭하고 다음 코드 스니펫을 복사하여 HTML 코드 섹션에 붙여넣습니다.

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
var $ = jQuery
$(document).ready(function(){
    $('[data-showme]').on('click', function(){
        var showme = $(this).attr('data-showme')
        
        $('.all-images').hide()
        $('#' + showme).show()
    })
})
</script>

필드에서 첫 번째 버튼을 선택합시다. 맞춤 속성 부터 속성 섹션, 다음 코드 조각을 복사하여 붙여넣습니다.

data-showme|IMAGE-ID-NAME

IMAGE-ID-NAME 부분을 버튼의 ID로 수정해 보겠습니다. 이러한 ID는 빨간색 이미지, 녹색 이미지 및 파란색 이미지 ID 등입니다.

따라서 각 버튼에 대해 IMAGE-ID-NAME 코드를 해당 버튼의 색상으로 변경해 보겠습니다.

버튼을 테스트하는 동안 작업을 업데이트하고 데스크톱, 태블릿 및 스마트폰 모드에서 미리 봅니다.

예를 들어 스마트폰 모드에서 버튼을 중앙에 정렬하고 여백을 줄이는 등의 작업을 수행할 수 있습니다.

자, 이 작업을 쉽게 완료했습니다.

지금 Elementor Pro를 받으세요!

결론

거기는 ! 텍스트 위로 마우스를 가져갔을 때 이미지를 변경하는 방법을 보여주는 이 기사의 내용은 여기까지입니다. 가는 방법에 대해 우려 사항이 있는 경우 내부에 알려주십시오. commentaires.

그러나 상담 할 수도 있습니다 우리의 자원, 인터넷 사이트 제작 프로젝트를 수행하는 데 더 많은 요소가 필요하면 워드 프레스 블로그 제작 또는 Divi : 역대 최고의 워드 프레스 테마.

그러나 그동안, 이 기사를 다른 소셜 네트워크에서 공유하십시오.

...