Elementor에 Codepen을 추가하는 방법

이 기사에서는 Elementor에 Codepen을 추가하는 방법에 대해 설명합니다.

Codepen은 파란색 웹사이트에 고유한 요소와 효과를 추가하는 데 사용할 수 있는 수백만 개의 고품질 코드 조각 저장소입니다.

Elementor는 코드 사용을 최소화하기 위해 생성된 페이지 빌더로 잘 알려져 있지만 때로는 파란색의 스니펫이 최상의 솔루션으로 판명되기도 합니다. Codepen 스니펫을 추가하는 것이 복잡할 필요가 없으며 전략적 복사 및 붙여넣기만으로 구성되어 있음을 보여주기 위해 이 기사를 작성했습니다.

이 튜토리얼 에서는 Elementor 웹사이트에 복잡성이 다양한 세 개의 Codepen을 추가한 방법을 자세히 설명합니다. 이 작업이 끝나면 자신의 Elementor 설치에서 이 작업을 수행하는 방법을 잘 이해하게 될 것입니다.

Elementor에 Codepen 추가: 포괄적인 예

첫 번째 펜의 경우 HTML, CSS 및 HS를 사용하여 효과를 내는 이 독특한 패턴을 추가할 것입니다. 이 기사에서 이것을 선택한 이유는 세 가지 코드 언어를 모두 사용하기 때문입니다. 이렇게 하면 녹색 코드를 변경하는 방법을 정확하게 보여주고 파란색 웹사이트에서 작동하도록 조작합니다. 먼저 그린 자체는 다음과 같습니다.

새 탭에서 Codepen을 열고 모든 코드와 최종 효과를 살펴보는 것이 좋습니다.

프로세스의 첫 번째 단계는 실제로 Elementor 웹사이트에서 Codepen을 사용할 수 있는지 이해하는 것입니다. 기본적으로 HTML5, 형식 지정 가능한 CSS 및 바닐라 JavaScript가 포함되어 있으면 계속 사용하는 것이 좋습니다.

기술적으로 Codepen에 있는 모든 것을 Elementor에 추가할 수 있지만 이것은 초보자 튜토리얼이기 때문에 타사 JavaScript 라이브러리를 통합하는 것은 이 기사의 범위를 약간 벗어납니다.

많은 경우 HTML 또는 CSS는 표준과 다른 형식입니다. WordPress는 PUG 또는 SCSS가 아닌 HTML 마크업 및 스트레이트 업 CSS의 기본 버전을 좋아합니다.

모든 형식이 올바르게 지정되었는지 확인하려면 각 코드 요소의 오른쪽 상단 모서리에 있는 드롭다운 화살표를 클릭한 다음 "HTML/CSS 형식"을 클릭하세요.

이렇게 하면 Elementor 웹사이트에서 모든 코드를 사용할 수 있습니다. 준비가 되면 Codepen을 구성하는 실제 코드를 사이트에 통합할 차례입니다.

여기서는 타사 애드온 팩을 사용하지 않을 것이며 Elementor의 기본 설치와 함께 제공되는 HTML 요소를 사용하기만 하면 됩니다. Codepen에 따라 HTML 요소를 자체 섹션이나 열로 드래그하는 것이 좋습니다.

구현에 따라 모든 코드를 이 단일 HTML 입력에 직접 설치할 것입니다. 물론 코드 조각, PHP 또는 다른 것을 사용하여 보다 영구적인 솔루션에서 Codepen을 구성하는 코드를 추가할 수 있지만 녹색의 작은 코드 모음을 단일 Elementor 페이지에 통합하려는 경우 , 이 방법이면 충분합니다.

먼저 녹색에서 HTML 코드를 복사하여 Elementor의 HTML 코드 요소에 직접 붙여넣습니다. 다음은 조금 더 노력이 필요한 CSS입니다. 먼저 <style 태그를 사용하여 HTML 요소에 직접 통합할 것입니다.

많은 Codepen 스니펫에는 전체 스타일과 본문 스타일이 포함되어 있습니다. 대부분의 경우 이를 식별하고 삭제해야 합니다. 그렇지 않으면 페이지의 전체 구조가 엉망이 됩니다.

이 예에서는 다음 선택기 내에 포함된 CSS를 포함하지 않습니다.

*{}, 신체{}

마지막으로 HTML5 스크립트 태그를 사용하여 JavaScript를 추가합니다.

CSS와 마찬가지로 태그에 코드를 그대로 붙여넣습니다. 많은 경우 JavaScript는 Codepen을 고유하게 만드는 것입니다. 일반적으로 JavaScript는 페이지가 로드될 때 로드되므로 Elementor 캔버스에 즉시 표시되지 않습니다. 그러나 프런트 엔드에서 페이지를 미리 보면 효과가 나타날 가능성이 있습니다.

codepen을 Elementor 웹사이트에 통합하려고 할 때 발생할 수 있는 몇 가지 일반적인 문제는 코드 충돌입니다. 테마 또는 웹사이트 스타일을 구성하는 기본 코드를 엉망으로 만드는 CSS 스타일 또는 JavaScript가 있는 경우 프런트 엔드에서 문제가 발생할 수 있습니다.

웹사이트의 다른 요소에도 적용되는 Codepen용 CSS 선택기를 사용하고 있지 않은지 확인하십시오.

HTML, CSS 및 JavaScript를 사용할 때 가장 좋은 점은 쉽게 적용할 수 있다는 것입니다. 따라서 선택기가 충돌하는 경우 Codepen 요소의 선택기를 변경하기만 하면 됩니다. 이것은 비교적 간단합니다. 용어의 모든 인스턴스를 찾아서 바꾸면 됩니다.

첫 번째 예는 Codepen에서 찾은 복잡한 요소를 Elementor 웹 사이트에 직접 통합하는 방법을 보여주기 위해 설계되었습니다. 보시다시피 HTML 요소를 사용하여 HTML, CSS 및 JavaScript를 쉽게 추가할 수 있습니다. 몇 초 만에 사이트에 고품질 효과를 직접 구현할 수 있습니다.

Elementor에 Codepen 추가: 간단한 버튼 예제

기본 버튼 추가와 같은 더 간단한 사용 사례는 어떻습니까?

어디에서도 볼 수 없는 독특한 버튼 스타일입니다. 순수한 HTML 버튼과 SCSS 스타일로 구성되어 있습니다.

설치하려면 먼저 CSS를 변환하고 컴파일해야 합니다. 앞서 언급했듯이 오른쪽 상단의 드롭다운을 클릭하고 형식을 클릭한 다음 CSS를 컴파일하면 됩니다.

이 Codepen은 Google 글꼴을 가져오고 모든 CSS 효과와 본문 CSS 효과를 제공합니다. WordPress에서 이미 적용했기 때문에 이러한 CSS 스타일 지정 규칙을 복사 및 붙여넣기에 포함하지 않습니다.

HTML과 CSS를 복사하여 Elementor HTML 요소에 붙여넣기만 하면 됩니다.

이 버튼은 어디에나 추가할 수 있습니다!

Elementor에 Codepen 추가: 복잡한 예

그리고 마지막 효과로 기존 Elementor 사이트에 고유한 그래픽을 추가해 보겠습니다.

이 Codepen은 CSS, HTML 및 JavaScript로 만든 매우 깔끔한 3D 라디오(음악 재생, 상단의 볼륨 클릭)입니다. HTML이 PUG 형식이고 CSS가 SCSS이므로 녹색을 파란색 사이트에 통합하는 방법의 훌륭한 마지막 예입니다.

먼저 Elementor 웹사이트에서 사용할 수 있도록 CSS의 HTML 형식을 다시 지정합니다.

이렇게 하려면 HTML 서식을 클릭한 다음 컴파일된 HTML을 봅니다. 이것은 Pug 형식을 Elementor에서 사용할 직선 HTML로 변환합니다.

보시다시피 HTML에는 이 Codepen을 자체 페이지에 포함할 수 있는 헤더 섹션이 있습니다. 그러나 헤더와 함께 제공되는 Elementor 페이지에 이미 삽입하고 있으며 충돌을 피하기 위해 Elementor HTML 블록에 붙여넣을 때 코드의 이 측면을 포함하지 않을 것입니다.

CSS, 서식 지정 및 컴파일에 대해 동일한 프로세스를 실행합니다. 바디 스타일링을 제외한 모든 것을 여기에 포함시킬 것입니다.

이제 모든 것이 Elementor 웹사이트에 있는 HTML 요소에 직접 복사하여 붙여넣을 준비가 되었습니다.

이 예에서 우리는 이 3D 라디오 모형을 일부 콘텐츠 옆의 열에 포함할 것입니다. 이는 아마도 사이트의 프로덕션 버전에 포함하는 방법일 것입니다. 먼저 새 섹션을 추가하고 열 위치를 늘이도록 설정합니다. 이 새 섹션의 최소 높이는 400픽셀입니다.

텍스트 콘텐츠의 제목은 열 중 하나에 추가되고 HTML 블록은 다른 열에 추가됩니다.

앞의 2가지 예와 마찬가지로 HTML, CSS 및 JavaScript를 이 HTML 블록에 직접 복사하여 붙여넣습니다.

body 태그의 일부 코드를 #radio-wrap이라는 div에 적용해야 했습니다. 또한 HTML을 포함하는 Elementor 섹션과 열의 스타일 지정 측면과 Codepen의 CSS 스타일 지정을 모두 처리해야 한다는 점을 명심하십시오.

예를 들어 기본 Elementor 인터페이스의 열 위치 지정을 사용하여 HTML 라디오를 열 중앙에 직접 배치합니다. 또한 사용자 정의 CSS를 사용하는 대신 Codependent 배경을 미러링하도록 열 배경을 설정합니다.

코드 팬에 포함된 CSS와 HTML 요소를 둘러싸는 Elementor 섹션의 스타일을 모두 사용하여 Codepen을 Elementor 사이트에 더 잘 혼합할 수 있습니다.

마무리 생각

이 기사는 Elementor 웹사이트에 타사 코드를 포함하고 통합하는 방법을 소개하기 위한 것입니다. WordPress에는 이를 수행하는 여러 가지 방법이 있으며 대부분의 경우 대체 방법을 사용하면 성능이 향상되고 사이트에 통합될 수 있습니다.

그러나 Elementor 웹 사이트에 Codepen을 추가하는 빠르고 간단한 방법을 찾고 있고 코드와 관련된 내용을 전혀 이해하지 못한다면 이것이 아마도 가장 간단한 방법일 것입니다.

검토:

1. 사이트에 html 요소 추가
2. Codepen 코드 컴파일
3. 요소에 적용되는 코드만 복사합니다(본문 CSS 스타일 없음).
   1. 동시에 요소를 div에 래핑하고 이 바디 스타일의 일부를 이런 식으로 적용해야 할 수도 있습니다.
4. html Elementor 위젯에 붙여넣습니다.
   1. HTML을 직접 붙여넣습니다.
   2. CSS가 STYLE 태그에 붙여넣어집니다.
   3. JS는 SCRIPT 태그에 붙여넣습니다.
5. 요소가 사이트에 성공적으로 추가되었는지 확인하기 위해 프런트엔드에서 테스트

많은 경우, 특히 두 개 이상의 페이지에서 사용하려는 경우 JavaScript를 WordPress 웹 사이트의 HEAD에 추가하는 것이 더 좋습니다.

CSS는 YellowPencil 또는 CSSHero와 같은 도구를 사용하여 전역적으로 추가할 수 있습니다.

https://isotropic.co/yellowpencil-and-elementor-redundant-or-genius/

https://isotropic.co/csshero-and-elementor-powerful-custom-css/

이 기사가 Codepen 요소를 Elementor 웹사이트에 직접 추가하는 데 도움이 되었기를 바랍니다. 이 작업을 수행하는 방법에 대해 질문이 있는 경우 의견 섹션에 문의하세요.