Elementor에서 코드 블록을 추가하는 방법
소스 코드에는 Elementor와 활성 요소가 필요합니다 마스터 애드온 프로 라이센스.
- Master Addons Pro를 활성화하고 Elementor로 페이지를 편집한 후 위젯 패널을 검색하세요 소스 코드.
- 스니펫이 속한 곳으로 드래그하십시오.
- 언어를 선택하세요 코드 그리고 a 테마.
- 스니펫을 에 붙여넣습니다 소스 코드 박스.
- 복사 버튼과 줄 번호를 켜고 버튼 텍스트, 가시성 및 위치를 설정합니다.
- 스타일 탭에서 긴 조각의 높이를 설정하고 버튼의 스타일을 지정한 다음 페이지를 미리 보고 복사를 테스트합니다.
모든 설정은 에서 다룹니다 소스 코드 위젯 설정 가이드.
75 언어와 8 Prism.js 테마
X-1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 코드 드롭다운에는 HTML, CSS, JavaScript 및 PHP부터 Python, Bash, SQL, JSON, YAML, TypeScript, React JSX, Go, Kotlin 및 Swift에 이르기까지 75개 언어가 나열되어 있습니다. 테마 기본,어두운, 펑키,오카 이디아,황혼, 코이,태양광 조명 및 내일을 제공합니다. 선택 사용자 정의 스타일 탭에서 나만의 배경, 텍스트 색상, 줄 번호 색상 및 타이포그래피를 설정하려면.
- 흰색 페이지에는 Default 또는 Solarized light, 어두운 섹션에는 Okaidia 또는 Tomorrow와 같은 밝은 테마를 사용하세요.
- 사용자 정의에는 키워드 색상이 없습니다: 코드는 선택한 단일 텍스트 색상으로 표시되므로 구문 색상을 원할 때 사전 설정된 테마를 사용하십시오.
- 하나의 위젯은 하나의 스니펫을 보유합니다. 코드와 출력을 위해 여러 개의 위젯을 나란히 놓습니다.
Elementor Pro 코드 하이라이트와 마스터 애드온 소스 코드
Elementor Pro 에는 자체 Code Highlight 위젯이 있습니다. 둘 다 Prism.js 를 사용하므로 선택은 필요한 추가 항목으로 귀결됩니다.
| 특징 | Elementor Pro 코드 하이라이트 | 마스터 애드온 소스 코드 |
|---|---|---|
| 가격 | Elementor Pro가 필요합니다 | 마스터 애드온 프로가 필요합니다 |
| 언어 | 37 | 75 |
| 테마 | 6 (솔리드, 다크, 오카이디아, 솔라라이즈드라이트, 투모로우, 트와일라잇) | 8 플러스 사용자 정의 색상 |
| 복사 버튼 | 클립보드 스위치로 복사 | 사용자 정의 텍스트, 복사된 텍스트, 항상 또는 호버링 시, 두 위치, 전체 스타일링 |
| 줄 번호 | 예 | 예 |
| 하이라이트 라인 | 예 | 아니요 |
| 워드 랩 | 예 | 아니요 |
| 높이 및 글꼴 크기 | 예 | 높이와 사용자 정의 테마의 타이포그래피 |
특정 줄을 강조 표시하거나 긴 줄을 줄바꿈해야 하는 경우 Elementor Pro 를 선택하십시오. 더 많은 언어,더 많은 테마 또는 스타일이 지정된 복사 버튼을 원하는 경우 마스터 애드온을 선택하십시오. 관련: 목차 긴 튜토리얼의 경우 동적 테이블 참고 테이블의 경우.
버튼 및 줄 번호 복사
켜기 복사 버튼 활성화 전체 스니펫을 복사하는 버튼을 추가하려면. set its 버튼 텍스트 복사, 그만큼 복사된 버튼 텍스트 이후 클릭 후 표시, 버튼 가시성 (항상 또는 호버링 중) 및 버튼 위치 (오른쪽 상단 또는 오른쪽 하단 모서리). 줄 번호 활성화 왼쪽 아래로 숫자를 더합니다.
- 독자가 알아차릴 수 있도록 버튼을 항상 튜토리얼 페이지에 설정해 두세요.
- 줄 번호는 텍스트에서 줄을 쉽게 참조할 수 있도록 해줍니다.
- 특정 줄을 강조 표시하거나 위젯 내부의 긴 줄을 감싸는 옵션은 없습니다.
컨테이너 및 버튼 스타일링
X-1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 컨테이너 섹션은 높이 (최대 1200px) 를 설정하므로 긴 조각 스크롤,더하기 패딩,여백, 테두리 및 반경. 사용자 정의 테마로 그것은 또한 배경,타이포그래피, 텍스트 색상과 라인 번호 색상을 추가합니다. 그만큼 버튼 섹션은 타이포그래피, 텍스트 색상, 배경색, 패딩, 테두리 및 반경으로 복사 버튼을 스타일링합니다.
- 페이지를 읽을 수 있도록 긴 파일의 높이를 캡으로 씌우세요.
- 버튼 배경을 브랜드 색상과 일치시킵니다.
- 코드가 블록 가장자리에 닿지 않도록 패딩을 추가합니다.
소스 코드에 대해 자주 묻는 질문
소스 코드 위젯은 무료입니까?
아니요. 소스 코드는 일부입니다 마스터 애드온 프로. Elementor Pro 사용자도 Elementor 의 코드 하이라이트 위젯을 가지고 있습니다.
코드 옆에 있는 줄 번호를 숨길 수 있나요?
예. 세트 줄 번호 활성화 더 깨끗한 블록을 위해 아니요로.
복사 버튼을 어디에 놓을 수 있나요?
세트 버튼 위치 오른쪽 상단 또는 오른쪽 하단 모서리, 그리고 버튼 가시성 항상 또는 호버링 중.
소스 코드 위젯은 어떤 언어를 지원합니까?
75,코드 드롭다운에서 골랐습니다. 여기에는 HTML,CSS, JavaScript,PHP, Python,Bash, SQL,JSON, YAML,Markdown, TypeScript,React JSX 및 TSX,Go, Java,Kotlin, Swift,Ruby, C,C++ 및 C#이 포함됩니다. 방문자는 코드를 읽고 복사할 수 있지만 편집할 수는 없습니다.
미리 설정된 테마 대신 나만의 색 구성표를 사용할 수 있나요?
부분적으로. 테마를 사용자 지정으로 설정하여 컨테이너 스타일 섹션에서 배경,텍스트 색상,줄 번호 색상 및 타이포그래피를 선택합니다. 키워드 색상은 미리 설정된 8 개의 테마와 함께 제공되므로 사용자 지정 블록은 자신의 CSS 를 추가하지 않는 한 하나의 색상으로 코드를 표시합니다.
특정 라인을 강조 표시 할 수 있습니까?
아니요. 위젯에는 줄 강조 옵션이 없습니다. Elementor Pro 의 코드 강조 위젯은 필요한 경우 선택한 줄을 강조 표시 할 수 있습니다.
트렌드 엘리먼트 위젯 및 확장
더 짧은 시간에 정교한 웹사이트를 구축하세요.
![Elementor용 마스터 애드온 게시물/페이지 복제기 확장: 랜딩 페이지를 생성하는 WordPress 페이지 목록의 MA 복제기 행 링크 - [복제된 #128] 초안](https://d1asvmc6qcowgk.cloudfront.net/wp-content/uploads/2026/09/15102930/post-page-duplicator-768x403.webp)
