Divi 3 Example Media Queries in the Divi WordPress theme menu

안녕 얘들 아,이 Divi 튜토리얼에 오신 것을 환영합니다 이것은 시스템 22의 Jamie입니다 그리고 웹 디자인 테크 팁 통신 어제 우리는 우리가 그 비디오에서 비디오를 만들었습니다

일부 CSS 효과를 적용하고 일부 미디어 쿼리 사용 아 마의 이름으로 신사가 나에게 여기에 질문을했다 나는 내가 말하기를 바란다 너의 이름은 그가 미디어 쿼리에 대해 더 많이 배우고 싶다고 말했어 그래서 나는 그들이 우리가 그들을 사용하는 이유를 설명하는 비디오를 만들 것입니다 미디어 쿼리는 CSS이므로 WordPress를 사용하고 있습니다

Divi 테마를 사용하고 있습니다 WordPress를 사용하면 정말 멋지 네요 당신이 정말로 당신을 사용하는 것을 고려해야합니다 이 비디오 아래 링크에서 얻을 수 있지만 오늘 우리가하고있는 것은 순수 CSS입니다 부트 스트랩 사이트 나 HTML 사이트에서 적용 할 수있는 모든 사이트에서 작동합니다 CSS를 만들었 기 때문에 조금 만들었습니다

여기에 열 E 개의 주요 제목과 약간의 텍스트가있는 세 개의 작은 텍스트 상자 그 (것)들에서 당신은 볼 수있는 화면 크기를 가지고있는 미디어 쿼리가 무엇인지 사람들이 우리 스크린을보고 있다면 당신은 잘 말할 수 있습니다 이 일이 일어나길 원하거나이 크기와이 크기 사이에 있다면 일어나서 내가 이것을 좋아하는지 보여 주자 실제 장식이없는 네 개의 보통 텍스트 블록이 있거나 여기에 무슨 일이 있어도 내 선택권은 좋아 내 사용자 정의 CSS 필드는 내가 Divi를 사용하고 있다고 말했듯이, 코드를 사용하고 있다면 Divi 일반 탭을 사용자 지정 CSS에서 다른 많은 테마를 느낄 수 있습니다 일반적으로 사용자 정의 CSS 필드가있는 사용자 정의 외관은 지금 약간의 공간을 만들어 보자

그것은 내가 미디어라고 부르는 제목입니다 제목을 부여하는 것이 항상 좋은 생각입니다 나중에 슬랩 스타 스타 슬래시를 찾을 수 있습니다 따옴표로 묶어 브라우저가 코드를 다르게 읽지는 않습니다 장치의 너비가 다른 화면이 있으며 예를 들어 데스크톱 24 인치 화면에서 볼 때 아마도 그것은 아마 내가 1900 년을 1080 픽셀로 추측하는지 모릅니다

그런 식으로 뭔가를 말해 줄 수있는 비디오 해상도를 확인할 수 있습니다 물론 우리 iPad는 훨씬 작아서 생방송으로되어있을 것입니다 훨씬 작아서 상황을 다르게 표시하고 싶을 수도 있습니다 여러 번 볼 수 있기 때문에 기기 크기가 다릅니다 아마 데스크톱에서 보았을 때 또는 제 위치에있을 때 숨 막힐 듯합니다

그들은 전화로 자리를 잡지 못할 것이므로 전형적인 미디어 쿼리를 추가합시다 실제로 미디어 쿼리는 실제로 아래에 하나 있습니다 그래서 당신은 항상 그 미디어로 시작합니다 매체에서 다음 화면을 말한 다음 일반 대괄호 세트를 엽니 다 그리고 여기 안에는 미디어 쿼리를 넣으려는 곳이 있습니다

거기에 두 배가 있어요 나는 그렇게 할 수 없을거야 내가이 순간에 그렇게 할거야이 크기 사이에 말이야 이 크기는 이러지 만 멕시크 폭으로 시작 하겠어

그냥 갈거야 1200 사진을 말하자면 내가 말하는 것은 화면이 크기는 가능한 한 최대 폭을 의미합니다 그 후 나는 단지 열리고 닫히는 1200의 사진의 안에서 지금 일부 중괄호와 여기에 넣은 것도 있습니다 적용될 필요가 없습니다 이제 분명히 적용될 것입니다

최대 너비를 가진 1,200 개의 그림 화면보다 작은 화면 1,200보다 작거나 같아서 여기에 우리가 얻은 것을 보자 작은 텍스트 블록은 그에게 클래스를 주어 실제로 목표를 지정할 수 있습니다 여기에 몇 가지 CSS가 있습니다 여기 Divi 테마에 관해서 설명 드리겠습니다 mq-1 클래스 예 미디어 쿼리에 대해 동일한 작업을 수행 할 것입니다

너는 네가 바라는대로 네가 원하는대로 네가 원하는대로 네가 원하는 것을 기억해 나는이 다른 것들에 대해서도 똑같이 할 것입니다 너 너 우리는이 방법으로 CSS는 그들이 이름을 가지고 있기 때문에 당신이 원한다면 그에게 이름을 부여하는 것과 같습니다 그걸 업데이트해라

지금 우리가 페이지 자체를 보면 꽤나 잘 알고 있습니다 이것을 증명하기 위해 저는 극적으로 CFS를 조금만 할 것입니다 f12 키를 눌렀을 때 무슨 일이 일어나고 있는지 확인해주세요 브라우저에서 Google 크롬을 사용하고 있습니다 f12를 클릭하면 inspector 개발자 도구 검사원이 나타납니다

그리고 반응하는 탭이 있습니다 일단 당신이 그것을 치면, 물건을 끌어서 내리고 밖으로 내밀어서 당신은 그것을 축소하고있는 것을 볼 수 있습니다 서로 붕괴되고 있습니다 위대한 것은 여기에 있습니다 그 번호의 실제 너비는 내가 그 번호를 뽑을 때 처음으로 번호가 매겨집니다

올라간다 다시 밀어 내려 가라 좋습니다 그래서 우리는이 모든 것을 제공 한 몇 가지 미디어 쿼리를 보여 드리겠습니다 mq-1의 이름입니다

나는 이것이 내가 그들에게 준 것이라고 믿습니다 그래서 무언가를 만들어 봅시다 방금 쓴 Nydia 쿼리는 1200 세 미만 이었으므로 뭔가를 만들자 1200 이하로 내려 가서 사용자 정의 CSS로 돌아가 보겠습니다 그래서 우리는 클래스에 mq-1을주었습니다

클래스 도트와 mq-1이라는 이름이 붙었습니다 중괄호를 열고 닫으십시오 여기서 CSS를 넣을 수 있습니다 그래서 우리 사이트를 보면 순간적으로 뭔가를 극적으로 보냅시다 아무 일도 일어나지 않습니다

이미지를 마우스 오른쪽 버튼으로 클릭하고 검사하면 이미지가 나타납니다 IMG 이미지가 있고 제목 태그를 마우스 오른쪽 버튼으로 클릭하여 검사하면 h2 그리고 당신은 단지 P가 될 것입니다 몇 단락 텍스트를 가지고있어 거기에 P가 강조 표시되었으므로 우리는 모든 것을 개별적으로 말할 수 있습니다 여기 전체 블록을 대상으로하므로 CSS를 추가해 보겠습니다 배경을 파란색으로 보자 텍사스 의사가 텍스트 라이트를 만들어 봅시다

우리는 잠시 그 ​​것을 떠날 것입니다 아니면 모든 것을 목표로 삼고 있습니다 이제 Elia 질의 중 하나의 키가 그 안에있는 텍스트를 대상으로 삼을 것입니다 단락 본문을 열어서 왜 그렇게 다시 열어서 곱슬 머리를 닫아야하는지 생각해 봅시다 괄호 한 번 흰색 FFF 6f 색상을 지정하고 이제 해당 제목을 대상으로합시다

그것은 미디어 쿼리 하나는 블록이고 내부는 h2 열기 닫기이며 curlies는 내가 노란색을 볼 필요가 없다는 것을 확인한다 그것은 단지 보일 것이다 이상하지만 거기에 우리는 괜찮아 그래서 그게 무슨 일이 일어나는지 보자 꽤보기 흉하게하자 우리의 변화를 저장하고 다시 HTML 사이트 또는 부트 스트랩 사이트를 사용하여 스타일에 넣을 수 있습니다

시트 또는 인라인으로 페이지 상단에 넣을 수 있습니다 이제 우리가 페이지로 돌아 가면 빨리 새로 고칩니다 이제 우리가 1454에있을 때 내가 1200보다 아래로 수축하면 재생할 이러한 변경 사항 그래서 여기에 배경이 사라진 것을 볼 수있는 12 9450 붐이 있습니다 지금 h2가 작동하지 않았다 하지만 배경이 바뀌고 텍스트가 흰색으로 바뀌는 것을 보았습니다

거기에 여분의 V가있는 이유는 무엇입니까? 이제는 물건을 표시하기 때문에 사용자를 말하는 것처럼 많은 용도로 사용됩니다 다른 기기에서 다르게 사용하면 네가 괜찮 으면, 더 잘 보일거야 그건 노란색이에요 옅은 황색이라고 말할 수 있는지 모르겠군요 하지만 약간의 패딩을 우리가 약간의 패딩을하고 싶습니다

거기에는 패딩이 없기 때문에 거기에 있습니다 당신 patek 내가 그것을 좋아하는 것처럼 조금 더 잘 보이게하기 위해 15 명의 사진의 종류를 줘라 이게 데모라고 말하면서 어떻게 될지 너무 걱정하지 않아요 알았어 그래서 거기에 그저 조금 더 아래로 움직일 것입니다

그것은 단지 텍스트 주위에 약간의 덧붙임을 추가했기 때문에 약간 분리되어 있습니다 괜찮아요 일단 우리가 12 이상으로 올라 가면 그것은 12 세 이하 였고, CSS를 할 수있는 것이 었습니다 다른 미디어 쿼리 및 이번에 다시 변경하자 작은 장치 및 텍스트를 오른쪽으로 정렬하자

추측해서 나는 이것을 단지 복사 할 것입니다 줄을 내리다 거기에 우리가 간다 나는 지금 그것을 복사했다 나는 말하기 위하여 말할 것이다 900가 보자 이 배경을 녹색으로 만들어 봅시다 국경을 넘겨 주자 국경을 넘겨 줘 나는 단단히 선택하게된다

당신 코딩 할 때 철자를 잘못 쓰면 기억하십시오 일들은 괜찮은 패딩을 잘하는 경향이 없습니다 여기 텍스트가 이번에는 노란색으로 만들어 보겠습니다 거기에 해시 태그가 필요하지 않습니다 우리는 색상을 사용하고 있습니다

센터에 텍스트를 저장하면 저장됩니다 텍스트 정렬 : 가운데 네가 알고있는 전투 바탕 화면에서 왼쪽으로 정렬하면 멋지게 보일 수 있습니다 하지만 휴대 전화에서는 계속 진행되기 때문에 중앙 집중식으로 원할 수 있습니다 거의 더 작은 스크린이 될 것입니다

당신 우리가 이미지를 갖고 싶지 않기 때문에 우리 사이트를 살펴보기로 결정할 수도 있습니다 여기에서는 지금은 아무 것도하지 않을 것입니다 900 번 이미지를 우클릭하면이 이미지가 잘 사라지기를 바란다 그것이 IMG인지는 알지만 IMG가 우리가 이미지를 만들 수 있다고 말할 수는 없습니다 더 커지거나 사라지게 만들 수 있습니다

나는 그것을 사라지게 만들 것입니다 그래서 그것은 mq 1 + OMG가 거기에있는 이미지 일 것입니다 다양한 기기에서 사이트를 맞춤 설정하기위한 더 많은 옵션 책임감있게 그 일을 알게 해줄 수 있습니다 내 말을하자 우리 사이트로 돌아 간다

나는 다시 12 번 새로 고쳐야 겠어 이제 우리가 12 세가되면 배경은 파란색 텍스트 흰색 등으로 갈 것입니다 우리는 9 이하로 내려갑니다 9는 녹색 배경을 켜야합니다 그 이미지가 사라져야합니다

그렇게 해보겠습니다 우리는 우리가 본 12에 이르렀습니다 이미 9시 아래로 내려 가자 거기에 배경이 녹색으로 바뀌고 이미지를 볼 수 있습니다 사라지고 그냥 센터 정렬하자

각각은 암소를 채색한다 당신 당신 우리는 거기에 갈 그리고 두 값을 다른 값으로 넣을 수 있습니다 당신 예를 들어 여기에 다시 들어가서 미디어 쿼리에 900을 물어볼 것입니다 이걸 다시 복사하자 논쟁이 말한다

우리가 600과 700 사이에서 일어날 일이 아마 효과가 없을 것이라고 말하지만 예제로 오, 내가 그것을 두 번 복사하자 그걸 없애 버리자 800 번 최대 폭 사이에 806 백분의 일이므로해야합니다 그 다음에 그 다음에 더 많은 정규 괄호를 추가하면됩니다 최소 너비 우리가하는 말의 908 백분의 600 600pics 좋아

그래서 우리가 거기에서 약간의 여분의 공간을 만들었습니다 우리는 그것을 말하고 있습니다 화면의 최대 너비는 800이고 최소 너비는 600이므로 최소 600 개의 최소 800 가지 종류의 작은 태블릿 또는 그와 비슷한 것 또는 심지어 우리가 뭔가 일이 일어나길 원한다는 큰 전화는 이렇게 말하죠 우리가 볼 수있는 것을 아주 붉게 만들어서 아주 추악한 것을 볼 수 있습니다 사이트 패딩은 패딩을 10 단계까지 떨어 뜨립니다

가자 노란 경계 P와 우리의 텍스트가 전혀 표시되지 않도록합시다 그래서 나는 단지 display : none을 넣었다 우리는 그것을 중심으로 유지할 것입니다 아마도 우리는 너를 볼 수 있도록 물건을 돋보이게하려고 다시 한번 노란 색으로 만들어라

이번에는 중심에있는 일이 멀다 우리의 이미지를 더 크게 만들자 우리의 이미지가 너비와 높이로 만들어 보자 그래서 순간은 150×150입니다 생각합니다

깃발을 던지고 있다는 것을 알고 있습니다 거기에 노란 색으로 노란 색을 칠하면 그는 동시에 말하는 타입이 될 수 있습니다 좋아, 그래서 우리가 뭐라 말할지라도 우리는 너비와 높이를 줄거야 250 속성을 가정 해 봅시다 정사각형 이미지인지 높이인지는 모르지만 250을 놓아 두어 그것을 확보 할 수는 있지만 그것을 왜곡하지는 않습니다

데모 용일 뿐이에요 좋아 우리가 여기서 한 일이 그 아래에있는 다른 것을 보자 그래서 우리는 가고있다 800 ~ 600 pix 사이에서 이것을 원한다

우리가 저장 한 우리의 사이트로 돌아가 봅시다 상단 그래서 파란색 1200 900은 녹색이고 이미지 없음 거기 그것이 있고 지금 우리는 800에서 600까지 우리는 텍스트 이미지를 원하지 않는다고 말했습니다 250보다 커야하고 우린 여전히 제목이나 신념을 가지고 있으므로 거기 가서 우리는 어떤 이유로 든 이미지가 없다 우리는 노란 경계와 제목을 얻었다 왜 우리는 아무런 이미지도 얻지 못했다

다시 표시하라는 말 우리가 너를 간다 당신 약간의 여백이있다 나는 그것에게 정상에 부정적인 여백을 줄 것이다 그 상자에 다시 넣을거야 당신 당신 거기에 우리가 다시 들어가서 괜찮아

우리가 그 멍청 했어 제목 아래 이미지가 축소 되어도 이미지가 표시되지 않고 이미지가 아래로 떨어지면 오직 6 ~ 8 백 명 정도의 사람들 만이 그렇게하기를 원한다 우리는 600 이하로 떨어집니다 그 전의 상태로 되돌아갑니다 당신 네가 끝내려면 600 이하의 모든 것을 말할 수있을거야

나는이 한 번 더있을거야 그래서 600 이하로 떨어지려면 최대 너비 600 이제는 우리가 최소로 제거 할 수 있습니다 왜냐하면 우리가 정말로 영향을 미치기를 원하지 않기 때문입니다 아무것도 우리는 배경을 말할 것이다 : 백색 당신이 무엇을 원 하든지 당신이 무엇을 원 하든지간에 그것은 패딩을하고 싶습니다 너무 많이 거기에 있었고, 나는 이쑤시게 입체를 샀다

우리는 우리의 텍스트를 되 찾을 것입니다 각각의 말 도서관 너 우리는 그것을 중심 이미지로 유지할 것이다 우리가 거기서 먹어서는 안된다고 말하면 돼 사실 나는 그것을 버리고있어 이미지가 단지 기본 설정이라는 것을 보여주고있다 이제 거기에 마지막으로 닫는 중괄호를 쓰고 싶지 않습니다

미디어 쿼리를 수행 할 때마다 결국에는 CSS를 넣을 때는 항상 한 번만, 실제 미디어가 들어있는 경우에는 한 번만 사용할 수 있습니다 질의 자체는 이제 어떻게되는지 보자 우리는 다시 그릴 것입니다 이 빨간 비트가 여기있는 이유는 그 이미지를 두드리고 있었으니 그냥 해보 죠 이 섹션에 빨리 있었기 때문에 그 10 명의 사진을 잘 만들자

당신 효과를 내기 위해 25 개의 사진을 만들어 보겠습니다 좋아, 우리가 그 위로 가기 새로 고침을 취소 저장 우리는 그것을 크기로 끌어 내리기 시작할 것입니다 그래서 우리는 일어날 일을 알고 있습니다 그곳에 900 거기에있을 것입니다 그리고 800에서 600 사이에 우리가 간다 그래서 즉시 넓이와 높이를 부여했습니다

실제 너비보다 더 큽니다 요소 자체 그 다음 600 이하 그래서 우리는 그 텍스트를 검정색으로 만들었습니다 당신 여보세요 600 오줌 마저 우리가하지 않았어 아무것도 표시하지 않고 방금 다시 표시하도록했습니다 좋습니다

당신 거기에 우리는 포터도 거기에 간다 우리가 방금 더 작은 것을 말했기 때문에 그것이 바뀌지 않을지라도 600 명이 넘는 사람들은 똑같은 일을하기를 원한다 그러면 우리는 600 명을 되돌릴 것이다을 더한 그래서 나는 당신을 위해 사물을 설명하기를 바란다 미디어 쿼리는 귀하의 사이트 사용자 경험을 사이트는 계속해서 건물과 건물을 유지하고 건물을 짓고 다른 건물을 만들 수 있습니다 작은 화면과 큰 화면에서 일이 발생하여 사용자가 최고의 경험을 얻고 모든 것을 읽을 수있다 가능한 한 최선의 방법이 있으므로 간단한 설명이 있습니다

당신과 당신이 CSS로 할 수있는 모든 것들에 대한 미디어 쿼리에 대한 설명 미디어 쿼리 내부에서 좋은 효과를 얻을 수 있기를 바랍니다 그게 도움이되었습니다 우리 채널을 구독하고 당신이 웹 디자인에 관심이있는 경우 이것을 즐긴다면 비디오 아래의 웹 디자인 코스 중 하나는 YouTube 구독자에게는 멋진 무료 코스가 한 번 있습니다 다시 이것은 시스템 22의 jamie와 기술 팁의 웹 디자인에 감사드립니다 보고 좋은 하루 되세요

Divi 3 Custom Woocommerce Product Page in the Divi WordPress theme menu

안녕 얘들 아, 다른 Divi 비디오에 오신 것을 환영합니다 이것은 시스템 22의 Jamie입니다

웹 디자이너 기술 팁 진정 누군가가 나에게 질문을 보냈습니다 황금 고추 영화 당신이 실제로 어떻게 변화하는지 묻는 멋진 이름 여기 장바구니에있는이 페이지의 모습 이것은 WooCommerce를 설치할 때의 실제 제품 페이지입니다 자동으로 생성되므로 내 페이지에 아무 것도 없습니다 우리가 여기를 보게되면 실제로 그것을해라 우리 페이지로 가자

WooCommerce가 장바구니 페이지를 생성하는 것을 볼 수 있습니다 편집하다 실제 제품 페이지 자체는 실제로 돌아 가지 않으면 실제로는 없습니다 제품 페이지의 경우 자동으로 생성되기 때문에 당신이 원하는 것을 할 수있는 그들을 사용자 정의 할 수 있습니다 그녀에게 정말 맞춤 CSS가 있었으므로 이제이 CSS를 사용 해보자 이 사람은 당신이 어떻게 흰 배경이나 심지어 이 페이지가 보이는 방식을 바꿨으므로 흰색 배경을 조사해 봅시다

그것의 주요 내용은 아마 아직 그들은 ID 주요 내용 배경색 FFF를 가지고있다 논쟁의 여지없이 그냥 밝은 파란색을 보자 그러니 우리가해야 할 일은 복사하는 것이다 이것을 우리의 맞춤 CSS에 넣으십시오 지금 Divi 테마를 사용하고 있습니다

이미 이미 있습니다 편리합니다 Divi에 대한 대시 보드로 이동하면 일반 탭에 표시됩니다 바로 아래쪽에 있습니다 사용자 정의에도 하나가 있다고 생각합니다

탭 여기 또는 테마 커스 터 마이저는 여기에있는 경향이 있습니다 이걸 사용하십시오 그래서 평소처럼 제목을 주자 그러면 앞으로 더 쉽게 찾을 수있다 슬래시 스타 스타 슬래시와 우리는 브라우저가하지 않도록 그것을 주석 코드로 읽는다

그냥 우우 제품이라고 부를거야 우리는 당신이 염두에두기 원하는 코드를 여기에 붙여 넣을 것입니다 우리가 Divi 테마를 사용하고있는 주요 콘텐츠를 실제로 타겟팅하고 있는지 당신이 사용하는 경우 내 모든 콘텐츠가 그것에 사용자 정의 스타일을 가지고 있기 때문에 중요하지 않습니다 이 모든 페이지에 영향을 미치지 않는지 확인하려는 다른 테마 모든 단일 페이지에 주요 컨텐츠 영역이 있으므로이 내용을 WordPress에서 사용하지 않으면 Divi 테마를 사용하고 있다고 말할 수 있습니다 당신은 그것으로 절대적으로 굉장한 것을보고 싶을지도 모릅니다

그리고이 비디오 밑에있는 링크에서 다운로드 할 수 있습니다 프리미엄 테마이지만 가치있는 일이라면 무엇이든 할 수 있습니다 그게 판매 피치예요 지금 내가 새롭게 할 때 그것을 지켜야합니다 같은 옙 거기서 우리는 그렇게 당신이 배경색을 바꿀 수있는 방법입니다

우리의 다른 페이지들 중 하나를 보도록하겠습니다 홈 페이지로가 봅시다 우리의 하얀 부분을이 밝은 파랑으로 바꾸지는 마세요 내가 배경 이미지와 물건들을 데모하기 위해 그것을 사용하고 있었던 추악한 광경 메뉴에는 변경되지 않았으며 아무 것도 볼 수없는 흰색 영역이 있습니다 거기에 내가 말하는 것처럼 당신이 당신의 사이트에서 이것을하고 있다면 당신은 사용하지 않고 있습니다

Divi는 그냥 확인해 봤는데 물건을 망칠 수 있기 때문에 괜찮아 그것이 배경 이미지를 원한다면 색상을 변경하는 방법입니다 똑같은 일이 우리에게 돌아갑니다 나는 이것을 단지 주석 처리 할 것이라고 생각한다 배경 이미지를 넣자

그런 다음 배경 이미지의 경우 URL이 어디에 있는지 확인해야합니다 몇 가지 거꾸로 표시된 쉼표로 URL을 찾으십시오 그리고 우리가 여기서 사용하는 것을 확실하게 한 것은 우리가 너무 성급한 것도 원하지 않는다고 생각합니다 글쎄, 난 그냥 우리가 한 순간에 그것을 바꿀 수있는 모든 이미지를 넣어 내가 할게 다시 해 보겠습니다 이미지를 더블 클릭하면됩니다

이미지 페이지 및 실제 이미지 자체의 URL은 다음과 같습니다 우리는 여기에이 이미지를로드하도록 사용자 정의 CSS에 지시해야한다고 알려야합니다 거기에있는 그 거꾸로 된 쉼표 사이에 넣으십시오 우리는 우리 페이지로 돌아 간다 새로 고침 백그라운드에서 그 추한 이미지를 얻지 못한 모든 큐는 절대 보이지 않습니다

멋진 이미지가 아닌 이미지를 조금 바꿔 보겠습니다 이 URL을 사용하자 그러면 해당 URL을 바꿀 것이다 너 너 당신 다시 한 번주고 당신 페이지로 돌아가서 새로 고침 예 계속하려면 그러나 그것은 조금 덜 충격적입니다

그러나 어쨌든 당신은 이것이 당신이 어떻게 생각하는지 알게됩니다 이미지 배경을 추가 할 수 있으며 그 이미지를 스크롤하는 순간 콘텐츠가 실제로 배경에서 스크롤되도록 고정되도록 설정합니다 고정되어 있으므로 배경 첨부 파일이 될 것입니다 그리고 당신은 고정 된 말을하고 그것이 실제로 정말로 그 차이가 있다고 말하겠습니까? 바닥에 우리 페이지로 돌아 가기 신선한 그녀는 처음에는 어떤 변화도 보지 않을 것이다 좋아,하지만 이제 우리가 스크롤 할 때 그 배경 이미지는 그대로있다

좋아, 우리가 바꾸고 싶은 곳이 어디 있겠 니? 여기에 사이드 바 당신 div ID 사이드 바 d 해시 태그를 사이드 바에 추가하면됩니다 우리 옵션으로 다시 가자 내 ID 사이드 바이기 때문에 하나의 해시 태그를 드롭 그리고 약간의 공간처럼 우리는 No를 표시하지 않을 것입니다 변경 사항을 페이지에 다시 저장하십시오 새로 고침 거기에 사이드 바가 방해가되었습니다

나는이 작은 하얀 막대기를 아직도 여기에서 얻는다 나는 그것이 주된 내용이다라고 생각한다 그래서 컨테이너 앞에 바로 그 작은 친구를 추적하기가 어려울 수도 있습니다 당신 그것은 마치 모든 것이 화가 났던 것처럼 보입니다 당신 예, 거기에있는 작은 흰색 선이 사라지는 것을 확인하지 않으면 거기에 있습니다 그 내용을 담고있는 메인 컨텐츠 컨테이너입니다 우리는 그것과 같은 일을 할 것입니다

나는 여기에 자신을 반복하고 있지만 당신의 다른 페이지와 확인을 계속 알아 당신이 이런 종류의 일을 할 때 사이트가 더 많은 영향을 줄 수 있기 때문에 우리가이 일반적인 아이디어를 여기에 사용한다면 다른 것보다 ID가 영향을 받고 다시 표시하고 아니오라고 표시합니다 다시 사이트로 사라져야 할 신선한 희망 음식 맞아, 우리가하고 싶은게 뭐야? 그래, 가자 좋아,이 메시지 어쩌면 우리는 그것을 어둠의 블루스로 만들고 싶을 것이다 여기서 지루하고 지루 하긴하지만 너는 갈 수 있고 네가하고 싶은 일을 할 수있어 이런 일 그냥 논쟁을 위해 진한 파란색으로 바꿔 줘

난 그냥 무작위로 복용하고있어 색상과 당신이 그것을 철자가 올바른지 싶어하거나 너무 어두운 파란색과 그것이 작동하지 않습니다 그것 상자 그림자 재미있는 일을 지키기 위해 꽤 표준적인 하나는 많은 시간을 사용했습니다 우리는 중요한 세트를 사용해야한다고 생각합니다 이것에 클래스 그래서 당신이 가지고있을 필요가 없다면 이것을 사용할 때 우리는 생각합니다 그것을 강제해야 할 것입니다 우리는 우리가 그 작은 상자 그림자를 다시 얻었습니다

이것을 복사하십시오 사용자 정의 스타일 시트를 넣으십시오 당신 사이트로 다시 저장하면 광고가 무한정 변경 될 수 있습니다 대부분 이것들은 WooCommerce 제품으로 문제가되지 않습니다 하지만 그 메인 타이틀에 대해 말한 것처럼 영향을 미치지 않는지 확인하고 싶습니다

귀하의 사이트에있는 다른 페이지 만약 당신이 그것을 풀 수 있습니다 우리가 여기에있어 우리는 클래스 작업 WordPress에 이미지 344 유리거야 난 편집을 마우스 오른쪽 버튼으로 클릭하면 지금 편집하지 않은 사람들을 위해 HTML로 편집됩니다 평가판을 사용하면 여기에 Google 크롬을 사용하고 있다는 것을 알 수 있습니다 여기에이 개발자 도구가 있습니다 많은 개발자가이 도구를 가지고 있다고 생각합니다하지만 Chrome 사용을 좋아합니다

이 개발자 패널을 가져 오려면 f12 키를 누르십시오 그러면 원하는 것은 무엇입니까? 이 이미지를하려면 우리는 그것을 둥글게 만들 수도 있습니다 사각형 사이에 간격을두고 둥글게 만듭니다 아래에있는 것들은 그것에게 국경을 부여합시다 괜찮아요, 이걸 내 커스텀 CSS에 직접 쓰겠습니다

클래스였습니다 그것은 점이 아니 었습니다 우리는 국경을 넘기지 않을 것입니다 우리가 말한 것이 국경이 아닌 것입니다 I 'll는 5 개의 사진 고체의 백색을 말한다 FFF 예 우리는 그것을 할 수있다

국경 반경 50 % 그 밖의 무엇을 우리는 바닥에 약간의 공간을주고 싶었습니다 그것을 마진 바닥을 줘 내가 바르게 그 마진을 넣을거야 – 바닥 그래서 내가 말했듯이 일을 제대로하지 않으면 시간이 많이 걸립니다 50 픽셀을 사용하지 못할 것입니다 바닥에 마진을 남겨두면 중요한 우리가 볼 수있는 이들 중 일부를 얻을 수있는 수업 내가 만약 내가해야한다면 그것을 할거야 새로 고치지 마라

나는 거기에 맞는 이미지를보고 있다고 생각하고있다 오, 괜찮습니다 우리는 이제 둥근 것입니다 우리는 이들 사이의 바닥에서 분리되어 있습니다 다시 Midas Tarpley로 당신 그래, 네가 간다

내가하는 일을 내가 할거야 제목과 시작 태그가 있으면 여기에 태그를 추가해야합니다 당신 내가 닫을 태그가 없다면 내가 여기에 올린 내용을 정확히 복사 해 내야한다 배경 진한 파란색 그리고 우리는 그 상자 그림자를 줄 것이다 페이지로 돌아 가기 동일하게 유지해야하지만 밑에 작은 상자 그림자가 있어야합니다

거기에 작은 흰색 테두리가있어 실제로이 긴 상자를 여기에 끼고 있습니다 그냥 새로 고침하자 거기서이 작은 일은 여기에 있습니다 후에도 우리는 거기에 갈 그것은 단지 하나의 선택이기 때문에 약간의 패딩에 영향을 미쳤습니다 그러니 그걸 없애자

당신 당신 그래서 그들은 다음과 같이 표시합니다 당신 우리는 두 가지 중요성을 가질 수 있습니다 새롭게 하다 괜찮아 그건 우리가 그곳에서 원한 것이 아니고,이 텍사스가 한 일 이니 그걸 취소하다 당신 나는 말할 것이다 한 장의 그림이 나오 자마자 빅터 우리는 그것을 투명하게 만들어서 아직 거기에 있지만 당신은 그것을 볼 수 없을 것입니다

당신 나는 너를 봐 당신 거기에 우리가 간다 그래서 그것은 아직도 실제로 당신 단지 거기에있다 우리가 그것을 투명하게 만들었 기 때문에 그것을 볼 수 없습니다 네 마음의 내용에 그렇게하는 걸 말하면, 네가 조금이라도 조심하면된다 Divi 테마를 사용하지 않고 조심스럽게 내가 사물이라고하면 다른 페이지에도 영향을 미치지 않습니다

당신은 단지 그것을 원상 복구시킬 수 있습니다 당신 당신 그래서 나는 우리가 여기서 무엇을하고 싶은지를 너를 보았다 그래, 내가 컨테이너를하면 80 % 나는 이것을 바꿀 것이라고 생각하지 않는다 이것을 넓게 만드는 단수 그러나 나는 그 요점을 정말로 보지 못한다 그리고 우리는 우리가 가지고있는 것을 가지고있다

당신 당신이 계속해서 그 일을 계속할 수 있고 당신이 할 수있는 버튼을한다고 말했듯이 여기에 태그를 달아서 우리가 해왔 던 것처럼 효과를 낼 수 있습니다 맞춤 CSS를 선택하고 계속해서 그렇게하면됩니다 그 홈페이지를 확인하기 만하면 어떤 영향을 미치지 않았는지 확인할 수 있습니다 꽤 짧은 것이 너를 갖지 못할거야 아 그건 절대적으로 좋았어

그래서 너 한테있어 대시 보드에없는 WooCommerce 제품 페이지를 사용자 정의하십시오 페이지 섹션을 참조하십시오 동영상에 관심이 있으시면 웹에 관심이 있다면 채널에 가입하십시오 개발 아래 웹 개발 과정 중 하나를 선택하십시오

YouTube 가입자에게 큰 할인 혜택을 제공합니다 무료 코스가 거기에서 다시 한번 시스템 22의 제이미가되었습니다 웹 디자인 및 기술 팁 통신을위한 감사의 좋은 하루 되세요

Bootstrap 4 cross browser compatibility testing

안녕 얘들 아,이 부트 스트랩 4 비디오에 오신 것을 환영합니다 시스템 22의 Jamie입니다

웹 디자인 및 기술 팁 comm이 비디오는 만드는 법을 보여줍니다 부트 스트랩 사이트가 크로스 브라우저와 호환되는지 확인하십시오 브라우저가 무엇이든 지금 Explorer Chrome Firefox에서 올바르게 표시하십시오 또는 고객이 계속 지켜보고있을 수 있으며 실제로 중요한 단계이며 너무 어렵지 않아서이 비디오는 우리의 과정에서 발췌 한 것입니다 곧 제공 될 포괄적 인 코스입니다

우리가 사용하는 HTML과 CSS 3을 사용하여 곧 시작될 페이지를 만드는 법 JavaScript는 실제로 카운트 다운 자체를 위해 우리는 몇 가지 PHP 스크립트를 사용합니다 당신이 여기에서 볼 수있는 것처럼이 사이트는 subscribe와 contact 폼을 가지고 있습니다 카운트 다운 타이머와 좋은 호버 효과가 있습니다 여기에서 일하는 연락 양식을 작성하십시오 여기에 유효한 구독 양식이 있습니다

나는이 과정이 당신에게이 전체 사이트를 모으는 방법을 보여줍니다 물론 원하는 종류의 웹 사이트에 사용할 수 있지만 원하는 경우 관심 있으신 분은 10 달러에 코스를 수강하실 수 있습니다 아래 링크는 YouTube 가입자에게 큰 할인 혜택을 제공합니다 이 비디오를보고 사이트 크로스 브라우저를위한 부트 스트랩을 만드는 방법을 배웁니다 우리는 우리의 전자 우편이 작동 할 수있게되었습니다

우리가 구독하는 연락처 양식은 이것이 다른 브라우저에서 작동하므로 Google 폴더로 가자 파이어 폭스로 열자 Firefox가 다른 모니터에서 열립니다 알았어 사실과 그라디언트가 잘 작동하고있어 좋은 결과를 얻었습니다

탐색기로 열어 보겠습니다 누가 즉시 문제를 보게되면 자바 스크립트를 차단하여 차단을 해제합니다 괜 찮 아 요 괜 찮 아 요 잘 우리의 그라디언트 분명히 여기에 작동하지 않습니다 인터넷 익스플로러 버전 11 나는 11 명의 탐험가가 거의 은퇴했다고 생각한다 이제 Windows 10에서 그들은 새로운 시대를 맞았으며 언제나 우리가 RGB 그래디언트 대신에 할 수있는 몇 가지 호환성 문제 우리가 여기에 가려고하는 것처럼 16 진수 CSS 그라디언트 생성기라는 사이트로가 봅시다 나는 이것을 당신의 자원에도 넣을 것입니다

우리가 영장을 얻고 자하는 것과 가까운 곳에 이걸 보자 그래서이 색들을 바꿔 봅시다 우리는 이제 우리가 가기에 투명하고 검은 색으로 가버 렸습니다 아래쪽과 검은 색으로 검은 색으로 표현하고 싶습니다 불투명도를 그렇게 보겠습니다

나쁜 거기서 우리는 조금 어쩌면 위로 구르고있다 그보다 더 높은 무언가 너 너 네가 그것을 가질 때까지 그걸 가지고 노는 그런 것들 당신은 원한다 그리고 우리를 위해이 코드를 생성하고있다

그것은 환상적이다 일단 당신이 그것에 만족하면 이것을 복사하고 우리가 가진 것을 대체 할 것입니다 이 코드를 사용하여 CSS를 작성하면 모든 브라우저와 호환 될 것입니다 Chrome Explorer Firefox 또는 Safari를 누릅니다 그래서 우리는 그 첫 번째 비트가 단지 주석 일 필요는 없습니다

네가 원한다면 복사해도 돼 아프지 않을거야 내가 가져갈거야 저기에서 줄곧 저것은 또한 코멘트 다 그러나 우리는 그것을 저기에 유지할 것이다

ctrl 복사 할 C 파일을 CSS 파일로 보겠습니다 위대한 우리는 그것을 여기에서 열어 줬다 그리고 그것은 우리를위한 BG 어두운 배경이었다 navbar 거기에 바로 거기에 코멘트를하자 이 밖의 oops와 그렇게 그것은 읽히지 않을 것이다 나는 당신을 의미한다 원할 경우 삭제할 수 있습니다

여기에 줄을 써서 입력 해주세요 좋아 한 가지 할 일은 우리가하고 싶을거야 Explorer에서 열어도 여전히 작동하지 않을 것이고 그 이유를 설명해 드리겠습니다 잠시 후에 당신 중 일부는 짐작할 수 있습니다

이제 익스플로러에 가자 여기 새로 고침해라 그리고 그것은 일종의 일종의 일입니다 실제로 우리는 그라디언트를 가지고 있습니다 거기에 원래 배경은 여전히 ​​그 회색을 통해 보이고 그래서 무엇 우리는 내가 너와 함께 따라왔다면 내가 확신한다고 말하는 것처럼해야 해

우리는 꼭지를 가지고 있습니다이 중요한 권리를 복사하십시오 여기에 그 앞에 작은 세미콜론을 붙이십시오 to explore 익스프레스에 다시 가서 우리가 거기 새로 고칠 수 그래디언트는 우리가 원하는 바로 환상적으로 작동합니다 물론 다른 것은 우리 뒤에 작은 불투명 한 배경이 없다는 것입니다

실제로 우리가 읽을 수있는 텍스트는 꽤 좋지만 그것을 더 잘 읽을 수 있고 거기에 다른 이미지가 있다면 당신은 알고 있습니다 더 가벼운 이미지처럼 읽으려면 거의 불가능합니다 이 작업이 제대로 작동하는지 확인하십시오 모두 작업하고 있습니다 이렇게하면 여기에 우리의 CSS로 돌아 가면 그게 그게 내가 txt라고 불렀다는 것입니다

거기에 우리가 가진 배경이 있습니다 Firefox에서이 16 진수가 제대로 작동하는 것 같습니다 크롬이지만 탐색기는 오래된 탐색기가 좋지 않은데 조금 뒤쳐져 있습니다 RG로 색을 바꾸어야 해 괜찮아요

내가 제로 제로 (zero zero)와 같을 거라 생각합니다 아마 6이나 그런 것 같아요하지만 추측하고 있지만 더 쉽게 복사 해 봅시다 복사 할 필요가없는 처음 6 개를 복사합시다 너는 내가 아마 그 일이 생기고 우리가 갈 것이라는 것을 알고있다

또 다른 사이트는 16 진수를 RGB라고 부르며 이것은 우리 헥스를 변환 할 것입니다 거기에 검은 색으로 0이 생기므로 우리는 0을 0으로 만들 수 있습니다 그게 뭐니 뭐니 뭐니해도 6이나 8이고 잘못된 코드예요 아마 그렇습니다 왜냐하면 이것이 실제 불투명도이기 때문입니다 그래서 우리가 검은 색으로 남겨두면 물론 6 개의 0입니다

우리는 css3에서 3을 사용하고 불투명도를 원하는 수준까지 낮추십시오 실제로 어디에 있었는지에 관해서는 여기에 라이브 데모가 없지만 추측을 얻었습니다 그러나 우리가 크롬에서 우리 사이트를 다시 불러들이려고한다면 그래서 여기에 우리는 크롬에 단지 이것을 검사합니다 그리고 바로 텍스트 거기에 텍스트가 있습니다 이 일을 마친 후 마우스 커서에 영향을 미칠 수 있으므로 걱정이됩니다

대략 60 %에 대략 그렇습니다 아마 55 60 일 것입니다 그것을 볼 수있는 종류의 50 % 당신 그래서 우리는 단지 그것을 추측하고있는 것입니다 녹음을 멈추십시오 멈출 때까지 커서에 약간의 문제가있을 수 있습니다 다시 녹음하는 것 이외에 사과 할 수는있을 것입니다 알았어

그 웹 사이트로 돌아가서 출석이나 60 % 어디에서 충돌했는지를 볼 수있는 06 개의 코드로 그 코드를 생성합니다 이 사이트로 돌아가서 실제로 그것을 탐험하러 가고 싶다 우리는 CSS에 가서 내가 지금 무슨 말을하고 있는지 알고 싶지 않습니다 이것을 rgba 색으로 변경하고 싶습니다

우리는 거기에 갈 그 컨트롤 저장하기 이 시간을 탐구하지만 새롭게 하다 우리가 간다 거기에 불투명 한 배경이있다 그리고 우리의 선형 그래디언트가 교차 크로스 브라우저 호환을 가능하게합니다 당신이 원한다면 정말로 중요합니다 이제는 모든 브라우저에서 작동하므로 잘되어야합니다

당신이 비디오를 즐겼다면 당신에게 도움이 되었길 바랍니다 웹에 관심이 있다면 공유하고 채널을 구독하십시오 이 코스를 개발하고 아래에서 찾을 수있는 다른 많은 코스들 모든 YouTube 가입자에게 큰 할인 혜택이 있습니다 아래 코스가 다시 한 번 모습을 드러내고 있습니다 제이미가되었습니다

시스템 22 및 웹 디자인 및 부채 기술 팁 감사 지켜 주셔서 감사합니다 좋은 하루

Bootstrap 4 Using Google Fonts

안녕 얘들 아, 다른 부트 스트랩 4 비디오에 오신 것을 환영합니다 시스템 22의 Jamie입니다

웹 디자인 및 기술 팁 진정 이 비디오에서는 Google 글꼴을 탐색하고 Google 글꼴을 Google에 추가하는 방법에 대해 알아 보겠습니다 부트 스트랩 4 웹 사이트 이것이 현재 우리가 가지고있는 기본 부트 스트랩 글꼴입니다 우리는 아마 스타일 화 된 폰트를 추가함으로써 이것을 더 재미있게 만들고 싶을 것이다 머리말 및 아마도 다른 글꼴 본문 또는 단락 텍스트는 여기에 있습니다 Google에 가서 Google 글꼴을 넣어 보겠습니다

Google 글꼴을 클릭하십시오 그러면 Google 글꼴 페이지가 표시되며이 글꼴은 모두 무료입니다 당신의 위치에서 그 (것)들을두고 싶다 네가 마음에 들지 않는 무언가가 있다면 그냥 스크롤하면된다 당신이 선택할 수있는 많은 세리프 글꼴 산 세리프 글꼴은 필기를 표시합니다 그래서 이제 serif 글꼴을 얻었습니다

serif는 작은 태그를 가지고 있음을 의미합니다 밑에 그리고 옆면에 산 세리프 글꼴 만 있으면 태그는 개인적으로 깨끗하게 보이지 않습니다 나는 실제로 이것들을 선호합니다 그러나 맛에 대한 설명이 없으므로 원하는 것을 얻을 수 있습니다 글꼴 거기에 조금 더 많은 와우 요소가있는 뭔가가 있어요

나는 그녀가 꽤 재미있어하는 필기 글꼴을 여기에 넣었다 스크립트 글꼴은 필기체처럼 보입니다 그리고 여기에는 정말 위대한 것들이 있습니다 사람들이 많이 찍었습니다 실제 글꼴 인 모노 스페이스 글꼴을 디자인하는 시간 간단한 글꼴 이것들처럼 그리고 당신은 잘 말할 수 있습니다

잘 지내요 어떻게 그들을 내 안에 넣어야합니까? 웹 사이트는 꽤 쉽습니다 먼저 우리가하고 싶은 것을 생각해 봅시다 여기에 우리 페이지가 있습니다 우리의 제목과 함께 여기에 약간의 영향을 잘 주면 충격 글꼴을 사용할 수 있지만 나는이 디스플레이 폰트 중 하나를 사용해 보자

예쁜 알파 슬랩 하나 흥미로운 괜찮은 웰빙은 모노톤을 사용합니다 이것들을 사용할 것입니다 저는 그것들을 사용하는 방법을 보여줄 것입니다 그러나 이것을 사용합시다 효과를 볼 수 있으므로 더하기 버튼을 눌러이 글꼴을 선택하고 그 작은 검은 색 막대가 바닥에 내려와 지금 우리가 계속하고있는 것

여기에 우리는이 글꼴을위한 스타일 시트와 링크를 가지고 있습니다 실제로 우리 CSS를위한 폰트 패밀리가 있습니다 그래서 우리가해야 할 일은 해당 시작 태그에서 닫기 태그까지 맨 위에이 링크를 복사하십시오 당신은 그 ctrl C 중 하나를 잘라내 지마 우리의 괄호 텍스트를 열어 보자 편집자 그리고 만약 우리가 맨 위로 올라간다면 여기에 우리의 스타일 시트가 있습니다

나는 우리 마지막 스타일 바로 아래에 이것을 추가하고 싶다 여기에 우리의 커스텀 스타일 시트가있다 느낌표에 느낌표 두 개의 대시 인 제목을 붙이고 불러주세요 Google 글꼴을 사용하면 우리와 함께 따라 다니는 모든 사람이 쉽게 사용할 수 있습니다 우리가이 템플릿을 편집해야하고, 이것을 주면 더 쉽게 찾을 수 있습니다

제목을 입력하고 드롭 다운하고 컨트롤 V에 붙여 넣습니다 Google 사이트에서이 글꼴의 스타일 시트를 가져옵니다 Google 사이트는 지금 우리가하고 싶은 일을 제어한다고 말합니다 우리 사이트에 우리가 원하는 것을 알려주십시오 우리가 맞춤 CSS에 가면 여기에 우리가 그 h1에서 일하기를 원한다

제목 태그 인 태그 여기이게 내가 새 글꼴에 영향을주고 싶기 때문에 간단하게 우리의 커스텀 CSS로 간다 h1 태그는 h1 열기와 닫기로 작성해야한다 다른 모든 결함과 마찬가지로 일부 중괄호 Google 사이트로 이동하면 입력 할 수 있지만 친절하게 입력하면됩니다 거기 우리를 위해 우리는이 ctrl C를 사이트에 다시 복사해야합니다 컨트롤 -v 붙여 넣기 및 h1 글꼴 가족 모니터 저주 그것을 붙여 넣습니다

빠른 저장 Ctrl 키를 다시 사이트로 지금 우리가 새로 고침 때 변경해야합니다 그 흥미로운 글꼴 스타일 거기에 우리가 간다 다른 글꼴과 마찬가지로 크기를 크게하거나 작게 만들 수 있습니다 약간 큰 지금 당장은 무엇인지 모르겠다 지금은 55 명의 사진을 사용하고있다 그건 충분히 찢어 지거나 크거나 크롤링하지 않을 정도로 작동하는 것처럼 보였습니다

저장하다 거기서 우리는 그것을 더 크게 만들었지 만, 당신은 당신을 끌어들이는 아이디어를 얻습니다 글꼴을 Google에서 원하는 방식으로 사용할 수 있으며 글꼴을 사용하여 글꼴을 멈출 필요가 없습니다 당신은 하나 이상의 다른 타입을 찾아 보자 필기체 스크립트를 사용해 봅시다 이것은 순수하게 순전히 친절하다는 것을 증명하는 것입니다

네가 실제로 할 수있는 것을 보여라 잘 그 감귤 나는 거기에 플러스를 치자 이 작은 검은 색 막대에 다시 여기에 추가되었습니다 나는 우리가 이미 가지고있는 그 단조로운 사촌을 제거 할 것입니다 여기에 황갈색 나무가 있습니다

여기에 다시 그 링크를 통해 우리는 스타일 시트에 그 특별한 것을 알려주었습니다 ctrl처럼 보이는 글꼴 C 우리 대괄호로 다시 복사하기 우리가 거기에 가지고있는 것의 아래에 이것을 두드리기 만하면됩니다 그래서 거기에 우리가갑니다 모노 톰있어 거기에 귤 저장 이제 우리가 원하는 Ctrl 키를 누릅니다 우리가 이걸 사용하기를 원하는 것을 알려주십시오

이번에는 맞춤 CSS로가 봅시다 너는이 사이트에서 다시 사용하자 그것은 우리 단락 본문입니다 단락 P를 참조하십시오 리드 문구에 관한 것입니다

왜냐하면 그것은 lis 클래스입니다하지만 우리는 그것을 단락이라고 부를 것입니다 그래서 다시 우리가해야 할 일은 거기에 공간을 두는 것입니다 P 일부 중괄호를 닫으십시오 그들이 복사 한 것을 다시 복사하지 않는 한 Google 사이트의 Google 담당자가 당신 제어 판독기 붙여 넣기 거기에 Ctrl 키를 다시 사이트에 저장됩니다 지금 우리가 이것을 리프레쉬 할 때 이것은 훌륭한 필기체 귤을 바꿔야합니다

우리가 방금 Google에서 얻은 스크립트는 조금 작을 수 있습니다 거의 읽지 않는다 조금 더 크게 만들어 보자 이 컨트롤을 복사하려고합니다 너는 그것을 잘 만들자

나는 단지 방금 끌어 당긴다 18 픽을 만들면 그것이 우리에게 저장하고 저장하는 데 충분한 지 알 수 있습니다 새롭게 하다 전혀 차이가 없다 그것을 조사하자 알았어

왜냐하면 그것은 리드 클래스가 그걸 꺼내기 때문이야 내 입가 달린 바퀴 달린 바퀴로 선택하자 거기에 우리는 그 41 조금 더 진짜 읽을만한 크기의 사진입니다 그래서 우리의 40 가지 예상을 실제로 기억해 봅시다 물론 새로 고침을하면 다시 내려갈거야 비파괴적인 편집을하고 40 명의 사진을 여기에 넣어 보자

리드 클래스를 데리고 나가서 내가 원하는 것을 무효로 만들거야 거기에서 우리는 꽤 중요 할 수 있습니다 그러나 나는 당신이 그렇게하고 싶어하지 않습니다 내가 그걸 가져 가면 그냥 보통의 P라고 말하고 그 컨트롤은 지금 연습장이라고 해 우리가 거기 가면 내가 그걸 새로 고칠 때

그리고 물론 다른 글꼴과 마찬가지로 당신이 더 굵게 만들 수 있습니다 당신이 필요하다면 가볍거나 밝게하고 색을 바꾸어 봅시다 파란색 나는 내 파란색이 변화를 가져야한다고 생각한다 세미콜론 제어가 사이트로 돌아갑니다 그래서 약간의 작업으로 사이트를위한 부트 스트랩을 사용자 정의하는 것이 얼마나 쉬운 지 알 수 있습니다

Google 글꼴을 사용하면 눈에 잘 띄게 만들 수 있습니다 재미 있고 멋진 글꼴이 있습니다 정말 그렇습니다 내 목적을 찾아 봐 나는 그대로두고 갈거야 내 예쁜 것을 원해

똑바로보고 그래서 내가 다시 거기에 가서이 모든 Ctrl 키를 삭제거야 나는 그 리드 수업을 거기에 다시 넣을거야 그리고 나는 그걸로 할 수있어 Ctrl 키를 누르거나 컨트롤을 닫아 버린 경우 실행 취소합니다 다시 사이트에 저장하려면 Ctrl 키를 다시여십시오 거기에 우리는 여전히 그 글꼴을 가져 왔어

거기에 CSS 링크가있어서 다른 것들을 원한다면 다시 사용할 수 있습니다 이전에 정규 글꼴로이 문제를 다루었지만 귀하의 사이트에있는 모든 내용을 사이트의 모든 텍스트로 변환하려면 Google 글꼴을 사용하십시오 웹 안전 글꼴이든 Google 글꼴이든 특별한 글꼴이 되십시오 쉽게 다시 그 귤을 얻자 나는 그걸 다시 복사 할 것이다

내 사용자 지정 CSS로 돌아가서 나는 이미 그 귤에 대한 스타일을 가지고 있다는 것을 기억합니다 내 indexhtml에서 바로 그렇기 때문에 전체 사이트 대신에 이것을 원한다고 가정 해 봅시다 말하는 h1 또는 P 또는 h2 3 / 4 ㅋ ㅋ ㅋ ㅋ ㅋㅋㅋ 여기에 몸 태그에 넣으면 안된다 그냥 시체를 태그를 가지고 몸을 열고 주변에 지금은 다 h 1 2 3 4 5 6 p 무엇이든지 귤이 될거야

그래서 내가 그 말을한다면 사이트로 그녀가 그 초서체 벵골 부츠 밧줄 h1 P 태그를 바꾼 신선한 모든 것 또한 여기에 우리의 링크가 있습니다 그리고 그것은 내가 원하는 것만은 아니지만 단지 당신이 할 수있는 것에 대한 시위 일뿐입니다 전체 사이트의 스타일을 설정하려는 경우 어떻게해야합니까? 이 방법을 사용하면 Google 글꼴을 추가하는 방법이 취소됩니다 당신이 충동을 느끼면 부트 스트랩 4 웹 사이트 그 (것)들을 멀리 가지고 가십시오 나는 진짜로 그 (것)들을 원하지 않기 때문에 나는 나의 위치를 ​​청결하게 지키고있다 그러나 당신이 원하는대로 할 수있는 옵션이 있습니다 비디오를 좋아하고 구독하고 싶다면 유용하다고 생각 하시길 바랍니다

웹 디자인에 관심이 있다면 채널을 이용해보세요 아래의 코스는 YouTube 가입자에게 큰 할인 혜택을드립니다 우리는 또한 아래에 훌륭한 자유 코스를 몇 번 가지고 있습니다 다시 이것은 시스템 22의 Jamie와 테크 팁에서의 웹 디자인입니다 감사합니다

보고 즐거운 하루 되세요

Divi WordPress Theme New Features Available in Divi’s Backend Editor

안녕 얘들 아, 다른 워드 프레스 Divi 테마 자습서에 오신 것을 환영합니다 이것은 Jamie에서입니다 https://wwwsystem22

net 및 http://web-design-and-tech-tipscom 또는 최근에 Devi가 완전히 새로운 빌더는 테마를 318로 업데이트 할 때 새로운 페이지 편집기를 경험합니다 그리고 그것은 절대적으로 굉장합니다 오늘 우리가 가서 그걸 살펴 보겠습니다

여기에 업데이트 된 Divi 테마가 있습니다 페이지를 편집 할 것입니다 이것이 처음에 보았던 것입니다 Divi 빌더로 편집을 클릭하면 비주얼 빌더의 페이지로 이동합니다 우리는 여기에 있습니다

이것은 우리가 모두 알고있는 비주얼 빌더 (visual builder) 대략 이렇게하면이 새로운 인터페이스를 당신이해야 할 일은 할 수 없습니다 나는 비주얼 빌더를 빠져 나간다 우리가 실제로해야만하는 것은 편집 페이지로 돌아갈 것입니다 이 새로운 비주얼 빌더 경험과 Divi는 새로운 기능들에 대해이 튜토리얼에서 새로운 페이지로 다룰 것입니다 편집자가 속도를 증가 시키면 모듈을 100 % 볼 수 있습니다

정확한 페이지 렌더링 나는 그것이 약간 좋다고 생각한다 그것은 매우 100 %이다 그러나 그것은 매우 매우 좋다 그들은 새로운 것을 얻었다 Divi 요소를 복사하고 붙여 넣을 수있는 빌더 메뉴 구조 빌더 설정 유용하게 쓰이는 페이지 사이에 채워 넣은 라이브러리에 저장하지 않아도됩니다

필터링 된 빠른 검색 색상 관리자 및 Malak Magica 색상 검색 제안 스타일 찾기 및 바꾸기 스타일 드래그 앤 드롭 파일 업로드 동적 콘텐츠를 가리 키기 옵션 및 일괄 편집 및 여러 가지를 선택하여 몇 가지만 선택합니다 이 작업을 먼저 수행하고 페이지로 이동하면이 작업이 시작됩니다 당신은 당신의 옵션에 가고 싶습니다 그래서 우리는 우리가 내려갈 대시 보드로 갈 것입니다 Divi 테마 옵션 일단 테마 옵션에 들어가면 Builder 탭으로 이동하기를 원한다 아래의 고급 기능을 클릭하십시오 최신 Divi 빌더 경험을 가능하게하십시오

새 것과 고전 사이를 앞뒤로 뒤집고 싶다면 변경 사항을 저장할 때까지 변경 사항을 저장하기 만하면됩니다 거기에 작은 체크 표시 이제 우리 페이지로 돌아가서 다시로드하면 거기에 우리는 이제 새로운 Divi Builder 경험을로드했습니다 당신의 섹션 안에 섹션이있는 HTML 코드를 작성한 것처럼 행이 있고 행 안에 요소 나 블록이 있고 그것은 오래된 드래그 앤 드롭 빌더와 매우 유사하지만 그것은 단지 좀 더 펼쳐지고 좀 더 직관적 인 지금 당신이 결정한다면 한 번 사용 설정 한 적이있는 클래식으로 다시 전환하고 싶습니다 내가 방아쇠를 당길 때마다 거기에 고전을 그려 낼 때 미리 경험 한 경험 그러나 우리는 새로운 Divi로 다시 전환 할 것이기 때문에 새로운 것을 사용하고 싶습니다 건축업자 당신 그거 없애 버릴거야

왜냐하면 나는 내 등을 제대로 복원하고 싶지 않아 이것은 우리가 지금 할 것처럼 비주얼 빌더를 시작합니다 이 페이지의 라이브 페이지는 정말 흥미로운 부분입니다 그것이 우리가 얻은 것 인 와이어 프레임 모드입니다 방금 태블릿과 휴대 전화에서 볼 수있는 모든 데스크톱입니다

그걸 클릭 해 거기에 우리 페이지의 데스크톱 버전이 렌더링되었습니다 환상적이며 그렇게 빨리 화면이나 다른 요소를 뒤집을 필요가 없습니다 이런 식으로 아주 빨리 당신을 바탕 화면으로 끌어 올립니다 태블릿 버전으로 바꿀 수 있습니다

그리고 태블릿 버전과 함께 모든 수정 사항을 실시간으로 만들 수 있습니다 물론 모바일 버전에서도 동일한 작업을 수행 할 수 있습니다 모바일 관점에서 사이트 구축 서로 다른 화면간에 뒤집기가 없습니다 그것은 바로 당신을 위해 바로 거기에서 끝났습니다 그러면 준비가되었을 때 다시 되돌릴 수 있습니다

와이어 프레임보기로 이 모든 것이 당신과 더 많은 사람들에게 더 쉽게 만들어집니다 그들이 현금을 그렇게 활용한다고 부르는 것을 사용하기 때문에 더 빠른 경험 그것은 이전보다 훨씬 빨리하고 있습니다 그리고 당신이 저를 좋아한다면, 이것을 할 수 있습니다 많은 속도가 특히 중요합니다 특히 여러 프로젝트에서 작업하는 경우 늘 돌아가서 축소 모드를 살펴 본다면 디자인을 더 많이 볼 수 있으므로 지금까지 스크롤 할 필요가 없습니다

필요할 때마다 점점 더 많은 페이지를 볼 수있을 때마다 바로 유용한 기능 다시 클릭하면 볼 수 있듯이 와이어 프레임으로 곧장 돌아갑니다 보기는 절대적으로 환상적입니다 이제 우리는 데스크톱과 태블릿과 모바일보기는 내가 좋아하는 것을 알면 위대하다는 것을 알 수 있습니다 먼저 모바일 사이트를 만든 다음 데스크톱으로 마이그레이션하고 너를 가지고있어 이제 그들은 여기에 새로운 빌더 메뉴 섹션이나 메뉴 구조가 있습니다

몇 가지 새로운 아이콘이 표시되며, 마우스로 가리키면로드되는 내용이 표시됩니다 라이브러리에서 저장 및로드 이식성 및 거기에서 내보낼 수 있습니다 편집 내역을 통해 수정본을 통해 앞뒤로 이동할 수 있습니다 이걸 보면 레이아웃을 지울 수 있습니다 여기에 페이지 설정을 지정할 수 있습니다 유료 타이틀과 이것들은 정말 편리합니다

이것은 당신이 당신의 페이지 타이틀을 가지고 있고 당신처럼 전문가를 가졌습니다 Google 메타 설명과 같은 발췌문으로 추천 이미지를 잘 페이지를 위해 그것은 아주 유용하다 너와 여기 가면 우리가있는 곳이야 실제 빌더 설정을 바꿀 수 있습니다 원하는 기본보기를 와이어 프레임으로 설정할 수 있습니다

그게 나를 위해 일할거야하지만 당신이 다를 수 있습니다 당신은 바탕 화면을 원할 수도 있습니다 태블릿 또는 휴대 전화보기 모피 마우스를 움직일 때 호버 모드뿐 아니라 다양한 상호 작용 모드가 있습니다 무언가를 통해 클릭 모드에서 어떤 일이 일어나는지 보여 줄 것입니다 같은 것이지만 실제로 그것을 클릭하고 그리드 모드를 클릭하기 전까지는 아무 것도하지 않습니다 교차점이있는 모든 것을 보여줄 것입니다 여기에 여러 옵션이 있습니다

여기에 자리 표시자를 추가하고 닫을 수 있습니다 비활성화 된 모듈 모듈을 50 % 불투명도로 토글합니다 지금이 순간을 보거나 기술 데스크톱을 사용하는 동안 여기에 몇 가지 장애 모드가 있음을 알게 될 것입니다 50 % 불투명도 바탕 화면에 해당 벽을 표시하기 때문에 태블릿과 내가 믿는 휴대 기기의 중간에 하나를 강조 표시해야합니다

내가 전화 하나에 대면 아래쪽이 강조 표시되어 있어야합니다 모바일 거기서 우리는 매 비트마다 세 가지 섹션을 가질 수 있습니다 귀하의 웹 사이트에서 정말 유용한 새로운 기능이 아닙니다 아주 멋진 Divi 기능 물론 또 다른 멋진 기능은 복사하여 붙여 넣을 수있는 것입니다 두 개의 다른 요소가 있으므로 아마 섹션 행을 복사 할 수 있습니다

우리 페이지로 돌아 가자 나는 3 페이지에있다 다른 페이지로 가자 2 페이지를 보자 당신 이제 데스크탑보기에서 보도록하겠습니다

그리고 우리조차도 알지 못합니다 거기에 복사 된 섹션의 어떤 종류의 괜찮아 보자 심지어 여기에 새로운 행을 추가하십시오 당신 우리가 방금 복사 한 행에 걸음 거기에 우리가 가서 거기에있다 우리가 그렇게 쉽게 간다

다른 페이지의 요소 복사 우리가해야 할 일은 새로운 행을 만드는 것입니다 붙여 넣기와 거기에 붙여 넣기 나는 꽤 많이 확신하지 않지만 당신이 원한다 당신이 거기에 넣어 원래 빈 행을 삭제하지만 그것은 편리한 기능입니다 정말로 이 행 중 일부는 여기에서 삭제할 것입니다 그곳에 원하는 경우 필터링 된 검색이라고하는 것을 수행 할 수도 있습니다 특히 뭔가 당신 우리의 와이어 프레임보기로 돌아가 보겠습니다

섹션을 잡아라 너는 넣을 수 있고 여기에 필터 단어가 말을합니다 특정 폰트와 관련된 모든 편집 작업으로 이동합니다 정말 편리한 글꼴 그래서 또 다른 위대한 기능은 내가 이것을 다룰 수 있었던 빠른 액세스입니다 다른 동영상에서는 정말 유용합니다

편집하고 싶다고 말하다 이 모듈의 내용을 편집하려면 여기를 참조하십시오 일단 모듈을 열면 거기에 작은 파란색 붓이 보일 것입니다 편집 장소로 바로 연결되는 것을 클릭하면 그것이 무엇이든간에 그것은 지금 하나의 표제입니다 표제 옙 2 제목 1을 읽고 무언가를 보여 주기만하면됩니다

조금 더 자세히 설명해 드리겠습니다 당신은 당신이 원하는 부분을 선택한다 실제로 작은 브러쉬를 치면 바로 잡을 수 있습니다 당신 그것은 흥미로운 표제 글꼴을 가지고있다 또는 기본 서식의 텍스트 당신 다시 네가 많은 것들을 얻었다면 노마 모듈을 거의 안다

일단 당신이 모듈을 열어 놓은 그림 붓 아이콘 당신은 정말로 편리합니다 당신이 지금 거기에서 편집하려고하는 모든 것을 실시간 세이버이다 당신 당신 물론 또 다른 특징은 색상 관리자가 다시 충돌하는 경우입니다 이거 reddit하고 여기 색깔이있어 당신에게 보여줄 수 있어요 최근에 사용한 색상은 궁전 또는 물론 맞춤 색상을 사용하거나 아래를 클릭하면 거기에 실제로 당신을 위해 새로운 색상을 제안 할 것입니다 거기에 바로 색상 팔레트 거기에 아주 편리한 작은 기능 권리이 특정 글꼴 색상을 사용하여 너 거기있어

나는 그걸로 아무 것도하고 싶지 않아 찾아서 바꾸자 이 텍스트를 가져 와서 푸른 색 또는 그와 비슷한 것으로 만드십시오 우리가 원하는 모듈 의지를 클릭하면 텍스트가 표시됩니다 거기에 작은 텍스트 색상 아이콘을 마우스 오른쪽 버튼으로 클릭하고 찾아서 바꾸라고 말하다

당신 당신 거기에 우리가 가서 볼 수 있듯이 모든 텍스트를 그 회색 색은 이제 그 파란색 색으로 대체됩니다 그래서 또 다른 작은 편리한 기능입니다 그래서 다시 한번 Divi 당신은 그것을했습니다 당신은 그것을 소트했습니다 그리고 나는 그렇게 말하지 않았습니다

다시 정상적인 고양이 색깔로 되돌아갔습니다 다시 한번 저는이 새로운 비주얼 빌더가 정말 유용하다는 점에 매우 감동했습니다 매우 직관적이며 매우 빠르므로 다시 한번 감동합니다 만약 당신이 divvy 것을 시험해보고 싶다면 내 제휴사 링크에서 확인해보십시오 이 비디오 아래에서이 정보가 도움이 되었기를 바랍니다

관심이 있다면 엄지 손가락으로 공유하고 YouTube 채널에 가입하세요 습식 발달에서 아래 우리 무료 과정 중의 1 개를 잡아라 우리는 굉장한 약간을 얻었다 프리미엄 코스도 YouTube 가입자에게 큰 할인 혜택을드립니다 한번 더 봐봐이게 제이미 시스템 22에서 왔고 웹 디자인과 좋은 하루 보내세요

Divi WordPress Theme How To Use The New Dynamic Content Feature

안녕 얘들 아, 다른 Divi WordPress 테마 비디오에 오신 것을 환영합니다 제이미입니다

https://wwwsystem22net 및 http://web-design-and-tech-tipscom – 우물 Divi를 다시 한 번 해보니 다른 업데이트를 가져 와서 그들이 동적 콘텐츠라고 부르는 내용이 포함되어 있으므로이 동영상에서 어떻게 페이지의 헤더 및 사이트 이동 경로에 약간의 동적 콘텐츠를 사용하려면 DVD 버전 31 9를 사용하여 Divi를 아래에서 확인해보십시오

비디오 거기에 내 제휴사 링크가 있다면 그것을 확인하고 싶다면 당신은 WordPress 사이트의 어떤 종류든지 건축하고 있습니다 Divya 모양은 절대적으로 멋지지만 어쨌든 가보고 무언가를 만들어 봅시다 새 페이지를 추가하겠습니다 제목을 붙이자 거기 진짜로 호쾌한 제목 새로운 내용 및 Divi 건축업자를 이용하자 당신 Divi 빌더가로드 된 것을 볼 수 있습니다

스크래치 당신 premade를 사용할 수 있습니다 아프거나 기존 페이지를 복제하지만 난 내가 여기서 시도하고 달성 할 수있는 것을 여기서부터 처음부터 만들거야 나는 모든 페이지에서 사용할 수있는 바를 만들거야 그들은 그 페이지를 가질거야 여기에 페이지의 이름과 빵 부스러기 기본적으로 링크입니다 이 쪽의 페이지와 새 페이지에서 사용할 때마다 동적으로 업데이트하기 때문에 아무 것도 변경하지 않습니다 동적 인 내용은 전부 대략이다 그래서 나는 새로운 단면도를 얻는다

3 줄을 추가하면 왼쪽에 내 페이지 제목이 표시됩니다 거기 오른쪽에 링크가있어서 첫 번째 모듈에 모듈을 삽입 할 것입니다 여기 열은 단지 일반 텍스트 모듈입니다 지금 당신이 여기있는 분야를 보면, 거의 알지 못할 것입니다 거의 비슷합니다

거기에 조금 더하기 디스크 유형 아이콘 거기에 당신의 역동을위한거야 콘텐츠 및 우리가 거기에 넣고 싶은 것 우리는 그것을 여기에서 클릭합니다 우리의 선택은 처음에는 정확하게 잘못되었습니다 페이지 제목이 자동으로 새 콘텐츠의 페이지 제목은 미리보기 좋을 것만 저장하면됩니다 데스크톱 아이콘 버전으로 미리보기 우리가 할 수있는 새로운 컨텐츠가 없습니다 약간 더 크게 만들어서 조금 더 멋지다

여기에 배경 이미지를 넣으면 좋을 것입니다 각 새 페이지에서 변경 될 배경 이미지도 있습니다 나는 내가 풀려나 기 위해 갈거야 unsplashcom과 이미지를 다운로드하는 것은 내가하는 일이다

바로 거기에 아이콘을 만들 빌더 나는 추천 이미지를 설정하려고합니다 이 페이지 하나만 고르겠습니다저기서 저걸 사용하겠습니다 그리고 그것은 당신이 아래에서 볼 수있는 것처럼 페이지에 대한 추천 이미지를 설정했습니다 거기에 이미지가 바로 거기에 내가 뭘하고 싶은지 배경에 넣어입니다 이 전체 섹션의 여기 내가 COG를 클릭하기 만하면됩니다

나는 배경을 갈거야 내가 할 일은 이미지로 넘어 가고 여기 필드 위에 마우스를 가져 가면 이미지를 추가하면 다른 동적 콘텐츠가 여기에 표시됩니다 클릭 할 것입니다 그 냄새 나는 특색이있는 심상을 이렇게 말할 것이다 그래서 당신이 인 경우에 인 무슨 페이지든지 당신은 인 무엇이 페이지에 다른 추천 이미지가 있습니다 그리고 다른 이미지를 보여줄거야

괜찮아 괜찮아 괜찮아 괜찮아 이것을 시도해 봅시다

실제로 저장하지 않았기 때문에 작동하지 않는다고 생각했습니다 초안은 초안을 저장하려고합니다 지금 우리가 그 특색있는 이미지를 확실히 가지고 있는지 확인하십시오 다시 그리고 배경 이미지는 우리의 역동적 인 콘텐츠입니다 영상 이번에는 실제로 거기에로드되어 있으므로 한 번 보자

체크 표시를 누르고 여기에있는 내용을 확인하여 바탕 화면 미리보기 아이콘이 멋지므로 여기에 배경 이미지가 있습니다 우리가 원하는 것은 우리가 거기서 제목을 얻었지만 실제로는 볼 수 없다는 것을 의미합니다 그렇게해서 들어가서 새로운 내용을 변경하자 제목이 우리를 설득력있게 만든다 밖으로 더 많이 그래서 우리가 되돌아 가게되고, 거기에서 그것을 할 수있는 장타를 쳤다

와이어 프레임보기를 사용하지만 여기에서 수행하면 실시간으로 볼 수 있습니다 좋아요, 우리는 콘텐츠 디자인을하고 있습니다 내가 여기서 옳은지 확인해 이제 이것이 무엇인가? 시대의 콘텐츠 제목 좋은 디자인이야 훨씬 더 큰 어떤 굵은 글씨 그래서 거기에 서 있습니다

그래서 이것은 단지 정규 텍스트입니다 라인을 잘 보자 내가 기본 폰트로 남겨 두겠다 너는 그 글꼴이 무엇이든간에 어쩌면 텍스트 흰색을 좋아할지 모를 것이다 이 텍스트 크기를 훨씬 더 크게 만들자

그래, 그건 좀 더 나은 세미 볼더 그래,하지만 난 아직도 그래 백그라운드에서 해당 내용 중 일부를 보는 데 약간의 문제가 있음 거기에 우리가 할 수있는 일이 있습니다 그 싸움 색깔은 그것과 그것을 함께 조화시키는 것입니다 여기에 다시 들어가서 배경을 잘 보자 배경색 그건 진한 파란색이야 괜찮아

그 순간에 당신은 어떤 차이도 볼 수 없습니다하지만 우리가 여기에 들어가서 가면 여기 우리의 이미지에 대한 우리의 뒷 배경에 우리는 배경 이미지 블렌드가 분명히 너무 많은 비트를 곱합니다 당신 당신 조금 나아졌지만 지금 내가하고 싶은 일은 당신은 그들이 오버레이 색이었던 오버레이를 색칠합니다 그걸 잡아 당겨서 그걸로 모든 이미지를 그곳으로 가져갈거야 그것은 우리가 원하는 것만은 아니지만 그 선을 읽을 수는 있지만 내가하고 싶은 것을 읽을 수 있습니다

우리의 색깔로 돌아가서 불투명도를 낮추면 더 많이 보여줄 것입니다 우리 이미지의 색상을 클릭하면 불투명도를 아래로 드래그합니다 거기를 통해 우리의 이미지가 흘러 나오는 것을 볼 수 있습니다 거기에 남겨두면 우리는 여전히 우리의 제목을 볼 수 있습니다 배경에 노트북 – 그래서 그냥 괜찮아요 당신이 읽을 수있는 좋은 말을하자 그게 내게 괜찮은 것 같고 당신은 배경 이미지를 볼 수 있습니다

여기에 또 다른 작은 텍스트 모듈 그리고 다시 나는 거기에 좋은 것을 지울거야 나는 동적 인 것을 사용할거야 콘텐츠 버튼을 다시 한 번 우리가 거기에가는 방법에 대한 페이지 링크를 만들어 봅시다 그리고 그것은 아마도 그냥 페이지의 이름을 일종의 링크를주고 옙의 경우 나는 이것을 클릭하여 그 전이나 후에 뭔가를 넣을 수있는 옵션을 주었다 그 그래서 집에 쓰기 전에 포드 / 거기 우리는 지금 우리가 집 / 뉴 내용을 가지고있어

나는 그것을 상당히 작게하고 싶다 하지만 나는 그것을 읽을 수 있고 내 링크가 사용자 정의 프로그램에서 하늘색으로 설정되기를 바랍니다 그래서 나는 그것을 아주 잘 볼 수 있기 때문에 그것을 떠날 것이다 그래서 다시하자 그냥이 디자인과 텍스트로 다시 가보자 흰색으로 만들어 보자

그게 더 낫다 어쩌면 당연히 너는 그것을 원하는대로 너의 것을 가지고 있을지도 모른다 그래, 나는 그것이 완벽하게 읽을 수 있다고 생각한다 당신 왜 우리는 이것을 대문자 2 곳과 대문자 2 곳으로 자본화하지 않는가? 내가 그것을 좋아하는 모든 대문자를 만들 것입니다 그러니 당신 과 그 비트를 다듬어 라

당신 좋아, 나는 앞으로 가서 그걸 발표해라 이제 각 페이지마다 동적 인 헤더 블록이 생겼습니다 당신은 당신이 시간 낭비라고 생각할지도 모른다는 것을 알고 있습니다 전체적으로 많이 했으니 이제 끝냈습니다 전체 섹션을 저장하려고합니다

그 작은 톱니 바퀴에 넣고 도서관에 저장 섹션을 쳤다 나는 그것을 부를 것이다 동적 머리 오래된 식사 헤더 나는 우리가가는 도서관의 머리글이다 그냥 새 페이지를 만들거야 지금 그 페이지를 업데이 트 우리가 볼 수있는대로이 페이지를 가져올 게 그리고 내가 할 일은 새로운 것을 추가하는 것입니다

나는 새로운 페이지를 만들 것입니다 우리는 제목을 분명히 다른 제목이나 새 페이지에서 안녕하세요 알았어 곧장 갈거야 거기에 추천 이미지 우리 헤더 뒤에 표시 될 것입니다

너를 비벼 대다 알았어, 어둠이 너무 어두워서 설정을 조정할 수도 있지만 우리는 추천 이미지를 1 분 안에 설정할 수 있습니다 바로 거기에서 바로 초안을 저장합니다 이제 Divi Builder를 사용하고 싶습니다 당신 당신 다시 처음부터 다시 만들고 싶습니다

이번에는 새로운 섹션을 클릭 할 것입니다 라이브러리에서 추가라고 말하려고합니다 거기에 우리가 만든 Dyn 헤더가 있습니다 우리는 우리 페이지를 게시하고 싶지 않다 당신 우리의 미리보기 모드를 가지고 여기를 살펴 보겠습니다

당신 거기에 우리가 가볍게 조금 뒤에있는 그 새로운 이미지가 있습니다 그건 괜찮아 이걸 절대 읽을 수는있어 그래서 나는 문제가있어서 페이지를 실제로 보겠습니다 두 가지를 비교해 보면 동적 요소가 실제로 우리에게 어떻게 작용하는지 보게 될 것입니다

여기에 우리가 처음 만든 새로운 콘텐츠가 있습니다 당신이 볼 수 있듯이 그것은 우리의 이미지라고 불리는 것입니다 물론 나는 공백이 있습니다 헤더가 올라와 있으므로 새로운 콘텐츠를 얻을 수 있습니다 다음 페이지로 가면 새로운 이미지를 얻을 수 있습니다

페이지 제목으로 변경했습니다 새 콘텐츠는 이전 페이지였습니다 새로운 것 그리고 그것은 우리가 가지지 않았을 정도로 빵 부스러기를 또한 끝내었다 당신이 할 수있을 새로운 페이지를 만들 때마다 그것들을 변경하십시오 그것과 그것은 자동으로 꽤 멋진 물건 인이 설정을 업데이트 할 것입니다

바로 거기에 내가 방금 생각한 페이지에 다른 많은 것들을 할 수 있습니다 나는 당신을 위해 그렇게 다시 한번 Davey가 잘 해냈다는 것을 보여줄 것입니다 당신은 사이트를 차지할 거대한 새로운 혁신을 생각해 냈습니다 다시 다음 단계로 나아가 자면, 당신이 가지고 있다면 이것을 즐겼기를 바랍니다 다음과 같이 YouTube 공유 채널을 구독하고 공유하십시오

당신은 웹 개발에 관심이 있습니다 우리 코스 중 일부는 훌륭한 무료 코스와 프리미엄 코스를 제공합니다 YouTube 가입자에게 큰 할인 혜택이 주어 지므로 이전에 Davey를 사용해보고 싶다면이 비디오 아래에 링크가 있습니다 다시 한번 이것은 제이미 일관성 22 및 웹 디자인 및 기술되었습니다 팁을 보내 주셔서 감사합니다 좋은 하루 되세요

Bootstrap 4 Using Web Safe Fonts

안녕 얘들 아, 다른 부트 스트랩 4 비디오에 오신 것을 환영합니다 시스템 22의 Jamie입니다

웹 디자이너 기술 팁이 비디오에서 우리가 글꼴을 추가하는 것을 탐험 할 것입니다 귀하의 부트 스트랩 웹 사이트에 다른 글꼴 나는 조금 기본적인 사이트를 가지고있어 여기서 나는 함께 카운트 다운 할 수있을거야 이 비디오에서는 브래킷이라는 무료 텍스트 편집기를 사용할 예정이므로 이 동영상 아래의 링크에서 다운로드 할 수 있으므로 여기에있는 동영상이 있습니다 순간에 당신은 글을 아주 잘 볼 수 없으므로 그 순간을 얻습니다

정렬 된 우리의 indexhtml 페이지를 열어 보겠습니다 대괄호 텍스트 편집기는 여기에 우리의 색인 도트 HTML이 있으며 여기 아래로 스크롤하면 우리의 링크가있는 bar는 실제로 여기 아래쪽에 있습니다 여기에 컨테이너가 있습니다 네가 방금 본 텍스트가 내가 할 일은 기본 부트 스트랩 클래스 인 텍스트 라이트 또는 ctrl을 다시이 텍스트로 사이트가 새로워지면 텍스트가 밝아 져야합니다

알기 쉽고 지금은 그냥 사용하는 것입니다 느낌이있는 텍스트의 기본 부트 스트랩은 Helvetica이지만 그들은 매우 영리 해졌다 그냥 선택하자 당신 예, 여기를 보시면 Apple 기기에서 Apple 시스템을 사용하고 있습니다 아마 사파리 아마 Helvetica를 여기에서 사용하고있다 arial sans-serif 또는 대체 글꼴을 사용하면 기본 글꼴이 다음과 같이로드되는 것이 좋습니다

오히려 당신이 좋아하는 다양한 스타일을 위해 사용하고있는 것이 무엇이든간에 기본값입니다 우리가 바라 보면 h1 태그에 대해 다른 글꼴을 사용하고 싶다고 말하면됩니다 여기에 템플릿을 시작하는 h1 태그 부트 스트랩이 있습니다 이제는 굵은 글씨체로 놀아 볼만합니다 많은 글꼴이있어 놀 수 있습니다

안전 당신은 몇몇 웹 글꼴 웹 안전한 글꼴 다만 Google 웹 사이트에 가고 싶을지도 모르다 더 안전한 글꼴을 사용하면 여기에서 우리가 사용할 수있는 글꼴 모음을 얻을 수 있습니다 그 (것)들에있는 1 개 이름이 그 (것)들 가지고있는 지상은 가을에 익숙하다이다 뒤 및 4 등은 특정 브라우저 또는 운영 체제가 그렇지 않은 경우를 의미합니다 그 글꼴을 가지고 있으면 Times New Roman이 쓰러 질 것입니다 다시 두 번 누른 다음 serif는 serif 글꼴과 sans 사이의 차이입니다 serif 서체는 간단히 말해서 작은 꼬리표를 가진 만족스런 정장입니다

T와 밑면 그리고 편지의 대부분에 그 작은 serif 폰트이고 serif 류의 수단을 의미하는 비트들을 끊어 버리십시오 셰리프가 없으면 그들은 그렇게 똑같은 글을 쓰지 않는다 그래서 우리는 이렇게 말한다 우리의 표제가이 글꼴들 중 하나를 가지기를 바란다 바로 저기 다른 점이 있기 때문에이 충격을 풀어 볼 것입니다

풀백은 목탄입니다 사운드 세리프 control-c 이제 우리가 만든 스타일 시트를 열어 보겠습니다 우리가이 h1 태그로 작업하고 있다는 것을 기억하자 중괄호를 열고 닫고 h1을 쓰고 싶다고 말하지 마십시오 font family font – family : 그런 다음 우리가 그저 커피에 담았던 것을 넣습니다

우리가 우리의 사이트로 돌아가서 새로 고침하고 우리는 우리의 표제가 그 글꼴을 바꾸는 것을보아야합니다 그래서 우리 사이트로 돌아 가자 우리는 이것을 바꿔야 할 때가되었습니다 거기에 우리가가는 새로운 글꼴은 그 영향 글꼴과 물론 당신입니다 다른 사람들도 똑같이 할 수 있습니다

단락 텍스트이므로 여기에서 시도해보십시오 우리는 그것을 다른 글꼴로 변경할 수 있습니다 완전히 다른 지금 그들은 마치 필기체 같은 것을 가지고있다 그들이 가지고있는 조지아 저기 조지아가있어 그래, 그거 복사 할거야

CSS 스타일 시트로 돌아가서 이번에는 단락 텍스트로 작업하고 있습니다 우리의 P 텍스트 그래서 똑같은 일을 할 것입니다 일부 중괄호를 닫고 다시 닫으십시오 거기서 그것을 사용할 것이고 거기에 그것을 붙여 넣을 것이고 우리의 세미콜론을 넣을 것입니다 이후에 우리가 더 많은 코드를 추가하기 위해 Ctrl 키를 사이트 지금 새로 고침 할 때 기본 글꼴에서 여기로 변경해야합니다

조지아는 serif이므로 우리는 거기에 차이가 있는지 확인해야합니다 쉽고 사이트에 여러 가지 글꼴을 추가 할 수 있습니다 거기에 3 개가있어 지금 우리가 가지고있는 톱에 영향을 미쳤습니다 그루지아를 거기에 붙 잡았고 우리는 여전히 우리의 링크에 우리의 기본 권리를 가지고 있습니다 거기에 그렇게하는 한 가지 방법이 있습니다

물론 다른 방법은 당신이 전체 사이트가 기본 글꼴과 다른 글꼴을 사용하도록하십시오 그걸 가져 가면 우리 사이트를 다시 삭제하고 새로 고칩니다 기본 설정으로 돌아 가야합니다 기본 설정으로 되돌아갑니다 당신이이 사이트에서 하나의 글꼴로 당신의 h1 3 4 5 6 태그 귀하의 단락 태그는 모든 태그를 표시 태그를 표시합니다 단순히 다른 것을 선택하자

우리가 볼 수있는 것을 원한다 코믹 샌즈는 단지 그것을 복사합니다 이번에는 스타일 시트로 돌아가서 모두가하기를 원한다면 body 태그에 넣으십시오 하나도 가지고 있지 않으면 body를 열고 닫으십시오 그리고 curlies가 내려갑니다

나는 폰트 패밀리를 다시 말하려고합니다 여기에 괄호를 붙이겠습니다 복사 한 내용을 붙여 넣을 것입니다 세미콜론을 넣으십시오 그것을 저장하면 내가 사이트의 모든 것을 새로 고침 할 때 사이트에 다시 연결됩니다

H 태그는 P 태그와 우리의 링크가 Comic Sans를 바꿔야합니다 우리는 당신이 볼 수있는 것처럼 그들이 모두 바뀌 었습니다 전체 사이트를 원한다면 모든 것을 하나의 급습에서 끝내고 물론 나는 단지 조금 뒤로 물러서서 내가 너에게 보여준 걸 보여 줄거야 당신이 각 글꼴을 어떤 크기로 현명하게 만들 수 있는지, 그리고 그것의 실제적인 대담함은 나는 컨트롤 Z를 치거나 컨트롤한다고하지만 당신이 말하기를 원한다 검은 색 괄호를 닫지 않은 한 우리는 너무 오래있었습니다

우리가 가서 거기에 가고 싶은만큼 멀리 뒤로 가서 우리는 그걸 보게됩니다 우리의 영향력과 일자리 죠르지아가 여기에 있습니다 사이트 새로 고침은 그것이 지금 충격과 조지아와 함께 있었던 방법으로 되돌아 가야한다 그리고 물론 우리는 우리의 표제를 우리가 원하지 않는 어떤 크기로 만들 수 있습니다 이걸로 훨씬 더 많은 일을 할 수 있어요

나는 당신이 그것을 대담하고 밝게 만들 수 있다고 말하려고했습니다 또는 내가 뭘 너 사촌 내가 기본적으로 글꼴을 허용하는 대담한 유형이라고 생각 사촌 당신은 백에서 백으로 이동하여 그들을 무겁게하거나 더 낫게 만듭니다 당신이 원한다면 거기에 약간의 지원이있을 것입니다 그러니 폰트 크기 조금이라도 가져 가자 그러면 그 말이 맞다

작동하지 않을 CSS를 통해 일을 정확하게 말하지 마십시오 글꼴 크기를 말해 보자 사진이 너무 크지 않아서 55 화가되었다고 나는 확신한다 그곳에 컨트롤이 있다고 말하면 좋을 것입니다 더 커질뿐 아니라이 태그를 사용하면되지만 h1 태그를 사용하면 이것들은 물론 색상도 바꿀 수 있습니다

네가 원한다면 내가 특별히 심하게 보일거야 예를 들면, 우리는이 사이트를 잠시 후에 사이트에서 제거 할 것이라고 확신합니다 너는 가버 리다 이제는 무서운 무언가가 보이는 빨간 제목이있어 나는 원하지 않는다

그것과 당신이 그것을 유지할 수있는 무엇과 함께 당신은 그림자를 넣을 수 있습니다 그냥이 특정 글꼴로 작동 할 것이라고 생각하지 않는 뭔가 시도해 볼게요 이 하나의 글꼴 무게와 100라고 생각해도 좋을 것 같아요 이 특정 글꼴로 작업하지만 어쨌든 시도해보고 지금 일어나는 일을 볼 것입니다 그게 기본 크기의 아무것도하지 않았어

조르지오와 함께이 컨트롤을 자르겠습니다 x2 cut 그냥 가야 겠어 내가 추가 할거야 나는이 선을 그냥 복사 할거야 나는 떨어 뜨릴거야

그것 아래로 붙여 넣을거야하지만이 수업은 이걸 없앨거야 두 번째 줄에 그냥 기본 P 클래스가 바로 거기에 저장하자 내가 한 일을 보러 여기로 가자 밑에는 리드 클래스가 있기 때문에 우리는이 작업을하고 있습니다

폰트 가중치를 보여주고 싶습니다 그리고 자체 가중치를 가졌습니다 우리가 P 클래스를 할 때 영향을 미치지 않을 것입니다 반면에 이것은 다시 돌아 갑시다 우리의 CSS는 이제 내가 할 일은 폰트 패밀리를 없애 버릴 수 있다는 것입니다

폰트 가중치로 넣을 기본 폰트이고, 폰트로 시작합니다 100 세가 된 지금은 백이 가장 가볍거나 피부가 가장 좋아요 여덟 백 그리고 가장 높은 것 당신이 대담한 또는 여분 대담한 그래서 부르는 무슨이다 그 ctrl을 저장하고 이제 다시 사이트로 돌아가 봅시다 이 두 라인의 기본 폰트는 꽤 깔끔한 스타일입니다 if 나는 이것들을 혼자두고 떠날거야

여기 우리 P 야 태그는 글꼴 두께입니다 아래로 드래그하여 조금 더 잘 보입니다 여기에 우리의 글꼴 체중이 100이 무엇을 지원하는 말을 참조하십시오 200 nope 500 번 해보자 좋습니다

그리고 우리가 500에 이르렀을 때 그것이 더 컸다는 것을 볼 수 있습니다 단지 700을 시도하십시오 그것을 더 대담하게 만들었습니다 나는 그것이 그 어떤 것보다 더 낫지 않을 것이라고 생각하지 않는다 100 등을 맞댄 그것의 마른 자기 자신에게 이것을하는 다른 방법은 간단하게에이다 굵은 글씨 B 또는 LD로 작성하면 약간 더 큰 굵게 표시됩니다

당신이 볼 수 있듯이 그것이 대담하게 만들었습니다 여기에 사이트의 글꼴을 사용자 정의하는 방법에 대한 설명이 필요합니다 지금 내가 그걸 다 가져갈거야 사촌 내가 정말로 필요로하지 않는 걸 가지고있어 염두에두고 우리는 그 모든 것을 멀리 사이트에 저장하지 않을거야 크롬 관리자가 여기에 Google 크롬이며 새로 고침해야합니다

그것이 거기에 있었으므로 우리는 가서 그 밑에있는 텍스트를 없애자 또한 우리가 단순히 삭제 버튼을 누르는 방법으로 돌아 가기 위해 우리는 ctrl을 사용합니다 저장하면 글꼴이나 사이트의 스타일을 지정하는 방법이 있습니다 다음 비디오에서 웹 안전 글꼴을 살펴 보겠습니다 google 글꼴 가져 오기 google 글꼴 나는 당신이 좋아하는 것을 원한다면 유용하다는 것을 알았 으면 좋겠다

우리 채널 웹 디자인에 관심이 있다면 웹 디자인 중 하나를 선택하십시오 아래의 코스는 YouTube 가입자에게 큰 할인 혜택을드립니다 우리는 또한 거기에 몇 가지 위대한 무료 코스를 가지고있어 그래서 다시 한번 그것을 확인해 이 시스템에서 제이미 22 및 웹 디자인 및 기술 팁을 주셔서 감사합니다 좋은 하루 되세요

Bootstrap 4 Contact Form Customization

안녕 얘들 아, 다른 부트 스트랩 4 비디오에 오신 것을 환영합니다 시스템 22의 제이미입니다

웹 디자인 및 테크 팁 오늘날이 비디오는 우리의 부트 스트랩 4로 카운트 다운 페이지를 처음부터 만드는 방법에 대한 과정과 이 비디오에서 우리는 우리의 접촉 양식을 스타일링 할 것입니다 문의 양식을 작성하고 훨씬 더 재미있어 보이는 우리가 이렇게 사용자 정의하여 멋진 호러 효과를 얻었습니다 여기에 우리 사이트의 스타일링의 나머지 부분과 잘 어울리는 양식이 있습니다 누구든지이 코스를 듣는 데 관심이 있습니다 완벽하게 포괄적 인 코스입니다

이 부트 스트랩을 사이트에서 처음부터 빌드하는 방법과 거기에는 실제로 성공 페이지가있는 4 페이지가 있습니다 카운트 다운을위한 JavaScript 및 문의 양식을 만들기위한 일부 PHP 작동 우리는 아무 것도없는 곳에서 처음부터 시작하여 모든 과정을 거칩니다 실제로 온라인 서버에 업로드하고 사이트를 라이브로 만드는 경우 관심이 있으시면 아래 링크를 클릭하시면 큰 할인 혜택을 받으실 수 있습니다 $ 999를 위해이 코스를 가져 와서 여기를보세요

이제 우리는 페이지에 양식이 있습니다 스타일을 지정하지 않았으므로 원하는대로 사용할 수 있습니다 이 제목들 없애 버릴거야 그래서 나는 안에 뭔가가있을거야 여기 그렇게하자

먼저 여기에 HTML 페이지를 우리의 연락처에 가자 그 레이블들은 그 타이틀들입니다 나는 단지 하나씩 삭제하려고합니다 select Delete 키를 치면 간격이 좁혀 질 것입니다 좋아, 이제 그 사람들이 사라져야한다고 생각하자

우리가 간다 지금 조금 더 가늘다 나는 당신의 가장 좋은 이메일에 당신의 이름을 말하고 싶었고 우리는 여기에 하나를 추가해야 할 것입니다 그게 당신의 메시지이고 그 사람들은 John Doe가 그렇게 생각하는 자리 표시 자라고합니다 우리는 당신의 이름을 말할 것입니다

이 자리 표시자를 사용하면 전자 메일을 전자 메일 또는 다른 전자 메일로 보낼 수 있습니다 거기에 두는 신경 그리고이 사람은 하나도 갖고 있지 않습니다 그래서 거기에 하나 넣어 보겠습니다 이 하나 나는 장미를 거기에 넣은 후에 그것을 추가 할 것입니다 정말로 중요하지 않습니다

장미의 양은 실제 메시지 열의 높이입니다 변경하겠습니다 우리가 도울 수있는 방법을 보여주기 위해 짝짓기를합니다 나는 네가 네가 원하는대로 넣으라고 말했어 사이트 새로 고침 이제 우리는 당신의 이름과 이메일과 헬멧을 얻었습니다

우리가 이야기하고있는 것을 도울 수 있을까요? 거기에 세 명이있어 만약 우리가 여기를 보았다면 나는 3 열을 얻었습니다 그 숫자를 6으로 늘리십시오 나는이 세 가지를 아주 좋아하기 때문에 그것을 다시 바꿀 것입니다 저장할 Ctrl 키를 누릅니다

이것은 깊이가 두 배나 깊어 지거나 기본적으로 두 배나 깊어집니다 당신은 당신의 메시지 필드를 원할 것입니다 그건 괜찮아 바로 이것들을 약간 스타일링하자 이것들을 좀 더 자세히 살펴 보도록하겠습니다

마우스 오른쪽 버튼으로 클릭하고 검사 해 봅시다 그들은 폼 컨트롤의 클래스를 요청했습니다 바로 스크롤합니다 우리는 경기를 볼 수있게되어서 나는 어떤 변화도 원하지 않는다 그 패딩은 1 분의 배경색으로 변경하고 싶을 수도 있습니다

투명한 거기서 우리는 이미 일하기 시작했습니다이 국경은 두 가지라고 생각합니다 pics 단단한 백색 waters 그래서이 2 개의 후비는 물건을 만들어 보자 단단한 것을 선택하고 그것을 백색으로 만들어라 okay와 border-radius

그들은 025 em을 가지고있다 그들은 50 % 여기서 작동하지 않을 수 있습니다 픽셀 비율을 조정해야합니다 내가 그곳에 50 %를 넣으면 그 두 표정이 좋아 보이지만 나는 그렇게 생각하지 않는다

하나는 괜찮아 보이니까 50 %를 두 모자에 넣자 그래, 그건 좀 미친 테두리 반경하자, 그게 내 뜻이야 그것이 내가 넣기 위해 의미했던 것보다 적은 원으로 바뀌고 있었던 것은 50의 사진이었다 okay 그래 그래서 그 두 괜찮아 보였지만, 나는 조금 너무 나를 위해 그래서 그것을 조금씩 줄이자 그 50과 롤을 선택하자 내 마우스 휠과 함께 그게 더 낫네

그래, 그걸 맡기자 이걸 조금만 풀어 봅시다 모든 것을 복사 한 다음 삭제할거야 우리가 바꾸지 않은 비트는 우리의 괄호로 돌아가고 우리의 사용자 정의 CSS 이번에는 아래로 내려 가면서 다른 제목을 만들어 보겠습니다 전화 문의 양식 이제 하나를 내려서 우리가 들었던 것을 붙여 넣으십시오

트롤을위한 조금 더 많은 공간 괜찮아요 디스플레이 폭 패딩을 변경하지 않았습니다 글꼴 크기 줄 높이 색상 당신은 그 색을 실제 색으로 바꿀 수 있습니다 그 색을 떠나려면이 모든 것을 지우겠습니다 background-color 우리는 변경했지만 클립은 우리가 그 테두리를 건드리지 않았다

우리는 그 순간에 우리가 원하지 않는 것을 바꿨다 우리가 잠시 그곳에 우리 자신의 전환을 넣을 수있는 편이 쉬워요 컨트롤을 말하고이 사이트로 돌아가서 우리가 가진 것을 보자 그래, 너 우리가 거기에 입력하면 우리의 어둠은 우리가 거기에 괄호로 돌아가는 것을 어둡게합니다

예를 들어 우리가 파란색으로 바꿀 수있는 바로 그 색깔입니다 빨간색으로 바뀌고있는 우리의 이론을 시험해 봅시다 내가 읽는 동안 그것을 저장하려고하는 동안 더 좋지 않다 또는 ctrl을 읽은 상태로 유지하면 새로 고침이 시작됩니다 입력을 시작합니다

이 화면의 색상에 전혀 영향을주지 않는 것은 없습니다 우리가 할 수있는 수도꼭지가 있습니다 내가 초점을 맞추면 더 좋을 것 같아 배경이 검은 색이나 어둡거나 무엇이든 원하는 색이라면 그 글쓰기는 우리의 다른 것들처럼 더 흰 색이었습니다 그래서 가자

여기에 우리가해야 할 일 사본이 있어요 우리가 가고있는 일이 가고 있어요 너 여기에있어 어머나 너는 우리가 볼 수있는 이것을 내려 놓고 덮는다 무슨 일이 벌어지고 있는지 우리가 여기서 뭘하고있어? 거기에 붙여 넣으십시오 여기에 초점을 두지 않고 차갑게 할 것입니다 우리는 폰트의 하얀색을 만들 것입니다

사실 저는 그것을 중요하게 생각합니다 바로 거기 FFF는 흰색 배경색입니다 끝내서 검은 색으로 만들자 우리는 언제나 그것을 검은 색 제로 0으로 바꿀 수있다 경계 우리가 여기에 있던 버튼에 사용하는 푸른 색을 사용하지 않을까요? 지금은 색 바가 당신을 사용합시다 그리고 우리는 재미를 가지고 그 상자의 그림자를 덧붙이 자고하자

그 두 가지를 모두 가져 가세요 우리가이 버튼들을 위해했던 수업을 어떻게 여기에서 가져 갔습니까? 그래서 우리는 갈거야 내가 그 효과를 없애 버려서 내가 제거 할 수있는 거기에 그 줄을 복사 해 놓고 거기에 놓아 두자 코드 줄 괜찮아 그래서 그 상자의 그림자를 가지고 내가 전에 컨트롤을 맞았 마우스 오른쪽 버튼을 클릭하고 이것을 선택하면 새로 고침하기 전에 사이트로 돌아가 보겠습니다 그냥 우리가 여기서 뭘하고 있었는지 알 수 있어요

여기에 양식 컨트롤이 있습니다 우리가 포커스에서 무엇을하고 있는지보고 싶다면 우리가 아직 저장하지 않았 음을 기억하십시오 그래서 우리가이 코드를 조금 쳐서 보지 않을 것입니다 HOF 요소를 여기에두고 포커스가있는 상자를 선택하면 무엇이 있는지 알려줍니다 focus on 계속해서 실제로 우리의 스타일 시트에서 그것을 읽고 있습니다

우리는 구원을 얻지 못했지만 그것이 아주 멋지다 우리가 그렇게 할 수있는 삶의 초점을 바꾼다 그래서 우리가 한 일은 우리가 그것을 바꿔서 우리의 버튼처럼 될 것입니다 여기에 그 글로우와 파란색 윤곽선이있을 것입니다 흰 글씨 상자 그림자가있는 그 광선에 그렇게 부르 자고하자

우리가 그것을 새롭게하지 않았기 때문에 순간이 아니다 그리고 일단 우리가 새로 고침하자 무슨 일이 일어 났는지 보자 네가 어쩌면 흑인에 대해서 조금 생각해 보라 너무 많이 놔두고 불투명도를 낮추어 보자 다시 우리는 그 집에 와서 거기에서 집중하기를 원합니다

당신 그녀는 여기에있다 이제 불투명도를 조금만 낮추어 보자 우리는 볼 수 없다 그곳에서 자라는 것이 자라서 우리가 무슨 일이 일어나고 있는지 볼 수 있습니다 불투명도를 낮춰서 조금씩 볼 수 있지만 더 어둡기 때문에 실제로 볼 수있는 것보다 더 어둡다는 것을 알 수 있습니다

그것 그래서 그것의 끝에 30에 6 개의 0이 있습니다 아무런 문제가 없으면 스타일 시트를 닫습니다 이 작품에서 너는 여전히 조금은 볼 수있다 그곳을 통과하지만, 초점이 맞지 않은 것보다 확실히 더 어둡습니다 우리의 배경색은 6 개의 0이었고 30은 덕분에 다시 나는 그것을 새롭게했다

거기에 우리는 지금 우리를 위해 모든 것을 저장합니다 우리는 거기에 도착할 것이고 클릭 할 때이 모든 형태로 작동합니다 어떤 종류의보고 싶다 글쎄, 그녀가 친절하게 굴고 싶을 때도 그렇게했을 때 우리가 이미 일을 끝낸 이래로하기 쉽다 간단하게 우리의 custom CSS로 돌아가 보자

이 ctrl C를 복사해라 당신 초점이 맞다는 말은 어디에서나 가능합니다 그것에 초점을 그것도 우리가 그것에 마우스를 가져갈 때 그것을 할거야 Ctrl을 저장하려면 내가 사과 이 비디오는 조금씩 진행됩니다 우리는 우리가 그것에 마우스를 가져갈 때 지금도 간다 우리는 다른 방법으로 가리 키도록 초점을 맞추 었습니다

그러니 여기서 멈추고 다음 비디오에서 우리는 스타일을 바꿀거야 그 흰색과 아마 그들을 약간 이동하고 우리는이 스타일을하고 싶다 버튼을 클릭하면 조금 더 보입니다 여기 중간에 당신이 비디오를 즐긴다면 당신이 유용했기를 바랍니다 웹에 관심이 있다면 공유하고 채널을 구독하십시오

이 코스를 개발하고 아래에서 찾을 수있는 다른 많은 코스들 모든 YouTube 가입자에게 큰 할인 혜택이 있습니다 아래 코스가 다시 한 번 모습을 드러내고 있습니다 제이미가되었습니다 시스템 22 및 웹 디자인 및 기술 팁을 보내 주셔서 감사합니다 일

Divi WordPress Theme How To Create Custom Animated Buttons

안녕 얘들 아 다른 divi WordPress에 오신 것을 환영합니다 테마 자습서 이것은 제이미 https://wwwsystem22

net 및 https://web-design-and-tech-tipscom/에서 조금씩 잘 알고 있습니다 우리가이 비디오에서 우리가 무엇을 할 것인지에 대해 데모하는 실험적인 사이트 맞춤형 클릭 유도 문안 버튼이나 맞춤 설정을 만들어 보겠습니다 버튼 모듈을 사용하지 않을 것이고 스스로 만들 수 있습니다 흥미 진진한 무언가를 얻으십시오 Divis absolutely awesome just keep 어떤 종류의 WordPress 사이트를 구축하는 경우 더 좋아지고 더 좋아집니다

모두 내가 당신이 그것을보고 데모를 볼 수있는 걸릴 것을 권 해드립니다 이 비디오 아래 여기 그래서 시작하자 데비가 여기에 설치되어있어 로그인 했어 내가 갈거야 비주얼 빌더를 활성화하십시오 이제 우리는이 부분에 우리가이 작은 부분을 칠 부분을 추가하도록했습니다 파란색 버튼을 클릭하면 새 섹션이 추가됩니다 내가 원하는 걸 내가 여기있는 가운데 버튼 크기의 공정한 단추를 원한다

3 열을 여기에서 선택하려고합니다 중간 단추를 사용하는 것만으로도 분명히 원하는대로 할 수 있습니다 여기와 중간 중간에서해라 텍스트 모듈 만 일반 텍스트 모듈에 추가 할 것입니다 우리가가는 텍스트 모드에서 왼쪽 버튼을 눌러 아래로 스크롤 할 것입니다

좋아, 우리가 넣고 싶지 않아도 돼 우리가 엉덩이에서 말하고 싶은 것, 그래서 내가 모르는 특별한 거래라고 해보자 손을 내밀어 당신 이게 우리가 너를 어떻게 보는지 알게 될거야 내가 할 수있는 한 최선을 다해서 시연 할 것이고 우리는 이것을 3 단으로 만들 것입니다 좋아요

정말 흥분되는 것 같아요 그냥 작은 텍스트 모듈이 아니에요 거기서 가자 조금만 만들어 보자 더 재미 있기 때문에 우리는 여전히 콘텐츠 탭에 있습니다

내가 할 일을 배경으로 가서 우리는 그것을 줄 것이다 배경색 또는 배경 그라디언트 또는 배경 이미지를 동영상에서 그라디언트를 보겠습니다 좀 더 재미있는 색상 이군 어쩌면 상단에는 진한 파란색이 있고 하단에는 약간 밝은 파란색이있다 그것을 뒤집어 가로 그라데이션 방향을 여기에 놓습니다

180은 위에서 아래로 90도이므로 왼쪽에서 오른쪽으로 갈 것입니다 우리는 거기에 갈 나는 그것도 조금 잃는다 고 생각한다 물론 우리가 여기에있는 나머지 것들을 유지합니다 여기에 원하는 색상을 붙여 넣을 수도 있습니다 그런 것 좋아, 그래서 우리는 배경색을 가지고있다

나는 그 텍스트를 실제로 보지 않는다 다음으로 우리 디자인 탭으로 가보자 내가 그 중 하나를 만들었다는 것을 기억해라 1 3 나는 기억할 수 없다 그래서 우리는 그렇게 할 것이다

제목 4로 이동하자 그게 최고 였어 그것을 굵게 만들어라 울트라 보울 스페셜 딜 보자 우리가 여기서하고 싶은 다른 무엇이라도 우리는 크기가 현명 할 수 있다고 생각합니다

좋아, 그다지 상자 그림자를 쓰고 싶지 않아 나는 그것을 시도 할 필요가 없다고 생각한다 그렇게 많은 차이를 만들거야 그래서 나는 그 사실에 상당히 만족합니다 이제 우리는 자본을 변형 할 수 있습니다

그래, 꽤 잘 나가서 그 아래에있는 것을 해보 죠 나는 세 가지를 믿는다 그리고 우리는 또한 그것을 희게 만들거나 우리는 무엇이든 노란색으로 만들 수있다 당신에게 조금 더 이상해 보이는 색상이 눈에니다 다시 한번 Y를 넣어 보겠습니다

다시 그것을 원하니? 그게 파일이야 너를 약간 과장되게 만든다 세미 볼 그릇 그래, 멋지게 우수하다 잘 작동하지만 아마 중심에 정렬되어 있고 그것을주고 싶을 것입니다 약간의 숨쉴 방 그러니 다음에 해보 죠

우리가 여기에 센터 정렬 할 수 있다고 생각하고 이제 네가 원하는 위대한 네 번째 표제 그에게 약간의 공간을 주자 그 스타일을 다시 디자인 한 스타일 이제 우리는 내려 가고 싶다 헤딩을 닫고 공간으로 내려 간다 그리고 패니즈 패닝은 모든 것을 밀어 넣을 것이기 때문에 마진을 필요로하지 않습니다 왼쪽 및 오른쪽으로 클릭하자

나도 몰라 25 상단과 하단 그래, 우리에게 조금 더 많은 공간을 제공 우리는 괜찮아요 왼쪽과 오른쪽하지만 나는 그것을 왼쪽과 오른쪽 어쨌든 패딩주지 더 작은 장치에서 변경 될 수 있기 때문에 다시 링크를 클릭하십시오 한 번에 넣어야 해 네, 특별 변경 사항이 보이지 않는 것이 좋습니다 h3에 약간의 상자 그림자를 시도해보십시오

텍스트 또는 제목 텍스트 작동하지 않을 수 있습니다 그냥 시도해 봅시다 괜찮습니다 거기에 그라데이션 배경이있어 우리 텍스트가 멋지게 나옵니다 아마 이것 좀 둥근 모서리를 줘 보자

이 모듈을 한 번 더 닫으면 국경으로 내려갑니다 정말로 둥글게 만들려면 단지 약간만 원한다면 몇 가지를 할 수 있습니다 둥근 모서리 당신은 당신이 끝났다는 것을 알았습니까? 나쁘지는 않지만 선생님보다 조금 더 과감한 것을 원합니다 50 명의 담당자와 그것이 우리가가는 곳에서 매우 둥근 것을 위해 그것을 만들어야한다 찾고있는 것이 좋습니다

초기 정렬이 있습니다 여기서 버튼을 누르지 만 실제로는 아무 것도하지 않지만 순간 지금 그는 몇몇 중대한 특징에서 가져 왔는가? 마우스를 올리면 물건을 움직일 수있는 몇 가지 마우스 오버 기능이 있습니다 아래 상자 그림자를 여기에서 선택해 보자 지금 여기에 무엇이 있는지 알고있다 네가 올라가면 지금 그걸 가져 왔어

– 실제 박스 그림자의 수평 위치는 매우 바쁘다 작은 화살표를 클릭하면 옵션이 표시됩니다 그것이 디폴트로 움직일 때 다른 것을 가지고있다 그 순간에 10 점이 0으로 설정되었으므로 기본 그래서 나는 그 하나를 0으로 설정하고 볼 수 있듯이 거기에 없다 그리고 그것이 떠돌아 다닐 때 나는 무언가를 원한다

그래서 나는 그것이 맞았을 정도로 온다 호버 탭을 클릭하고 구멍을 뚫어 보자 이봐, 우리가 원하는 것보다 80을 더 원한다 아마 약 300 픽셀 정도가 시도 300 거의 당신이 원한다면 거기에 약간의 단정함을 남길 수 있습니다 ~하지만 나는 모든 방법을 가지고있을 테니, 아마도 또 다른 20 예를 추가하자

괜찮습니다 기본값을 보면 아무 것도 없습니다 커서를 가져 가면 그림자가 생깁니다 실제로 그 색깔이 조금 더 좋아 지도록 내 물로 만들어 보자 그것보다 약간 큰 거래 그래서 우리는 박스 섀도우 가자

색상 또는 보라색으로 내려 가며 자주색으로 만듭니다 그거 꽤 멋있어 그치만 네가 항상 색칠을했다 원작에서 눈에 띄는 것이 어떨까요? 색상과 섞으면 좋겠다 불투명도가 약간 떨어졌습니다

우리가 눈에 띄기를 원합니다 나는 불투명도를 취할 것입니다 0으로 되돌아 간다 마우스를 올리면 정상 상태 인 마우스 오버 상태가됩니다 그래, 그걸로 상당히 기쁘게 생각합니다

너는 내가 그걸 만들고 싶다고 말한 것처럼 생각해 조금 더 큰 표제 인 특별한 그래서 내가 덮을 때 당신은이 작은 그림판 아이콘 물건들을 가질 수 있습니다 당신이 원한다면 당신은 그것을 클릭하기 만하면됩니다 연령대 4는 현재 매우 편리합니다 텍스트 크기는 18입니다

그래, 조금은 더 좋아지지 않아 나는 그걸로 행복해 좋아, 그래서 우리는 버튼을 가지고 있지만 그것은 아무것도하지 않는다 거기에 작은 둥근 버튼 당신이 그것을 좋아하지 않는다면 귀엽지 않을 것입니다 저는 여기서하고 있습니다

그래서 우리는 실제로 그것을하기를 원합니다 콘텐츠 탭을 클릭하고 여기에서 링크를 클릭하면 외부 URL은 다른 페이지 또는 어디로 가고 싶은지 붙여 넣기 만하면됩니다 내가 거기에 넣기 전에 내가 아직 어디로 가고 싶었는지 모르겠다 내가 네가 여기 아래로 가기를 좋아한다고 생각해 우리가 판매 품목을 갖자

여기에 내려 가서 아래로 내려 가면이 섹션에 CSS ID를 부여해야합니다 URL이 없으므로 페이지의 나머지 부분과 동일한 URL이므로 계속 유지해야합니다 그 부분을 클릭하십시오 작은 장부에 들어가십시오 고급 탭 CSS ID 및 클래스가있는 학교에서 ID를 제공합니다

어떤 종류의 신분증도 당신이 원하는 무엇이든지 우리는 그것이 스페셜이라 부를 것입니다 우리는 거기에 버튼을 불렀습니다 그래서 지금 스페셜의 신분증을 얻었습니다 지금 우리의 버튼으로 돌아가십시오 지금 우리의 작은 편집 요리사를 클릭하십시오 지금 콘텐츠를 망가 뜨리는 것을 용서하십시오 – 이제 CSS ID로가는 ID입니다 해시 태그 해시 태그와 스페셜 SP와 함께 ID 이름을 사용하려는 경우 ILS 같은 페이지에 있기 때문에 한 번 같은 창에서 열립니다

그 부분과 관련이 없으므로 이제는 그 링크가 활성이어야합니다 그 작은 판매 품목으로 우리를 데려 갈거야 우리가하고 싶은 다른 것은 우리가 되돌아가는로드에 애니메이션을 조금 줘 보자 디자인 탭 애니메이션에 대해 우리가 그것을 가지고 있다면 어째서 플립할까요? 한 번만 지속되는 것이 아니라 지속 시간을 길게하는 것 약 1,500 그와 같은 것 60 나는 그것에 많은 시간을 할애해야한다 맞아

우리가 거기에 있다고 생각해 그래서 우리의 변화를 저장하자 작은 보라색 버튼 아래쪽 베이는 오른쪽에 그것을 클릭하고 저장 당신이 그것을 잊어 버리고 당신이 비주얼 빌더를 나왔다면 우리의 변화 변경 사항을 저장하라는 메시지가 표시됩니다 비주얼 빌더를 빠져 나오는 시간 우리가 스크롤을 내려 왔는지 확인해

다시로드하는 중입니다 당신 그래, 작은 스핀 효과가 있고 우리가 그 위에 마우스를 가져갈 때 우리는 거기에가는 작은 보라색 거래는 서있다 이제 우리가 그것을 클릭하면 잘하면 밖으로 당신이 거기서 좋아하는 걸 보자 이것 곧바로 한 번만 더 확인해보세요 눈길을 끄는 것은 당신이 원하는 무엇이든 할 수 있기 때문입니다

우리는 당신이 당신 자신을 거기 만들고있는 것처럼 만들고 있습니다 내가 여기에 온 것은 네가하고 싶은 일을하면 너만의 거래를 만든다 더 많이 나는 오늘 끝내지 않을 것이다 비디오를 사용하면 맞춤 CSS를 사용하여 모든 종류의 일을 할 수 있습니다 우리가 이전 비디오에서했던 것과 같았 으면 좋겠다

귀하의 Divi에 맞춤 버튼이나 맞춤 버튼 아이디어를 만드는 방법이 있습니다 WordPress theme 나는 당신이 그것을 즐겼기를 바랍니다 공유하고 YouTube 채널에 가입 해주세요 시도해 볼 수 있다고 말했듯이 이 비디오 아래에 외교적 인면이 있다면 정말 멋져요 WordPress 사이트는 웹 개발에 관심이 있다면 체크 아웃합니다

우리는 아래에 몇 가지 훌륭한 코스가 있습니다 프리미엄 코스로 YouTube에 큰 할인 혜택을드립니다 가입자는 시스템 22에서 Janie로 다시 한 번 살펴 봅니다 멋진 팁을 주셔서 감사합니다

Divi WordPress Theme How To Create Scrolling Divi Theme Layout Screens

안녕 얘들 아, 다른 Divi WordPress 테마 비디오에 오신 것을 환영합니다 제이미입니다

https://wwwsystem22net 및 http://web-design-and-tech-tipscom/ 누군가 YouTube 동영상 중 하나에 질문을 던져서 어떤 일이 어떻게 이루어 졌는지 설명해주십시오 누군가 다른 사람의 블로그를 보게됩니다

일부 미리보기 이미지가있는 Divi 테마의 스크롤 데모 웹 사이트와 물건을 넣을 때 훌륭한 것을 보여줍니다 그 위에 마우스를 갖다 대면 긴 이미지가 스크롤됩니다 일할 수 없었어요 제가 확인해 볼 수 있는지 물어 봤어요 당신이 볼 수 있듯이 그것은 잘 작동하고 4 학점은 Craig의 이름으로 신사 인이 원본 작가 Longmuir와 나는이 비디오의 아래에 그의 최초의 지위에 대한 링크를 놓을 것이다

그리고 그는 몇 가지 CSS 코드를 데모에 제공했고 채프먼이 질문은 그가 일할 수 없다고 말했어 그래서 나는 그걸 훑어보고 내가 아마도 내가 이해하기 쉽도록 조금 더 쉽게 만들 수 있습니다 그래서 사이트가 있습니다 여기에 우리의 비주얼 빌더를 사용 가능하게하려고 로그인했습니다 분명히 그것은 Devi 사이트입니다

당신 좋습니다 이제 청구서를 가져와 아래로 스크롤하여 다른 행을 만들어 봅시다 마지막 동영상에서 텍스트 효과로 만든 작은 버튼이 있습니다 우리는이 작은 파란 단추를 치고 싶다 여기 또 다른 섹션을 만들 정기 그 섹션 안의 섹션 나는 당신이 그것을 만들 수있는 세 개의 컬럼으로 만들거야 네가 원하는 걸 내가 3 장 찍어야하기 때문에 3 장을 사용해야 겠어

지금 이걸 할 준비가 됐어 우리 안에 아무것도 넣지 않을거야 이 상자가 열릴 때이 작은 상자가 필요해 그냥 X를 클릭하고 우리가해야할 일은 배경 이미지를 넣는 것입니다 이 칼럼들 각각의 뒷부분에서 저는 몇 가지 이미지들을 준비했습니다

이미지는 그들이 멋지고 오랫동안 사용할 수 있도록하려는 것입니다 아래로 스크롤 할 수 있고 사람들은 내 모습을 볼 수 있습니다 1237 년까지 실제로 5 백명이된다 상자의 뒷부분을 감싸는 데 충분히 큰만큼 그들은 모두 편집을 위해이 작은 코드를 쳤다면 지금 말해야하는 칼럼 이 섹션에서 우리가 배경을 밟고 싶습니다 우리가 배경에 치고 싶은 콘텐츠 탭 우리는 1 열 배경을 할 주요 배경을하고 싶지 않다 – 배경 및 컬럼 3 배경 놀랍습니다

나는 여기있는 동안 모두 다 해줄 것 같아서 색상 그라디언트를 얻었습니다 이미지 비디오 그래서 나는 이미지에 부딪 칠 것이다 나는 배경 이미지를 추가 할 것이다 나는 내가 가져온 이미지 중 하나를 잡아 당길거야 사실 내가 당길거야 3 개를 가로 지르지 만, 물론 그 중 하나를 선택하기 만하면됩니다 여기에 세 개의 이미지가 있고 우리는 한 번에 하나씩해야합니다 그래서 내가 원하는 것을 선택하겠습니다

거기에 히트 업로드 그것은 백그라운드에서 그것은 많이 보이지 않는 및 그 이유는 그것이 많이 보이지 않는 것입니다 잠시 후에 설명하겠습니다 다음으로 내려 가다 배경 이미지를 추가 할 때도 마찬가지입니다 이제 3 번으로 간다

그 세 번째 이미지가있다 오, 나는 색이있다 그곳에 이미지가 있기를 바란다 좋아, 그렇게하지 않으면 너는 그다지 많이 보지 못한다고 말하고 싶다 약간의 사촌 거기 순간에 그 칼럼에 실제 높이가 없다

그리고 Craig CSS를 친절하게 제공합니다 여기에서 사용하고있는 CSS는 이미 살펴본 것이므로 이것이 우리가 칼럼에 CSS 클래스의 스크롤을 제공해야한다는 것을 의미합니다 최소한 250 그램의 분홍색이 있어야한다고 말했어 이 문제를 해결할 수있을만큼 충분히 높지 않아서 높이가 최소가 될 것입니다 250 픽셀로 무언가를 볼 수 있음을 의미합니다

그리고이 이미지들을 기본 모드가 괜찮 았던 순간에 우리가 원하는 방식으로 만들지 만 우리는 센터에서 그들을 원하지 않습니다 우리는 라인을 왼쪽 상단으로 정렬하기를 원합니다 그림이 왼쪽 위 모서리에 정렬되어 그림의 나머지 부분이 당신입니다 그것을 볼 수는 없지만 거기 뒤에서 아래로 스크롤하고 있습니다 우리는 계속해서 다음 일을 위해 똑같은 일을 할 것입니다

왼쪽 상단 그리고 여기에 마지막으로 똑같은 것이 분명합니다 당신 지금 내가 말했듯이, CSS 클래스의 스크롤을 나에게주고 싶다 그게 니가 원하는대로 부르는거야하지만 그가 부른거야 나를 스크롤하고 이것이 우리가 사용하는 것입니다

아래에이 코드를 적어두고 Craig 긴 해에서 찾을 수도 있습니다 원래 게시물 이제 우리는 고급 사용자 정의 CSS에 가고 싶다 ID 및 클래스 우리는 모든 통신에 그것을주고 싶습니다 그것은 ID가 아닌 클래스입니다 CSS 클래스이므로 한 열만 클래스에 붙여 넣기 만하면됩니다

열 두 CSS 클래스 거기에 열 세 CSS 클래스 거기에 붙여 넣은 그래서 그들은 모두 지금 스크롤의 수업을 나에게 가지고있다 그래서 당신은 잘 생각하고 있습니다 우리는 그런 것들을 잘 사용하지 않은 것처럼 보입니다 우리가 거기에 넣지 않은 코드는 이 말을하고 우리가해야 할 일 여기에있는이 CSS 코드를 모두 사용하고 있습니다 그가 우리가 그것을 한 번 필요로하는 방법을 스크롤하기 위해해야 ​​할 모든 것을 다했다

이 전환을 수행하고 센터를 다시 방문하면됩니다 이미지를 맨 아래가 아니라 맨 아래로 스크롤하면 어쨌든 바닥을 복사하도록 선택했습니다 이제 대시 보드로 가야합니다 Divi 테마 옵션으로 이동합니다 일반 탭에서 아래쪽으로 스크롤하여 사용자 정의를 찾습니다

CSS 상자는 테마 사용자 정의 도구 탭에서도 가능하지만 우리는이 방법으로 그것을 할 것입니다 제목은 항상 슬래시 스타 스타일의 슬래시 제목을주고 싶습니다 만약 당신이 CSS의 라인을 많이 썼다면 찾으면된다 설명적인 제목 스크롤 이미지 그 다음에는 크레이그의 코드가 있습니다

우리가 그것을 복사했는지 확인하겠습니다 이제 여기에 붙여 넣어 보겠습니다 거기에 바로 거기에 그래서 변경 내용 저장 단추를 누르십시오 우리가 멋진 녹색 체크 표시를 얻을 때까지 거기에 괜찮습니다 다시 사이트로 돌아가서 지금 우리가 새로 고침 할 때 생각할 것입니다 이것은 우리 모두 마술처럼 나타납니다

그러나 어떤 이유로 그것을하지는 않습니다 그리고 이것은 나에게 연락 한 갈라진 틈이 이 문제는 여전히 거기에 높이가 없다는 것을 알았습니다 그래서 나는 우리는 그 CSS로 돌아가서 최소값을 말하는 곳으로 강제로 이동해야합니다 거기서 높이를 클릭하면 X 다음에 세미콜론이 나옵니다 중요한 것을 강제 할 것입니다

느낌표는 iymp ort AMT입니다 중요한 것을 덜 사용하고 싶지는 않지만 이것도 그 중 하나라고 생각합니다 우리가 그렇게해야 할 시간은 우리의 변화를 저장하는 것이 중요합니다 이제 사이트로 돌아가서 새로 고침을하고 어떻게되는지 확인해 보겠습니다 우리는 거기에 우리의 작은 상자가있어 그들은 지금 250 픽셀 높이가되어야합니다 마우스를 올려 놓았을 때의 최소 높이가 이제는 멋지게 스크롤됩니다

이미지의 하단과 신사는 또한 나에게 무엇을 물었다 내 앞에 말한 것처럼 당신이이 우물에서 사용하는 이미지의 종류는 길어지기를 원해 그리고 얇고 광산은 내가 이전에 말했듯이 약 500 명의 사진을 500으로 생각한다 그들이 충분히 넓지 않은 경우 지역 상자를 덮을만큼 충분히 넓기 때문에 그냥 커버 버튼을 치고 긴 웹 사이트를 과시하는 이상적인 말처럼 이런 식으로 패션을 과시하거나 또는 여기에 멋진 해변이 있고 내가 한 일은 클릭 유도 문안을 넣었습니다 버튼을 클릭하십시오

왜 그렇게했는지 물어볼 수 있습니다 그것을 클릭 할 수 없습니다 아무 것도하지 않습니다 가서 편집하면 할 수 없습니다 링크를 추가 할 수있는 방법이 없거나 Divi 여기 실제 열에 링크를 추가 할 수있는 방법이 없습니다

하하 한 걸음 더 나아가서하자 우리가 가짜로 만들 수있다 Divi를 만들 수 있을까? 거기에 뭔가가 있다고 생각해서 우리의 비주얼 빌더를 다시 사용하도록합시다 그리고 여기로 내려가 봅시다

이제 이것을 섹션과이 패션에 적용 해 보겠습니다 하나는 정말로 그 중 하나에서 일해야했고 우리는 그것을 갈 수 있었다 이 유행 단면도는 거기 그밖에 우리가이 페이지에 얻은 무엇을 나가 할 수 있는다 다음으로 연결 아마도이 섹션에 링크되어 있으므로 여기를 클릭하십시오 작은 톱니 바퀴가 실제로 ID를 얻었는지 확인하면 수업에서 고급 CSS ID로 이동합니다 ID 번호를 클래스처럼 전달하지 않고 ID처럼 제공하도록하지 않았습니다

그 마지막 단추 비디오와 함께 잘 어울려 전화를해라 나는 그만 둔다 그 진짜로 잘 흐리게 흐림의 종류가 있을지도 모르고 다 그러나 무엇을 선전 말할 것이다 클래스 ID는 고유 한 클래스 여야하기 때문에 동일한 클래스를 가질 수 있습니다 같은 것 그러나 우리는 아마 내가 생각하는이 광고문을 하나라고 부를 것이다 독특한 알았어

이제 ID 신분증이 있다는 걸 알았어 미안해 방금 내가 ID 신분을 의미하는 수업을했다면 그것이 ID이고 class ID가 아님을 확인하십시오 이제는 다시 돌아가 봅시다

우리가 여기에 들어가면해야 할 일은 실제로는 아무것도 없다는 것입니다 우리의 작은 장부 아이콘에 링크가 있지만 그 모든 행을이 행과 연결시킬 수는 없습니다 나는 그 행을하고 싶지 않습니다 이게 내가 지금 당신에게 보여줄 것은 서로 다른 링크를 가질 것입니다 Butte는 없으니 까

그러니 그걸 끝내자 열이있는 상태에서 그 일을하는 방법을 찾으십시오 나는 분명히 알지 못합니다 꽤 꽤 DD와 함께 일하는 데 익숙해졌습니다 우리가 할 일은 우리가 할 일을 텍스트 그래서 난 그냥 작은 플러스 아이콘을 쳤다

아래로 스크롤하여 작은 텍스트 요소를 찾습니다 좋아, 거기에 넣지 않은 것 같아 한번 더 해보자 거기에 우리는 텍스트 요소가 있습니다 좋아요 나는 그것을보고 싶어합니다

그 텍스트를 막연하게 볼 수 있습니다 스크롤하면 맨 아래로 스크롤 할 수 있습니다 그 버튼의 맨 아래까지 내려갈 수있는 텍스트가 있습니다 잘 말하면 꽤 못생긴 것처럼 보이므로 이것을 복사해서 붙여 넣으십시오 몇 번이나 정크 텍스트 어쨌든 나는 그것을 더 이상 원하지 않는다

상자 사촌 우리가 최대 높이를주지 않으면 상자를 더 내려 놓을거야 그러나 우리는 그렇게하고 싶지 않습니다 텍스트가 그것을 다루고 있음을 알 수 있습니다 우리가 할 수있는 일은 재미있는 부분입니다 그 텍스트는 밝은 색이므로 실제로 볼 수 있습니다

예, 그 버튼을 여기에 올리면 텍스트가 덮일 것입니다 그래서 우리는 무엇을할까요? 우리가 실제로이 텍스트를 클릭 할 수있는 링크로 만들 것입니다 그런 식으로 버튼을 클릭하고 어딘가에 갈 수 있습니다 이 비디오에 약간의 사과가 나옵니다 그래서 우리가 지금하고 싶은 것은 색상이 있습니다

맞춤 색상을 지정합니다 불투명도를 취할 것입니다 불투명도가 너무 낮아서 투명하므로 더 이상 볼 수 없습니다 아직 거기에 있지만 더 이상 볼 수 없다 이제 우리가 콘텐츠로 돌아 가면 우리는 어딘가에 NIC를 설치할 수 있습니다

링크 및 우리는 여기에 CSS ID가있어 그것을 우리는 그것을 연구하지 않았다 ID는 항상 해시 태그이고 믿을만한 메시지입니다 변경 사항을 저장한다고 가정 해 보겠습니다 당신 당신 한 번 저장하면 비주얼 빌드가 종료되고 이것이 실제로 작동하는지 확인합니다 여기 아래로 스크롤하십시오 당신은 이미 우리가 그 손 모양의 아이콘을 가지고있는 것을 보았습니까? 여기에 클릭 할 수있는 항목이 있으므로 let 's go 버튼을 클릭하면됩니다

붐은 우리가 원했던 훌륭하고 훌륭하게 우리의 광고판으로 우리를 데려다줍니다 이 작업을 신속하게 수행하여 다른 요소를 비주얼 빌더를 한 번 더 활성화 이것은 Craig의 생각을 단지 이것들을 조금 더 넓히기 위해 여기에 확장하고 있습니다 유용하다 그들은 시연을 위해 훌륭하다 실제로 웹 사이트를 스크롤하는 사이트를 사용하고 있다면 실제로 사용하게 될 것입니다 이 프로젝트에 내가 뭘하고 싶은지 괜찮아

이것을 복제하고 싶지 않습니다 그리고 볼 수 있듯이, 더 오래도록 만들었습니다 이걸 여기에 집어 넣으세요 여기에 넣어주세요 편집해라

나는 이것이 여기에있다라는 것을 알고있다 그것은 kourt의 스페셜들이 꽤 확실하다는 것이다 이중 점검 네, 특별한 생각이 있어요 우리가해야 할 일은 이것을 편집하고 링크를 편집하는 것입니다 그녀는 그 내용 아래 있고 스페셜에 간다

같은 창에서 열어 보면 지금이 하나를 저장하면 조금 다르다 실제로이 웹 사이트에 링크 된 것을 만들자 다시 거기에있는 두 개의 작은 사각형을 복사하십시오 우리가 필요로하는 것보다 더 크게 잡아 당겨 보자 하나는 내가이 웹 사이트에 대한 링크를 잡아 보자

이걸 수정 해보세요 이번에는 이번에는 정규 URL입니다 그리고 이번에는 다른 창문이나 새 탑에서 열어보고 싶었습니다 변경 사항을 저장하지 않고 작은 보라색 버튼을 다시 클릭하면 저장됩니다 저장되면 우리는 시각적 청구서를 종료 할 수 있습니다 당신 알았어

우리가 뭘 얻었는지보고 나서이 비디오를 마무리해서 이걸 알 수있어 그것을 기다리지 않아도된다 효과를 내기 위해 버튼을 누르지 않았다 이것에 더 많은 시간을 할애하자 나는 중간에 버튼을 가질 수 있었다

하지만 그 중 하나가 우리를 우리의 광고판으로 데려 간다는 것은 괜찮습니다 여기이 버튼은 없어요하지만 거기에 버튼을 넣을 수 있어요 그것을 클릭하면 판매 특가로 연결됩니다 이 탭은 새 탭을 열고 실제 웹 사이트가 당신 거기는 그래서 당신의 질문에 대답하고 그 작은 문제를 해결해 주셨으면합니다

이 블로그를 처음 작성한 Craig에게 다시 한 번 가서 davie에서 CSS가 작동하는 것을 멈추게하는 모든 것이 변경되었지만 필요한 모든 것 그 중요한 수업을 추가하면 도움이된다면 좋겠다 관심이 있다면 공유하고 YouTube 채널을 구독하십시오 웹 디자인 아래에서 우리는 무료 및 YouTube 가입자에게 큰 할인 혜택이 주어지는 프리미엄 다시 한번 이것이 시스템 22의 제이미 였고 기술 팁을 디자인 할 때였습니다 지켜봐 주셔서 감사합니다 좋은 하루 되세요