Не получается настроить тему?

Анимация Слайдер

1 ответ

Установил сайт вордпрес.
Поставил тему PHLOX.
выбрал эту тему https://demo.phlox.pro/travel/
Но при установке почему то не работает так как на демо разраба , не работает именно первый слайдер и некоторые анимации.
у меня установка новая чистая, в настройках все перебрал, и не удается воссоздать копию разраба .
может я чет упустил.
поможет кто разобратся?

а вообще мне интересен именно анимация ""раздвижения облаков" , может кто такую анимацию подкинет.
Заранее благодарен.

Дополнительно:

Ответы:

попробуйте переустановить тему, ну или скиньте скриншот, а то не очень понял по тексту

думаю там в настройках секции нужно поиграть с настройками параллакса
Grizar, сайт мне понравился
Антон Литвиненко, ясно

Нужно решить такую задачу?

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

Заказать помощь

Лучший ответ

WordPress-редакция Ответ

Демо темы почти никогда не повторяется после простой установки темы. Обычно нужно импортировать демо-контент, установить обязательные плагины темы и отдельно импортировать/настроить слайдер. У Phlox такие демо часто завязаны на Elementor, Master Slider/Slider Revolution или встроенные addons, поэтому без полного импорта первый экран и анимации могут выглядеть иначе.

Проверьте по порядку:

Установлены ли все required/recommended plugins, которые тема предлагает после активации.
Запущен ли официальный demo importer именно для шаблона travel.
Импортированы ли слайдеры, изображения и настройки Elementor.
Нет ли ошибок в консоли браузера: отсутствующие JS/CSS, 404 по картинкам, jQuery errors.
Не отключены ли анимации из-за optimization/cache-плагина.
Достаточны ли лимиты PHP: memory limit, max execution time, upload limit.

Если нужна именно анимация "раздвижения облаков", ее можно сделать и без демо темы: двумя слоями с фоновыми изображениями и CSS-анимацией.

&lt;section class="cloud-hero"&gt;
  &lt;div class="cloud cloud-left"&gt;&lt;/div&gt;
  &lt;div class="cloud cloud-right"&gt;&lt;/div&gt;
  &lt;div class="hero-content"&gt;...&lt;/div&gt;
&lt;/section&gt;

.cloud-hero {
  position: relative;
  overflow: hidden;
  min-height: 640px;
}
 
.cloud {
  position: absolute;
  inset: 0;
  background-repeat: no-repeat;
  background-size: contain;
  pointer-events: none;
  animation-duration: 2.5s;
  animation-fill-mode: both;
}
 
.cloud-left {
  background-image: url('/wp-content/uploads/cloud-left.png');
  background-position: left center;
  animation-name: cloudLeft;
}
 
.cloud-right {
  background-image: url('/wp-content/uploads/cloud-right.png');
  background-position: right center;
  animation-name: cloudRight;
}
 
@keyframes cloudLeft {
  from { transform: translateX(0); }
  to { transform: translateX(-35%); }
}
 
@keyframes cloudRight {
  from { transform: translateX(0); }
  to { transform: translateX(35%); }
}

.cloud-hero { position: relative; overflow: hidden; min-height: 640px; } .cloud { position: absolute; inset: 0; background-repeat: no-repeat; background-size: contain; pointer-events: none; animation-duration: 2.5s; animation-fill-mode: both; } .cloud-left { background-image: url('/wp-content/uploads/cloud-left.png'); background-position: left center; animation-name: cloudLeft; } .cloud-right { background-image: url('/wp-content/uploads/cloud-right.png'); background-position: right center; animation-name: cloudRight; } @keyframes cloudLeft { from { transform: translateX(0); } to { transform: translateX(-35%); } } @keyframes cloudRight { from { transform: translateX(0); } to { transform: translateX(35%); } }

Если цель — точная копия демо, сначала добейтесь корректного demo import. Если цель — только эффект, проще сверстать его отдельно в Elementor секции или дочерней теме.

Другие ответы (0)

Пока нет других ответов. Будьте первым, кто поможет автору.

Ответить на вопрос

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

Вам также может быть интересно

VPN Как правильно настроить vless для Android TV? 0 ответов Pyrogram Как правильно зарегистрировать юзер бота в Telegram? 0 ответов печатные-платы Как заставить запускаться программу M3.exe от компании Hanxing AOI в инспекционной машине на Windows 7 Pro? 0 ответов VPN Почему подключение через VPN работает только на wi-fi, а через кабель нет, где ошибка? 0 ответов

Не получается настроить тему?

Дополнительно:

Ответы:

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

Вам также может быть интересно

Ежедневно, круглосуточно