블로그 모듈의 자세히 보기 링크를 사용자 지정하시겠습니까? Divi ? 그런 다음 자습서를 따르십시오.
블로그의 "자세히 알아보기" 링크는 사용자 경험. 따라서 이를 올바르게 사용자 정의하는 방법을 아는 것이 중요합니다.
이 자습서에서는 블로그 모듈에서 "자세히 보기" 링크를 사용자 지정하는 방법을 보여줍니다. 이 문서에서는 다음을 수행하는 방법을 보여줍니다.
- 기본 제공 옵션을 사용하여 "자세히 알아보기" 링크를 사용자 지정합니다. Divi
- "자세히 알아보기" 링크 정렬(왼쪽, 가운데, 오른쪽)
- "자세히 알아보기" 링크를 전체 화면 버튼으로 전환
- 호버 효과가 있는 사용자 정의 자세히 보기 버튼 만들기
- "더 읽기"라는 텍스트를 다른 것으로 바꿉니다(예: "기사 읽기").
측량
이 튜토리얼에서 만들 디자인을 간단히 살펴보겠습니다.
Divi의 테마 빌더를 사용하여 페이지에 블로그 모듈 로드
더 읽기 링크를 사용자 정의하려면 블로그 모듈에 액세스해야 합니다.
당신은 할 수 미리 정의된 레이아웃 로드 블로그 모듈을 선택하거나 페이지에 새 블로그 모듈을 추가하기만 하면 됩니다.
프로세스를 시작하기 위해 사전 정의된 레이아웃의 블로그 페이지를 사용합니다. 인공 지능.
WordPress 대시보드에서 새 페이지 추가
그런 다음 페이지에 제목을 지정하고 " 용도 Divi 건축업자".
그런 다음 " 레이아웃 선택«
"를 찾아서 선택하십시오. 인조의 지성 블로그 페이지«
마지막으로 블로그 레이아웃을 선택하고 " 레이아웃 선택«
자세히 보기 링크 텍스트 사용자 지정 및 정렬
각 블로그 모듈은 레이아웃의 각 기사에 대한 "자세히 보기" 링크를 표시하거나 숨길 수 있는 옵션을 제공합니다. "자세히 알아보기" 링크를 표시하려면 블로그 설정을 열고 " 더 읽기 버튼 표시 표시하려는 블로그 항목 목록에서 "예"로.
스타일 탭에서 기본 제공 옵션 중 하나를 사용하여 자세히 보기 텍스트를 사용자 지정할 수 있습니다. 이 예에서는 다음을 업데이트해 보겠습니다.
- 글꼴 자세히 보기: Barlow
- 더 읽기 희미한 빛: 반 굵게
- 더 읽어보기 복사 스타일: 대문자(TT), 밑줄(U)
- 텍스트 색상 더 읽기: #db0eb7
- 밑줄이 그어진 텍스트 색상: #3c5bff
- 문자 간격 더 읽기: 1px
결과는 다음과 같습니다.
현재 "자세히 알아보기" 링크는 정렬을 변경하지 않는 한 기본적으로 왼쪽에 배치됩니다. 게시물의 중앙이나 오른쪽에 링크를 정렬하려면 다음과 같은 CSS 스니펫을 추가하세요.
블로그 설정 고급 탭에서 자세히 보기 버튼 CSS에 다음 CSS를 추가합니다.
display: block;
text-align: right;
"display:block"은 링크를 컨테이너의 전체 너비에 걸쳐 있는 블록 요소로 변경합니다(이 경우 본문의 내용 출판). 블록 요소로 정의되면 "text-align:right"를 사용하여 텍스트를 오른쪽 정렬할 수 있습니다.
결과는 다음과 같습니다.
링크를 중앙에 맞추려면 다음과 같이 "text-align" 속성 값에 대해 "right"를 "center"로 바꾸면 됩니다.
결과는 다음과 같습니다.
버튼처럼 보이도록 "자세히 알아보기" 링크 사용자 지정
이 예에서는 "자세히 알아보기" 링크에 대한 간단한 전체 너비 버튼 스타일을 만듭니다. 사용자 정의 CSS를 추가하기 전에 블로그 설정을 열고 "자세히 보기" 링크 텍스트를 다음과 같이 업데이트하십시오.
- 더 읽어보기 복사 스타일: 대문자(TT)
- 텍스트 색상 더 읽기: #ffffff
이전 예에서 "display:block" 및 "text-align:center"를 사용하여 링크가 컨테이너의 전체 너비에 걸쳐 있고 텍스트의 중앙에 배치되도록 했습니다.
참조 : Divi에서 슬라이딩 및 푸시 메뉴를 만드는 방법
버튼처럼 보이도록 하려면 추가 CSS 스니펫과 함께 배경색과 간격을 추가하기만 하면 됩니다. 이렇게 하려면 고급 탭으로 이동하여 "자세히 알아보기" 버튼의 CSS를 다음과 같이 업데이트합니다.
display: block;
text-align: center;
background-color:#01012C;
padding: 0.3em 1em;
margin-top: 10px;
결과
여기 결과가 있습니다!
CSS로 고급 버튼 스타일 만들기
버튼 스타일을 다른 수준으로 높이고 싶다면 배경과 호버 효과를 추가할 수 있습니다.
이렇게 하려면 "자세히 보기 버튼"의 CSS를 다음으로 바꾸십시오.
display: inline-block;
margin-top: 10px;
padding: 0.3em 1em;
background-image: linear-gradient(90deg,#01012C 50%,rgba(0,0,0,0) 50%);
background-color: #3c5bff;
transition: all 300ms;
호버할 때 배경을 변경하려면 마우스 커서를 호버링할 때 "자세히 알아보기 버튼"에 다음 CSS를 붙여넣을 수 있습니다.
display: inline-block;
margin-top: 10px;
padding: 0.3em 1em;
background-color: #01012C;
결과
여기 결과가 있습니다!
"자세히 알아보기" 텍스트를 다른 것으로 변경
"더 읽기" 텍스트를 "기사 읽기"와 같은 다른 것으로 변경하려면 약간의 jQuery가 필요합니다. 그러나 걱정하지 마십시오. 이것은 몇 줄에 불과합니다.
jQuery 코드를 추가하기 전에 다음과 같이 Blog 모듈에 사용자 정의 CSS 클래스를 추가하십시오.
- CSS 클래스: et-custom-read-more-text
참고: jQuery가 작동하려면 클래스 이름이 올바른지 확인하십시오.
"자세히 알아보기" 텍스트를 수정하는 jQuery를 추가하려면 블로그 모듈 아래에 코드 모듈을 추가합니다.
그런 다음 다음 jQuery 코드를 붙여넣고 필요한 스크립트 태그로 코드를 래핑합니다.
(function ($) {
$(document).on("ready ajaxComplete", function () {
$(".et-custom-read-more-text .et_pb_post a.more-link").html("Lire l'article");
});
})(jQuery);이 코드는 기본적으로 페이지가 로드되면 "더 읽기" 링크의 텍스트를 "기사 읽기"로 변경하도록 브라우저에 지시합니다.
결과
여기 결과가 있습니다!
최종 결과
다음은 우리가 수행한 더 읽기 링크(또는 버튼) 사용자 정의에 대한 또 다른 모습입니다.
지금 DIVI를 다운로드하세요!!!
결론
그래서 ! 그것이 이 기사의 내용입니다. Divi의 블로그 모듈을 사용하면 "자세히 보기" 링크를 창의적으로 사용자 지정할 수 있습니다. 그리고 몇 가지 CSS 스니펫으로 실험하고 싶다면 더 고급 수정을 직접 만들 수 있습니다.
이 튜토리얼이 "더 읽기" 링크를 다음 단계로 끌어올리는 데 도움이 되기를 바랍니다. 우려 사항이나 제안 사항이 있으면 댓글 섹션 그것을 논의하기 위해.
그러나 상담 할 수도 있습니다 우리의 자원, 인터넷 사이트 제작 프로젝트를 수행하는 데 더 많은 요소가 필요하면 워드 프레스 블로그 제작 또는 Divi : 역대 최고의 워드 프레스 테마.
그러나 그동안, 이 기사를 다른 소셜 네트워크에서 공유하십시오.
...
