How to Use Avada Theme's Global Elements and Containers in WordPress

안녕하세요, 제 이름은 제시입니다 저는 여기 강사 중 한 명입니다

We Do 인터넷에서 오늘 UnScripted에서 우리는 템플릿의 아바다 글로벌 기능을 살펴 보겠습니다 제목 슬라이드와 낙관적 인 음악 재생 시작하기 전에 Avada Theme를 설치하고 사용할 준비가되었는지 확인하고 싶습니다 Avada의 최신 버전을 설치했고 데모도 가져 왔습니다 그래서 나는 모든 다른 페이지 레이아웃 등등을 가지고 있습니다 오늘 내가 할 일은 기능을 살펴 보는 것입니다

허용 할 작은 글로벌 기능을 사용하는 방법에 대해 글로벌 컨테이너를 만들고 글로벌하게 만들기 위해 열 및 기타 전역 요소를 반복해서 사용할 수 있습니다 그래서이 특별한 홈페이지에, 어, 대학 이 부분이 바닥에 있습니다 "50 만 명이 넘는 학생들이 가입하십시오" 나는 그것이 어떤 페이지의 맨 아래에 있기를 바란다 나는 사용하는 것을 좋아한다

그래서 실제로이 페이지를 편집하려고합니다 WordPress의 내부에서 상단의 편집 페이지 메뉴를 클릭하십시오 나는 새로운 창문으로 열어, 그건 내가 상쾌하게하기 위해 거기에 머물고 싶다는 나의 습관이다 여기 Avada Fusion Builder가로드됩니다 나는 바닥으로 내려갈 것이다

그것은 그 곳이다 특정 CTA는 (클릭 유도 문안)이며, 이미 내부에 있고 글로벌 컨테이너로 사용됩니다 그래서 항상 사용할 수 있습니다 모든 페이지에서 사용하기 그리고 여기에서 편집 할 때마다 모든 부분을 편집 할 것입니다 이는 글로벌 컨테이너를 갖는 이점 중 하나입니다

당신이 그것을 사용할 수 있고 당신이 편집을한다는 것입니다 그것은 편집하고, 전체적으로 업데이트됩니다 우리는 다른 지점을 고를거야 그래서 우리는 우리 자신의 글로벌 나는 우리 조각 인 조각을 보았다 값

그래서 저는 우리의 가치를 찾으러 갈 것입니다 여기는 토글에 있습니다 내가 할 일은 이것을 클릭 할 것입니다 작은 열을 저장하거나 작은 하드 드라이브 이미지처럼 보입니다 나는 그 이름을 지어 줄거야

그것은 우리의 가치라고 불릴 것입니다 나는 그것을 글로벌로 저장하려고합니다 지금, 이것을 정기적으로 저장하면 저장 열을 클릭하기 만하면됩니다 내가 할 일은 항상 내게 그것에 접근을 제공하는 것이다 하지만 전역 요소처럼 작동하지는 않습니다

글로벌 요소는 내가 원하는대로 변경되므로 변경 사항을 적용하면 전체적으로 업데이트됩니다 그래서 전역 요소 저장을 클릭하고 열 저장을 클릭하십시오 이제 Avada에서이 페이지를 업데이트하지는 않았지만이 페이지는 업데이트되므로 페이지를 업데이트 할 필요가 없습니다 만약 내가 이것을 단지 예제로 사용했다면, 다른 분야의 다른 요소를 잡아 내고 싶다 나는 그것을 할 수있다, Save를 클릭하고, 계속 나아 간다

그래서 저는이 "우리의 가치관"에 토글을 추가 할 페이지를 고를 것입니다 그리고 저는 갈 생각입니다 입학 전형에 나가 봅시다 좋아요 입학시, 먼저 토글이 없는지 확인해 볼게요

괜찮아요, 토글이 없습니다 그래서 저는 Four Success 직후 토글을 추가 할 것입니다 나는 다시 여기로 가서 편집을 위해이 페이지를 열어, 나는 내가 필요로하지 않는 다른 하나의 클로즈드에 가까워 나는 연락 양식 바로 전에 바닥으로 내려갈 것입니다 이 둘 사이에 컨테이너를 추가 할 예정입니다

Column을 추가하고 Library 열을 선택하겠습니다 여기에서 나는 우리의 가치를 클릭 할 것이고, 그것은 내가 원하는 실제 것으로 거기에 삽입 할 것입니다 이걸 여기서 지우고, 오른쪽에 붙여 놓으십시오 이제 업데이트를 클릭하겠습니다 그리고 나서, 내 페이지가 게시되고 살기 때문에 새로 고침 할거야

여기에 우리의 가치와 사명이 있습니다 그래서이 페이지에서 우리의 가치 섹션으로 다시 스크롤 할 것입니다 이 지역을 여기서 편집 할거야 그리고 저는 그것을 당신의 가치로 만들 것입니다 그래서 우리는 그 차이점과 그것이 어떻게 작동 하는지를 볼 수 있습니다

또한 홈 페이지에서도 어떻게 작동할까요? 저장하고 새로 고침하세요 그것은 당신의 가치를 말한다 이제 홈 페이지로 이동하여 볼 수있는 하단까지 스크롤하면 잠깐, 그것이 우리의 가치관입니다 오, 알았어, 왜 그런지는 모르겠다 왜냐하면 이것이 글로벌 요소가 아니기 때문에 나는 지난번에 저장하지 않았다

이것은 문제가되지 않는다 나는 그 문제를 해결할 것입니다 여기 있습니다, 저는 열을 추가 할 것입니다, 하나의 열, oops가 엉망이되었습니다 열로 이동하고 라이브러리 열을 클릭하고 값을 선택하면 여기를 클릭하여 끌어 올 것입니다 그래서 지금 이것은 이전 것을 대체합니다, 나는 그 오래된 것을 지우고 있습니다, 업데이트를 치십시오

이제 저는 앞으로 나아가서 여기에서 편집을합니다 그래서 우리는 그것이 다시 작동하는 것을 볼 수 있습니다, tomoorow의 값을 입력하고 업데이트를 클릭하십시오 그리고 지금은 페이지, 나는 여기서 새로 고침을 할 것이고 그래서 당신은 내일 잘못된 철자가있는 페이지를 볼 수 있습니다 그리고 나서 입학을 위해 입학을 클릭하고 아래쪽으로 스크롤하여 내일의 가치를 가져야합니다 멋지다

나는 실수를했다 잘못 입력했다 잘못 입력 했으므로 여기에서 고칠 것이다 나는 그것을 올바르게 철자하겠습니다 그리고 그것을 통해 그것을 새롭게 할 것입니다

계속 진행하고 바로 잡으십시오 그러면 그것이 내가 가지고있는 모든 장소에서 업데이트됩니다 정말 멋집니다 여기에 내가 홈 페이지에 있었음을 발견하면 홈 페이지에서 편집을했습니다 Admissions 페이지에 있습니다

왜냐하면 그것은 글로벌 컨테이너이기 때문입니다 실제로 업데이트 만합니다 당신은 몇 가지를 위해 전역 컨테이너를 사용할 수 있습니다 전체 섹션에 사용할 수 있으므로 전체 페이지를 수행하려는 경우 컨테이너 및 열의 컨테이너를 선택할 수 있으며 템플릿을 만들 수도 있습니다 다시 한 번 최상위 수준에서도이를 수행 할 수 있습니다 그러면 전체 페이지가 선량으로 가득 차게됩니다

그리고 당신은 그것을 매우 간단하게 사용하여 즐길 수 있습니다 그것은 avada의 테마와 전역 컨테이너 기능을 사용하여 비 스크립트 화 된 것입니다 우리가 인터넷에서 제공하는 자막 제공 2019

Divi 3 – Hide elements on different screen sizes in the Divi WordPress theme menu

안녕 얘들 아, 다른 Divi 테마 자습서에 오신 것을 환영합니다 이것은 시스템에서 Jamie입니다 22 및 웹 디자인 및 기술 팁 침착하거나 누군가 내게 질문을 보냈습니다 제임스 그냥 물음표를 사용하는 질문 내용 텍스트를 표시하는 방법 데스크톱 혼자서 테스트 할 때 잘 Divi는 일을 쉽게 보이게하고 사라지게 만듭니다

여기 데모 웹 사이트를 조금 열어 보겠습니다 여기에 몇 가지 광고가 있습니다 비주얼 빌더를 사용하도록 설정합시다 제임스의 문제는 해결되지 않을 것입니다 그러나 저는 이것을 여러분에게 보여줄 것입니다

여러 가지 크기의 기기에서 물건을 사라지게하고 다시 나타나게하는 방법 데스크톱과 휴대 전화가 우리가있는 곳으로 돌아갈 때 흐려짐 이 모듈에 들어가서 우리가 여기 아래쪽으로 나아 간다면 당신은 그것을 볼 수있는 가시성을 볼 수 있습니다 휴대 전화 태블릿에서 어떤 모듈을 선택했는지 사라지게하십시오 바탕 화면을 선택하고 예를 선택하면 변경 사항이 저장됩니다 비주얼 빌더를 종료하십시오 그리고 지금 당신은 그 모듈을 보았습니다

왜냐하면 우리는 녹색 이었기 때문에 사라졌습니다 바탕 화면 버전에 있었는데 더 이상 볼 수 없으므로 화면을 축소하면 아래로 Google 크롬을 사용하고 있으므로 f12를 치고 개발자 도구를 구할 것입니다 여기있는 경위가이 작은 반응 형 탭을 여기에 부딪쳤다 이제 크기를 조정할 수 있습니다 이제 막 이동하지 않도록 조금만 볼 수 있습니다

더 나은 순간에는 더 좋지 않지만 작은 화면으로 크기를 조정하면 아마 1200보다 아래에서 다시 나타나지 않을 것입니다 우리가 위처럼 보이는다면 여기에 다시 나타납니다 79-78 이것은 꽤 전형적인 breakpoint bootstrap break points이다 WordPress하지만 bootstrap break points 99는 큰 것이므로 아마도 주위에 있습니다 거기 그것을 시도하자

하지만 991 좋아, 9 행 2로 변경하고 흥미가 없다 아홉 개가 아니기 때문에 존 브레이크 포인트라고 불린다 당신 그곳에 광산 980 이미 R이긴하지만 어쨌든 그렇게하지 않으면 그 일을 할 수 있습니다 제임스의 문제를 풀어주고 싶지만 그가 사라지 길 원한다 단지 이것을 원한다

비트가 바탕 화면에서 사라져서이 팩스를받지 못했다면 바탕 화면 크기가 없으므로 바탕 화면 크기를 조정할 수 있습니다 다시 그 작은 상자의 선택을 취소하십시오 당신 여기에 우리는 고급 광고 가시성에서 끝났습니다 그 작은 상자를 선택 취소하면됩니다 변경 사항 저장 후 되돌리기 그 반응 탭을 제거하면 우리의 작은 것들을 볼 수 있습니다

우리는 정말로하고 싶어하거나 제임스가하고 싶어하는 것은이 텍스트 비트를 제거하는 것입니다 여기 내가 그를 올바르게 이해하지만 그는 단지 데스크톱 버전에서만하고 싶어한다 그래서 우리는 여기서 미디어 쿼리를 사용해야합니다 그래서 제가 할 일은 제가 갈 것입니다 우리는 시각적으로 이것을 할 수 있지만 앞으로 나아가서 페이지로 들어갈 것입니다

여기에있는 편집장이 내 크롬 검사관을 없애 버리자 우리의 선전과 우리는 그것을 수업에 줄 것이다 그래서 우리는 Advanced 탭으로 갈 것입니다 이미 클래스가 있습니다 나는 제거하려고합니다

그 클래스의 레드 호버 국경에 대한 페이지를 볼 수 있기 때문에 우리가 거기에서 보여주고 있었던 그 불쾌한 빨간 테두리 때문에 나는 우리는 새로운 클래스를 제공하거나 데스크톱 드래 거에 데스크톱 마우스를 올립니다 너는 네가 원하는대로 기억할 수있어 불행히도 우리가 미디어 쿼리를 할 사촌 여기에 사용자 정의 CSS를 넣으십시오 내가 틀리면 여기에 미디어 쿼리를 넣을 수 없거나 방법을 찾지 못했다 아직 그렇게하지 않으려 고합니다 페이지를 업데이트하십시오

업데이트가 끝나면 우리의 견해를 재검토하고 우리가 알아 내고 싶습니다 저것은 어쩌면 저 선전용 내의 단 하나 원본 아마이다 그래서 나는이다 새로 고치려고하면 다시 검사원을 데려 올께 잘 클릭하십시오 나는 우리가 원하는 텍스트를 오른쪽 클릭하고 검사 할 것입니다 여기에 효과 그것을 보아라 그것은 단락 단락 텍스트이고 거기서 보자

바로 거기에 우리의 Dth 클래스가 있습니다 그래서 우리는 Dth와 P에 영향을 주어야합니다 우리가해야 할 일은 대시 보드로가는 것입니다 Divi를 강타합니다 이미 여기 있습니다

하지만 여기에 나와 있지 않으면 Divi를 확인하십시오 일반 탭에서 아래로 스크롤하면 사용자 정의를 찾을 수 있습니다 CSS 상자 바로 여기 작은 공간을 만들어 제목에 슬래시를 씁니다 스타 스타 슬래시는 나중에 데스크탑에서 쉽게 찾을 수있게 해줍니다 이제 우리는 P를 디스플레이 클래스로 제공 할 수 있다고 생각할 수 있습니다

그냥 해보지 만 효과가 없을거야 그래서 우리의 미디어 질의에서 처음에는 아마 1200 이하로 그것을하고 싶습니다 당신은 당신이 원하는 것을 무엇이든 넣을 수 있습니다 하지만 1200은 나를 위해 작동하므로 미디어 화면에 넣을 것입니다 그리고 나서 그냥 몇개의 일반 괄호를 열면 나는 나처럼 1200에 최소 너비로 넣을거야

네가 원하는대로 넣을 수 있다고 해 내가 980 전에 그것을 깨고 있다고 생각해 다른 하나는 당신이 여기에 놓은 다음 열어서 그 후에 중괄호를 닫으십시오 우리가 여기있는 누군가를 위해 우리가 말하고있는 미디어 쿼리를 수행하지 않은 것은 조회 가능한 영역의 너비가 최소 너비를 초과하는 화면 너비는 1200을 초과합니다 이 중괄호 사이에 넣은 픽셀은 모두 적용됩니다

지금 우리 수업은 dt 8 데스크톱 호버 Utley였습니다 그래서 그것은 클래스 점입니다 바탕 화면을 가리키면 여기에 더 많은 중괄호가 열립니다 내부에 있지만 우리가 영향을주고 싶은 클래스를하고 싶지는 않습니다 단락 텍스트이므로 단락을위한 D 번째 P입니다

나는 그것을 전시하지 않을 것입니다 1200 pix 이상에서 그들은 WIC에 있습니다 나는 거의 모든 데스크탑 화면입니다 원하는 것을 넣을 수는 있지만 대부분의 데스크톱 화면은 더 커질 것이라고 말합니다 그것보다 당신이 D th P 호버를 넣을 수있을 것이라고 생각할 것입니다

당신이 그것에 맴 돕니 다 왜냐하면 그가하고 싶은 것은 그것 위에 마우스를 올려 놓기 때문입니다 그리고 display : block하지만 블록이 표시되지 않습니다 저장이 페이지를 새로 고침으로 돌아 가자 당신 화면 크기를 줄이면 다시 사라집니다

그만큼 많이 떠난다 우리는 1200보다 아래로 갈 때 우리가 갈 때 거기에있는 것을 볼 수 있습니다 그 미디어 쿼리는 제가 거기에 넣었을 때 우리가 곧 우리가 11 54를 얻었습니다 1200 년에 다시 사라져야합니다 사라 졌어요

생각한다 데스크톱 호버업 P를 설치하고 호버 sudo를 지정하면 그 위에 마우스를 가져 가면 디스플레이로 돌아가서 만들 수 있습니다 기본적으로 꽤 정상적으로 디스플레이로 totes 및 당신은 당신이 줄 알았 겠지 이 일을 할 수는 있지만 이것은 효과가 없을 것입니다 그래서 내가 다시 새로 고침하면 우리는 내려갈 것이고 사라져야한다 오, 미안해 이제 우리가 다가 가면 사라져

네가 잘 생각해 그 위에 마우스를 올려 놓고 다시 가져 오지 만, 그럴 수는 없습니다 마우스를 올리면 표시 할 수 없기 때문에 표시되지 않기 때문입니다 그게 그렇게 작동하지 않을거야 우리가 할 일이 뭔가를 찾아 보자 그냥 투명하게 만들자

불투명도와 더 큰 값으로 표시하지 않으려면 불투명도 0 그것은 기본적으로 보이지 않습니다 이걸로 복사하면됩니다 다음 중 하나의 불투명도 완전히 눈에 띄고 당신은 1 점 2 점 3 점 4 점 5 점 6 점 7 점을 할 수 있습니다 불투명도를 매우 높이기 위해 8 개의 9 가지 정수를 저장하고 일단 사이트가 저장되면 우리 사이트는 녹색 체크 표시가 있고 이것을 새로 고칩니다 나는 우리가 그것을 12보다 크게 만들면 더 작은 리프레쉬를 해체 할 것이다

다시 사라지 겠지만, 이번에는 우리가 마우스를 가져 가면 위에 올려 놓으십시오 마우스를 올려 놓으면 나타납니다 클릭하여 마우스를 올리면 알 수 있습니다 전 화면에 마우스를 올려 놓으면 반응이 좋으니까요 우리가 거기에 나타나야 만한다

이제는 조금 더 천천히 전환하고 싶다면 전환을 추가 할 수 있습니다 대신에 075 초를 알고 있다고 말하십시오 우리가 쉽게 편하게 할 수있는 것처럼 뛰어 들며 우리는 편하게 쉬고 밖으로 나가서 내뱉기 만하면됩니다 사이트 새로 고침으로 돌아 가기 우리가 그 위에 마우스를 가져갈 때 좀 더 천천히해야합니다

거기에 쉽게 뛰어 들지 않고 편안함을 느낄 수 있습니다 변경 거기에 귀하의 질문에 대답을 바란다 텍스트 선전 텍스트가 나처럼 마우스를 가져 가면 바탕 화면에만 나타납니다 그 검사관을 다시 불러들이라고해라 이제 미디어 쿼리 인 1200보다 낮추면 그 수가 줄어 듭니다

우리가 간다 약 1200 년 전으로 돌아왔다 아직 그 위에 마우스를 갖다 대서 다시 가져올 수 있습니다 귀하의 의사 표시 텍스트가 사라지고 다양한 미디어 크기에 다시 나타납니다 비디오를 좋아하고 공유하고 싶다면 우리에게 유용했습니다

YouTube 채널 웹 개발에 관심이 있으시면 Google의 아래의 웹 개발 코스는 YouTube에 큰 할인 혜택을드립니다 구독자에게는 멋진 무료 코스가 있습니다 다시 한번 이것이 시스템 22의 Ben Jaime과 기술 팁 com의 웹 디자인입니다 보고있는 주셔서 감사합니다 좋은 하루 되세요

How to Translate Avada Theme Fusion Builder Global Elements Using WPML

이 비디오에서는 Avada Fusion Builder 전역 요소를 번역하는 방법, 열 및 컨테이너 Avada 전역 요소를 번역하려면 WPML 4

07 또는 최신 버전이 설치되어 있어야합니다 String Translation and Translation Management 애드온의 최신 버전과 함께 제공됩니다 물론 Avada의 Fusion Builder와 Fusion 코어 플러그인을 활성화해야합니다 그런 다음 WPML – 설정으로 이동하여 클래식 또는 고급 번역 편집기를 활성화합니다

우리는 이미 고급 번역 편집기가 활성화 된 것을 볼 수 있습니다 이제 전역을 포함하는 Fusion 빌더를 사용하여 간단한 페이지를 작성해 보겠습니다 요소 Use Fusion Builder를 클릭하십시오 Button 요소를 추가하십시오

저장 버튼을 누릅니다 다른 요소를 추가하고 전역으로 설정하십시오 예를 들어 텍스트 블록 콘텐츠를 추가하고 저장하십시오 요소 저장 아이콘을 클릭하여 요소를 전역으로 설정하십시오

전역 요소 이름을 입력하십시오 Save As Global 옵션을 선택한 다음 Save Element를 선택하십시오 그리고 페이지를 게시하십시오 페이지를 번역하려면 언어 상자에서 + 아이콘을 클릭하십시오 그러면 고급 번역 편집기 화면이 표시됩니다

여기에서는 전역이 아닌 모든 요소를 ​​번역 할 수 있습니다 우리는 다른 화면의 글로벌 요소를 잠시 후에 번역 할 것입니다! 이제 자동 번역 버튼을 클릭하여 기계 번역을 추가하십시오 자동 번역을 검토하고 정확한지 확인하십시오 완료되면 마침 버튼을 클릭 한 다음 완료를 클릭하십시오 전역 요소를 번역하려면 Fusion Builder – Library로 이동하십시오

전역 요소 편집 화면으로 이동하십시오 + 아이콘을 클릭하고 페이지를 번역 한 것과 동일한 단계를 따르십시오 번역 된 페이지가 프런트 엔드에서 어떻게 보이는지 보도록하겠습니다 글로벌 요소와 전체가 아닌 요소의 내용은 프런트 엔드에서 번역됩니다 똑같은 단계를 수행하여 전역 열과 컨테이너를 번역 할 수 있습니다

이미 번역 된 전역 요소를 페이지에 추가 한 경우 반복 할 필요가 없습니다 WPML은 번역 프로세스를 자동으로 번역 된 버전을 표시합니다 모든 번역 된 페이지의 요소 다음과 같이 전역 항목의 내용을 일부 변경하기로 결정했다고 가정 해 보겠습니다 텍스트를 더 추가하는 것과 같은 기본 언어 번역을 확실히 업데이트해야합니다

Fusion 빌더를 사용하면 모든 페이지에서 전역 요소를 업데이트 할 수 있으며 자동으로 웹 사이트에서 전역 요소의 모든 인스턴스를 업데이트합니다 예를 들어, 우리가 추가 한 전역 요소에 텍스트를 추가하자 페이지 변경 사항을 저장하려면 업데이트 버튼을 누르십시오 Fusion Builder – Library로 이동하여 전역 요소 편집 화면으로 이동하십시오

회전 화살표 아이콘은 번역을 업데이트해야 함을 나타냅니다 이를 클릭하여 고급 번역 편집기 화면을 엽니 다 WPML은 우리가 이미 번역 한 텍스트를 보존합니다 추가 한 텍스트에 기계 번역을 추가하고 저장하십시오 프론트 엔드에서 한 번 더 살펴 보겠습니다

번역이 업데이트됩니다 Avada 테마 및 WPML을 사용하여 다국어 웹 사이트를 작성하는 방법에 대한 전체 안내서는 이 비디오의 설명에서 보고 주셔서 감사합니다!

Divi WordPress Theme How To Align Elements On A Page

안녕하세요 여러분과 다른 Divi 워드 프레스 비디오에 오신 것을 환영합니다 이것은 제이미에서입니다 https://wwwsystem22

net 및 http://web-design-and-tech-tipscom/ 질문에 대한 답을 얻었습니다 동영상 및 신사 분의 이름입니다 Gilson 은색 나는 당신의 이름이 바로 거기 단추 또는 페이지 중간의 섹션에서 클릭 유도 문안 (call-to-action)을 사용하면 링크를 클릭하면 모바일에 잘릴 수있는 권리에 맞춰야 할 때가 표시됩니다 무언가가 제대로 작동하지 않는다는 소리가 들립니다

빠른 섹션 여기에 분명히있어 Divi 테마입니다 Divi는 굉장합니다 당신은 내가 당신이 그것을 확인하고 그것을 확인 제안 WordPress의 사이트를 만들고있어 Divi 테마는 분명히 나왔습니다 내 비주얼 빌더가 참여 했으니 빠른 섹션을 추가하고 이 문제를 해결하거나이 질문에 답하십시오 새 행을 추가하여 새 섹션을 추가하십시오 그리고 난 그냥 정규 행을 추가하고 그 행 안에는 액션에 대한 느낌이 들었습니다 기본적으로 라인 센터입니다

링크로 내려 가서 해시 태그를 입력하면 버튼이 나타납니다 그것은 맞다 그리고 그것은 실제로 선 센터 다 기본값으로 설정하고 오른쪽에 왼쪽으로 다시 정렬하면 디자인으로 이동합니다 버튼을 누르면 오른쪽 중앙의 왼쪽에 잘 놓을 수 있습니다

버튼 밑의 디자인 탭 아래 작은 화살표 그래서 내가 옳은 선이 될 때 문제가 무엇인지 밝히지 않는다 모바일에서 잘 렸으니 여기서 Google 크롬을 사용한다고 가정 해 봅시다 f12를 치면 감찰관이 나오고 나는 그것을 모바일로 전환 할 것입니다 보기 괜찮아요 내게는 꽤 정상적으로 보입니다

버튼이 어리석은 것 같습니다 텍스트 센터에서 왼쪽이지만 문제는 중요하지 않습니다 내가 말한 것처럼, 왜 그런지 잘 모르는 것처럼 보입니다 그 문제는 그것을 잊지 말자 Divi를 사용하면 예를 들어 다른 일을 할 수있는 옵션을 제공합니다

여기서 두 개의 작은 상자로 복제하여 다른 것들을 표시 할 수 있습니다 태블릿 및 휴대 전화와 같은 크기가 다른 다양한보기 장치에서 한 번만 더 복제하기 두 번째 버튼을 놓아 보겠습니다 중간에 그래서 당신은 중간에있는 버튼을 볼 수 있습니다 왼쪽에 버튼을 놓는다 그리고 우리가 물론이 3 가지를 여기에서 얻었 으면 좋겠다고 말할 것입니다

태블릿에이 하나 또는 데스크톱을 표시하려고합니다 휴대 전화에이 코드를 넣으면 모듈 자체에 들어가기 만하면됩니다 우리는 여기에 표시하고 싶습니다 가시성을 아래로 고급 무능한 말을 할 것입니다 당신은 그것을 표시하고 싶지 않은 것들의 박스를 체크하고 싶다 그래서 우리는 전화와 태블릿을 말하면서 데스크톱에만 표시 할 것입니다 이것에 대해서도 마찬가지입니다

태블릿에 표시 만하면 알 수 있습니다 현재 데스크톱 모드에 있기 때문에 회색으로 표시됩니다 우리의 휴대 전화에 똑같은 것을 보여 주었다 원하지 않으므로 전화를 걸지 않고 다시 회색으로 표시됩니다 바탕 화면에 모두 표시 이제 내 작은 아이콘을 클릭하면 어떻게 될지 알 수 있습니다

거기에 토글을하면 왼쪽에있는 것을 표시해야합니다 우리는 가서 조금씩 구르지 만, 당신은 거기에있는 것을 볼 수 있습니다 실제로 남겨 두었습니다 왜냐하면 여전히 그것들을 보여주고 있기 때문입니다 버전을 숨기고 변경 사항을 저장해 둡니다

내 체크 박스가 나왔을 때 그 경위를 없애 버릴거야 비주얼 빌더 괜찮아 우린 바탕 화면에있어 그건 내 검사관을 다시 데려 올 수있는 권리와 내 반응 토글 괜찮아 거기에 아이폰이있어

왼쪽으로 한 iPad가 중간에있는 것을 보여줌으로써 더 크게 만들 수 있습니다 실제로 그것을 볼 수 있습니다 그리고 물론 물론 응답하지 않게하고 우리가 그것들을 끌어 올리면 바가 위로 올라가는 것을 볼 수 있습니다 특정 크기가되면 데스크톱 버전이므로 문제가있는 경우 하나의 뷰포트에 표시되는 것들은이 옵션을 사용하여 세 가지 버전으로 완전히 다른 모습으로 표시 버전 나는 당신이 물론 당신이 다른 방식으로 요구하고있는 것이기를 바란다 섹션에서 버튼 또는 클릭 유도 문안을 정렬하는 방법 페이지의 중간에 뭔가 있으면 내 비주얼 빌더를 활성화하자

다시 좋아,이 부분들을 없애고 나는이 전체를 없애 버리자 다른 행을 추가하고이 행 안에 그냥 우리가 우리와 함께해온 것처럼 우리가 여기에 세웠던 버튼들, 그리고 나는 단지 몇 가지 작은 것을 가질 것입니다 그 안에있는 단어들 이제 우리는 무슨 일이 일어나고 있는지 알 수 있도록 배경색을 부여합시다 중간에 텍스트를 놓을 테니 텍스트를 흰색으로 만들 것입니다 조금 더 두드러 져서 텍스트를 중간에 놓을거야

내가 뭘하고 싶은지 나는 너에게 이것을 고정 길이로 줄 것이다 몇 백 개의 픽셀이 담긴 여기에 버튼이있어서 커스텀 CSS를 얻을 수 있습니다 요소 250 픽셀 이제 괜찮아 보입니다 당신은 그것을 더 잘 볼 수 있습니다 우리가 가서 꽤 잘 볼 수있게하자

실제 블록 자체는 실제 행 자체이지만 우리는 배경색 때문에 조금 더 잘 볼 수 있습니다 중요하지 않습니다 이 단계에서 우리는 요소가있는 행을 얻을 수있게되었으므로 단 하나의 요소 만 있습니다 이것은 하나의 전체 행이며, 현재 기본적으로 왼쪽에 정렬되어 있습니다 중간에 있기를 원한다면 우리에게 들어 가자

작은 요소는 여기에 우리는 약간의 CSS를 사용하고 우리는 그것의 여백 코브에게 자동으로 줄 것이다 그 부분의 중앙으로 밀어 넣을거야 당신이 묻고 있던 것이 었는지 나는 잘 모르겠다 거기에 마지막에 세미콜론을 넣으십시오 내가 이걸 움직이면 오른쪽으로 말하면된다

이미지 나 무언가 같은 것이 있으면 다른 옵션입니다 그건 당신이 원하는 방식으로하는 부분보다 작아 내가 기본적으로 말하듯이 왼쪽에 고정 시켜서 여백 : 자동 철자가 맞다 qto가 중간에 넣을 것이고 기본적으로 무엇을 할 것인가? 당신은 자동적으로 왼쪽과 오른쪽에 같은 여백을 두도록 말하고 있습니다 거기에 중간에 어떤 요소를 짜낼 것입니다

그 질문에 대한 답변입니다 Divi WordPress 테마를 사용하여 요소를 정렬하는 몇 가지 방법입니다 당신은 그것을 가지고 있다면 유용하다고 생각했습니다 엄지 손가락을 쥐고 공유하십시오 웹 개발에 관심이 있다면 YouTube 채널을 구독하십시오

아래를 내려다 보아라 우리는 그 아래에서 위대한 무료 코스를 발견했다 YouTube 가입자에게 큰 할인 혜택을주는 프리미엄 코스 다시 한 번보세요 시스템 22와 웹 디자이너의 제이미였습니다 좋은 하루 보내세요

Bootstrap 4 Animating Elements

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

기술 팁의 웹 디자인이 곳은 우리가 우리가 작은 슬라이드를 시작한 마지막 비디오는 작은 버튼과 타이틀이 있습니다 지금까지 우리는 페이지를 새로 고침하면 약간의 커스텀 CSS로 애니메이션을 만들었습니다 우리는이 로고가 튀어 오르는 것과 같은 것을 계속했습니다 그 테마는 여기에 우리의 슬라이더 캡션을 움직이게합니다 우리는이 시간에 우리가 미리 쓰여진 대본을 사용하거나 사전 작성된 코드는 우리에게 정말 쉽고, 몇 가지 훌륭한 결과를 얻으려고 animate라는 사이트에 간다

dot CSS 여기에 동영상 링크 아래에 이것은 미리 작성된 CSS의 전체로드입니다 당신의 위치 및 나는 당신에게 그 순간에 그것을하는 방법을 보여줄 것이다 그러나 그들은 매우 많은 것을 가지고있다 당신이 원한다면 당신이 거기에 넣을 수있는 다른 효과는 단지 하나를 선택하십시오 그 애니메이션이 어떻게 움직일지를 확인하십시오

그럴거야 너는 그것을 바로한다 여기에 멋진 효과가 있습니다 실제로 귀하의 사이트에서 이것을 사용하기 위해 당신이 이것을 원한다면 당신이 그것을 다운로드 할 수 있도록 당신을 위해 그렇게 쉽게 만들었습니다 애니메이션 버튼을 다운로드하고 당신이 그것을 칠 때 일어나는 일은 단지 당신에게 줄 것입니다

이 CSS 코드를 사용하면이 작업을 수행 할 수 있습니다 그것은 모든 컨트롤을 선택 트롤 C를 복사 우리는 여기에 우리의 대괄호 텍스트 편집기를 엽니 다 이 대괄호는 자유 텍스트 편집기이며 링크에서 다운로드 할 수도 있습니다 이 비디오 아래에 새 파일을 만들고 복사 한 파일을 붙여 넣으십시오 control-v를 거기에 넣으면 볼 수 있듯이 그것은 단지 흰색 텍스트입니다

괄호 안에 실제로 그것이 무엇인지를 말하지 않고 그대로 저장하십시오 뭐라 부르든지간에 CSS를 뒤에 붙이면 알 수 있습니다 캐스 캐이 딩 스타일 시트이며 안전함을 볼 수 있습니다 CSS를 지금 우리가 읽을 수 있도록 적절한 CSS로 채웠습니다 물론 사용하고자한다면 이 방법을 사용하면 부트 스트랩 인덱스 PHP로 돌아가서 링크를 추가해야 할 것입니다

그 스타일 시트에 나는 이런 식으로 사용하지 않을거야 너에게 이것들을 보여줄거야 그것을 사용하는 더 쉬운 방법은 링크 상대 스타일 시트와 링크를 폴더 또는 방금 저장 한 스타일 시트가 바로 거기에 있습니다 나는 그렇게하지 않을거야 너에게 쉬운 길을 보여줄거야

우리가 animate CSS 사이트로 돌아 가면 이 다른 단추 여기 github보기 그들은 페이지를 게시하고 우리가 아래로 스크롤하면 여기에 주변을 둘러보기위한 온갖 종류의 교육을 제공하지만 보여 드리겠습니다 당신은 간단하게 이것을 지금 아주 쉽게 대신하는 방법을 간략히 설명합니다 우리가했던 스타일 시트를 저장하고 그 스타일 시트를 가져올 수 있습니다 콘텐츠 전송 네트워크 인 CDN은에서 콘텐츠를 가져 오는 것을 의미합니다 웹상의 사이트이므로 모든 작업을 수행 할 필요가 없으며 그렇게해야합니다

이걸로 CloudFlare를 사용할거야 원한다면 그걸 사용할 수있을거야 링크 열기 태그에서 사본을 얻었으므로 CSS 바로 뒤에있는 닫는 태그 여기 ctrl C 우리의 색인에 다시 HTML 여기에 우리는 당신과 그 사람을 위해 이전 동영상과 함께 따라 다니지 않은 Google의 폴더는 우리는 이미지가있는 작은 폴더에 모든 사이트 파일을 저장했습니다 여기에 우리가 만든 바로 indexhtml이 있습니다

대괄호 그리고 이것은 당신이 얻는 것이다 그래서 나는 여기에서 한 쌍을 내려 놓을 것이다 부트 스트랩 코어 CSS와 github 사이트에서 복사 한 내용을 붙여 넣습니다 저기서 난 그냥 정리할거야 제목을 주자 나는 그냥 이 시간 복사 정말 했어 당신 우리가 가서 움직이자

괜찮아 우리가 거기에 넣을거야 그건 우리가 CSS 스타일을 끌어들이는 것을 의미합니다 그래서 우리는 어떻게 그것들을 만들 수 있습니까? 작업 그들의 사이트를 다시 보자 당신 우리가 여기서 내려다 본다면 그 요소에 애니메이션으로 등장하는 수업에서 움직이기를 원한다

계속 애니 메이팅을하면 무한대로 추가됩니다 그런 다음 스타일을 선택하십시오 하고 싶다 여기에 예제가 포함되어있어 텍스트 위에 올려 놓을 수 있습니다 클래스에 div를 넣을 수 있습니다 원하는 클래스에 넣을 수 있습니다

다시 페이지를 벗어난 경우 다시 작은 버튼이 있습니다 거기서이 버튼이나 링크를 누르면됩니다 그러면 다시 말해야합니다 원하는 페이지를 선택할 수있는 페이지 너와 나는 잘 보였으니까 그들은 멋진 애니메이션 애니메이션을 진행하고 있으므로 다시 돌아가 보겠습니다

실제로 이들 중 일부를 저희 사이트에 추가하겠습니다 지금 여기에 여기에 우리 사이트가 있습니다 그리고 이것은 제가 오늘 일하고 싶은 것입니다 여기에 색인이 붙은 HTML 페이지가 있습니다 여기에있는 회전식 자막이었습니다

여기와 우리가 3 개의 슬라이드를 가지고 있기 때문에 여기 한 장의 확대 / 축소를 사용하여 원하는 한 장을 사용하자 당신 그래서 우리는 왼쪽으로 어렴풋이 확대 오른쪽에있는 줌있어 나는 이들 중 몇 가지를 사용합니다 예를 들어 매우 쉽지만 눈은 대문자로 된 DS를 대문자로 나타냅니다 L은 당신이고 당신은 그것을 넣어야합니다 바르게 그래서 나는 애니메이션 수업을했다 또는 애니메이션을 사용하고 자본을 확대하는 루프를 사용하자

나는 말할 수없고 볼 수 없다 그것이 완료되면 우리가 원했던 것은 이것이 우리의 첫 경미한 자막을 원하면 여기에 자막을 넣을 수 있습니다 단락 전체를 사용하거나 여기에서 차단하십시오 우리가 구했던 버튼은 우리에게 돌아 가자 사이트가 새로 고침되어 이제 애니메이션이 조금씩 확대됩니다

당신 그래,이 요소에 적용하자 우리는 다른 슬라이드를해야합니다 다른 슬라이드도 같이 보겠습니다 난 그냥 그대로 복사하고 붙여 넣을거야 나는 다르게 할거야

이 애니메이션을 오른쪽으로 확대하고 왼쪽으로 확대 할 것입니다 나는 이것들을 가지고 실험 해보면 당신 자신의 것이되고 당신은 ctrl에 저장하는 정말 멋진 효과가 사이트로 돌아가고 새롭게 하다 여기 첫 번째 슬라이드가 있습니다 두 번째 슬라이드가 왼쪽으로 움직여야합니다 생각합니다 우리가 가고있는 바로 그 때 그리고 제 3의 오른쪽 당신 저기서 조금 밖에 없지만 네가 원하는대로 할 수있어

그래서 여기에 뭔가를 적용 해보자 나는 이것을 몇 번 복사 할 것이라고 말하면 약간의 마진을 준다 클래스의 위쪽과 아래쪽의 새로운 부트 스트랩은 마진 위쪽에 MT를 쓸 수 있습니다 그것은 하나에서 다섯 가지로, 가장 많고 하나는 가장 작고 바닥면 충분하지 않다면 일반 CSS를 추가해야합니다 몇 번 우리가 여기에 올 것입니다 사이트에 다시 말할 컨트롤 우리가 간다

우리는 지금 여기서 일할 무언가를 얻는다 페이지 좋아, 다른 하나를이 페이지에 추가하겠습니다 그래, 왼쪽으로 돌릴거야 그래, 나는 그 사이트를 다시 사용하겠습니다 다시 복사하겠습니다

그 계급 내말은 우리가이 권리를 얻는 지 확인하고 싶지 않으면 작동하지 않을 것입니다 다시 말해서, 당신이 h1이나 P 또는 네가 잘하고 싶어하는 것은 무엇이든 해보자 이 시간대는 열거 나 쉼표로 닫힌 것과 같습니다 거기에 우리 작은 코드에 붙여 넣어서 움직일 수가 없어 그래서 오른쪽으로 회전하는 것은 왼쪽 아래의 자본 D 자본 L에서 회전하지 않았습니다

athol 나는 왼쪽으로 기울어 진 회전하고 나는 거기에 가고 싶지 않다 케이트와 우리는 그걸 복사하고 우리는 단락 텍스트에서 할 것입니다 혹시 거기에 이미 클래스가 있으므로 그냥 복사 한 후 붙여 넣으십시오 이미 여러 클래스를 갖는 것은 괜찮습니다 이건 맞아

지금 자본은 거기에있다 나는 그것을 말하는 것은 확실하다 그리고 우리가 무엇을 얻었는지에 관해 안다 그들은 당신이 볼 수 있습니다 그렇게해서 분명히 수업을 복사 할 수 있습니다 당신이 당신의 두개골에 원한다면 내려주세요

하지만이 모든 다른 딜러는 제가 생각하기에 확실하게 거기에 도착했다 이거 넣어 줘 이 모든 다른 팁들을 여기 거기서 새로 고침해라 유코 예 내가 그걸 가지고 노는 것과 같은 장소의 애니메이션은 무언가를 얻는다

그것은 당신에게 맞는 스타일이지만, 같은 스타일을 유지하고 싶을 수도 있습니다 전적으로 당신 만의 시간과 물건을 바꿀 수 있습니다 그냥 거기를 읽어라 그 github 페이지에 대한 설명은 여기에 있습니다 그것으로하고 그것이 당신에게 정말 쉽다고 말한 것처럼 다음 비디오에서 나는 이것으로보고 싶습니다

모든 것이 잘 작동하는 페이지이지만 실제로보고 싶은 내용은 이들이 실제로 애니메이션으로 표시되는지 확인하려면 그들이보기에 다시 올 때 그것은하기 쉽고 우리는 미리 작성된 다른 코드를 사용하십시오 이렇게 있으면 유용하다고 생각하길 바랍니다 웹에 관심이 있다면 공유하고 동영상을 구독하십시오 개발은 우리가 위대한있어 아래에 좀 걸릴 무료 웹 개발 수업 또한 훌륭한 프리미엄 수업이 있습니다 YouTube 가입자에게 엄청난 할인 혜택을 제공합니다

다시 한번 이것이 시스템 22의 Jamie와 웹 디자인 및 기술 팁이었습니다 지켜봐 주셔서 감사합니다 좋은 하루 되세요

5 On Page SEO Elements +1 Bonus Tactic to Optimize in WordPress 20181030

안녕, 난 가이 쿡이야, 가이 R 쿡 보고서 모든 후원자 들께 감사하고 싶다 우리가 이제는 서면으로 된 문서와 비디오로 만들 수있는 팟 캐스트를 지원합니다

우리가 지금 보게 될 쇼 노트뿐만 아니라 YouTube에서도 오늘 오디오가 대담하고 시간을내어 주셔서 감사합니다 너의 일에서 괜찮은 5 개의 페이지 SEO 성분에 감사하십시오 WordPress를 최적화하고 대부분의 감자에 그레이비가 조금 있습니다 디지털 마케팅 담당자로부터 우린 어쨌든 2 일 동안 두 번 보도록하겠습니다 다섯 가지 주제가 무엇인지 확인하고 이러한 요소가이 항목에 포함되어 있는지 확인하십시오 YouTube 채널에서이 동영상을 볼 수 있습니다

당신이 쇼에서 읽었을 때 페이지의 SEO 요소에 5 개의 라이언 정글의 플러그인은 SEO 용 Yoast SEO 플러그인입니다 WordPress는 그게 전부입니다 당신이해야만하는 것은 당신뿐입니다 중반에 당신이 고려하고 싶은 5 개의 온 페이지 SEO 요인 당신은 당신의 블로그 포스트를 만들고 있습니다 그리고 그것을 측정하는 것은 우리가 말할 수있는 슬러그입니다

1 분 안에 그 본문 텍스트 이미지들 제목 태그 메타 설명 이 글의 마지막 부분에 약간의 보너스가 있습니다 druthers 괜찮아 그래서 여기에 대한 Yoast SEO 플러그인에 대해 조금 이야기하고 그 때 그것은 당신 앞에서이 5 개의 on-page SEO 요인의 올 바른 하나에 지금 들어간다 귀하의 SEO를 설정하십시오 나는 고객의 아바타를 다운로드하는 것입니다 워크 시트는 무료이며 당신이 누구인지에 대한 명확한 아이디어를 얻습니다 우리는 그 사람들에게 판매하는 방법을 알고 있습니다

이 게시물을 계속 추적하면 참조 할 횟수를 참조 할 수 있습니다 고객 아바타 워크 시트 그래서 그들이 최적화와 함께 시작 번호 하나 슬러그 그리고 만약 당신이 워드 프레스를 전혀 사용해 본 적이 없다면 그것이 퍼머 링크입니다 그들은 당신이 당신의 타이틀을 놓은 곳을 렌더링한다면 괜찮습니다 우리가 평등하다고 보는 첫 번째 것은 실제로 고객 아바타의 두 번째 것입니다 워크 시트 그래픽 페이지의 SEO 요소 2 번은 본문 텍스트를 최적화하는 것입니다

이제 당신은 당신의 몸 본문이 자연스러워지기를 원합니다 그곳에서 키워드를 사용하고 싶습니다 그래서 몇 가지 샘플이 있습니다 거기에서 그들은 당신의 몸 안에 자연스럽게 들어갈 수 있도록 당신에게 줄 수 있습니다 귀하의 블로그에 게시하면 그것은 이미지를 최적화하는 것이 훨씬 더 좋을 것입니다

너는 사과라는 이미지를 가지고있다 사과라고 말한다 알아 내려고 애 쓰고있는 사람들을 위해 숫자 도트 JPG를 잔뜩 들여다 봅니다 그게 alt 태그에있는 키워드를 사용하고 if 이미지 alt 태그가 무엇인지 잘 모르는 경우 Google 및 그들은 4 가지 요소를 나열합니다 당연히 당신은 저것을하기 위하여려고하고있다 제목 꼬리표는 오래된 학교 SEO 그러나 아직도이다 그것은 여기에 그것의 규칙을 만들기 위해 페이지에서 할 일 중 하나입니다

타겟 키워드를 제목 태그에 표시하면 더 많은 영향을 미칩니다 당신의 SEO에 가지고 있고 그래서 나가 그것을 부르는 당신의 어구를 확인하십시오 때로는 그리고 나서 이것은 5 페이지의 SEO 요소가 제목에 먼지가 침전되어 연기가 날 때 그들은이 페이지의 SEO 오른쪽에 대해 메타해야합니다 헤이가 될거야 지우기 페이지의 설명은 검색 엔진 결과에 표시되는 내용입니다 당신이 볼 수있는 제목 바로 아래에 그 작은 표식이 나타나고 콘텐츠를 테스트하고 테스트하지 않으면 우리가 자주 작성한 것을 기억하십시오 작동하지 않습니다 SEO가 실적을 올리고 있는지 확인하고 그가 조금 더 쓸데없는 것처럼 그레이비를 감자에 버리십시오

이 포스트와 시작은 내가 여기 보너스 전술 권리를 얻을 수있게 해준다 여기에 나는 텍스트에 강조 표시했지만 큰소리로 설정하지는 않았다 YouTube 채널로 이동하여 그 내용을 확인하시기 바랍니다 좋습니다 그래서 우리는이 5 개의 온 페이지 SEO 요소를 디지털에서 링크했습니다

마케터와 우리는 쇼 노트로 돌아갈거야 좋아, 우리가 너에 대해 얘기 했어 당신이 갖고 싶어하는 SEO 플러그인과 우리는 그것이 Yoast라고 말했지만 우리는 후원자이자 $ 1 달의 서약은 바로 $ 1짜리 바로 옆의 그래픽에 그래픽이 표시되고 Yoast 플러그인이 요약되었습니다 거기에 큰 일들 중 일부가 당신의 사이트 맵을 만들 수 있습니다 사이트는 Google 웹 마스터 도구가 현재 Google 검색 콘솔로 알려져 있음을 확인합니다 웹 마스터 도구는 여전히 어떤 이유로 웹 마스터 도구라고 부릅니다 이동 경로 탐색을 사용하면 robots

txt 파일을 편집 할 수 있습니다 그 일을하는 데 익숙하고 플러그인에 바로 내장되어있어 페이지를 설정할 수 있습니다 귀하의 면책 조항에 대해 색인을 생성하고 싶지 않은 색인 된 페이지는 없습니다 정렬 할 필요가 없거나 인덱싱 할 필요가없는 이용 약관 일 수 있습니다 일단 그들이 사이트에 도착하면 그것은 단지 읽을 것입니다

그들은 그 노트에 세 가지 다른 색상은 워크 시트 버튼을 얻는 것입니다 그 고객 아바타 워크 시트를보고 거기에 링크가있을 것입니다 쇼 노트가 거기에 있으며 디지털로부터 다운로드합니다 마케팅 담당자가 마케팅에 대해 조금 더 알아 보겠습니다 디지털이 Podcast 에피소드를 즐겼 으면 좋겠다

당신을 위해 작동하는 5 개의 on-page SEO 요소를 얻을 수있었습니다 좋은 하루였습니다 이 에피소드를 랩으로 즐기 셨으면 좋겠습니다