워드프레스 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개 이상의 요소를 추가로 이용할 수 있습니다.

5 개 댓글

Leave a Comment

  1. 엘리멘터 프로에서 여러이미지를 한번에 썼을때 각각 따로 링크를 주는 방법을 혹시 아시나요???

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

      https://avada.tistory.com/1678

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

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

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

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

        응답