Редактирование страницы в Elementor
Чтобы редактировать страницу, нам нужно первым делом войти в админбар, сверху черная полоска, вот тут https://m-fiz.ru/vhod-v-panel-administrirovaniya-adminku-wp-dlya-klientov/ уже описывал как её открыть. Сверху мы видим надписи «Редактировать запись (страницу)» и «Редактировать в Elementor». Если наведем мышку на «Редактировать в Elementor», то увидим там несколько пунктов, как ниже показано на рисунке.
Где мы можем выбрать Footer (это подвал, внизу), «Шапка сайта» это меню верхнее, то название, которое вы дали им при создании в Elementor. Если подвал и шапка обычные, не сделанные в Elementor, то этих пунктов не будет. Это значит, что шапку и подвал, сделанные в Elementor мы можем отредактировать из любого места сайта. Они правятся точно так же как и любые страницы Elementor.
Видео хорошее, подробное по работе в Elementor на примере создания шапки сайта » Как создать шапку для сайта«. Советую посмотреть видео, тогда при чтении ниже вы будете лучше понимать, где буду описывать минимально необходимые настройки, которых нет в видео.
Чтобы отредактировать нужную страницу или запись, нам нужно в неё зайти через браузер и нажать на надпись «Редактировать Elementor» левой кнопкой мыши. И нам открываются настройки Elementor. Слева будет панель управления Elementor, справа наша страница для редактирования.
Если страница или запись создана без помощи Elementor, то кнопка «Редактировать в Elementor» присутствует, но не работает и редактирование такой страницы происходит в стандартном режиме WordPress с помощью кнопки «Редактировать запись (страницу)». Можно, кстати зайти и через эту кнопку и там нажать «Редактировать в Elementor». Иногда это нужно сделать, чтобы сменить формат отображения записи, чтобы выбрать тип оформления, картинку к записи добавить, ниже показано изменение свойств записи.
Elementor полная ширина- это значит страница будет отображаться с подвалом и шапкой, ширина страницы стандартная. И потом обязательно нужно нажать Обновить, чтобы сохранить изменения. Если мы попытаемся выйти не сохранив изменения, то Elementor будет об этом предупреждать.
Выход из Elementor, чтобы просмотреть результат не очень удобный, для этого нужно нажать сначала три полоски в верхнем левом углу страницы и там «Выйти в консоль», из консоли потом выйти сверху на сайт или же не выходя из консоли сразу перейти на страницу или запись через одноименный пункт меню, что неудобно и долго. Поэтому рекомендую сделать в панели закладок браузера ссылку на главную сайта или страницу, которую вы редактируете или создаете, тогда, при условии, что сохранили изменения вы попадете через закладку сразу на страницу и это будет быстрее.
Если мы заходим напрямую через кнопку «Редактировать Elementor», то двигая мышкой по странице мы увидим, что выделяются синие блоки, рамки с надписью плюсик, крестик и 6 точек. Крестик означает удалить секцию, 6 точек означают настройки секции. Плюс это значит добавить выше секцию, если нам нужно добавить секцию, то нажимаем плюс и видим появляется такая картина.
Тут снова нажимаем плюс и выбираем секцию из одной или нескольких частей. Можно выбрать одну секцию, а потом слева, в т.н. панели виджетов перетащить на новую секцию виджет «Внутренняя секция», она показана на рисунке выше. Это иногда нужно, чтобы сделать, например, общий фон или картинку на котором будет другая картинка и текст, кнопки и пр. расположены. Или же мы можем при добавлении выбрать сразу разбитую на сколько нужно частей секцию.
В результате получаем новую секцию, которую мы можем таскать мышкой, вверх или вниз перемещать, удерживая за 6 точек левой кнопкой мыши. Мышью мы можем так же менять размеры секций, расширять, сжимать… При этом мы видим проценты секции от общей ширины. Это достаточно удобно, если вы хотите получать однотипные страницы или записи. Вообще, все отступы и размеры в Elementor указываются или в процентах, в пикселях и пр., ниже мы видим, что стоят пиксели
Ниже покажу на примере добавления комментариев на странице записи…
Сначала добавляю внизу страницы новую секцию разбитую на три части (плюсиком) и выбираю секцию разбитую на три части. В средней части будут комментарии, а сбоку секции для отступов, так как если сделать на всю страницу, то отзывы будут сильно широкие, перебивать текст записи.. Мышкой обычно выставляю 15 процентов на боковые (пустые секции), чтобы комментарии занимали 70 процентов от ширины страницы.
В среднюю секцию мне нужно поместить комментарии. На моих сайтах комментарии делаю через плагин AnyComment или wpDiscuz.
Иногда используются темы на сайте, где панели имеют уже отступы (заданы темой), они задаются в панели управления виджетами в разделе «Расширенные». Чтобы убрать эти отступы (сбросить), а есть наружние и внутренние отступы нужно просто нажать на скрепки, как ниже показано.
Если мы нажмем на пункт «Содержимое», то можем изменить его, запись сделать и пр. Так же в закладке «Стиль» много интересного, например там можно выбрать фон выделенной панели и пр. эффекты.
Посмотреть какие комментарии используются на вашем сайте можно в плагинах. На этом сайте используются комментарии от wpDiscuz, поэтому если у вас другие, то у вас AnyComment используются.
Принцип вставки комментариев один и тот же, вставляются комментарии через т.н. шорткоды, для этого мы влево в виджетах Elementor находим панель «Шорткод». Если её нет, то тыкаем либо на плюсик в панели или в 9 точек (см. ниже) в панели Elementor. Выбираем нужный виджет и удерживая левую кнопку мыши переносим его на среднюю секцию.
Далее просто вставляем шорткод (специальный текст) в панели настройки виджетов (слева)
- для wpDiscuz вставляем (wpdiscuz_comments) круглые скобки заменить на квадратные.
- для AnyComments вставляем (anycomment) круглые скобки заменить на квадратные.
И обязательно жмем внизу зеленую кнопку «Обновить«, чтобы сохранить обновление.
Точно так же редактируется, добавляется любая функция Elementor, например мы вставляем блок с одной стороны вставляем картинку, с другой текст и вверху мы можем расположить заголовок (добавить новый блок)
Важно понимать, что «Заголовок» не случайно существует, ведь тоже самое делает виджет «Текстовый редактор». Заголовок имеет тэги, чтобы поисковики могли понимать тему данной записи, тэг H1 нужно выставлять на главной записи на странице, H2 тэг на второстепенной, это подпункты страницы, тогда сайт будет правильно индексироваться поисковиками. На каждой странице желательно иметь заголовок с тэгом H1 и Н2. А «Текстовый редактор» это обычный текст.
В обычном текстовом редакторе мы можем менять размер шрифта, наклон, цвет, делать подчеркивание. Подчеркивание делается не много не привычно, в пункте меню редактора «Формат» находится.
Тут так же мы видим верхние индексы для формул и пр. Есть полезная кнопка «Очистить» имеет иконку ластик, чтобы сбросить форматирование и пр. В тексте сообщения мы можем вставлять ссылку. Обозначено это знаком цепь и рядом кнопка которая удаляет ссылку. При создании ссылки нужно выделить нужный текст мышкой и нажать иконку ссылки и туда вписать ссылку. Важно себя приучать, чтобы ссылка открывалась в новой странице, это настраивается нажатием на шестеренку при создании ссылки
Нужно отметить галочку, как показано выше, ниже есть пункт «nofollow», это означает запретить поисковикам переходить по ссылкам, её нужно оставлять не включенной, это увеличивает рейтинг сайта.
Панель настроек Elementor можно уменьшать или увеличивать по ширине…для удобства. Так же можно регулировать ширину отступов в самой панели на странице, для этого нужно нажать на нужную панель и зайти в расширенные настройки.
Важно понимать, что в панели ещё есть разделы, поля для вставки объектов и там тоже все отступы настраиваются и меняются. Поэтому, когда выделяете нужную панель. необходимо смотреть, что выделяете, например саму надпись или поле для её размещения или же панель. Таким образом, например надпись можно отцентровать по полю в котором она находится и пр., не всегда нужно пользоваться отступами. Для этого в панели Elementor есть либо кнопки, либо значки и пр.
Причем, отступы можно менять как снаружи, так и внутри, причем если нажать на скрепку, то можно выставлять их по отдельности, нажав обратно на скрепку выставляем отступы по всем сторонам одновременно. Это необходимо, например, чтобы картинку уменьшить на странице и пр. для расположения контента на странице изменить. Поэтому с помощью Elementor очень удобно делать красивый дизайн на главной, да и на статьях, где как мы уже видели можно комментарии добавлять в режиме шорткода и пр. функции.
При вставке картинки нужно обращать внимание на масштаб картинки, как ниже показано.
Лучше картинку сразу сделать необходимого размера и выбрать «Полный» размер, чтобы картинка отображалась пиксель в пиксель, тогда не будет размытости картинка, нет пересчета разрешения и такой файл займет минимум места на сайте. Если выставить настройку «Медиафайл», то при нажатии картинка откроется в полный размер, такое можно использовать, если картинка высокого разрешения используется.
Но не всегда целесообразно добавлять картинку с помощью виджета «Изображение». Картинку можно вставлять прямо в текст сообщения в текстовом реlакторе Elementor , это очень удобно, нужно выбрать Вставить- Добавить медиафайл и выбрать из загруженных изображений или загрузить картинку с компьютера.
После вставки появится картинка и панелька, можно нажать на карандашик, чтобы параметры вставки выбрать.
И там выбрать настройки, полный формат, например, чтобы резкость была максимальная и выбрать расположение рисунка в тексте и пр. Можно сделать расположение картинки слева,обтекание текста получим, полезная функция.
Как видим мы можем на картинку поставить ссылку. Кстати в текст сообщения мы можем так же вставить шорткоды, те же комментарии например и пр. В Elementore всё сделать можно несколькими способами. Можно добавить видео на страницу как в тесте, так и через отдельный виджет в Elementor.
Насчет шорткодов в текстовом редакторе Elementor, если в плагинах добавлен плагин Shortcode Ultimate, то в консоли появится пункт «[ ] Шорткоды», нажав на который можно выбрать необходимую функцию, например выбираю «Заметка«, нажимаю и вижу шорткод и пояснение к нему и вставляю в текстовый редактор
Выше видите пример работы данного шорткода. Причем даже не нужно нажимать кнопку шорткода в редакторе, просто вставляете то, что в квадратных скобках был скопировано, вместе со скобками.
Ниже пример работы шорткода «Вкладки»
Ещё ниже пример работы шорткода «Спойлер»
Полезен так же шорткод «Цитата»
Может быть так же полезен «Разделитель» (Разделитель текста со ссылкой ВВЕРХ)
А это шорткод «Подсказка»
Цвет подсказки настраивается, в шорткоде есть описание, кстати, насчет цветов, в WordPress используется обозначение цвета принятое в веб через решетку, например #222222, поэтому его можно копировать в свойствах одного объекта и выставлять такие же значения у других.