Блог

Главная - Вопросы по программированию - Как добавить вертикальную линию на всю страницу WordPress?

Как добавить вертикальную линию на всю страницу WordPress?

#css #wordpress #line #elementor

#css — код #wordpress #строка #elementor

Вопрос:

Я использую тему Flatsome на WordPress, и мне нужно нарисовать вертикальные линии с трех сторон (слева по центру справа) на полной домашней странице. вы можете посмотреть в качестве справочного сайта (https://pelicula .qodeinteractive.com /) где вертикальные линии реализованы на странице. Эти вертикальные линии реализованы сверху донизу, и мне нужно то же самое в моем дизайне.

Есть ли какой-нибудь плагин, который может помочь? Какой подход я должен рассмотреть? Любое предложение будет оценено по достоинству

(https://pelicula .qodeinteractive.com /)

Ответ №1:

вы могли бы сделать это с помощью простых элементов htmtl и css. Просто добавьте три раздела в основные файлы веб-сайта (или, лучше, header.php ) вашей дочерней темы (дополнительная информация: https://developer.wordpress.org/themes/basics/template-hierarchy /), а затем примените к нему следующий css.

 body {
  height: 3000px;
}

div {
  height: 100vh;
  width: 1px;
  position: fixed;
}

#one {
  background: blue;
  left: 20%;
}

#two {
  background: green;
  left: 50%;
}

#three {
  background: orange;
  right: 20%;
} 
 <div id="one"></div>
<div id="two"></div>
<div id="three"></div>

Комментарии:

1. Просто в случае, если OP мало что знает о HTML / CSS, поскольку они спрашивают о плагине для выполнения простых действий в HTML / CSS. Я бы порекомендовал им назначить класс для строк, а не просто использовать div в CSS. Итак, вот так: jsfiddle.net/zfnu1okg/2

2. Вы правы. Мой ответ предназначен только для людей, которые имеют хотя бы небольшой опыт работы с дочерними темами в WordPress и HTML / CSS.

3. Это работает с простой страницей, но как я могу это сделать с помощью elementor?

4. Это работает и с elementor. Как указано выше, добавьте divs в header.php внесите файл /wp-content/themes/yourtheme/header.php и добавьте css в пользовательский css.