워드프레스 Elementor 페이지 빌더에서 이미지에 링크 추가하기

Elementor는 워드프레스에서 무료로 사용할 수 있는 페이지 빌더로서 현재 200만 개 이상 사이트에서 설치되어 사용되고 있습니다.

페이지 빌더를 사용하면 코딩 지식이 부족해도 쉽게 사이트를 만들 수 있습니다. Elementor 페이지 빌더도 마찬가지로 코딩 지식이 부족해도 쉽게 페이지를 만들 수 있습니다.

기초적인 내용이지만 Elementor 페이지 빌더에서 이미지에 링크를 추가하는 방법에 대하여 질문해오신 분이 계셔서 간단히 다루어보겠습니다.

먼저 Image 요소를 끌어다가 원하는 곳에 배치합니다.

그러면 다음 그림과 같이 이미지를 추가하고 설정할 수 있는 화면으로 바뀝니다.

워드프레스 Elementor 페이지 빌더 이미지 추가

Choose Your Image 부분(1)을 클릭하면 이미지를 업로드하거나 미디어 라이브러리에서 이미지를 선택할 수 있습니다.

Alignment에서 이미지 정렬을 선택할 수 있습니다. Caption에서는 이미지 캡션을 추가할 것인지 선택할 수 있습니다. Link 부분(4)에서 링크를 설정할 것인지 지정합니다.

엘레멘터 페이지 빌더

링크에 대한 옵션으로 None(없음), Media File(미디어 파일), Custom URL(사용자 정의 URL) 중에서 선택할 수 있습니다. URL을 직접 지정하려면 Custom URL을 선택합니다.

워드프레스 페이지 빌더 Elementor 이미지 추가하기

Link Options를 클릭하면 두 가지 옵션이 추가로 표시됩니다.

  • Open in new window (새 창에서 열기)
  • Add nofollow (nofollow 추가)

상단의 Style 탭을 클릭하면 이미지 너비(Width), 최대 너비(Max Width), 불투명도(Opacity), CSS 필터, 테두리, 박스 음영 등을 설정할 수 있습니다.

상단의 Advanced 탭을 클릭하면 마진, 패딩, Z-index, CSS ID, CSS 클래스, 모션 효과, 배경, 사용자 정의 위치 지정, 반응형, 사용자 정의 CSS 등 다양한 고급 옵션을 지정할 수 있습니다.

엘레멘터 이미지 요소

마치며

Elementor 페이지 빌더에서 제공하는 Image 요소에 대해 간단히 살펴보았습니다. 무료 버전에서도 비교적 정교한 옵션이 제공되는 것을 확인할 수 있습니다.

Elementor Pro에서는 더 많은 위젯(요소)과 페이지 템플릿이 제공됩니다. Element Pack 같은 Elementor 페이지 빌더용 애드온을 사용하면 110개 이상의 요소를 추가로 이용할 수 있습니다.

워드프레스 Elementor 페이지 빌더에서 이미지에 링크 추가하기”에 대한 답글 3개

    1. 안녕하세요? 엘리멘터를 살펴보니 여러 개의 이미지를 추가하는 옵션은 캐러셀(회전 슬라이드)과 image gallery 위젯이 있네요. Image gallery 위젯에서는 custom link를 추가할 수 없습니다. 회전 슬라이드에서는 custom링크 추가가 가능하지만, 전체 이미제에 대하여 동일 링크만 가능합니다.

      https://avada.tistory.com/1678

      회전 슬라이드에서 개별 이미지에 커스텀 링크를 추가하는 방법은 추후에 정리하여 올려보겠습니다.

      현재 상황에서는 컬럼을 만들어서 개별 컬럼에 이미지를 추가하고 각 이미지에 링크를 추가하는 것을 생각해볼 수 있습니다.

      엘리멘터 프로( https://avada.tistory.com/2337 )가 추가적인 프로 위젯과 프로 템플릿, 그리고 테마 빌더(theme buidler) 기능을 제공하여 보다 수월하게 커스텀이 가능하지만, 이미지 갤러리에서는 개별 이미지에 링크를 추가하는 옵션은 프로에서도 없네요.

      좋아요

      1. 네 답변 감사합니다. 혹시 방법이 있을 줄 알고 엄청 찾았는데 없더라고요 이렇게 답변을 들으니 속이 시원하네요 ㅠㅠ 방법이 있는데 제가 못찾는 줄 알았습니다.
        감사합니다

        좋아요

답글 남기기

아래 항목을 채우거나 오른쪽 아이콘 중 하나를 클릭하여 로그 인 하세요:

WordPress.com 로고

WordPress.com의 계정을 사용하여 댓글을 남깁니다. 로그아웃 /  변경 )

Google photo

Google의 계정을 사용하여 댓글을 남깁니다. 로그아웃 /  변경 )

Twitter 사진

Twitter의 계정을 사용하여 댓글을 남깁니다. 로그아웃 /  변경 )

Facebook 사진

Facebook의 계정을 사용하여 댓글을 남깁니다. 로그아웃 /  변경 )

%s에 연결하는 중

This site uses Akismet to reduce spam. Learn how your comment data is processed.