워드프레스 아바다 테마에 HTML 코드를 추가하는 방법

2019. 6. 29. 23:46 | 댓글 5

워드프레스 베스트셀링 테마인 아바다(Avada)에서 Code Block 요소를 이용하면 워드프레스에서 포맷을 변경하지 않고 페이지에 HTML, 자바스트립트 또는 CSS 코드를 추가할 수 있습니다. 특정 페이지에 커스텀 코드를 추가할 때 유용합니다.

Element 선택 화면에서 Code Block을 선택하면 Code Block 요소가 선택한 컨테이너(Container)에 추가됩니다.

다음과 같이 javascript 코드도 추가가 가능합니다.

<script async src=”//cdn.embedly.com/widgets/platform.js” charset=”UTF-8″></script>

<body> 내에 <style> 태그는 HTML 5에서 허용된다고 합니다("Using <style> tags in the <body> with other HTML" 참고). 위의 그림에서와 같이 <style> 태그를 추가해도 되고, 가능한 경우 CSS는 차일드 테마 내의 스타일시트 파일에 추가하면 추후에 제어하기 편할 것입니다.

CSS 코드는 별도로 추가하려는 경우에는 다음 글을 참고하여 CSS 코드를 삽입할 수 있습니다.

특정 페이지 내에 HTML 코드를 추가해야 하는 경우 이 방법을 사용하면 편리합니다. 다른 페이지 빌더에서도 쉽게 HTML 코드나 자바스크립트 코드를 추가할 수 있는 요소를 제공합니다.

예를 들어, Divi 테마에서는 코드를 넣을 수 있는 '코드' 모듈을 제공합니다.

참고:

  • 네이버 블러그 공유하기
  • 네이버 밴드에 공유하기
  • 페이스북 공유하기
  • 트위터 공유하기
  • 카카오스토리 공유하기

댓글을 달아 주세요

">
  1. thumbnail
    잉여토기

    워드프레스 아바다 테마에 html코드를 삽입하고자할 때 이 페이지보고 따라하면 되겠어요. 고맙습니다.

  2. thumbnail
    IT세레스

    테마만 잘 선택해도 여러가지로 코드 삽입도 편리해지는 군요.

  3. thumbnail
    Deborah

    아. 잘 몰랐는데 오늘 포스팅 하신걸 보고 새롭게 배웁니다.