이미지 위에 텍스트를 표시하는 방법을 알고 싶었습니까? Elementor ?

이 새로운 튜토리얼에서는 그 방법을 보여줄 것입니다.

오늘 우리가 무엇에 대해 이야기하고 싶은지 잘 모르겠다면 다음 비디오를 시청하도록 초대합니다.

그런 다음 왜 우리가 여기 있는지 다시 돌아 갑시다.

이 튜토리얼을 완료하려면 다음이 필요합니다. Elementor의 Pro 버전이 버전에서만 지원되는 사용자 정의 CSS 코드를 사용할 것이기 때문에Elementor.

또한 다음에 대한 가이드를 찾으십시오. Elementor로 이미지 갤러리를 만드는 방법

3열 구조로 새 섹션을 만든 다음 패널에서 고도 에 최소 높이그리고 최소 높이 클릭하자 VH 슬라이더를 100.

가운데 열을 선택하고 탭에서 스타일섹션에서 배경 클릭하자 고전적인 용 배경 유형을 클릭한 다음 어두운 색상을 선택합니다.

이 칼럼에 넣어보자 내부 섹션 위젯. 내부 섹션 위젯은 기본적으로 2개의 열로 구성되어 있으므로 그 중 하나를 삭제하겠습니다. 패널의 나머지 부분을 수정하여 구성해 보겠습니다. 고도 에 최소 높이 과 최소 높이 커서를 설정하자 400.

읽기 : Elementor: 프로필 카드 확대/축소 방법

그런 다음 에 수직 정렬 선택하자 환경.

그런 다음 드롭 제목 위젯 에 내부 섹션 Title Photography로 들어가고 Alignment에서 Choose를 합시다. 센터.

탭에서 스타일 제목의 색상을 수정하여 그렇지 않은 경우 표시되도록 하고,

버리자 텍스트 편집기 위젯 아래 제목 위젯. 그런 다음 탭에서 스타일, 정렬에서 선택 센터. 텍스트의 색상도 보이도록 변경해 보겠습니다.

또한보십시오: Elementor: 구분선을 추가하여 섹션을 만드는 방법

선택하자 중간 열 그리고 탭에서 스타일, 배경색을 재설정하고 이미지를 로드한 다음 위치 선택하자 중앙 중앙, 반복 에 비반복, 씌우다 에 허리.

섹션에서 경계 모두 수정하자 12 중 경계 반경. 에 상자 그림자, 슬라이더를 다음으로 설정 0 용 수평로 0 수직의 경우 40 흐림에 -10 방송중. 이미지 아래에 아름다운 그림자 효과가 표시되어야 합니다.

약 배경 오버레이, 선택하다 고전적인 용 배경 유형 과 뢰르 하나를 선택 검은 색, 불투명도에서 슬라이더를 0.55

탭에서 고급, 잡자 20 모든 여백에 대해.

우리를 선택합시다 내부 섹션 탭으로 이동 고급 사용자 정의 CSS 섹션에서 다음 코드 스니펫을 복사하여 붙여넣습니다.

/*Afficher ou masquer un contenu au survol*/
selector{
    opacity: 0;
    transition: 0.5s ease-in-out;
}
selector:hover{
    opacity: 1;
}

(이 섹션이 없으면 Pro 버전이 없는 것입니다. 계속하려면 버전을 업그레이드해야 합니다.)

다시 한 번 섹션의 중간 열을 선택하겠습니다. 탭에서 스타일, 그리고 섹션에서 배경 오버레이, 우리가 탭에 있는지 확인하십시오 표준, 낮추자 불투명 à 0.

그런 다음 탭을 클릭하십시오. 개요그런 다음에 고전적인 용 배경 유형 과 뢰르, 선택 어두운 색, 다음불투명도 에 0.55, 그리고 전환 기간 슬라이더를 0.5.

다음은 조작의 최종 결과입니다.

열을 2번 복제하고 나머지 2개의 빈 열을 삭제합니다. 남은 것은 배경 이미지와 내용 2개의 새로운 열에 대한 텍스트 편집기.

태블릿과 스마트폰에서 작업을 미리 보고 어떻게 보이는지 확인하십시오. 그런 다음 저장하거나 업데이트합니다.

그래서. 방금 이미지 위에 텍스트를 표시했습니다. 페이지 빌더 Elementor.

지금 Elementor Pro를 받으세요!

결론

그래서 ! 이 기사에서는 이미지 위에 텍스트를 표시하는 방법을 보여줍니다. 가는 방법에 대해 우려 사항이 있는 경우 내부에 알려주십시오. commentaires.

그러나 상담 할 수도 있습니다 우리의 자원, 인터넷 사이트 제작 프로젝트를 수행하는 데 더 많은 요소가 필요하면 워드 프레스 블로그 제작 또는 Divi : 역대 최고의 워드 프레스 테마.

그러나 그동안, 이 기사를 다른 소셜 네트워크에서 공유하십시오.

...