Из этого руководства по WordPress вы узнаете, как создать веб-сайт с помощью Elementor всего за 3 минуты благодаря Elementor Cloud, автоматизированному решению для создания Блог WordPress с Elementorдля начинающих и опытных блоггеров или веб-мастеров.
Если вы предпочитаете следовать видеоруководству, нажмите кнопку над следующим видео:
Создание собственного веб-сайта без обучения программированию или найма разработчика было практически невозможным. Однако благодаря таким платформам, как WordPress, и плагинам, таким как Elementor, то, что когда-то было невыполнимой миссией, теперь стало реальностью.
В этом уроке мы покажем вам, как использовать WordPress и Elementor для создания нового веб-сайта, и шаг за шагом проведем вас через этот процесс.
WordPress это мощная система управления контентом, которую можно загрузить и использовать бесплатно, и которая позволяет создавать веб-сайты любого типа; от простых личных блогов и веб-сайтов для малого бизнеса до крупных корпоративных веб-сайтов и многофункциональных приложений.
Факир, с другой стороны, представляет собой простой в использовании, но надежный конструктор страниц, который позволяет любому легко создать свой веб-сайт, независимо от его сложности.
В этом уроке мы покажем вам, как создать веб-сайт WordPress за три минуты с помощью новой платформы Elementor Cloud. Название может быть сильным, но решение действительно автоматизировано и легко для любого новичка.
самое первое — перейти на страницу Elementor, перейти к нижней части страницы и найти ссылку Elementor Cloud.
Вы будете перенаправлены на новую страницу. Прокрутите вниз и найдите раздел НЕТ СКРЫТЫХ ФЕЕЙ. Справа нажмите на кнопку Купить сейчас Как на картинке ниже.
Откроется страница оплаты, и вам будет предложено ввести свой адрес электронной почты. После входа в него нажмите на кнопку Создать учетную запись
Затем на следующей странице введите страну, штат, адрес, почтовый индекс и т. д., затем нажмите кнопку Продолжить
После этого выберите способ оплаты. Вы можете выбрать между кредитной картой или PayPal. Мы выбрали метод PayPal.
Нажмите на желтую кнопку PayPal в правой части экрана.
Un всплывающее окно откроется, и вам будет предложено ввести данные для входа в PayPal и подтвердить.
Если процедура прошла успешно, вы будете перенаправлены на страницу благодарности с двумя кнопками. Первое Перейти в мой аккаунт перенесет вас в вашу учетную запись и второй Начните создавать свой сайт к автоматизированному созданию вашего веб-сайта.
Нажмите на вторую кнопку. Вы получите право на новое всплывающее окно, которое предложит вам ввести имя вашего веб-сайта. Подтвердите, нажав на Далее.
Дождитесь окончания автоматической процедуры создания вашего сайта и нажмите на кнопку Пойдем!
Cliquez-сюр- Got It как на картинке ниже.
Нажмите «Открыть панель управления WP», чтобы открыть панель управления.
В новом всплывающем окне приветствия нажмите кнопку Используйте комплект веб-сайта
Вам будет предложено выбрать шаблон сайта из списка, который предлагает Elementor. У вас будет возможность отфильтровать их по категориям, нажав на одну из них слева.
Если вы нашли модель, соответствующую вашим стремлениям, наведите на нее указатель мыши, появится новая кнопка, нажмите на Посмотреть демо
Вы сможете увидеть, что предлагает эта модель. Вы сможете перемещаться по всем страницам этой модели и, если она вас устраивает, нажмите кнопку Применить комплект который установит шаблон на ваш сайт.
Если нет, кнопка Назад в библиотеку вернет вас к списку шаблонов, и вы сможете проверить еще один.
После нажатия на Применить комплект, всплывающее окно с подтверждением спросит вас, действительно ли вы хотите установить всю эту модель или только несколько страниц. Вы можете нажать Применить все ou Настройки чтобы настроить ваш выбор.
Будет представлена сводка вашего выбора, нажмите на Далее
Наконец нажмите на Вернуться к панели инструментов чтобы вернуться на панель инструментов вашего сайта.
На панели инструментов нажмите Название моего сайта вверху и слева от экрана, затем на Vсайт чтобы узнать, как работает ваш сайт.
И вот вы только что создали свой сайт на WordPress с помощью Elementor Cloud.
Все, что осталось сделать, это настроить его, как вы хотите. Для этого мы предлагаем Комплект учебников Elementor которые мы предлагаем вам открыть для себя.
Когда вы закончите с этим руководством, вы можете просмотреть другие наши руководства и учебные пособия для более конкретных страниц.
Так ! Вот и все для этой статьи, которая покажет вам, как создать веб-сайт с Elementor за 3 минуты. Если у вас есть какие-либо опасения по поводу того, как туда добраться, сообщите нам об этом в течение Комментарии.
Нужно узнать, как добавить звуковой эффект кнопки в Elementor? Узнайте в этой статье.
Вы видите эти 2 кнопки?
Когда вы нажимаете на Кота, он издаст мяу, а когда вы нажмете кнопку на Цзянь, он будет издавать лай. В этой статье мы покажем вам, как добавить в Факир звуковой эффект для кнопки при нажатии.
Как добавить звуковой эффект к кнопке в Elementor
Шаг 1. Создайте кнопку
Во-первых, вам нужно создать кнопку, вы можете настроить кнопку по своему усмотрению, потому что у Elementor есть много вариантов, чтобы ваша кнопка выглядела красиво.
Шаг 2: Подготовьте ссылку на звуковой эффект
Как только кнопка будет готова, подготовьте звуковой эффект для кнопки и загрузите его в медиатеку WordPress. Вы можете использовать формат файла MP3 или WAV для звукового эффекта.
Чтобы загрузить звуковой файл в медиатеку WordPress, перейдите на панель инструментов WordPress и нажмите Медиа -> Добавить. Вы можете перетащить файлы или нажать Выбрать файлы загрузить их.
Как только файлы будут загружены, зайдите в медиатеку и нажмите на один из звуков, затем в появившемся окне скопируйте URL-адрес файла чтобы получить ссылку на звуковой эффект.
Шаг 3. Добавьте следующий HTML-код.
Чтобы воспроизвести звук с кнопки, нам нужно использовать следующий HTML-код.
Добавьте виджет HTML в область холста и вставьте код в блок HTML код.
Используйте ссылку на звуковой эффект, чтобы заменить URL-адрес звукового эффекта в инструкции
var audio1 = new Audio('Sound-Effect-URL')
Выберите классы CSS для кнопки и измените код классов Класс CSS кнопки
$(".button-class").mousedown
После модификации кода это будет выглядеть так.
Шаг 4: Добавьте класс CSS к кнопке
Чтобы связать кнопку с кодами, нам нужно добавить к кнопке классы CSS, чтобы код знал, какая кнопка нажата, и запускал звуковые эффекты.
А это для кнопки со звуковым эффектом. Теперь вы можете настроить свою кнопку. И если вы хотите добавить больше кнопок со звуковыми эффектами, это можно сделать, скопировав часть кода и немного изменив его.
Добавлены дополнительные кнопки со звуковыми эффектами
Создайте кнопку или скопируйте существующую кнопку
Вы можете скопировать существующую кнопку, щелкнув существующую кнопку правой кнопкой мыши и выбрав «Копировать», а затем вставив ее в любой раздел, щелкнув правой кнопкой мыши внутри этого раздела.
Скопируйте часть кода и настройте переменные и имя класса 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.
Затем замените URL-адрес звукового эффекта, если вы используете новый звуковой эффект для новой кнопки, и измените код. класс кнопки в ваших недавно созданных классах CSS кнопок.
Окончательный код будет выглядеть следующим образом.
Замените имя класса CSS кнопки
Ваша вновь созданная кнопка также будет иметь звуковой эффект при нажатии. Вы можете создать столько, сколько хотите.
Аудиоэлементы являются одним из замечательных дополнений к веб-сайту. Они не только обеспечивают привлекательный элемент для веб-сайтов, но и помогают произвести неизгладимое впечатление на конечных пользователей.
Однако действие или результат должны сопровождаться звуком только в том случае, если это значительно усиливает или уточняет важное сообщение для пользователя. Информирование пользователя о чем-то, что требует его внимания, чтобы это не оказало негативного влияния на ваш сайт.
Так ! Вот и все для этой статьи, в которой показано, как добавить звуковой эффект кнопки в Elementor. Если у вас есть какие-либо опасения по поводу того, как туда добраться, сообщите нам об этом в течение Комментарии.
Хотите создать плавающую кнопку с индексом Z на Elementor?
Мы уверены, что вы знакомы с кнопкой, которая появляется перед всем содержимым экрана и обычно имеет круглую форму и значок в центре. Ну, это плавающая кнопка действия.
Плавающая кнопка действия может вызвать действие или отправить вас куда-то. Например, триггеры для электронных писем, социальных сетей, направления посетителей на подписку на канал и многое другое.
В Elementor есть два метода создания плавающей кнопки действия:
Установив Z-индекс
Создав всплывающее окно -Popup-
В этом уроке мы только покажем вам, как создать плавающую кнопку действия, установив индекс Z. И мы будем использовать профессиональную версию, чтобы это произошло.
Вы можете использовать бесплатную версию Elementor для создания плавающей кнопки действия с помощью этого метода. Но вам нужно вставить кнопку, которую вы разработали, на каждую страницу, где вы хотите, чтобы кнопка отображалась на вашем веб-сайте.
С Факир Pro, вы также можете получить доступ к функции Пользовательские CSS, который мы будем использовать в этом уроке.
Перейдите в редактор Elementor; вы можете изменить существующий контент (страницы, статьи и т. д.) или создать новый. В этом уроке мы собираемся изменить страницу.
Сначала создайте новый раздел с одним столбцом. Выберите виджет «Кнопка»и перетащите его в область редактирования с панели виджетов. Затем поменяйте кнопку Текст и залог.
В этом уроке мы будем использовать кнопку в качестве триггера, чтобы подтолкнуть посетителей к просмотру веб-сайта Elementor. Тогда по варианту Alignement, установите его на право et, Наконец, измените размер кнопки включения Очень большой.
Как видно на гифке выше, эта кнопка стационарна в разделе. Далее мы заставим его двигаться при прокрутке, оставляя его в том же положении.
Перейти на вкладку Передовой. В параметре Макет, установите ширину на Inline (автомобиль), определить положение на фиксированном, определять горизонтальная ориентация на право и настроить его décalage по желанию.
Далее мы определим основы этого метода. В поле Z-Index, введите число 9999 ; это сделает кнопку всегда впереди (плавающей).
Теперь пришло время повернуть плавающую кнопку действия. Всегда под вкладкой Передовой, доступ css-классы из блока раскладка,затем написать rotate внутри.
После этого переходим к блоку Пользовательские CSS , затем вставьте в поле следующий код:
.rotate.rotate
{transform: rotate(90deg);}
Вы можете видеть, что ручка только что повернулась, но между краями экрана есть странный зазор. Итак, давайте исправим это, настроив décalage при -92
Наконец, мы собираемся сделать последний маленький штрих для этой плавающей кнопки действия. Доступ к блоку трансформатор, выберите это ОБЗОР, доступ к опции сдвиг и установите для каждого параметра значение 7.
В Elementor есть несколько вариантов достижения определенной цели. Когда дело доходит до плавающей кнопки, вы можете использовать два варианта. Здесь мы рассмотрели только один метод, другим методом будет отдельный учебник.
Если вы хотите иметь больше параметров стиля, создание плавающей кнопки действия с помощью конструктора всплывающих окон будет лучшей альтернативой, поскольку у вас будут параметры для настройки кнопки, а также ее поведения, такие как время закрытия кнопки, продолжительность, анимация входа или выхода и т. д. .
Вы только что легко справились с этой задачей. Просто просмотрите работу своего планшета и смартфона, пытаясь изменить поля, чтобы они соответствовали каждому устройству.
Так ! Вот и все, что касается этой статьи, в которой показано, как применить эффект масштабирования к карточке профиля. Если у вас есть какие-либо опасения по поводу того, как туда добраться, сообщите нам об этом в течение Комментарии.
Хотя этот плагин WordPress упрощает работу, некоторым может потребоваться самим управлять процессом, манипулируя кодом.
Так что, если у вас очень большой веб-сайт или вы просто хотите делать что-то вручную по какой-то причине, не так уж сложно вручную перенести свой веб-сайт WordPress.
В этом руководстве мы также не будем вдаваться в подробности, потому что мы рекомендуем этот метод только в том случае, если вы уже знакомы с некоторыми техническими аспектами работы WordPress.
Шаг 0: некоторые предварительные условия для наблюдения
Перед тем, как начать это руководство, вам необходимо:
Сделайте резервную копию вашего сайта
Иметь учетные данные FTP для хостов существующего веб-сайта и того, на который вы хотите перенести свой веб-сайт.
И если вы меняете домены, вы также должны направить серверы имен вашего нового домена на сервер нового веб-сайта.
Далее, вот как перенести WordPress вручную.
Шаг 1. Переместите файлы на новый сервер
Есть несколько способов переместить файлы с вашего сайта на новый сервер. Один из способов - загрузить все файлы с помощью FTP, а затем загрузить их на новый сервер.
Однако, поскольку этот процесс может занять часы и часы, наиболее эффективным способом было бы создать сжатый архивный файл в cPanel, а затем проверить его на новом хосте.
Шаг 2: Экспорт базы данных
Затем вам нужно экспортировать существующую базу данных веб-сайта.
Помимо простого экспорта базы данных, WP Migrate DB также обрабатывает сериализованные данные и позволяет запускать поиск и заменять URL-адреса, чтобы убедиться, что все работает нормально, если вы меняете доменные имена. ,
Установите и активируйте плагин на веб-сайте, который вы хотите перенести. Затем перейдите в Инструменты → Перенести БД
Выберите переключатель Экспорт файла ( он должен быть выбран по умолчанию).
Если вы меняете доменные имена, вы также можете использовать функцию Найти / заменить чтобы заменить URL-адреса вашей базы данных на новое доменное имя.
Затем нажмите Экспортировать чтобы скачать копию вашей базы данных:
Шаг 3. Создайте новую базу данных MySQL
Затем создайте новую базу данных MySQL на хосте, на который вы перенесли свой веб-сайт, вместе с новым пользователем базы данных и паролем.
Держите эту информацию под рукой, потому что она вам понадобится.
Шаг 4: Импортируйте базу данных
Откройте phpMyAdmin на новом веб-хосте и:
Найдите базу данных, которую вы только что создали на шаге 3, используя боковую панель слева.
Нажмите на вкладку Импортировать
Выберите файл базы данных, который вы загрузили с помощью WP Migrate DB на шаге 2.
Cliquez-сюр- Go
Шаг 5: отредактируйте файл wp-config.php
На этом этапе файлы и база данных вашего веб-сайта должны быть в новом месте.
Теперь вам нужно указать своему сайту использовать новую базу данных, созданную на шаге 3.
Для этого отредактируйте файл WP-config.php на перенесенном веб-сайте и введите информацию о новой базе данных:
Шаг 6. Найдите и замените URL-адреса в содержимом Elementor (при изменении домена)
Если вы меняете доменное имя, перейдите на Elementor → Инструменты, Затем щелкните вкладку Заменить URL и используйте этот инструмент для обновления URL-адресов вашего содержимого Elementor:
Шаг 7. Восстановите CSS Elementor
После обновления URL-адресов вашего содержимого Elementor перейдите к Elementor → Инструменты и нажмите на кнопку Восстановить файлы чтобы заставить Elementor регенерировать свой CSS:
У вас есть еще вопросы о том, как перенести WordPress?
На этом мы завершаем наше руководство по переносу WordPress, включая ваш контент Elementor.
Если у вас есть вопросы о том, как безопасно перемещать веб-сайты, созданные с помощью WordPress и Elementor Pro, на новые веб-хосты и / или доменные имена? Дайте нам знать в Комментарии.
Хотите открыть для себя презентацию лучшего конструктора страниц WordPress: Elementor?
WordPress — самая популярная CMS в мире. Однако, когда дело доходит до разработки страницы во внешнем интерфейсе, набор инструментов WordPress по умолчанию сильно отстает от других платформ для создания сайтов, таких как Wix или Squarespace.
Этот недостаток WordPress начинает исчезать из-за множества мощных плагинов, которые упрощают работу. Именно поэтому мы познакомим вас с этим учебником, плагином WordPress, который позволит вам создавать потрясающие домашние страницы совершенно бесплатно.
Факир это конструктор страниц, который позволяет вам создавать профессионально выглядящие страницы с молниеносной скоростью, и все это будет жить в вашем блоге. Плагин бесплатный и доступен в Каталог плагинов WordPress.
Факир недавно был показан на Охота продукта, и заинтересовал многих пользователей WordPress в группах Facebook.
Вы можете задаться вопросом, как Elementor справляется со многими Page Builder Это уже существует.
Преимущество скорости
Когда мы имеем дело с страница строитель », важен вопрос скорости. Elementor — самый быстрый конструктор страниц на данный момент. То ли в " перетащить Что работает без задержек и быстрой загрузки страниц, разработанных Elementor.
Скорость и производительность влияют не только на сайт, но и на взаимодействие с пользователем. Идея " создатель страницы «Это позволяет вам работать вживую, не теряя в скорости, является определяющим фактором для пользовательского опыта.
Преимущество открытого исходного кода
Elementor имеет открытый исходный код. Хотя есть и другие " создатель страницы «Бесплатный, никакой другой подобный проект с открытым исходным кодом, предлагает эти широкие возможности дизайна, с набором функций и виджетов.
Бесплатная версия будет доступна в ближайшее время, но бесплатная версия все еще позволит пользователям создавать профессиональные страницы.
После запуска он был наделен более чем 6 виджетами. Вы можете рассчитывать на это: разделитель, поле значка, окно изображения, галерея сетки, галерея изображений и галерея карусели.
Общественная выгода
Сообщество WordPress играет жизненно важную роль в развитии Elementor. Проект находится на GitHub, и разработчики могут помочь улучшить его.
Он также был переведен на несколько языков, включая японский, немецкий и иврит. Это один из немногих " создатель страницы »Совместим с подгузниками RTL (справа налево). Сообщество только растет со временем, что очень многообещающе для будущего плагина.
Эволюция плагина
Elementor был загружен более 10.000 раз. Он был включен в новостную рассылку Product Hunt и уже выиграл более 700 благоприятных голосов. Новые функции добавляются еженедельно.
первый шаг
После установки плагина вы увидите новое меню на приборной панели «Элементор».
Нажав на нее, вы попадете на страницу настроек плагина. Но в этом шаге нет необходимости, поскольку настройки по умолчанию могут работать на большинстве веб-сайтов.
Однако, если вы хотите, например, определить пользовательские форматы публикации, которые будут использовать плагин, вам нужно будет внести некоторые коррективы.
Чтобы начать создание страницы, все, что вам нужно сделать, это получить доступ к странице (или к интерфейсу для создания персонализированного типа публикации). Вы заметите на этой странице новую кнопку под названием: " Редактирование с помощью Факир".
После этого вы получите прямой доступ к интерфейсу в своем блоге. Именно оттуда будет действовать вся магия. Таким образом, из этого интерфейса вы можете добавлять элементы, доступные справа, в интерфейс вашего блога. Вы заметите, как быстро все делается.
Вам, вероятно, будет сложно привыкнуть к этому, но вам не о чем беспокоиться. Это все, что вам нужно знать на данный момент. Если у вас есть вопросы, не стесняйтесь оставлять комментарии.
Вот оно! Вот и все, что касается этой статьи, в которой показано, как изменить изображение при наведении курсора на текст. Если у вас есть какие-либо опасения по поводу того, как туда добраться, сообщите нам об этом в течение Комментарии.
Хотите узнать, как настроить тему WordPress с помощью плагина Elementor?
Настройка темы WordPress - одна из основных задач при создании веб-сайтов WordPress. Поскольку она контролирует дизайн веб-сайта, многие профессионалы проводят здесь большую часть своего времени.
Создание собственной темы WordPress обычно включает в себя работу с файлами темы и редактором кода. Изменения макета происходят в файлах шаблонов, изменения дизайна - через CSS. Кроме того, вам придется постоянно обновлять окно браузера, чтобы отображать свои настройки, что может быть немного громоздким.
К счастью, с Факир, этот процесс становится чрезвычайно простым, так что вы можете проверить его.
Одна из основных причин создания веб-сайта - продвижение вашего бизнеса. Нет лучшего способа сделать это, чем создать уникальный веб-сайт, продвигающий стиль и дизайн бизнеса.
Можете ли вы представить себе Amazon, eBay или Google такими, какие они есть, без их уникального дизайна?
Конечно, нет, и это одна из причин, по которой мы хотим настроить тему WordPress. Мы хотим сделать его уникальным и адаптироваться к посланию нашей компании.
Кроме того, иногда или, скорее, часто вы запускаете тему WordPress, которая страдает плохим дизайном, цветами, которые не сочетаются друг с другом, или темой, которая слишком тяжелая и только влияет на производительность сайта. веб. Тема WordPress могла бы быть мощной, если бы не то, что вас беспокоит. Настройте его и измените эту вещь, чтобы решить все ваши проблемы и создать лучший пользовательский опыт.
Как настроить тему WordPress
Есть несколько методов настройки темы WordPress.
Вручную через настройщик WordPress
С кодом
С 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 с помощью Elementor
Вы можете сделать это прямо из пользовательского интерфейса. Нет необходимости изменять ни одной строчки кода или перезагружать окно браузера даже один раз.
Elementor позволяет вам быстро и легко изменять каждый элемент веб-сайта с помощью нескольких щелчков мыши, и вы даже можете оптимизировать эти функции для мобильной платформы.
Elementor значительно упрощает этот процесс, используя динамический контент и позволяя предварительно просматривать свои страницы. Таким образом, вы сразу увидите, как изменения дизайна повлияют на ваш фактический веб-сайт и контент.
Настройте верхний и нижний колонтитулы
Elementor дает вам полную гибкость, когда дело доходит до разработки ваших верхних и нижних колонтитулов. Мы все знаем, как это может быть скучно, когда у вас есть тема WordPress, и вы не можете изменить ни один аспект дизайна верхнего или нижнего колонтитула. Вам нужны специализированные темы, плагины и т. Д.
С Elementor это просто.
1. Создайте шаблон заголовка.
Сначала настройте новый шаблон заголовка. Для этого перейдите в Elementor> Мои шаблоны.
Один из способов начать - нажать кнопку «Добавить» вверху. На следующем экране используйте раскрывающееся меню, чтобы выбрать заголовок в качестве типа шаблона для разработки.
Вы также можете перейти на этот экран, щелкнув вкладку «Заголовок» на предыдущем экране, а затем нажав появившуюся большую зеленую кнопку.
Он предварительно выберет заголовок в качестве типа шаблона. В любом случае вам нужно добавить подходящее имя для шаблона (чтобы вы знали, какое это имя позже), а затем продолжите, нажав на «Создать шаблон».
Это приведет вас сюда.
В Elementor Pro вы можете выбирать из заранее разработанных блоков заголовков. Это шаблоны дизайна, которые вы можете использовать в качестве отправной точки для вашего собственного дизайна, что мы и собираемся сделать в данном случае.
Когда вы наводите указатель мыши на блок заголовка, нажмите Вставить позволяет сразу приступить к его проектированию. В противном случае сначала щелкните изображение, чтобы просмотреть его в увеличенном виде. Тогда вы всегда можете нажать Вставить выше.
В противном случае, если вы хотите начать с нуля, просто закройте окно, нажав X в правом верхнем углу.
2. Измените основной дизайн заголовка.
После входа в новый заголовок первое, что вы заметите, это то, что логотип и меню, которые мы настроили ранее, уже присутствуют.
Именно поэтому мы собрали их вместе и поговорим о том, как их настроить. Однако сначала давайте посмотрим, как настроить сам раздел заголовка.
Для этого просто наведите на него курсор и нажмите кнопку редактирования вверху. Откроется список параметров редактирования слева.
Вот что вы можете контролировать в различных меню:
макет - Управляйте шириной раздела, размером промежутка между столбцами, его высотой, вертикальным столбцом и размещением содержимого, назначенным тегом HTML и общей структурой.
Стиль - Здесь вы можете изменить цвет фона, включая эффекты наведениядаже добавить изображение или видео если хотите, добавьте эффекты наложения, границы и разделителя, а также измените настройки типографики.
продвинутый - Эта часть позволяет добавлять атрибуты CSS, такие как маржа и z-индекс, анимации, идентификаторы и классы. Это также позволяет вам сделать раздел липким и управлять настройками, а также добавить некоторые Пользовательский CSS.
Все вышеперечисленное говорит само за себя, и вы быстро получите то, что хотите.
3. Настройте элементы заголовка.
Однако вы можете редактировать не только раздел заголовка в целом, но и элементы, входящие в него. Например, чтобы настроить логотип веб-сайта, просто нажмите на него. Это также предоставит вам возможности редактирования с левой стороны.
В случае с логотипом это дает вам следующие возможности:
Content - Измените размер изображения, выравнивание и место, с которым оно связано.
Стиль - Управляйте шириной и высотой, добавляйте эффекты 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. Вместо того, чтобы кропотливо вносить изменения в десятки файлов и сотни строк кода, вы можете быстро сделать все это в одном месте.
Вот оно! Вот и все, что касается этой статьи, в которой показано, как настроить тему WordPress с помощью Elementor конструктора страниц. Если у вас есть какие-либо опасения по поводу того, как туда добраться, сообщите нам об этом в течение Комментарии.
Конфиденциальность и файлы cookie: этот сайт использует файлы cookie. Продолжая просматривать этот сайт, вы соглашаетесь на его использование.
Чтобы узнать больше, в том числе о том, как управлять файлами cookie, см. Следующее:
Политика в отношении файлов cookie
Как только вы это сделаете, нажмите Применить & предварительный просмотр, Хотя в этот момент вы ничего не увидите (так как на странице ничего нет), он скажет Elementor использовать данные из этого сообщения с этого момента. Вы скоро поймете, что это значит.
