Пропустить

Как создать полноценный веб-сайт с Elementor

Divi: самая простая тема WordPress для использования

Divi: Лучшая тема WordPress всех времен!

Более Загрузка 600.000, Divi - самая популярная тема WordPress в мире. Он является полным, простым в использовании и поставляется с более чем бесплатными шаблонами 62. [Рекомендуется]

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

В сочетании с Elementor Pro эти темы помогут вам быстро начать работу со всеми частями вашего веб-сайта, включая:

пстатический возраст, например на главной странице,

  • заголовок
  • нижний колонтитул
  • стр. 404
  • раздел Архив
  • блог
  • Всплывающие окна и прочее

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

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

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

Как создать полноценный веб-сайт с темами Elementor

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

Точнее тема Цифровое агентство.

На вашем веб-сайте будет несколько основных страниц, например:

  • Добро пожаловать
  • О
  • Сервисы
  • Клиенты
  • Блог
  • Контакты

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

Итак, вот как создать веб-сайт с темой Elementor:

1. Установите и активируйте тему Elementor Hello.

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

Вместо этого вам просто понадобится легкий, оптимизированный для производительности веб-сайт, который предоставляет тема Elementor Hello.

Чтобы начать, перейдите к Внешний вид → Темы → Добавить и поиск " Привет Элементор». Затем установите и активируйте тему.

2. Настройте основные статические страницы вашего сайта.

Затем зайдите в меню Страницы → Добавить для создания основных страниц вашего сайта.

Сначала создайте страницу с названием " Добро пожаловать И нажмите кнопку «Редактировать с помощью Elementor», чтобы запустить Elementor.

открытый Настройки страницы и изменить его раскладка так что он равен Elementor во всю ширину.

Затем откройте библиотеку шаблонов Elementor и найдите "Цифровое агентство" в Страницы :

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

Теперь вы должны увидеть полную домашнюю страницу. Заголовок пока выглядит скучновато, но не волнуйтесь, скоро мы это исправим..

Затем используйте Elementor Finder, чтобы добавить еще одну страницу для своей страницы " О».

Как и раньше, измените Layout - Макет страницы - à Elementor Полная ширина, Затем откройте библиотеку шаблонов и вставьте шаблон O нас темы Digital Agency.

Теперь просто повторите тот же процесс для создания всех остальных страниц, включая: Сервисы, Клиенты и Контакт.

Легко создайте свой сайт с Elementor

Elementor позволяет легко создать любой дизайн сайта с профессиональным дизайном. Прекратите платить дорого за то, что вы можете сделать сами. [Free]

Пока не беспокойтесь о странице блога. Эта страница не статична, как другие. По этой причине вы будете создавать его там с помощью другого метода (который мы рассмотрим позже в этом руководстве).

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

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

3. Создайте другие части своего веб-сайта.

Теперь вы готовы создать другие части вашего сайта с помощью Elementor. Elementor позволяет вам не ограничиваться созданием статических страниц (как вы это делали выше).

С Elementor вы также можете создавать такие разделы, как: eн-головка; нижний колонтитул и т. д.

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

Чтобы получить доступ к визуальному конструктору Elementor, перейдите в Шаблоны → Конструктор тем. Вам нужно будет установить Elementor Pro, чтобы получить к нему доступ.

Пришло время создать свои разделы

заголовок

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

Затем вы увидите набор шаблонов в библиотеке Elementor. Как и в случае со статическими страницами, найдите «Цифровое агентство» и вставьте его:

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

На данный момент меню навигации пусто, потому что вы еще не создали меню. Чтобы создать свое меню ...

  • перейти к Внешний вид → Меню в вашей панели WordPress
  • Дайте своему меню имя
  • Cliquez-сюр- Создать меню

После того, как вы создали меню, вы можете добавить страницы, созданные на шаге № 2, в свое меню навигации.

Читайте также: 10 инструментов автоматизации для маркетинга малого бизнеса

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

Ensuite, публиковать заголовок и используйте условия отображения для отображения шаблона заголовка на всем веб-сайте. При желании вы также можете использовать условия отображения для создания разных заголовков для разных типов контента:

Затем нажмите Сохранить и закрыть.

нижний колонтитул

Пришло время создать нижний колонтитул вашего сайта:

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

Теперь вы должны увидеть список шаблонов нижнего колонтитула, как и в случае с вашим заголовком. Найдите "Digital Agency" и вставьте шаблон нижнего колонтитула.

После того, как вы вставили шаблон нижнего колонтитула, вы должны увидеть предварительный просмотр нижнего колонтитула:

Вы ищете лучшие темы и плагины WordPress?

Загрузите лучшие плагины и темы WordPress на Envato и легко создайте свой сайт. Уже больше, чем 49.720.000. [ЭКСКЛЮЗИВ]

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

страница Блог

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

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

Откройте для себя Как добавить оглавление в WordPress с помощью Elementor

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

Для начала ...

  • Откройте интерфейс Theme Builder.
  • Перейдите на вкладку Архив
  • Нажмите на Добавить новый архив
  • Дайте ему имя и нажмите «Создать шаблон».

Как и в случае с верхним и нижним колонтитулами, вы увидите список шаблонов страниц архива. Найдите шаблон «Цифровое агентство» и вставьте его.

Теперь вы должны увидеть базовый дизайн своей страницы новостей, хотя единственным контентом по умолчанию будет «Hello World!». Из WordPress:

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

Прочтите наше руководство по Как вручную перенести сайт WordPress

Затем вы можете перейти в область обычных сообщений WordPress и создать новые сообщения в блоге. Отнесите каждую статью к категории под названием «Помимо новостей».

Теперь, когда вы перейдете на страницу архива, вы должны автоматически увидеть все эти новые сообщения:

Создание страницы шаблона сообщения в блоге

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

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

  • Открыть визуальный конструктор Elementor
  • Перейдите на вкладку Single
  • Cliquez-сюр- Добавить новый сингл

Во всплывающем окне Новый шаблон :

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

И снова вы увидите библиотеку шаблонов Elementor. Найдите уникальный шаблон статьи шаблона «Цифровое агентство» и вставьте его.

Читайте также Режим обслуживания на WordPress: объяснение и настройка

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

Например, если вы измените виджет Сообщение, вы сможете управлять отображаемыми элементами метаданных, как в публикации ...

  • Автор
  • Дата публикации
  • комментарии
  • И т.д.

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

  • Выберите из catégorie
  • Выберите категорию Помимо новостей

Затем нажмите Регистрация et закрывать.

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

Легко создайте свой интернет-магазин

Загрузите бесплатные WooCommerce, лучшие плагины для электронной коммерции, чтобы продавать свои физические и цифровые продукты в WordPress. [Рекомендуется]

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

Страница 404

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

Откройте для себя также наш 5 WordPress плагины лучше управлять ошибками 404

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

Вставьте шаблон страницы 404, как описано выше. Затем опубликуйте свой шаблон, чтобы завершить свой веб-сайт.

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

Заключение

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

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

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

...

Эта статья содержит комментарии 0

Оставить комментарий

Ваш электронный адрес не будет опубликован. Обязательные для заполнения поля помечены *

Этот сайт использует Akismet для уменьшения нежелательности. Узнайте больше о том, как используются ваши комментарии.

Вверх
0 акции
доля
чирикать
Регистрация