목차
우아한 방식으로 이미지 주위에 텍스트를 배치해야 합니까? 코딩 및 디자인 경험이 없어도 쉽게 수행하는 방법을 알아보세요. 구텐베르크 편집기는 워드프레스에서 텍스트 주위에 텍스트를 감싸는 더 많은 옵션을 제공합니다.
보기 좋은 웹사이트와 손쉬운 콘텐츠 편집 루틴을 동시에 달성할 수 있습니다. WordPress 웹사이트용 Gutenberg 편집기를 선택하면 장기적 관점에서 최고의 도구를 얻을 수 있습니다. 이미지 주위에 텍스트를 다르게 배치할 수 있는 더 많은 옵션이 있습니다. Gutenberg는 웹 사이트의 보다 명확한 소스 코드, 속도, 보안 및 유용성과 같은 많은 이점을 제공합니다.
WordPress에서 이미지 주위에 텍스트를 감싸는 방법은 무엇입니까?
Gutenberg 편집기 및 블록은 웹 사이트 콘텐츠를 더 가볍고 현대적이며 쉽게 읽을 수 있도록 합니다. WordPress 페이지, 게시물 및 사용자 정의 게시물 유형에서 이미지 주위에 텍스트를 래핑하는 방법을 더 많이 보여줍니다. 다양한 블록이 있으며 랩에 대한 추가 옵션을 제공하는 부품 및 기능 세트로 조합하여 사용할 수도 있습니다.
서브 페이지와 콘텐츠 유형에 따라 이미지 주위에 줄 바꿈된 텍스트에 대한 블록을 선택할 수 있습니다. 프레젠테이션 페이지와 블로그 게시물에 대해 하나의 스타일을 선택할 수 있습니다. 또한 이미지를 나타내는 콘텐츠의 종류를 고려하십시오. 설명 이미지인가 아니면 더 대표적이고 판매하는 매체인가?
이미지 주위에 텍스트 둘러싸기 – 블록 선택
이미지 주위에 텍스트 블록을 둘러싸는 데 사용할 수 있는 4개의 블록이 있습니다. 우리는 그들 모두를 설명합니다:
- 이미지 블록 및 단락 블록은 아래에서 자세히 알아보십시오.
- 미디어 및 텍스트 블록 아래에서 자세히 알아보기
- 열 블록 개별 포스트에서
- 클러스터 블록 개별 게시물에서(기능은 Citadela Pro 플러그인)
더 나은 독서 경험을 위해 텍스트와 이미지를 줄 바꿈
이 블록을 사용해야 하는 몇 가지 이유가 있습니다. 블로그 게시물을 작성하는 경우 가장 감사하게 생각합니다. 이미지는 이야기의 필수적인 부분입니다. IT 뉴스에 대한 여행 블로그 또는 잡지를 작성하는 것은 중요하지 않습니다. 따라서 콘텐츠에 사진을 추가할 때 이미지 정렬에 대해 생각하세요. 독자들은 당신이 쓰고 있는 내용을 더 잘 이해할 수 있을 것입니다.
대부분의 경우 이미지와 텍스트를 나란히 삽입해야 합니다. 무엇이 중요합니까?
- 이해가 되어야 합니다. 이미지는 올바른 텍스트 옆에 있어야 합니다.
- 잘 맞춰야 합니다.
- 전체 웹사이트 레이아웃에 맞아야 합니다.
이미지 및 단락 블록
에 있는 동안 클래식 편집기 이미지 옆에 텍스트를 배치할 수도 있습니다. 멋진 정렬에 대해서는 말할 수 없습니다. 특히 이미지가 작고 그 옆에 더 많은 텍스트를 넣는 경우. 텍스트가 이미지를 덮어서 보기 좋지 않았습니다.
구텐베르크 편집자 이미지 블록은 이미지 크기 조정이라는 훌륭한 기능을 제공합니다. 이미지 주변의 점을 드래그하여 크기와 텍스트 정렬을 자동으로 변경합니다.
미디어 및 텍스트 블록 – WordPress는 이미지 옆에 텍스트를 정렬합니다.
- 미디어 및 텍스트 블록으로 텍스트 및 이미지 감싸기
- 편집기에서 미디어 및 텍스트 블록을 추가하는 방법
- 이 블록의 작동 방식
- 미디어 및 텍스트 블록 설정
- "은(는) 무슨 뜻인가요?모바일 스택” 평균
- 보너스: WordPress에서 텍스트를 정당화하는 방법
이미지 옆에 텍스트를 정렬하는 방법은 무엇입니까?
지금 시작하세요
위험 부담 없는 평가판으로 지금 시작하십시오. 신용 카드가 필요하지 않습니다.
미디어 및 텍스트 블록은 환상적인 기능입니다. 미디어 및 텍스트 블록은 이 문제를 해결하고 구성 및 레이아웃을 방해하지 않고 텍스트를 이미지에 완벽하게 정렬합니다. 이것이 바로 이 블록을 사용해야 하는 이유입니다.
모바일 장치에서도 웹사이트 디자인을 개선합니다. 이 래핑 블록은 WordPress 테마가 다양한 모바일 레이아웃을 커버하도록 도와줍니다. 스마트폰에서 웹사이트의 모든 부분이 명확하게 보이고 읽을 수 있어야 합니다. Media & Text block은 휴대폰과 테이블에서 어떻게 보일까요? 아래에서 살펴볼 "Stack on mobile" 기능을 처리합니다.
짧은 시간 안에 Citadela라는 새로운 WordPress 테마에서 미디어 및 텍스트 블록을 사용할 수 있습니다. 별도의 문서에서 Citadela 테마에 대해 자세히 알아보세요.
블록 편집기에서 미디어 및 텍스트 블록을 추가하는 방법은 무엇입니까?
미디어 및 텍스트 블록을 추가하는 것은 다른 블록을 추가하는 것만큼 쉽습니다. 아무것도 다운로드하거나 설치할 필요가 없다는 것을 의미하는 핵심 블록입니다.
상단 패널 또는 편집기의 아무 곳에서나 "+" 아이콘을 사용하고 Media & Text 블록을 선택합니다.
마지막 옵션은 "/"를 입력하고 나중에 "미디어"를 쓰는 것입니다. WordPress는 검색한 내용과 일치하는 선택된 블록을 자동으로 표시합니다.
미디어 및 텍스트 블록은 어떻게 작동합니까?
미디어 및 텍스트 블록은 기본적으로 두 가지 유형의 콘텐츠를 하나로 그룹화합니다. 첫 번째는 다음을 통해 추가할 수 있는 이미지 또는 비디오와 같은 매체입니다.
- 업로드
- 미디어 라이브러리
- 드래그 앤 드롭
두 번째는 텍스트 콘텐츠를 위한 공간입니다. 텍스트 단락, 글머리기호 목록 또는 제목을 작성할 수 있습니다. 당신은 또한 거기에 추가할 수 있습니다 버튼 블록 우리가 이전에 이야기했던 것입니다.
미디어 및 텍스트 블록은 얼마나 많은 텍스트를 작성하든 관계없이 항상 이미지와 텍스트를 나란히 정렬합니다. 어떻게 작동합니까? 이미지는 텍스트 열의 콘텐츠 높이에 따라 자동으로 조정됩니다.
미디어 및 텍스트 블록 설정
일반 블록 설정
1. 상단 툴바
블록 위의 도구 모음은 여러 옵션을 제공합니다. 활성 테마가 지원하는 경우 미디어 및 텍스트 블록을 너비 또는 전체 너비로 설정할 수 있습니다. 다음을 클릭하여 이미지나 비디오를 배치할 위치를 선택할 수도 있습니다.
- 왼쪽에 미디어 표시
- 오른쪽에 미디어 표시
상단 도구 모음에는 대체 텍스트, 제목, 캡션 또는 설명을 설정할 수 있는 매체 편집 아이콘도 있습니다. 기사에서 이미지 편집에 대해 자세히 알아보십시오. WordPress 이미지 블록 작업.
2. 오른쪽 사이드바
오른쪽 사이드바는 미디어 및 텍스트 블록에 대한 추가 설정을 제공합니다. 여기에 대체 텍스트를 추가하거나 배경색을 설정하거나 추가 CSS 클래스를 추가할 수 있습니다. "Stack on mobile" 기능을 활성화할 수도 있습니다.
이 기능 덕분에 이미지와 텍스트가 모바일 장치에 잘 표시됩니다. "Stack on mobile"을 비활성화하면 이미지와 텍스트가 나란히 표시되며 반응형 버전에서는 거의 읽을 수 없습니다.
이 기능을 활성화하면 휴대폰에서 왼쪽 콘텐츠가 오른쪽 콘텐츠 위에 표시됩니다.
텍스트 정렬
Media & Text 블록의 일부는 이미지 또는 비디오와 함께 텍스트 콘텐츠입니다. 다음 콘텐츠 유형 중 하나일 수 있습니다.
1. 단락
상단 도구 모음에서 텍스트 정렬을 설정하고 텍스트를 굵게, 기울임꼴로 만들거나 URL 링크를 추가할 수 있습니다.
오른쪽 사이드바에서 글꼴 크기, 글꼴 색상 또는 단락 색상을 선택할 수 있습니다. 흥미로운 기능은 텍스트의 첫 번째 문자를 강조 표시하는 "드롭 캡"입니다. 텍스트를 더 흥미롭게 만드는 블록 게시물의 좋은 기능입니다.
2. 제목
제목은 단락과 매우 유사합니다. 모양을 구성하고 굵게 또는 기울임꼴로 만들고 URL 링크를 삽입할 수도 있습니다. 차이점은 표제 유형(H2, H3, H4)을 선택할 수 있다는 것입니다.
다른 제목 크기 및 정렬 설정은 오른쪽 사이드바에서 사용할 수 있습니다.
3. 목록
콘텐츠에 목록 블록을 추가하면 글머리 기호, 번호 매기기 목록 또는 다단계 목록이 될 수 있습니다. 텍스트를 굵게, 기울임꼴로 만들고 URL 링크를 추가할 수도 있습니다.
4. 버튼 블록
콘텐츠에 버튼을 추가하는 이 블록은 웹사이트 디자인에 맞게 조정할 수 있습니다. 버튼 색상 및 스타일 또는 배경 색상은 오른쪽 사이드바에서 구성할 수 있습니다.
에 대한 기사를 읽는 것을 잊지 마십시오. 버튼 블록.
블록 유형 간 전환
미디어 및 텍스트 블록에서 하나의 콘텐츠 블록 유형을 다른 유형으로 변환할 수 있습니다. 미디어 및 텍스트 블록을 이미지 블록으로 변경할 수도 있으며 텍스트 부분이 삭제됩니다.
텍스트 콘텐츠에서 단락 블록을 제목 또는 목록 블록으로 변경할 수 있습니다.
보너스: WordPress에서 텍스트를 정당화하는 방법
정렬된 텍스트를 사용하면 긍정적인 면과 부정적인 면이 있습니다. 정렬된 텍스트는 일반적으로 책이나 신문에서 찾을 수 있지만 웹사이트에서는 더 이상 사용되지 않습니다. 왜?
몇 년 전 WordPress Classic 편집기에 바로 Justify 기능이 통합되었습니다. 다양한 브라우저 또는 모바일 장치에서 가시성 문제를 일으키는 데 사용되는 정당화된 텍스트입니다. 또한 정당화된 텍스트의 어려운 가독성과도 관련이 있습니다. 따라서 이 기능은 더 이상 사용되지 않고 제거되었습니다.
이 특정 기능은 새 블록(구텐베르크) 편집기에는 존재하지 않습니다.
정말로 원한다면 텍스트를 어떻게 정당화합니까?
해결책은 몇 단계로 간단한 CSS 코드를 추가하는 것입니다.
- 오른쪽 사이드바에 단락 블록의 추가 CSS 클래스에 대한 설정이 있습니다.
- 거기에 클래스 이름을 쓰십시오 „신이 옳다고 하다“
- 페이지 또는 기사 게시
- 미리 보려면 메인 상단 표시줄에서 사용자 정의를 클릭하십시오.
- 왼쪽에는 설정이 있는 새로운 사이드바가 있습니다.
- 추가 CSS를 클릭합니다.
- 다음 CCS 코드를 삽입하십시오.
p.justify { 텍스트 정렬: 정렬; }
완료. 지금부터 미디어 및 텍스트 블록의 텍스트가 정당화됩니다.
WordPress는 Gutenberg 편집기 덕분에 타사 페이지 빌더 없이도 더 유용해졌습니다. 장기적인 관점에서 그리고 웹사이트를 만들거나 재설계할 때 귀하의 웹사이트에 탁월한 가치가 있습니다. 구텐베르크 블록은 다양한 스타일을 제공하지만 손을 찾을 수 있습니다. 이미지 주위에 텍스트를 배치하는 WordPress 코드.
Media & Text block에 대해 어떻게 예상하십니까? 이미 사용하셨습니까? 그것으로 작업하는 것이 어떻습니까? 아래 의견에 알려주십시오.
일반적으로 나는 블록 시스템을 좋아하지만 내가 뭔가를 놓치고 있지 않는 한 이것은 뒤로 물러나는 것입니다. 나는 현재 단순히 이미지를 왼쪽이나 오른쪽으로 띄우고 텍스트를 줄 바꿈하는 것이 정말 쉬워야 하지만 WordPress는 그런 일이 일어나기를 원하지 않는 것 같습니다. 왜 안 돼? 미디어 및 이미지 블록을 사용하는 것은 텍스트의 길이가 올바른 경우에만 작동합니다. 예를 들어 이와 같은 페이지는 텍스트가 이미지 크기에 정확히 맞는 길이가 아닌 경우 단락 사이에 이상한 간격으로 다시 작성되는 것을 원하지 않습니다.
http://www.thorntonincraven.co.uk/our-village/welcome-to-the-village/
안녕,
귀하의 피드백에 감사드립니다. 아주 좋은 생각인 것 같으니 잠시만 시간을 내어 다음 4가지 간단한 질문에 답해 주시기 바랍니다. https://aitthemes.typeform.com/to/vc7arn 고유한 기능이 더 빨라집니다.
시간을 내어 이해해 주셔서 감사합니다.
안부 인사!
즐라트코
AIT팀
예, 줄바꿈할 텍스트를 가져올 수 없습니다. 이 텍스트 블록 조합은 쓸모 없는 것 같습니다.
이 아이디어는 블로그에 사진을 삽입할 수 있는 유일한 방법으로 형편없습니다. 텍스트를 멋지게 줄바꿈할 수 없고 내가 무엇을 하든 크기가 같지 않습니다. 특정 상황에 대한 좋은 생각이지만 모든 상황에 해당하는 것은 아닙니다. 때때로 당신은 그림에 대해 무언가를 말하는 것보다 그것을 둘러싼 문단이 있는 그림을 원할 것입니다.
래퍼를 추가하고 전체 너비로 콘텐츠를 사용하는 방법 진지하게 전체를 덮은 다음 컨테이너를 가져가는 방법.
안녕,
당신의 칭찬에 감사드립니다. 저희 블로그 페이지 https://www.ait-themes.club/blog/를 확인하시면 매력적이고 유용한 게시물을 작성하는 방법에 대한 많은 유용한 팁을 찾을 수 있습니다.
안부 인사!
즐라트코
AIT팀
안녕하세요 압두르,
귀하의 피드백에 감사드립니다. 우리 팀은 매우 감사합니다!
친애하는.
즐라트코
AIT팀
이 스레드에서 다른 여러 사람과 같은 어려움을 겪고 있습니다. 과거에는 사진과 약력이 있는 "회사 소개" 페이지와 같이 이미지 주위에 텍스트를 쉽게 감쌀 수 있었습니다. 아마도 이전 편집기를 사용하고 있었을 것입니다. 기억이 안나요. 하지만 지금은 새로운 사진과 약력으로 사이트를 업데이트하려고 하는데 이전 약력/사진 조합처럼 텍스트를 쉽게 줄 바꿈하는 방법을 찾지 못했습니다. 클래식 편집기로 전환하려고 했지만 사이트에서 "새로운 블록 편집기" 섹션이 있으므로 최신 편집 모드를 유지해야 한다고 경고했습니다. 새로운 약력과 사진을 이전 게시물처럼 보이게 하는 방법을 알려주실 수 있나요? 감사합니다.
안녕,
구텐베르크를 비활성화하고 고전적인 WordPress 편집기를 계속 사용하려면 "Classic Editor Plugin"을 사용하여 수행할 수 있는 WordPress 핵심 팀의 플러그인을 고려하십시오.
친애하는!
즐라트코
AIT팀
이미지 주위에 간단한 텍스트 배치를 원하는 경우 찾아보기를 클릭할 때 블록의 첫 번째 부분을 기반으로 하는 클래식 텍스트 블록을 삽입하여 이를 수행할 수 있습니다. 단일 블록에서 클래식 편집기를 사용할 수 있으며 예 , 이미지를 삽입한 다음 래핑 옵션을 선택할 수 있습니다. 문제 해결 🙂
감사합니다 런던 SEO 가이!!! 간단한 해결책이지만 간과했습니다!
그런 다음... 간단히 블록으로 변환 옵션을 사용하십시오.
이것이 작동하기 때문에 블록 편집기에는 기능이 있지만 올바르게 설정하는 방법을 찾을 수 없습니다. 그동안 이 퍼지가 작동합니다.
여기도 같은 문제가 있습니다. 이 새 버전은 끔찍합니다. 자르기를 원하지 않는 한 텍스트를 적절하게 줄바꿈하거나 사진을 더 작게 만들 수 있는 방법이 없습니다.
WordPress 블록 편집기에서 그림 주위에 내 텍스트를 감쌀 수 있습니다. "미리보기"에서 내가 원하는 대로 보입니다. 그러나 내 블로그를 게시하고 WordPress가 내 팔로워에게 이메일을 보내면 상단에 그림이 있고 그림 아래에 텍스트가 있는 블로그를 받습니다. 이것은 소형 휴대폰뿐만 아니라 데스크톱 컴퓨터에서도 발생합니다. 쌓이지 말고 포장하고 싶어요.
안녕,
작성해 주셔서 감사합니다. 블록은 예상대로 WordPress의 이미지 주위에 텍스트를 둘러싸지 않습니다. 도움이 될 수 있는 다음 지침을 살펴보십시오. https://motopress.com/blog/how-to-wrap-text-around-images-in-gutenberg/
친애하는!
즐라트코
AIT팀
이 모든 작업을 수행하면 내 블로그가 미리보기에서 완벽하게 래핑됩니다. 게시하면 내 블로그 페이지에서 멋지게 보입니다. 그러나 WordPress가 내 팔로워에게 이메일을 보내고 그들이 해당 이메일을 열면 포장된 것을 볼 수 없습니다. 사진은 글 위에 있습니다. 매우 프로페셔널하지 않은 모습입니다. 이전 클래식 편집기에서는 그런 문제가 없었습니다. 블록 편집기를 사용하고 있으므로 클릭할 수 있는 클래식 옵션이 있어도 클래식 편집기로 돌아갈 수 없습니다.
안녕,
문의해 주셔서 감사합니다.
비디오 자습서와 함께 지식 기반 및/또는 설명서를 확인하시기 바랍니다.
https://www.ait-themes.club/ait-themes-documentation/
또는 전용 지원 티켓 시스템에 직접 기술적인 질문을 게시할 수 있습니다. https://system.ait-themes.club/support/add-question에서 귀하의 계정에 로그인하십시오.
고객 지원은 영업일 오전 8시부터 오후 5시(중앙 유럽 표준시)까지 제공됩니다.
또한 이전 편집기를 사용할 수 있는 플러그인이 있습니다. "클래식 편집기"를 설치하고 활성화해야 합니다.
감사합니다!
즐라트코
AIT팀
옵션이 더 제한적이기 때문에 이것이 고전적인 편집보다 우수하다는 데 동의하지 않습니다. 나는 이 블록이 다른 글꼴을 사용하고 텍스트 블록보다 더 넓기 때문에 시각적으로 거슬리는 것을 발견했습니다. 동일한 글꼴과 크기 및 여백 설정을 유지하면서 이미지 주위에 텍스트를 매끄럽게 감쌀 수 있으므로 잡지 페이지의 전문성을 얻을 수 있습니다. 이것은 제가 이 버전의 워드프레스에 크게 실망한 이유 중 하나에 불과합니다.
안녕 테렌스
귀하의 의견에 감사드립니다. Citadela 평가판을 사용해 보셨습니까? 텍스트와 이미지를 조정하는 데 도움이 될 수 있는 몇 가지 고유한 블록이 있습니다. 어쨌든 정식 버전(모든 기능)을 무료로 테스트할 수 있습니다.
좋은 하루 되세요.