Хотите узнать, как настроить тему WordPress с помощью Elementor плагин ?
Настройка темы WordPress - одна из основных задач при создании веб-сайтов WordPress. Поскольку она контролирует дизайн веб-сайта, многие профессионалы проводят здесь большую часть своего времени.
Создание собственной темы WordPress обычно включает в себя работу с файлами темы и редактором кода. Изменения макета происходят в файлах шаблонов, изменения дизайна - через CSS. Кроме того, вам придется постоянно обновлять окно браузера, чтобы отображать свои настройки, что может быть немного громоздким.
К счастью, с Факир, этот процесс становится чрезвычайно простым, так что вы можете проверить его.
Но прежде, давайте узнаем вместе Как установить WordPress блог шаги 7 et Как найти, установить и активировать WordPress тему на своем блоге.
Затем вернемся к тому, почему мы здесь.
Что такое тема WordPress
Тема WordPress - это, по сути, набор шаблонов, которые определяют внешний вид веб-сайта WordPress.
Тема WordPress включает в себя все, что влияет на дизайн веб-сайта, от верхних и нижних колонтитулов до цветовой схемы, макета и многого другого.
Доступно множество тем, как бесплатных, так и премиальных, которые подходят практически для любой отрасли, например сайты фотографии, сайты спортзалов, сайты парикмахерских, юридические сайтыИ многое другое.
Зачем настраивать тему WordPress?
Одной из основных причин создания веб-сайта является продвижение вашего бизнеса. Какой лучший способ сделать это, чем создать сайт уникальный, который продвигает стиль и дизайн компании.
Можете ли вы представить себе Amazon, eBay или Google такими, какие они есть, без их уникального дизайна?
Конечно, нет, и это одна из причин, по которой мы хотим настроить тему WordPress. Мы хотим сделать его уникальным и адаптироваться к посланию нашей компании.
Кроме того, иногда или, скорее, часто вы запускаете тему WordPress, которая страдает плохим дизайном, цветами, которые не сочетаются друг с другом, или темой, которая слишком тяжелая и только влияет на производительность сайта. веб. Тема WordPress могла бы быть мощной, если бы не то, что вас беспокоит. Настройте его и измените эту вещь, чтобы решить все ваши проблемы и создать лучший пользовательский опыт.
Как настроить тему WordPress
Есть несколько методов настройки темы WordPress.
- Вручную через настройщик WordPress
- С кодом
- С Elementor
Как вручную настроить тему WordPress
Вы можете настроить тему WordPress по вашему выбору с помощью встроенного настройщика WordPress. Если вы делаете это без кода, вы часто ограничены в том, что вы можете изменить. Немного Темы WordPress Premium предоставляет вам больше возможностей для настройки, но, по сути, у вас не так много вариантов дизайна.
Прежде чем мы углубимся в эту область, мы хотели бы отметить, что когда вы настраиваете существующую тему 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> Мои шаблоны.
Один из способов начать - нажать кнопку «Добавить» вверху. На следующем экране используйте раскрывающееся меню, чтобы выбрать заголовок в качестве типа шаблона для разработки.
Вы также можете перейти на этот экран, щелкнув вкладку «Заголовок» на предыдущем экране, а затем нажав появившуюся большую зеленую кнопку.
Он предварительно выберет заголовок в качестве типа шаблона. В любом случае вам нужно добавить подходящее имя для шаблона (чтобы вы знали, какое это имя позже), а затем продолжите, нажав на «Создать шаблон».
Это приведет вас сюда.
В Elementor Pro вы можете выбирать из заранее разработанных блоков заголовков. Это шаблоны дизайна, которые вы можете использовать в качестве отправной точки для вашего собственного дизайна, что мы и собираемся сделать в данном случае.
Когда вы наводите указатель мыши на блок заголовка, нажмите Вставить позволяет сразу приступить к его проектированию. В противном случае сначала щелкните изображение, чтобы просмотреть его в увеличенном виде. Тогда вы всегда можете нажать Вставить выше.
В противном случае, если вы хотите начать с нуля, просто закройте окно, нажав X в правом верхнем углу.
2. Измените основной дизайн заголовка.
После входа в новый заголовок первое, что вы заметите, это то, что логотип и меню, которые мы настроили ранее, уже присутствуют.
Именно поэтому мы собрали их вместе и поговорим о том, как их настроить. Однако сначала давайте посмотрим, как настроить сам раздел заголовка.
Для этого просто наведите на него курсор и нажмите кнопку редактирования вверху. Откроется список параметров редактирования слева.
Вот что вы можете контролировать в различных меню:
- Планировка - Управляйте шириной раздела, размером промежутка между столбцами, его высотой, вертикальным столбцом и размещением содержимого, назначенным тегом HTML и общей структурой.
- Стиль - Здесь вы можете изменить цвет фона, включая эффекты наведениядаже добавить изображение или видео если хотите, добавьте эффекты наложения, границы и разделителя, а также измените настройки типографики.
- продвинутый - Эта часть позволяет добавлять атрибуты CSS, такие как маржа и z-индекс, анимации, идентификаторы и классы. Это также позволяет вам сделать раздел липким и управлять настройками, а также добавить некоторые Пользовательский CSS.
Все вышеперечисленное говорит само за себя, и вы быстро получите то, что хотите.
3. Настройте элементы заголовка.
Однако вы можете редактировать не только раздел заголовка в целом, но и элементы, входящие в него. Например, чтобы настроить логотип веб-сайта, просто нажмите на него. Это также предоставит вам возможности редактирования с левой стороны.
В случае с логотипом это дает вам следующие возможности:
- Содержание - Измените размер изображения, выравнивание и место, с которым оно связано.
- Стиль - Управляйте шириной и высотой, добавляйте эффекты CSS и эффекты при наведении, включая границы и тени, если хотите.
- продвинутый - Здесь вы найдете практически те же параметры, что и для раздела заголовка.
Используйте настройки, чтобы настроить логотип так, как вы хотите, чтобы он хорошо отображался в заголовке. Также обратите внимание, что каждый элемент имеет свой собственный тип параметров, поэтому обязательно проверьте каждый из них.
4. Добавьте элементы
Конечно, с Elementor вы также можете добавлять элементы в заголовок. Просто нажмите на символ в правом верхнем углу, чтобы увидеть, что доступно.
При редактировании шаблона заголовка Elementor автоматически отображает соответствующие блоки вверху списка, что имеет наибольший смысл в данных обстоятельствах. В данном случае это логотип веб-сайта, навигационное меню и заголовок веб-сайта.
Так, например, если вы хотите добавить заголовок веб-сайта рядом с логотипом, просто перетащите его на него. Однако выбранный нами в настоящее время шаблон заголовка позволяет нам добавлять его над или под логотипом. Но это проблема, которую легко решить.
В таком случае наведите указатель мыши на заголовок и используйте символ плюса —+-добавить раздел выше.
Нажмите здесь на фиолетовую кнопку, чтобы выбрать дизайн из трех столбцов.
Затем перетащите элементы из существующего раздела заголовка в новый раздел и добавьте заголовок веб-сайта посередине.
Но подождите, стиль совсем другой! без проблем. Просто щелкните правой кнопкой мыши существующий заголовок и выберите Копировать. Затем щелкните правой кнопкой мыши новый раздел и нажмите здесь Вставить стиль. Затем Elementor применит стиль существующего раздела, который вы можете закрыть позже.
Вы можете проделать тот же процесс с любыми другими элементами заголовка и, конечно же, со всеми другими элементами, включенными в Elementor.
Настройте уникальный шаблон сообщения
В Elementor вы также можете настроить отдельный шаблон сообщения. Вот как :
1. Создайте новую модель
Создание шаблона работает обычным образом. Однако на этот раз выберите Один как тип модели. Затем ниже выберите уникальный шаблон, который хотите отредактировать. В этом примере пример После.
Если вы хотите создать новый дизайн страницы, отредактируйте страницу 404 (подробнее об этом позже) или отредактируйте пользовательский тип сообщения в частности, вы бы выбрали что-нибудь другое. В любом случае введите имя и продолжайте.
На следующем экране вы, как обычно, можете выбрать один из предопределенных шаблонов. Однако в данном случае мы хотим создать новую модель с нуля. Итак, нажмите X в правом верхнем углу, чтобы закрыть это окно.
2. Настройте предварительный просмотр.
Затем установите окно предварительного просмотра для существующего сообщения. Вы можете сделать это, щелкнув значок глаза в нижней части параметров редактора, а затем Настройки.
В открывшемся меню под предварительный просмотр динамический контент, выберите Публиковать. После этого в следующей строке вы можете найти и выбрать существующий пост по имени.
Как только вы это сделаете, нажмите Применить & предварительный просмотр, Хотя в этот момент вы ничего не увидите (так как на странице ничего нет), он скажет Elementor использовать данные из этого сообщения с этого момента. Вы скоро поймете, что это значит.
3. Создадим раздел Выше
Сначала мы создадим раздел выше. Здесь вы обычно найдете такие вещи, как заголовок сообщения и метаданные, такие как автор, дата и категория.
Первый шаг - нажать на знак + и создание раздела с одним столбцом.
Когда вы это сделаете, в разделе макета у вас есть возможность управлять его шириной, высотой, расположением и стилем. В этом случае делать здесь особо нечего. Кроме того, не волнуйтесь, вы всегда можете вернуться и внести изменения позже.
Затем перетащите виджет заголовка сообщения в новый раздел.
Когда вы это сделаете, обязательно используйте все доступные параметры, чтобы настроить дизайн и макет по своему вкусу. Например, вот мои настройки для этого:
Есть еще одна интересная функция, которую вам стоит изучить. Когда вы нажимаете ключевой символ заголовка сообщения, вы можете добавить статический контент до и после ваших динамических данных.
Например, если вы создаете шаблон для определенной категории сообщений, таких как новости или рецепты, вы можете добавить его в заголовок сообщения следующим образом:
Таким образом, эти данные будут отображаться для каждого сообщения в этой категории. Я не собираюсь использовать это сейчас, но подумал, что это важное замечание для вас.
Под заголовком сообщения мы вставим После Инфо виджет для просмотра метаданных сообщения.
Вот какие настройки я использую:
Кроме того, я использовал параметры стиля, чтобы дизайн соответствовал остальной части страницы. Убедитесь, что вы делаете то же самое.
4. Настройте тело сообщения.
После заголовка пора создать тело страницы. Если вы хотите, чтобы эта часть имела другой дизайн, чем заголовок, вам нужно будет создать новый раздел. Однако я делаю это простым, поэтому мне не нужно.
Первое, что мы хотим вставить, - это избранное изображение. Для этого можно разместить одноименный виджет под тем, что уже есть на странице.
Я практически не менял никаких настроек, просто оставил все как есть.
Тогда пришло время опубликовать контент. Здесь у вас тоже есть соответствующий блок.
Вы заметите, что для избранного изображения и содержимого публикации Elementor автоматически извлекает то, что уже есть на веб-сайте. Внесите любые необходимые изменения в дизайн нового блока, например, поиграйте с типографскими настройками.
Кроме этого, это все. Здесь не так много работы, чтобы мы могли перейти к последней части.
5. Настройте нижний колонтитул.
В этом случае мы хотим, чтобы в нижнем колонтитуле отображался профиль автора, параметры совместного доступа и комментарии читателей. Для этого, прежде всего, нам нужно создать новый раздел с двумя столбцами. Чтобы освободить больше места для профиля автора, вы можете установить для него макет 66.33.
После этого разместите виджет Коробка автора в левом разделе.
Обязательно настройте стиль в соответствии со своими потребностями. Я добавил немного цвета фона и немного изменил настройки типографики.
После этого самое время добавить блок кнопок общего доступа с правой стороны.
Вы можете увидеть мои настройки на скриншоте выше.
После этого все, что осталось, - это создать раздел еще на один столбец вниз и перетащить в него виджет «Комментарии к публикации».
(Кстати, если у вас когда-нибудь возникнут проблемы с поиском любого из этих виджетов, просто воспользуйтесь функцией поиска).
Внесите любые изменения в раздел комментариев, которые считаете необходимыми (я оставил его как есть), и вы готовы к публикации. Вот готовый дизайн:
Настроить шаблон архива
1. Настройте шаблон архива WordPress.
К настоящему времени вы уже знаете решение по созданию новых моделей. Единственная разница в том, что в этом случае вы выберете архив как тип модели.
После этого, как обычно, вы получаете на выбор несколько блоков или можете создать свою собственную модель с нуля. Однако для архивов у вас есть примерно два виджеты Elementor, которые в любом случае важны.
2. Определите заголовок архива.
Первый блок, о котором я хочу рассказать, - это заголовок архива. Название архива.
В дополнение к обычным настройкам в Стиль и продвинутый, вы можете найти важную опцию, нажав на символ ключа под Заглавие.
Здесь вы можете включить или отключить отображение Elementor типа архива на странице, как в той части, где написано Автор: ниже. Это происходит через кнопку под Включить контекст.
Кстати, как обычно, вы можете предварительно просмотреть разные архивы, используя настройки предварительного просмотра (Символ глаза> Настройки). Таким образом вы сможете увидеть дизайн уникальных категорий, тегов, авторов и т. Д. Имейте это в виду.
3. Воспользуйтесь блоком архивных публикаций.
Второй важный виджет для архивов - это Архив сообщений. Это помещает все сообщения, принадлежащие любому архиву, на одной странице. Когда вы выбираете шаблон, они уже есть, но вы также можете легко добавить их самостоятельно с помощью этого блока.
Давайте посмотрим на параметры, которые он дает вам для настройки страниц архива:
- Кожа - Выберите отображение ваших сообщений в классическом или карточном стиле.
- Колонки - Определяет количество столбцов, в которых отображаются ваши сообщения.
- Показать изображение - Активировать избранные изображения на страницах архива
- Каменная кладка - Отображает элементы в дизайне каменной кладки или нет.
- Размер изображения - Размер изображения, которое Elementor следует использовать на страницах архива.
- Название - Вы хотите отображать заголовки постов или нет?
- HTML-тег заголовка - Если да, то какой HTML-тег следует обернуть вокруг него?
- выдержка - Включите отрывки из ваших сообщений или покажите только заголовок.
- Фиксированная длина - Определите длину выписок.
- Метаданные - Определяет метаданные публикации, доступные посетителям.
- Разделитель между - Символ-разделитель между метаданными.
- Узнать больше - Включите ссылку "подробнее", да или нет?
- Значок - Позволяет добавлять к сообщениям дополнительную информацию, например категории и теги.
- Значок таксономии - Здесь вы можете решить, какую информацию включить.
- Аватара - С помощью этого вы можете изменить изображение профиля авторов статей
В дополнение к вышесказанному у вас есть еще несколько вариантов. Под пейджинг, вы можете определить, как следует обрабатывать подкачку архива. Например, как его отображать, количество страниц для включения и выравнивание текста.
Enfin, Фильтр позволяет вам установить сообщение, которое будет отображаться, когда посетитель попадет в пустой архив. Все остальное должно быть знакомо. Просто обратите внимание, что параметры стиля меняются в зависимости от выбранного вами скина.
4. Контроль количества публикаций в архиве.
Небольшая заметка о шаблонах архивов. Чтобы изменить количество сообщений, которые появляются в архиве (или на странице вашего блога), вам необходимо сделать это в WordPress в разделе Настройки> Чтение.
Здесь просто введите количество сообщений, которое вы хотите, чтобы ваши посетители видели.
воплощение легко Тема WordPress с Elementor
Настройка тем WordPress — это хлеб с маслом для многих профессионалов. Хотя это обычно требует большого количества кодирования и редактирования файлов, с Elementor в этом больше нет необходимости.
Как вы видели выше, плагин представляет собой полноценный редактор тем WordPress. Он позволяет настраивать каждую его часть из пользовательского интерфейса. Вы можете редактировать верхний и нижний колонтитулы веб-сайта, шаблоны страниц и сообщений, шаблоны архивов и многое другое.
Имея возможность использовать динамический контент и предварительно просматривать любую часть вашего веб-сайта, вы можете реализовать все модные настройки.
Короче говоря, Elementor позволяет легко настроить тему WordPress. Вместо того, чтобы кропотливо вносить изменения в десятки файлов и сотни строк кода, вы можете быстро сделать все это в одном месте.
Получите Elementor Pro прямо сейчас!
Заключение
Вот оно! Вот и все, что касается этой статьи, в которой показано, как настроить тему WordPress с помощью Elementor конструктора страниц. Если у вас есть какие-либо опасения по поводу того, как туда добраться, сообщите нам об этом в течение Комментарии.
Тем не менее, вы также можете проконсультироваться наши ресурсы, если вам нужно больше элементов для реализации ваших проектов создания интернет-сайтов, обратитесь к нашему руководству по Создание блога на WordPress или Divi: лучшая тема WordPress всех времен.
Но тем временем поделитесь этой статьей в разных социальных сетях.
...
