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

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

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

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

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

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

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

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

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

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 페이지 빌더용 애드온 - Element Pack