Основные элементы elementor

Добрый день, в этом видео-уроке мы разберем основные элементы Elementor

Тема урока: "Стандартные элементы Elementor"

Добрый день. В этом уроке рассматриваются все стандартные элементы Elementor.

Все базовые элементы можно видеть в поле слева, рисунок 1.

базовые элементы Elementor
Рисунок 1 - базовые элементы Elementor

Первый элемент — это «Секция», он рассматривался в прошлых уроках.

Второй элемент – это «Заголовок», он используется для индексации. Можно выбрать тип заголовка и его стиль.

Важно понимать разницу между типами заголовка и их значением для сайта.

В заголовок вносятся «ключевые слова» или «ключи», по которым продвигается сайт в поисковой выдаче. В них, желательно, вставлять «ключи» или словосочетания, которые максимально приближены по значению к тому, о чем рассказывает сайт, иначе поисковый робот не поймет, о чем речь на странице или сайте в целом, это будет пагубно сказываться на индексации сайта. Чем выше ключ, тем в более высокий тип заголовка он должен попадать. На каждой странице сайта должен присутствовать один-единственный, рисунок 2.

заголовок «H1». Все последующие заголовки H2-H6 также можно выбрать. Заголовок важен как для поисковых систем, так и для человека, которой будет читать и использовать сайт

?). Все заголовки должны не только содержать «ключи», но и разделять массу текста, содержащуюся на странице в логические блоки. Это нужно делать для того, чтобы человеку было удобно ориентироваться на сайте и он смог быстро найти интересующую его информацию. Гораздо быстрее, чем если бы это был один сплошной массив текста.

элемент "Заголовок"
Рисунок 2 - элемент "Заголовок"

Что такое индексация страницы и зачем она нужна?

По факту, это анализ, то есть, сначала собирается информация о содержимом сайта, затем проверяется и вносится в базу. Процесс этот долгий и сложный, потому этим занимаются так называемые роботы. Они исследуют сайт по заданным алгоритмам поисковых систем. Затем, собирают всю информацию с каждой страницы. Во время индексации в учет идут ссылки (внутренние и внешние), текст, а также графические элементы и многие другие элементы. После чего, данный ресурс отправляется на проверку, а затем вносится в индекс самой поисковой системы. Благодаря этому, пользователи, при вводе соответствующего запроса, попадут на нужную им информацию.

Далее, элемент – «Текстовый редактор». Он предназначен для вписывания обычного текста. Этот элемент не имеет заголовков, поэтому зачастую не индексируется, хотя нужно помнить, что текст в этом элементе все равно будет сканироваться поисковым роботом при обходе страниц сайта, поэтому стоит грамотно заполнять такие элементы, ведь они все равно помогают поисковой системе понять, о чем сайт или страница этого сайта, рисунок 3.

текстовый редактор
Рисунок 3 - текстовый редактор

Следующий элемент –  «Видео». Добавив видео, появляется возможность вставить ссылку на это видео, например из YouTube, либо непосредственно с хостинга. Для этого есть специальный элемент вверху левой панели настройки, которая появляется, как только было добавлено видео. Также в этой панели присутствуют дополнительные гибкие настройки, где можно сделать проигрывание видео так, как требуется, вплоть до «Скрытого режима», в котором  YouTube, не будет считывать количество людей, которые посмотрели данное видео на этом сайте, рисунок 4.

видео
Рисунок 4 - видео

Следующий элемент – «Кнопка». «Кнопка» была рассмотрена в прошлых уроках, однако стоит чуть больше рассказать о ней. Этот элемент имеет несколько удобных настроек, таких как «ссылка» (при нажатии на кнопку будет происходить переход с этого сайта на тот, который указан в поле «Ссылка», либо, если это «якорная ссылка», то экран будет проматываться до того момента, где закреплен второй «конец» этой якорный ссылки. Также в настройках имеется выбор иконки данной кнопки, внутренний отступ, цвет и границы кнопки, рисунок 5.

кнопка
Рисунок 5 - кнопка

Еще один элемент называется – «Разделитель». Такой элемент используется редко. Чаще всего делается не в практических, а в дизайнерских целях. Выполняет задачу разделения двух блоков друг от друга, рисунок 6.

разделитель
Рисунок 6 - разделитель

Далее элемент – «Интервал». Используется для создания отступов между элементами сайта. Его можно изменять либо в основных настройках, либо во вкладке «Расширенные», рисунок 7.

интервал
Рисунок 7 - интервал

Следующий элемент – «Карта Google». Незаменимый элемент для большинства сайтов. Адрес нужного объекта вписывается в соответствующее поле на левой панели, также можно настроить увеличение карты, именно так, как она будет отображаться на сайте, рисунок 8.

карта Google
Рисунок 8 - карта Google

Далее рассматривается элемент – «Иконка». Нажав на ярлык изменения иконки в левой панели настроек, можно выбрать подходящую, так как там имеется гигантский выбор иконок под любой случай, также есть поиск по иконкам (только английским текстом), рисунок 9.

иконка
Рисунок 9 - иконка

Общие элементы Elementor

Сюда входят расширенные наборы элементов, которые обладают большим функционалом, чем базовые. Эти элементы призваны сделать сайт красивым и удобным, рисунок 10.

общие элементы Elementor
Рисунок 10 - общие элементы Elementor

Первый общий элемент – это «Картинка с текстом». В этом элементе можно совместить картинку, заголовок и текст в один элемент, рисунок 11. Отдельно можно выбрать картинку, отдельно написать заголовок и отдельно текст. Однако лучше делать «Картинку», заголовок и текст отдельно друг от друга, так как это положительно влияет на индексацию.

картинка с текстом
Рисунок 11 - картинка с текстом

Второй общий элемент – это «Иконка с текстом». Аналогично картинке с текстом, тут можно менять иконку, заголовок и текст.

Третий общий элемент – «Рейтинг». Это один из самых непопулярных элементов. Он используется в редких случаях и лишь тогда, когда на сайте нужно показать цифры продукта в яркой форме, а также количество выполненных или отправленных заказов, чаще к этому элементу прибегают интернет-магазины.

Четвертый общий элемент – «Галерея медиафайлов». В ней можно выбрать несколько изображений, которые будут отображаться в виде набора изображений. Изображения можно листать, нажимая на стрелочки по бокам этого элемента. В Галерее можно задавать настройки, такие как автоматическое перелистывание (изображения будут сменять друг друга сами через установленный период времени). Очень удобно использовать ее для представления товаров в интернет-магазинах, рисунок 12.

галерея медиа-файлов
Рисунок 12 - галерея медиа-файлов

Следующий общий элемент – «Галерея». Аналогично с галереей медиафайлов это элемент дает возможность добавлять несколько изображений. В ее настройках можно добавлять ссылки на медиафайлы, тогда эти ссылки будут открываться при нажатии на изображение.

Далее элемент – «Список с иконками». Он представляется в виде вертикального списка. В нем можно задать иконку из большого списка, также можно добавить нужный текст, рисунок 13.

список с иконками
Рисунок 13 - список с иконками

Следующий элемент – «Счетчик». В прошлом, довольно популярный элемент, однако сейчас он частично утратил свое значение. Имеет настройки начальной цифры, конечной цифры, скорости пролистывания от начальной до конечной цифры, а также текст под цифрами, рисунок 14.

счетчик
Рисунок 14 - счетчик

Далее рассматривается элемент – «Прогресс». Заполняется почти точно так же как «Счетчик», не пользуется популярностью ввиду своей малой востребованности, рисунок 15.

прогресс
Рисунок 15 - прогресс

Следующий элемент – «Отзывы». Незаменимый элемент для главных страниц любых сайтов, в котором есть возможность настраивать изображение и текст отзыва. Как правило, туда добавляются фотографии людей пишущих отзывы о том или ином товаре, а также их отзыв в текстовой форме. Кроме того, можно добавлять несколько отзывов и превращать их в карусель, похожую на карусель медиафайлов рассмотренную ранее, рисунок 16.

отзывы
Рисунок 16 - отзывы

Элемент – «Вкладки». Популярный элемент, который позволяет экономить место и представляет информацию подобно вкладкам браузера. Каждая вкладка настраивается отдельно. Название вкладки и содержащегося в ней текста можно изменять. Также можно добавлять новые вкладки, рисунок 17.

вкладки
Рисунок 17 - вкладки

Далее элемент –  «Аккордеон». Этот элемент схож с предыдущим. Но, отличается представлением информации в виде выпадающего списка. Соответственно, каждая вкладка будет сжиматься при открытии другой. Имеет такие же настройки, как и элемент «Вкладки», рисунок 18.

аккордеон
Рисунок 18 - аккордеон

Элемент – «Спойлер». Почти точно такой же, как и «Аккордеон», однако имеет немного другие настройки. Несмотря на схожесть, элементы хороши для выполнения разных задач.

Следующий элемент – «Иконки социальных сетей». Чрезвычайно полезный элемент, который присутствует на всех сайтах мультиплатформенных компаний. Элемент можно настроить под любую известную социальную сеть. Есть возможность выбрать иконку этой сети, покрасить ее в тот цвет, который необходимо (либо оставить оригинальный), вставить ссылку в соответствующее поле. Затем, при нажатие на иконку, будет производиться переход по ссылке в ту или иную социальную сеть, рисунок 19.

иконки социальных сетей
Рисунок 19 - иконки социальных сетей

Далее рассматривается элемент – «Предупреждение». Это обычный элемент с заголовком и текстом, которые можно так же настраивать. Крайне непопулярный элемент, который сложно отыскать хотя бы на одном сайте.

Элемент «SoundCloud Плеер». В этот элемент можно загрузить музыку с SoundCloud, (с аккаунта) которая потом будет воспроизводиться автоматически или по нажатию, рисунок 20.

SoundCloud Плеер
Рисунок 20 - SoundCloud Плеер

Элемент – «ШортКод». Этот элемент используется для работы некоторых элементов плагинов, установленных на сайте. В «ШортКод» вставляется код, который подгружает некоторые элементы разных плагинов, рисунок 21.

шорткод
Рисунок 21 - шорткод

Далее элемент – «html код». Данный элемент позволяет вставлять на сайт любой HTML код, который необходим, рисунок 22.

HTML код
Рисунок 22 - HTML код

Следующий элемент –  «Якорь меню». Этот элемент позволяет устанавливать своеобразные «якоря» на любой части сайта, которые непосредственно связаны с кнопками меню. Настраивается внутренними ссылками: от кнопки меню – до элемента конечного якоря. При нажатии на кнопку меню, которая использует «якорь», страница будет автоматически пролистываться до того скрытого «якоря», где он был установлен. Это позволяет быстро перемещаться по сайту и максимально быстро находить информацию, которая интересует. Очень полезная функция, которая помогает посетителю читать и искать только то, зачем он пришел на сайт, рисунок 23.

якорь меню
Рисунок 23 - якорь меню

Элемент – «Сайт бар». Почти никогда и никем не используется. Его функции можно заменить настройками темы через администраторскую консоль.

Последний общий элемент – это «Читать далее». В Elementor он оптимизирован достаточно плохо, поэтому настраивается в отдельных плагинах, которые требуют дополнительной установки на сайт, рисунок 24.

читать далее
Рисунок 24 - читать далее

Спасибо за внимание. В следующем уроке будет рассматриваться тема: «Настройка меню».