Elementor Cloud: как создать сайт за 3 минуты

Elementor Cloud: как создать сайт за 3 минуты

Из этого руководства по WordPress вы узнаете, как создать веб-сайт с помощью Elementor всего за 3 минуты благодаря Elementor Cloud, автоматизированному решению для создания Блог WordPress с Elementor для начинающих и опытных блоггеров или веб-мастеров.

Если вы предпочитаете следовать видеоруководству, нажмите кнопку над следующим видео:

Создание собственного веб-сайта без обучения программированию или найма разработчика было практически невозможным. Однако благодаря таким платформам, как WordPress, и плагинам, таким как Elementor, то, что когда-то было невыполнимой миссией, теперь стало реальностью.

В этом уроке мы покажем вам, как использовать WordPress и Elementor для создания нового веб-сайта, и шаг за шагом проведем вас через этот процесс.

Но прежде чем мы пригласим вас открыть для себя Как установить Elementor на WordPress или Как установить (добавить) плагин на WordPress

Создайте сайт WordPress с помощью Elementor

WordPress это мощная система управления контентом, которую можно загрузить и использовать бесплатно, и которая позволяет создавать веб-сайты любого типа; от простых личных блогов и веб-сайтов для малого бизнеса до крупных корпоративных веб-сайтов и многофункциональных приложений. 

Факир, с другой стороны, представляет собой простой в использовании, но надежный конструктор страниц, который позволяет любому легко создать свой веб-сайт, независимо от его сложности.

В этом уроке мы покажем вам, как создать веб-сайт WordPress за три минуты с помощью новой платформы Elementor Cloud. Название может быть сильным, но решение действительно автоматизировано и легко для любого новичка.

самое первое — перейти на страницу Elementor, перейти к нижней части страницы и найти ссылку Elementor Cloud.

создать сайт с Elementor Cloud

Вы будете перенаправлены на новую страницу. Прокрутите вниз и найдите раздел НЕТ СКРЫТЫХ ФЕЕЙ. Справа нажмите на кнопку Купить сейчас Как на картинке ниже.

создать сайт с Elementor

Откроется страница оплаты, и вам будет предложено ввести свой адрес электронной почты. После входа в него нажмите на кнопку Создать учетную запись

Создание облачной учетной записи Elementor

Затем на следующей странице введите страну, штат, адрес, почтовый индекс и т. д., затем нажмите кнопку Продолжить

После этого выберите способ оплаты. Вы можете выбрать между кредитной картой или PayPal. Мы выбрали метод PayPal.

Нажмите на желтую кнопку PayPal в правой части экрана.

Un всплывающее окно откроется, и вам будет предложено ввести данные для входа в PayPal и подтвердить.

Если процедура прошла успешно, вы будете перенаправлены на страницу благодарности с двумя кнопками. Первое Перейти в мой аккаунт перенесет вас в вашу учетную запись и второй Начните создавать свой сайт к автоматизированному созданию вашего веб-сайта.

Нажмите на вторую кнопку. Вы получите право на новое всплывающее окно, которое предложит вам ввести имя вашего веб-сайта. Подтвердите, нажав на Далее.

Дождитесь окончания автоматической процедуры создания вашего сайта и нажмите на кнопку Пойдем!

Cliquez-сюр- Got It как на картинке ниже.

Нажмите «Открыть панель управления WP», чтобы открыть панель управления.

В новом всплывающем окне приветствия нажмите кнопку Используйте комплект веб-сайта

Вам будет предложено выбрать шаблон сайта из списка, который предлагает Elementor. У вас будет возможность отфильтровать их по категориям, нажав на одну из них слева.

создать блог WordPress с Elementor

Если вы нашли модель, соответствующую вашим стремлениям, наведите на нее указатель мыши, появится новая кнопка, нажмите на Посмотреть демо

создать блог WordPress с Elementor

Вы сможете увидеть, что предлагает эта модель. Вы сможете перемещаться по всем страницам этой модели и, если она вас устраивает, нажмите кнопку Применить комплект который установит шаблон на ваш сайт.

Если нет, кнопка Назад в библиотеку вернет вас к списку шаблонов, и вы сможете проверить еще один.

После нажатия на Применить комплект, всплывающее окно с подтверждением спросит вас, действительно ли вы хотите установить всю эту модель или только несколько страниц. Вы можете нажать Применить все ou Настройки чтобы настроить ваш выбор.

Будет представлена ​​сводка вашего выбора, нажмите на Далее

создать блог WordPress с Elementor

Наконец нажмите на Вернуться к панели инструментов чтобы вернуться на панель инструментов вашего сайта.

На панели инструментов нажмите Название моего сайта вверху и слева от экрана, затем на Vсайт чтобы узнать, как работает ваш сайт.

И вот вы только что создали свой сайт на WordPress с помощью Elementor Cloud.

Все, что осталось сделать, это настроить его, как вы хотите. Для этого мы предлагаем Комплект учебников Elementor которые мы предлагаем вам открыть для себя.

Когда вы закончите с этим руководством, вы можете просмотреть другие наши руководства и учебные пособия для более конкретных страниц.

С помощью этих руководств вы сможете улучшить свой веб-сайт и получить от него максимальную отдачу.

Получите Elementor Pro прямо сейчас!

Заключение

Так ! Вот и все для этой статьи, которая покажет вам, как создать веб-сайт с Elementor за 3 минуты. Если у вас есть какие-либо опасения по поводу того, как туда добраться, сообщите нам об этом в течение Комментарии.

Тем не менее, вы также можете проконсультироваться наши ресурсы, если вам нужно больше элементов для реализации ваших проектов создания интернет-сайтов, обратитесь к нашему руководству по Создание блога на WordPress или Divi: лучшая тема WordPress всех времен.

Но тем временем поделитесь этой статьей в разных социальных сетях.

...

Elementor: как добавить звуковой эффект кнопки

Elementor: как добавить звуковой эффект кнопки

Нужно узнать, как добавить звуковой эффект кнопки в Elementor? Узнайте в этой статье.

Вы видите эти 2 кнопки?

Когда вы нажимаете на Кота, он издаст мяу, а когда вы нажмете кнопку на Цзянь, он будет издавать лай. В этой статье мы покажем вам, как добавить в Факир звуковой эффект для кнопки при нажатии.

Как добавить звуковой эффект к кнопке в Elementor

Шаг 1. Создайте кнопку

Во-первых, вам нужно создать кнопку, вы можете настроить кнопку по своему усмотрению, потому что у Elementor есть много вариантов, чтобы ваша кнопка выглядела красиво.

Как только кнопка будет готова, подготовьте звуковой эффект для кнопки и загрузите его в медиатеку WordPress. Вы можете использовать формат файла MP3 или WAV для звукового эффекта.

Чтобы загрузить звуковой файл в медиатеку WordPress, перейдите на панель инструментов WordPress и нажмите Медиа -> Добавить. Вы можете перетащить файлы или нажать Выбрать файлы загрузить их.

звуковой эффект кнопки на Elementor

Как только файлы будут загружены, зайдите в медиатеку и нажмите на один из звуков, затем в появившемся окне скопируйте URL-адрес файла чтобы получить ссылку на звуковой эффект.

звуковой эффект кнопки на Elementor

Шаг 3. Добавьте следующий HTML-код.

Чтобы воспроизвести звук с кнопки, нам нужно использовать следующий HTML-код.

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
  //Audio 1 Starts
  var audio1 = new Audio('Sound-Effect-URL')
  $(".button-class").mousedown(function() {
    audio1.load();
    audio1.play();
  });
  //Audio 1 Ends
});
</script>

Добавьте виджет HTML в область холста и вставьте код в блок HTML код.

Используйте ссылку на звуковой эффект, чтобы заменить URL-адрес звукового эффекта в инструкции

var audio1 = new Audio('Sound-Effect-URL')

Выберите классы CSS для кнопки и измените код классов Класс CSS кнопки

$(".button-class").mousedown

После модификации кода это будет выглядеть так.

звуковой эффект кнопки на Elementor

Шаг 4: Добавьте класс CSS к кнопке

Чтобы связать кнопку с кодами, нам нужно добавить к кнопке классы CSS, чтобы код знал, какая кнопка нажата, и запускал звуковые эффекты.

звуковой эффект кнопки на Elementor

А это для кнопки со звуковым эффектом. Теперь вы можете настроить свою кнопку. И если вы хотите добавить больше кнопок со звуковыми эффектами, это можно сделать, скопировав часть кода и немного изменив его.

Добавлены дополнительные кнопки со звуковыми эффектами

Создайте кнопку или скопируйте существующую кнопку

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

звуковой эффект кнопки на Elementor

Скопируйте часть кода и настройте переменные и имя класса CSS второй кнопки.

Давайте скопируем некоторые части предыдущего HTML-кода, которые запускают звуковой эффект, это следующий код ниже

//Audio 1 Starts
  var audio1 = new Audio('Sound-Effect-URL')
  $(".button-class").mousedown(function() {
    audio1.load();
    audio1.play();
  });
  //Audio 1 Ends

Скопировав код, вставьте его чуть ниже по аудио 1 заканчивается. Изменить переменную audio1 и весь код, который использует переменную audio1 на вновь созданный код в audio2.

Смотрите также: Elementor: Как создать карту эффекта из портфолио

Затем замените URL-адрес звукового эффекта, если вы используете новый звуковой эффект для новой кнопки, и измените код. класс кнопки в ваших недавно созданных классах CSS кнопок.

Окончательный код будет выглядеть следующим образом.

звуковой эффект кнопки на Elementor

Замените имя класса CSS кнопки

звуковой эффект кнопки на Elementor

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

Аудиоэлементы являются одним из замечательных дополнений к веб-сайту. Они не только обеспечивают привлекательный элемент для веб-сайтов, но и помогают произвести неизгладимое впечатление на конечных пользователей.

Читайте также: Elementor: как перенести сайт WordPress

Однако действие или результат должны сопровождаться звуком только в том случае, если это значительно усиливает или уточняет важное сообщение для пользователя. Информирование пользователя о чем-то, что требует его внимания, чтобы это не оказало негативного влияния на ваш сайт.

Получите Elementor Pro прямо сейчас!

Заключение

Так ! Вот и все для этой статьи, в которой показано, как добавить звуковой эффект кнопки в Elementor. Если у вас есть какие-либо опасения по поводу того, как туда добраться, сообщите нам об этом в течение Комментарии.

Тем не менее, вы также можете проконсультироваться наши ресурсы, если вам нужно больше элементов для реализации ваших проектов создания интернет-сайтов, обратитесь к нашему руководству по Создание блога на WordPress или Divi: лучшая тема WordPress всех времен.

Но тем временем поделитесь этой статьей в разных социальных сетях.

...

Elementor: как создать плавающую кнопку с Z-индексом

Elementor: как создать плавающую кнопку с Z-индексом

Хотите создать плавающую кнопку с индексом Z на Elementor?

Мы уверены, что вы знакомы с кнопкой, которая появляется перед всем содержимым экрана и обычно имеет круглую форму и значок в центре. Ну, это плавающая кнопка действия.

Плавающая кнопка действия может вызвать действие или отправить вас куда-то. Например, триггеры для электронных писем, социальных сетей, направления посетителей на подписку на канал и многое другое.

В Elementor есть два метода создания плавающей кнопки действия:

  • Установив Z-индекс
  • Создав всплывающее окно -Popup-

В этом уроке мы только покажем вам, как создать плавающую кнопку действия, установив индекс Z. И мы будем использовать профессиональную версию, чтобы это произошло.

Но сначала узнайте: Как установить Elementor на WordPress

Как создать плавающую кнопку действия в Elementor

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

С Факир Pro, вы также можете получить доступ к функции Пользовательские CSS, который мы будем использовать в этом уроке.

Перейдите в редактор Elementor; вы можете изменить существующий контент (страницы, статьи и т. д.) или создать новый. В этом уроке мы собираемся изменить страницу.

Сначала создайте новый раздел с одним столбцом. Выберите виджет «Кнопка» и перетащите его в область редактирования с панели виджетов. Затем поменяйте кнопку Текст и залог. 

В этом уроке мы будем использовать кнопку в качестве триггера, чтобы подтолкнуть посетителей к просмотру веб-сайта Elementor. Тогда по варианту Alignement, установите его на право et, Наконец, измените размер кнопки включения Очень большой.

создать плавающую кнопку с индексом Z

Как видно на гифке выше, эта кнопка стационарна в разделе. Далее мы заставим его двигаться при прокрутке, оставляя его в том же положении.

Перейти на вкладку Передовой. В параметре Макет, установите ширину на Inline (автомобиль), определить положение на фиксированном, определять горизонтальная ориентация на право и настроить его décalage по желанию.

создать плавающую кнопку с индексом Z

Далее мы определим основы этого метода. В поле Z-Index, введите число 9999 это сделает кнопку всегда впереди (плавающей).

создать плавающую кнопку с индексом Z

Теперь пришло время повернуть плавающую кнопку действия. Всегда под вкладкой Передовой, доступ css-классы из блока раскладка, затем написать rotate внутри.

См. Также: Elementor: представляем лучший конструктор страниц WordPress

После этого переходим к блоку Пользовательские CSS , затем вставьте в поле следующий код:

.rotate.rotate
{transform: rotate(90deg);}

Вы можете видеть, что ручка только что повернулась, но между краями экрана есть странный зазор. Итак, давайте исправим это, настроив décalage при -92

создать плавающую кнопку с индексом Z

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

создать плавающую кнопку с индексом Z

В Elementor есть несколько вариантов достижения определенной цели. Когда дело доходит до плавающей кнопки, вы можете использовать два варианта. Здесь мы рассмотрели только один метод, другим методом будет отдельный учебник.

Читайте также: Elementor: как перенести сайт WordPress

Если вы хотите иметь больше параметров стиля, создание плавающей кнопки действия с помощью конструктора всплывающих окон будет лучшей альтернативой, поскольку у вас будут параметры для настройки кнопки, а также ее поведения, такие как время закрытия кнопки, продолжительность, анимация входа или выхода и т. д. .

Вы только что легко справились с этой задачей. Просто просмотрите работу своего планшета и смартфона, пытаясь изменить поля, чтобы они соответствовали каждому устройству.

Получите Elementor Pro прямо сейчас!

Заключение

Так ! Вот и все, что касается этой статьи, в которой показано, как применить эффект масштабирования к карточке профиля. Если у вас есть какие-либо опасения по поводу того, как туда добраться, сообщите нам об этом в течение Комментарии.

Тем не менее, вы также можете проконсультироваться наши ресурсы, если вам нужно больше элементов для реализации ваших проектов создания интернет-сайтов, обратитесь к нашему руководству по Создание блога на WordPress или Divi: лучшая тема WordPress всех времен.

Но тем временем поделитесь этой статьей в разных социальных сетях.

...

Elementor: как вручную перенести сайт WordPress

Elementor: как вручную перенести сайт WordPress

В учебнике: Как вручную перенести сайт WordPress с помощью Elementor. мы уже показали как вы можете перенести сайт с помощью плагина WordPress Duplicator.

Хотя этот плагин WordPress упрощает работу, некоторым может потребоваться самим управлять процессом, манипулируя кодом.

Так что, если у вас очень большой веб-сайт или вы просто хотите делать что-то вручную по какой-то причине, не так уж сложно вручную перенести свой веб-сайт WordPress.

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

Шаг 0: некоторые предварительные условия для наблюдения

Перед тем, как начать это руководство, вам необходимо:

  • Сделайте резервную копию вашего сайта
  • Иметь учетные данные FTP для хостов существующего веб-сайта и того, на который вы хотите перенести свой веб-сайт.

И если вы меняете домены, вы также должны направить серверы имен вашего нового домена на сервер нового веб-сайта.

Далее, вот как перенести WordPress вручную.

Шаг 1. Переместите файлы на новый сервер

Есть несколько способов переместить файлы с вашего сайта на новый сервер. Один из способов - загрузить все файлы с помощью FTP, а затем загрузить их на новый сервер.

Однако, поскольку этот процесс может занять часы и часы, наиболее эффективным способом было бы создать сжатый архивный файл в cPanel, а затем проверить его на новом хосте.

Шаг 2: Экспорт базы данных

Затем вам нужно экспортировать существующую базу данных веб-сайта.

Хотя вы можете сделать это вручную через phpMyAdmin, более простым решением является Бесплатный плагин WordPress для миграции БД.

Помимо простого экспорта базы данных, WP Migrate DB также обрабатывает сериализованные данные и позволяет запускать поиск и заменять URL-адреса, чтобы убедиться, что все работает нормально, если вы меняете доменные имена. ,

Установите и активируйте плагин на веб-сайте, который вы хотите перенести. Затем перейдите в Инструменты → Перенести БД

Выберите переключатель Экспорт файла ( он должен быть выбран по умолчанию).

Если вы меняете доменные имена, вы также можете использовать функцию Найти / заменить чтобы заменить URL-адреса вашей базы данных на новое доменное имя.

Затем нажмите Экспортировать чтобы скачать копию вашей базы данных:

Как перенести сайт Wordpress elementor Installer 7

Шаг 3. Создайте новую базу данных MySQL

Затем создайте новую базу данных MySQL на хосте, на который вы перенесли свой веб-сайт, вместе с новым пользователем базы данных и паролем.

Держите эту информацию под рукой, потому что она вам понадобится.

Шаг 4: Импортируйте базу данных

Откройте phpMyAdmin на новом веб-хосте и:

  • Найдите базу данных, которую вы только что создали на шаге 3, используя боковую панель слева.
  • Нажмите на вкладку Импортировать
  • Выберите файл базы данных, который вы загрузили с помощью WP Migrate DB на шаге 2.
  • Cliquez-сюр- Go

Как перенести сайт Wordpress elementor Installer 8

Шаг 5: отредактируйте файл wp-config.php

На этом этапе файлы и база данных вашего веб-сайта должны быть в новом месте.

Теперь вам нужно указать своему сайту использовать новую базу данных, созданную на шаге 3.

Для этого отредактируйте файл WP-config.php на перенесенном веб-сайте и введите информацию о новой базе данных:

вручную перенести веб-сайт WordPress Elementor

Шаг 6. Найдите и замените URL-адреса в содержимом Elementor (при изменении домена)

Если вы меняете доменное имя, перейдите на Elementor → Инструменты, Затем щелкните вкладку Заменить URL и используйте этот инструмент для обновления URL-адресов вашего содержимого Elementor:

Шаг 7. Восстановите CSS Elementor

После обновления URL-адресов вашего содержимого Elementor перейдите к Elementor → Инструменты и нажмите на кнопку Восстановить файлы чтобы заставить Elementor регенерировать свой CSS:

вручную перенести веб-сайт WordPress Elementor

У вас есть еще вопросы о том, как перенести WordPress?

На этом мы завершаем наше руководство по переносу WordPress, включая ваш контент Elementor.

Получите Elementor Pro прямо сейчас!

Заключение

Если у вас есть вопросы о том, как безопасно перемещать веб-сайты, созданные с помощью WordPress и Elementor Pro, на новые веб-хосты и / или доменные имена? Дайте нам знать в Комментарии.

Тем не менее, вы также можете проконсультироваться наши ресурсы, если вам нужно больше элементов для реализации ваших проектов создания интернет-сайтов, обратитесь к нашему руководству по Создание блога на WordPress или Divi: лучшая тема WordPress всех времен.

Но тем временем поделитесь этой статьей в разных социальных сетях.

...

Elementor: представляем лучший конструктор страниц WordPress

Elementor: представляем лучший конструктор страниц WordPress

Хотите открыть для себя презентацию лучшего конструктора страниц WordPress: Elementor?

WordPress — самая популярная CMS в мире. Однако, когда дело доходит до разработки страницы во внешнем интерфейсе, набор инструментов WordPress по умолчанию сильно отстает от других платформ для создания сайтов, таких как Wix или Squarespace.

Этот недостаток WordPress начинает исчезать из-за множества мощных плагинов, которые упрощают работу. Именно поэтому мы познакомим вас с этим учебником, плагином WordPress, который позволит вам создавать потрясающие домашние страницы совершенно бесплатно.

Факир это конструктор страниц, который позволяет вам создавать профессионально выглядящие страницы с молниеносной скоростью, и все это будет жить в вашем блоге. Плагин бесплатный и доступен в Каталог плагинов WordPress.

Факир недавно был показан на Охота продукта, и заинтересовал многих пользователей WordPress в группах Facebook.

Вы можете задаться вопросом, как Elementor справляется со многими Page Builder Это уже существует.

Преимущество скорости

Когда мы имеем дело с страница строитель », важен вопрос скорости. Elementor — самый быстрый конструктор страниц на данный момент. То ли в " перетащить Что работает без задержек и быстрой загрузки страниц, разработанных Elementor.

Смотрите также: Как создать карту эффекта из портфолио с помощью Elementor

Скорость и производительность влияют не только на сайт, но и на взаимодействие с пользователем. Идея " создатель страницы «Это позволяет вам работать вживую, не теряя в скорости, является определяющим фактором для пользовательского опыта.

DragDropDesign-интерфейс плагина

Преимущество открытого исходного кода

Elementor имеет открытый исходный код. Хотя есть и другие " создатель страницы «Бесплатный, никакой другой подобный проект с открытым исходным кодом, предлагает эти широкие возможности дизайна, с набором функций и виджетов.

Бесплатная версия будет доступна в ближайшее время, но бесплатная версия все еще позволит пользователям создавать профессиональные страницы.

Смотрите также: Как изменить изображение при наведении на текст с помощью Elementor 

После запуска он был наделен более чем 6 виджетами. Вы можете рассчитывать на это: разделитель, поле значка, окно изображения, галерея сетки, галерея изображений и галерея карусели.

Общественная выгода

Сообщество WordPress играет жизненно важную роль в развитии Elementor. Проект находится на GitHub, и разработчики могут помочь улучшить его.

Смотрите также наш учебник по Как настроить тему WordPress с помощью Elementor

Он также был переведен на несколько языков, включая японский, немецкий и иврит. Это один из немногих " создатель страницы »Совместим с подгузниками RTL (справа налево). Сообщество только растет со временем, что очень многообещающе для будущего плагина.

Эволюция плагина

Elementor был загружен более 10.000 раз. Он был включен в новостную рассылку Product Hunt и уже выиграл более 700 благоприятных голосов. Новые функции добавляются еженедельно.

первый шаг

После установки плагина вы увидите новое меню на приборной панели «Элементор».

Меню Факир WordPress

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

Однако, если вы хотите, например, определить пользовательские форматы публикации, которые будут использовать плагин, вам нужно будет внести некоторые коррективы.

Прочтите наше руководство по Как изменить изображение одним нажатием кнопки с помощью Elementor

Чтобы начать создание страницы, все, что вам нужно сделать, это получить доступ к странице (или к интерфейсу для создания персонализированного типа публикации). Вы заметите на этой странице новую кнопку под названием: " Редактирование с помощью Факир".

Редактор страниц WordPress

После этого вы получите прямой доступ к интерфейсу в своем блоге. Именно оттуда будет действовать вся магия. Таким образом, из этого интерфейса вы можете добавлять элементы, доступные справа, в интерфейс вашего блога. Вы заметите, как быстро все делается.

учебник Факир

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

Получите Elementor Pro прямо сейчас!

Заключение

Вот оно! Вот и все, что касается этой статьи, в которой показано, как изменить изображение при наведении курсора на текст. Если у вас есть какие-либо опасения по поводу того, как туда добраться, сообщите нам об этом в течение Комментарии.

Тем не менее, вы также можете проконсультироваться наши ресурсы, если вам нужно больше элементов для реализации ваших проектов создания интернет-сайтов, обратитесь к нашему руководству по Создание блога на WordPress или Divi: лучшая тема WordPress всех времен.

Но тем временем поделитесь этой статьей в разных социальных сетях.

...

Elementor: как настроить тему WordPress

Elementor: как настроить тему WordPress

Хотите узнать, как настроить тему WordPress с помощью плагина Elementor?

Настройка темы WordPress - одна из основных задач при создании веб-сайтов WordPress. Поскольку она контролирует дизайн веб-сайта, многие профессионалы проводят здесь большую часть своего времени.

Создание собственной темы WordPress обычно включает в себя работу с файлами темы и редактором кода. Изменения макета происходят в файлах шаблонов, изменения дизайна - через CSS. Кроме того, вам придется постоянно обновлять окно браузера, чтобы отображать свои настройки, что может быть немного громоздким.

К счастью, с Факир, этот процесс становится чрезвычайно простым, так что вы можете проверить его.

Но прежде, давайте узнаем вместе Как установить WordPress блог шаги 7 et Как найти, установить и активировать WordPress тему на своем блоге.

Затем вернемся к тому, почему мы здесь.

Что такое тема WordPress

Тема WordPress - это, по сути, набор шаблонов, которые определяют внешний вид веб-сайта WordPress.

Тема WordPress включает в себя все, что влияет на дизайн веб-сайта, от верхних и нижних колонтитулов до цветовой схемы, макета и многого другого.

Доступно множество тем, как бесплатных, так и премиальных, которые подходят практически для любой отрасли, например сайты фотографии, сайты спортзалов, сайты парикмахерских, юридические сайтыИ многое другое.

Зачем настраивать тему WordPress?

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

Можете ли вы представить себе Amazon, eBay или Google такими, какие они есть, без их уникального дизайна?

Конечно, нет, и это одна из причин, по которой мы хотим настроить тему WordPress. Мы хотим сделать его уникальным и адаптироваться к посланию нашей компании.

Кроме того, иногда или, скорее, часто вы запускаете тему WordPress, которая страдает плохим дизайном, цветами, которые не сочетаются друг с другом, или темой, которая слишком тяжелая и только влияет на производительность сайта. веб. Тема WordPress могла бы быть мощной, если бы не то, что вас беспокоит. Настройте его и измените эту вещь, чтобы решить все ваши проблемы и создать лучший пользовательский опыт.

Как настроить тему WordPress

Есть несколько методов настройки темы WordPress.

  1. Вручную через настройщик WordPress
  2. С кодом
  3. С Elementor

Как вручную настроить тему WordPress

Вы можете настроить тему WordPress по своему выбору с помощью встроенного настройщика WordPress. Если вы делаете это без кода, вы часто ограничены в том, что вы можете изменить. Некоторые премиальные темы WordPress предоставляют больше возможностей настройки, но, по сути, для вас не так много вариантов дизайна.

Прежде чем мы углубимся в эту область, мы хотели бы отметить, что когда вы настраиваете существующую тему WordPress, лучше всего использовать дочерняя тема, а не родительская тема.

Дочерняя тема WordPress

Дочерняя тема - это тема WordPress, которая имеет точно такие же функции и характеристики, что и другая тема WordPress, родительская тема. Дочерняя тема используется для безопасной настройки и изменения темы, не затрагивая родительскую тему и не теряя возможности ее обновления. 

Настройщик тем WordPress

Итак, теперь, когда мы знаем, что лучше всего работать с дочерней темой, давайте узнаем, как настроить тему с помощью настройщика WordPress. Чтобы получить к нему доступ, перейдите на свою панель управления, нажмите apparence слева и выберите Персонализировать.

Основные функции, которые вы можете изменить с помощью этого настройщика, следующие:

Добавление названия, логотипа и значка веб-сайта

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

Изменение цвета темы WordPress

Некоторые темы WordPress позволяют изменять их цветовые схемы, но не все, и, как правило, это темы WordPress премиум-класса. Если ваша тема WordPress позволяет вам изменять цветовую схему, вы увидите эту опцию при доступе к Настройщику.

Добавлены меню навигации

Настройщик также позволяет легко добавлять и изменять меню навигации вашего веб-сайта.

Как настроить тему WordPress с помощью кода

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

Здесь у вас будет доступ к таким файлам, как стиль.css, функция.php, и это именно тот сценарий, для которого вам понадобится дочерняя тема, чтобы вы не сломали свой сайт.

Другой способ настроить вашу тему с помощью кодирования - загрузить файлы с помощью FTP. Процесс включает в себя создание учетных данных FTP через вашего хостинг-провайдера, загрузку и установку FTP-решения (например, FileZilla), вход в свою учетную запись и редактирование файлов, которые вы затем загрузите через нее. Решение FTP.

Откройте для себя наш гид по Как установить WordPress с FileZilla

Если вы не знакомы с кодированием, мы не рекомендуем этот вариант.

Легко настраивайте тему WordPress с помощью Elementor

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

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

Elementor значительно упрощает этот процесс, используя динамический контент и позволяя предварительно просматривать свои страницы. Таким образом, вы сразу увидите, как изменения дизайна повлияют на ваш фактический веб-сайт и контент.

Настройте верхний и нижний колонтитулы

Elementor дает вам полную гибкость, когда дело доходит до разработки ваших верхних и нижних колонтитулов. Мы все знаем, как это может быть скучно, когда у вас есть тема WordPress, и вы не можете изменить ни один аспект дизайна верхнего или нижнего колонтитула. Вам нужны специализированные темы, плагины и т. Д.

С Elementor это просто.

1. Создайте шаблон заголовка.

Сначала настройте новый шаблон заголовка. Для этого перейдите в Elementor> Мои шаблоны.

Как настроить элемент темы WordPress или шаблон заголовка 1

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

Как настроить элемент темы WordPress или шаблон заголовка 2

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

Как настроить элемент темы WordPress или шаблон заголовка 3
Он предварительно выберет заголовок в качестве типа шаблона. В любом случае вам нужно добавить подходящее имя для шаблона (чтобы вы знали, какое это имя позже), а затем продолжите, нажав на «Создать шаблон».

Это приведет вас сюда.

Как настроить элемент темы WordPress или шаблон заголовка 4

В Elementor Pro вы можете выбирать из заранее разработанных блоков заголовков. Это шаблоны дизайна, которые вы можете использовать в качестве отправной точки для вашего собственного дизайна, что мы и собираемся сделать в данном случае.

Когда вы наводите указатель мыши на блок заголовка, нажмите Вставить позволяет сразу приступить к его проектированию. В противном случае сначала щелкните изображение, чтобы просмотреть его в увеличенном виде. Тогда вы всегда можете нажать Вставить выше.

Как настроить элемент темы WordPress или шаблон заголовка 5

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

2. Измените основной дизайн заголовка.

После входа в новый заголовок первое, что вы заметите, это то, что логотип и меню, которые мы настроили ранее, уже присутствуют.

Как настроить элемент темы WordPress или шаблон заголовка 6

Именно поэтому мы собрали их вместе и поговорим о том, как их настроить. Однако сначала давайте посмотрим, как настроить сам раздел заголовка.

Для этого просто наведите на него курсор и нажмите кнопку редактирования вверху. Откроется список параметров редактирования слева.

Как настроить элемент темы WordPress или шаблон заголовка 7

Вот что вы можете контролировать в различных меню:

  • макет - Управляйте шириной раздела, размером промежутка между столбцами, его высотой, вертикальным столбцом и размещением содержимого, назначенным тегом HTML и общей структурой.
  • Стиль - Здесь вы можете изменить цвет фона, включая эффекты наведениядаже добавить изображение или видео если хотите, добавьте эффекты наложения, границы и разделителя, а также измените настройки типографики.
  • продвинутый - Эта часть позволяет добавлять атрибуты CSS, такие как маржа и z-индекс, анимации, идентификаторы и классы. Это также позволяет вам сделать раздел липким и управлять настройками, а также добавить некоторые Пользовательский CSS.

Все вышеперечисленное говорит само за себя, и вы быстро получите то, что хотите.

3. Настройте элементы заголовка.

Однако вы можете редактировать не только раздел заголовка в целом, но и элементы, входящие в него. Например, чтобы настроить логотип веб-сайта, просто нажмите на него. Это также предоставит вам возможности редактирования с левой стороны.

Как настроить элемент темы WordPress или шаблон заголовка 8
В случае с логотипом это дает вам следующие возможности:

  • Content - Измените размер изображения, выравнивание и место, с которым оно связано.
  • Стиль - Управляйте шириной и высотой, добавляйте эффекты CSS и эффекты при наведении, включая границы и тени, если хотите.
  • продвинутый - Здесь вы найдете практически те же параметры, что и для раздела заголовка.

Используйте настройки, чтобы настроить логотип так, как вы хотите, чтобы он хорошо отображался в заголовке. Также обратите внимание, что каждый элемент имеет свой собственный тип параметров, поэтому обязательно проверьте каждый из них.

4. Добавьте элементы

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

настроить тему WordPress с помощью плагина Elementor.
При редактировании шаблона заголовка Elementor автоматически отображает соответствующие блоки вверху списка, что имеет наибольший смысл в данных обстоятельствах. В данном случае это логотип веб-сайта, навигационное меню и заголовок веб-сайта.

Так, например, если вы хотите добавить заголовок веб-сайта рядом с логотипом, просто перетащите его на него. Однако выбранный нами в настоящее время шаблон заголовка позволяет нам добавлять его над или под логотипом. Но это проблема, которую легко решить.

В таком случае наведите указатель мыши на заголовок и используйте символ плюса —+-добавить раздел выше.

Как настроить элемент темы WordPress или шаблон заголовка 10

Нажмите здесь на фиолетовую кнопку, чтобы выбрать дизайн из трех столбцов.

Как настроить элемент темы WordPress или шаблон заголовка 11

Затем перетащите элементы из существующего раздела заголовка в новый раздел и добавьте заголовок веб-сайта посередине.

Как настроить элемент темы WordPress или шаблон заголовка 12

Но подождите, стиль совсем другой! без проблем. Просто щелкните правой кнопкой мыши существующий заголовок и выберите Копировать. Затем щелкните правой кнопкой мыши новый раздел и нажмите здесь Вставить стиль. Затем Elementor применит стиль существующего раздела, который вы можете закрыть позже. 

Как настроить элемент темы WordPress или шаблон заголовка 13

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

Настройте уникальный шаблон сообщения

В Elementor вы также можете настроить отдельный шаблон сообщения. Вот как :

1. Создайте новую модель

Создание шаблона работает обычным образом. Однако на этот раз выберите Один как тип модели. Затем ниже выберите уникальный шаблон, который хотите отредактировать. В этом примере пример После.

Как настроить элемент темы WordPress или шаблон заголовка 14

Если вы хотите создать новый дизайн страницы, отредактируйте страницу 404 (подробнее об этом позже) или отредактируйте пользовательский тип сообщения в частности, вы бы выбрали что-нибудь другое. В любом случае введите имя и продолжайте.

На следующем экране вы, как обычно, можете выбрать один из предопределенных шаблонов. Однако в данном случае мы хотим создать новую модель с нуля. Итак, нажмите X в правом верхнем углу, чтобы закрыть это окно.

2. Настройте предварительный просмотр.

Затем установите окно предварительного просмотра для существующего сообщения. Вы можете сделать это, щелкнув значок глаза в нижней части параметров редактора, а затем Настройки.

Как настроить элемент темы WordPress или шаблон заголовка 15

В открывшемся меню под предварительный просмотр динамический контент, выберите Публиковать. После этого в следующей строке вы можете найти и выбрать существующий пост по имени.

Как настроить элемент темы WordPress или шаблон заголовка 16Как только вы это сделаете, нажмите Применить & предварительный просмотр, Хотя в этот момент вы ничего не увидите (так как на странице ничего нет), он скажет Elementor использовать данные из этого сообщения с этого момента. Вы скоро поймете, что это значит.

3. Создадим раздел Выше 

Сначала мы создадим раздел выше. Здесь вы обычно найдете такие вещи, как заголовок сообщения и метаданные, такие как автор, дата и категория.

Первый шаг - нажать на знак + и создание раздела с одним столбцом.

Как настроить элемент темы WordPress или шаблон заголовка 17
Когда вы это сделаете, в разделе макета у вас есть возможность управлять его шириной, высотой, расположением и стилем. В этом случае делать здесь особо нечего. Кроме того, не волнуйтесь, вы всегда можете вернуться и внести изменения позже.

Затем перетащите виджет заголовка сообщения в новый раздел.

Как настроить элемент темы WordPress или шаблон заголовка 18

Когда вы это сделаете, обязательно используйте все доступные параметры, чтобы настроить дизайн и макет по своему вкусу. Например, вот мои настройки для этого:

Как настроить элемент темы WordPress или шаблон заголовка 19

Есть еще одна интересная функция, которую вам стоит изучить. Когда вы нажимаете ключевой символ заголовка сообщения, вы можете добавить статический контент до и после ваших динамических данных.

Например, если вы создаете шаблон для определенной категории сообщений, таких как новости или рецепты, вы можете добавить его в заголовок сообщения следующим образом:

Как настроить элемент темы WordPress или шаблон заголовка 20

Таким образом, эти данные будут отображаться для каждого сообщения в этой категории. Я не собираюсь использовать это сейчас, но подумал, что это важное замечание для вас.

Под заголовком сообщения мы вставим После Инфо виджет для просмотра метаданных сообщения.

Как настроить элемент темы WordPress или шаблон заголовка 21

Вот какие настройки я использую:

Как настроить элемент темы WordPress или шаблон заголовка 22

Кроме того, я использовал параметры стиля, чтобы дизайн соответствовал остальной части страницы. Убедитесь, что вы делаете то же самое.

4. Настройте тело сообщения.

После заголовка пора создать тело страницы. Если вы хотите, чтобы эта часть имела другой дизайн, чем заголовок, вам нужно будет создать новый раздел. Однако я делаю это простым, поэтому мне не нужно.

Первое, что мы хотим вставить, - это избранное изображение. Для этого можно разместить одноименный виджет под тем, что уже есть на странице.

Как настроить элемент темы WordPress или шаблон заголовка 23

Я практически не менял никаких настроек, просто оставил все как есть.

Тогда пришло время опубликовать контент. Здесь у вас тоже есть соответствующий блок.

Как настроить элемент темы WordPress или шаблон заголовка 24
Вы заметите, что для избранного изображения и содержимого публикации Elementor автоматически извлекает то, что уже есть на веб-сайте. Внесите любые необходимые изменения в дизайн нового блока, например, поиграйте с типографскими настройками.

Кроме этого, это все. Здесь не так много работы, чтобы мы могли перейти к последней части.

5. Настройте нижний колонтитул.

В этом случае мы хотим, чтобы в нижнем колонтитуле отображался профиль автора, параметры совместного доступа и комментарии читателей. Для этого, прежде всего, нам нужно создать новый раздел с двумя столбцами. Чтобы освободить больше места для профиля автора, вы можете установить для него макет 66.33.

Как настроить элемент темы WordPress или шаблон заголовка 25

После этого разместите виджет Коробка автора в левом разделе.

Как настроить элемент темы WordPress или шаблон заголовка 26

Обязательно настройте стиль в соответствии со своими потребностями. Я добавил немного цвета фона и немного изменил настройки типографики.

После этого самое время добавить блок кнопок общего доступа с правой стороны.

Как настроить элемент темы WordPress или шаблон заголовка 27

Вы можете увидеть мои настройки на скриншоте выше.

После этого все, что осталось, - это создать раздел еще на один столбец вниз и перетащить в него виджет «Комментарии к публикации».

Как настроить элемент темы WordPress или шаблон заголовка 28

(Кстати, если у вас когда-нибудь возникнут проблемы с поиском любого из этих виджетов, просто воспользуйтесь функцией поиска).

Как настроить элемент темы WordPress или шаблон заголовка 29

Внесите любые изменения в раздел комментариев, которые считаете необходимыми (я оставил его как есть), и вы готовы к публикации. Вот готовый дизайн:

Как настроить элемент темы WordPress или шаблон заголовка 30

Настроить шаблон архива

1. Настройте шаблон архива WordPress.

К настоящему времени вы уже знаете решение по созданию новых моделей. Единственная разница в том, что в этом случае вы выберете архив как тип модели.

Как настроить элемент темы WordPress или шаблон заголовка 31

После этого, как обычно, вы получаете на выбор несколько блоков или можете создать свою собственную модель с нуля. Однако для архивов у вас есть примерно два виджеты Elementor, которые в любом случае важны.

2. Определите заголовок архива.

Первый блок, о котором я хочу рассказать, - это заголовок архива. Название архива.

Как настроить элемент темы WordPress или шаблон заголовка 32

В дополнение к обычным настройкам в Стиль и продвинутый, вы можете найти важную опцию, нажав на символ ключа под Заглавие.

Как настроить элемент темы WordPress или шаблон заголовка 33

Здесь вы можете включить или отключить отображение Elementor типа архива на странице, как в той части, где написано Автор: ниже. Это происходит через кнопку под Включить контекст

Кстати, как обычно, вы можете предварительно просмотреть разные архивы, используя настройки предварительного просмотра (Символ глаза> Настройки). Таким образом вы сможете увидеть дизайн уникальных категорий, тегов, авторов и т. Д. Имейте это в виду.

3. Воспользуйтесь блоком архивных публикаций.

Второй важный виджет для архивов - это Архив сообщений. Это помещает все сообщения, принадлежащие любому архиву, на одной странице. Когда вы выбираете шаблон, они уже есть, но вы также можете легко добавить их самостоятельно с помощью этого блока.

Как настроить элемент темы WordPress или шаблон заголовка 34

Давайте посмотрим на параметры, которые он дает вам для настройки страниц архива:

  • Кожа - Выберите отображение ваших сообщений в классическом или карточном стиле.
  • Колонны - Определяет количество столбцов, в которых отображаются ваши сообщения.
  • Показать изображение - Активировать избранные изображения на страницах архива
  • Каменная кладка - Отображает элементы в дизайне каменной кладки или нет.
  • Размер изображения - Размер изображения, которое Elementor следует использовать на страницах архива.
  • Название - Вы хотите отображать заголовки постов или нет?
  • HTML-тег заголовка - Если да, то какой HTML-тег следует обернуть вокруг него?
  • выдержка - Включите отрывки из ваших сообщений или покажите только заголовок.
  • Фиксированная длина - Определите длину выписок.
  • Метаданные - Определяет метаданные публикации, доступные посетителям.
  • Разделитель между - Символ-разделитель между метаданными.
  • Читать далее - Включите ссылку "подробнее", да или нет?
  • Значок - Позволяет добавлять к сообщениям дополнительную информацию, например категории и теги.
  • Значок таксономии - Здесь вы можете решить, какую информацию включить.
  • Аватар - С помощью этого вы можете изменить изображение профиля авторов статей

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

Enfin, Дополнительно позволяет вам установить сообщение, которое будет отображаться, когда посетитель попадет в пустой архив. Все остальное должно быть знакомо. Просто обратите внимание, что параметры стиля меняются в зависимости от выбранного вами скина.

4. Контроль количества публикаций в архиве.

Небольшая заметка о шаблонах архивов. Чтобы изменить количество сообщений, которые появляются в архиве (или на странице вашего блога), вам необходимо сделать это в WordPress в разделе Настройки> Чтение. 

Как настроить элемент темы WordPress или шаблон заголовка 35

Здесь просто введите количество сообщений, которое вы хотите, чтобы ваши посетители видели.

воплощение легко Тема WordPress с Elementor

Настройка тем WordPress — это хлеб с маслом для многих профессионалов. Хотя это обычно требует большого количества кодирования и редактирования файлов, с Elementor в этом больше нет необходимости.

Как вы видели выше, плагин представляет собой полноценный редактор тем WordPress. Он позволяет настраивать каждую его часть из пользовательского интерфейса. Вы можете редактировать верхний и нижний колонтитулы веб-сайта, шаблоны страниц и сообщений, шаблоны архивов и многое другое.

Имея возможность использовать динамический контент и предварительно просматривать любую часть вашего веб-сайта, вы можете реализовать все модные настройки.

Короче говоря, Elementor позволяет легко настроить тему WordPress. Вместо того, чтобы кропотливо вносить изменения в десятки файлов и сотни строк кода, вы можете быстро сделать все это в одном месте.

Получите Elementor Pro прямо сейчас!

Заключение

Вот оно! Вот и все, что касается этой статьи, в которой показано, как настроить тему WordPress с помощью Elementor конструктора страниц. Если у вас есть какие-либо опасения по поводу того, как туда добраться, сообщите нам об этом в течение Комментарии.

Тем не менее, вы также можете проконсультироваться наши ресурсы, если вам нужно больше элементов для реализации ваших проектов создания интернет-сайтов, обратитесь к нашему руководству по Создание блога на WordPress или Divi: лучшая тема WordPress всех времен.

Но тем временем поделитесь этой статьей в разных социальных сетях.

...