WordPress advanced css add background images to your sub menu

안녕하세요 여러분,이 비디오에 오신 것을 환영합니다 www

system22net 및 https://great-webdesigncom의 Jamie입니다 이 비디오에서는 고급 CSS를 수행하는 방법을 보여 드리겠습니다 사용자 정의를 통해 드롭 다운 메뉴를 무언가로 바꿀 수 있습니다

백그라운드에서 일부 이미지와 더 재미있는 예를 보여 드리겠습니다 여기에 우리가 좋아하는 것 같은 것을 만들거야 그래서 시작하자 우리가하고 싶은 일은이 메뉴를 수평으로 늘리고 싶다는 것입니다 그래서 우리는 실제로 여기에 우리의 링크 뒤에 이미지를 배치 할 수 있습니다

이것을 검사하다 그것은 오른쪽 클릭하고 검사 또는 f12이고 우리의 하위 메뉴가 있습니다 나는 아빌라의 cui를 좋아한다 그래서 그것이 우리가 여기에있는 것이다 내가 바라는 것이 그것이다

바로 거기에서 순서가없는 목록을 보자 그래서 우리는 너비를 늘려야하는 뷰포트 너비 인 폭 100VW의 CSS 속성 화면을 가로 지르다 오케이하자 너는 그걸 펴다 볼 수있는 것처럼 그걸 보자 그게 다 내가 여기서 찾고자하는 것과 내가 원하는 다음 일이야 내가 중심에 있는지 확인하고 싶습니다

순간, 우리는 그 파란색 테두리를 없애고 싶습니다 이 텍스트가 중앙에 있는지 확인하여 텍스트 정렬 센터를 수행하고 거기에있는 것을 확인하십시오 거기에 또 다른 하나는 우리가 여기에 중요한 속성을주고 싶습니다 그런 식으로하면 다른 쪽도 가리고 그걸 원하지 않아요 하늘색 테두리가 그 꼭대기에 있으므로 우리는 경계선 없음이라고 말할 것입니다

그거 없애 버려 조금 더 모양이 좋아지기 시작했다 이제 이것을 복사하고 테마 옵션으로 이동 한 다음 아래로 내려야합니다 테마 옵션 중 페이지 맨 아래에 Divi 테마 옵션이 표시됩니다 사용자 정의 CSS는 여기에 새 항목을 만들어 부 메뉴라고 부릅니다

나는 항상 여기에 제목을 써서 당신이 많은 것을보고 있다면 CSS를 사용하면 코드 편집기로 원하는 부분을 쉽게 찾을 수 있습니다 대개 번호가 매겨져있어 검사관을보고 찾으면 찾을 수 있습니다 안감 번호가 있지만 Divi에서는 여기와 모든 것을 얻지 못했습니다 여기서하는 일은 절대적으로 Divi를 사용하고 있다고 말한 것처럼 사용됩니다 끝내 주지만 이것은 WordPress 사이트에서 사용할 수 있습니다

약간의 테마가있는 사용자 정의 CSS 비트를 사용하면 하위 테마를 만들어야 테마가 업데이트되면 CSS가 덮어 쓰이지 않습니다 좋아, 그냥 방금 만들었던 것을 붙여 넣자 그게 필요 없어 그리고 우리의 변화가 새로 고침되고 나는 똑같이 머물러야한다고 말하지만 그 하위 메뉴는 여기에서 우리 제 3의 메뉴는 그것이 지금했던 것처럼 줄곧 나아야한다 거기에 우리는 간다 그러나 나는 그 사람들이 왼쪽으로 가기를 바란다

우리가 실제로 그 뒤에 이미지를 넣을 수 있도록 약간의 공간을주고 싶습니다 각자 나는 일정한 너비를 만들어서 괜찮은 이미지를 넣을 수 있기를 바란다 그것 뒤에 그래서 선택하자 메뉴 목록 항목 하위 메뉴가있는 바보가 메뉴 목록 항목 목록으로 가득 차게됩니다 목 거기에 우리가 원하는 것은 이제 우리가주고 싶어하는 목록 항목 목록 항목입니다

상단에 약간의 공간이있어서 이미지를 거기에 넣을 수 있습니다 padding top과 275 pix 그리고 더 깊게 만들어야합니다 여기에 이미지를 넣을 자리가있어 그리고 내가 그걸 상상해 보자 왼손쪽에 다시 뒤집어 씌울 필요가있어

그래서 어떤 콜론을 세미콜론으로 콜론을 넣으면 작동하지 않을까요? 그 왼쪽에있는 것이 더 좋을 것입니다 나는 그와 같은 200 250 무언가를 알고 있습니다 그래서 그들에게 폭을 넓혀 보겠습니다 225 사이에 2 25 픽셀이 완전히 다른 것처럼 보일 것이라고 생각하지 않습니다 하지만 그게 옳은데 우리는 멋진 이미지를 넣기에 충분한 공간을 가지고 있습니다

거기에 배경이 있으므로 그냥 CSS의 맞춤 CSS에 저장하겠습니다 왼쪽 클릭하고 드래그하여 선택하면 Ctrl C로 복사됩니다 우리가 지금했던 곳으로 내려 가자 왜냐하면 지난 두 사람은 필요 없어 괜찮은 사람들은 바꿀 수 없다

빠른 저장을 해보십시오 재미있는 부분이 있습니다 여기에 백그라운드에서 원하는 이미지가 있으므로 멋진 배경을 추가하고 싶습니다 여기 어딘가에서 이미지를 보자이 목록 항목을 보면 어떨까요? 여기 내가 그들 위에 마우스를 올려 놓는 동안 당신은 그들이 녹색으로 변하는 것을 볼 수 있습니다

패딩은 각자 개인 ID 메뉴 아이템 799-801과 7을가집니다 여섯 둘, 그리고 신분증이야 그래서 우리가 원하는대로 할거야 해시 태그 메뉴 항목을 수행 할 수있는 ID이기 때문에 사용자 정의 CSS에서 할 수 있습니다 번호를 입력 한 다음 원하는 속성을 추가하여 다시 돌아가십시오

맞춤 CSS로 몇 개의 해시 태그를 드롭합니다 ID 메뉴이기 때문에 – 항목 – 숫자에 관계없이 나는 그것이 799라고 생각했다 그렇지 않다면 1 분을 바꾸어야 할 수도있다 부정확 나는 그게 무엇인지 생각해 좋아, 우리가 뭘하고 싶은지 나나 이미지를 배경으로하고 싶어

그게 배경 이미지가 될거야 자본이 필요 없어 B 다시 돌려 놓자 이미지를 실행하고 배경 이미지로 URL을 주어야합니다 일부 일반 대괄호를 열려면 URL을 식히고 여기에 둥근 대괄호를 그 (것)들 사이에서 우리는 URL를두기 원하고 당신은 잘 말할지도 모른다 나는 어떻게 알 는가? 내가 넣고 싶은 그림의 URL 또는 모두가 할 이미지는 페이지는 테스트 페이지 또는 원하는 모든 종류의 페이지 일 수 있습니다 이 페이지를 유지할 필요가없는 경우 Divi 빌더를 사용할 필요가 없습니다

기본 편집기를 사용하고 미디어 탭 추가를 누르십시오 사진을 업로드했습니다 이미 여기에서 사용할 예정이므로 사진을 삽입하십시오 당신이 그것을 사용하고자하는 것은 텍스트로 올라가면 지금이 페이지에 있습니다 탭의 상단에있는 탭은 스크롤하여 모양을 찾으면 URL을 찾는 방법입니다

소스 SRC 거기에 그것은 우리가 그 오프닝에서 원하는 URL입니다 거꾸로 한 쉼표로 끝내고 둘 다 포함하면 거기에 거꾸로 된 쉼표를 거기에 모두 복사하여 ctrl C를 복사하여 사용자 정의 CSS로 돌아가십시오 그 두 작은 라운드 사이에 붙여 넣으세요 거기에 괄호를 써서 빠른 저장을해라 나는 그녀가 작은 세미콜론을 가지고 있는지 확인하지 않을 것이다 결국 우리는 더 많은 속성을 추가 할 것이고 당신이 필요로하는 것처럼 이제 다시 사이트의 모습을 보도록하겠습니다

그 첫 번째 이미지에 작은 이미지가 새로 고침 우리의 모습을 보자 드롭 다운과 좋은 거기에 이미지가 없다 나는 아이디어를 잘못 7 않았다 아홉 아홉, 아홉 아홉 아홉 가지를 보자 background-image : url 잘못된 것 오 URL 뒤에 간격이 있음을 알 수있다

우리는 URL과 첫 번째 둥근 괄호 사이에 간격을 두지 않기를 바랍니다 너는 아무런 격차도 없다 내 것과 같이 작동하지 않을 것이다 다시 시도하고 다시 시도하십시오 새롭게 하다 그리고 희망적으로 이번에는 거기에 우리의 이미지가 있습니다

좋아요 잠깐만 그래서 저는 똑같은 일을하려고합니다 거기에 다음 네 개의 이미지가있을 것입니다 오른쪽에있는 경계선을 보자

오, 포기해라 오른손 경계선이 단단한 2 개의 말 물론 화이트는 FFF보다 더 좋을 것입니다 그리고 우리는 그것을 줄 것입니다 바닥에 조금 더 두꺼운 경계선을 세 가지 선택을 해봅시다 우리는 사용하고있는 푸른 색을 사용하고 단단한 경계선을 원합니다

파선보다는 오히려 아마도 그 색깔이 같은 색깔이 될 것이기 때문에 아마 그것을 볼 수 없을 것입니다 드롭 다운보기 – 오, 당신은 그것을 볼 수 없다 괜찮아요 약간 진한 파란색으로 괜찮습니다 이제 우리는 나머지 부분을 씻어 내고 반복 할 것입니다 지금은 그냥 빨리 해보 죠 이걸 복사 할게요

그 둘을 원해요 여기에 속성이 있으며 사용자 정의 CSS에 추가 할 것입니다 좋아, 이제 우리는 그것이 우리가 원하는 것을 얻었습니다 메뉴 항목의 나머지 부분은 3 가지가 더 있습니다이 세 가지를 복사합니다

times one two three 이제 우리는 숫자를 바꾸고 싶습니다 8시 2 분 8시 2 분 7시 6 분 그리고 일곱 여섯 – 나는 믿는다 이제 내 이미지는 내가 해냈어 간단히 말해서 나는 1 2 2 3 우리는 거기에 4 명이있어 5 번 가자

나는 그것에 대해 많은 생각을하지 않고있다 분명히 당신은 당신의 생각을 두 개 더 넣고 싶습니다 두 가지는 괜찮습니다 그리고 사이트로 돌아가서 우리는 이제 그 모든 것들에 대한 이미지를 가지고 있어야합니다 새로 고침됩니다

우리가 지금 가지고있는 순간에 우리의 검사관을 없애자 흰색 선으로 구분 된 모든 것들에 대한 배경 이미지와 나는 우리가 분명히해야 할 일은이 배경색을 제거하는 것입니다 하위 메뉴는 CSS로 할 필요가 없다는 것입니다 실제로 우리가 페이지 편집 메뉴에서 그렇게하자 페이지에 내가 편집 페이지 버튼을 칠 수있는 곳으로 우리가 여기서 다룬 풀 너비 메뉴가 있습니다

그래서 우리가 열면 디자인에 가서 배경색을 바꿔야합니다 이 하나의 바로 여기 드롭 다운 메뉴 배경색 나는 그걸 끌어낼 수있다 투명하므로 페이지를 빠르게 업데이트 할 수 있습니다 변경 사항 미리보기 그리고 거기에 우리가가는 그런 배경이 있습니다 그래서 우리는 그것을 가지고 있습니다

하위 메뉴 배경에 일부 이미지를 추가하고 테두리를 추가하려면 CSS는 꽤 많이 있지만 일단 한 번 해보 셨으면 정말 쉽습니다 유용하다는 것을 다시 한번 발견했습니다 제이미는 시스템 22와 훌륭한 웹 디자인 통신이 동영상을 즐겼다면 좋겠다 보고있는 채널 덕분에 멋진 하루 되세요 오