Для любого владельца сайт, очень часто важно знать, что вы выделяетесь среди конкурентов. Divi предлагает бесчисленные возможности для создания уникальных макетов, но мы всегда можем, немного покопавшись, создать что-то более уникальное. Вот где псевдоэлементы CSS действительно пригодятся.
Что такое псевдоэлементы CSS?
Проще говоря, псевдоэлемент CSS можно использовать для стилизации определенных частей элемента. Есть пять типов псевдоэлементов, которые делают разные вещи. В этой статье мы будем говорить только о: до и: после.
Эти два псевдоэлемента используются для вставки чего-либо до или после содержание элемента. Это особенно полезно, поскольку мы можем использовать их для добавления дополнительных визуальных элементов к существующим изображениям, тексту и другим элементам!
Так зачем нам использовать эти псевдоэлементы? «До» и «После» отлично подходят для открытия возможностей дизайна без необходимости добавления дополнительных элементов или модулей. Точно так же они полезны для добавления дополнительных элементов без необходимости касаться основных HTML-шаблонов или файлов темы.
Как вы используете элементы до и после с Divi?
Если все это пока кажется немного запутанным, не волнуйтесь! Если бы мы использовали :: before и :: after для написания кода CSS с нуля, это выглядело бы примерно так:
Предположим, у нас есть строка текста с классом example-text - CSS для стиля и настройки этой строки будет:
.example-text {* добавьте свой стиль сюда *}
Теперь, если вы хотите добавить и стилизовать элемент :: before или :: after, CSS будет выглядеть так:
.example-text :: before {* добавить свой стиль перед элементом здесь *} .example-text :: after {* добавить свой стиль после элемента здесь *}
К счастью, Divi обеспечивает легкий доступ к псевдоэлементам ::before и ::after с гораздо меньшими трудностями. На самом деле, если вы когда-либо открывали вкладку «Дополнительно» для добавления пользовательского CSS, вы уже видели области, на которые мы ссылаемся.
Эти области предоставляют быстрый доступ к добавлению и настройке содержание до и после любого модуля Divi существуют, и мы можем использовать их для создания действительно гибких и интересных проектов.
обследование
Вот что мы создадим в этом уроке:
Пример 1
начало
В этом руководстве мы начнем в режиме Visual Builder. Поэтому вы должны щелкнуть «Visual Builder», когда находитесь на новой странице.
Теперь мы готовы начать!
Пример 1: пронумерованные модули Blurb с использованием псевдоэлементов
Рекламное объявление, вероятно, является одним из самых гибких доступных вам модулей Divi. В этом случае мы будем использовать псевдоэлементы для добавления чисел перед каждой презентацией, чтобы создать подробный раздел «Как это работает». Мы также добавим форму стрелки справа, чтобы обозначить процесс.
Что мы будем создавать:
Хотя этот дизайн работает со всеми дизайнами презентаций, мы позаимствовали специальный раздел для презентации у веб-агентства. Если вы хотите использовать их в качестве отправной точки, вы можете перейти на целевую страницу веб-агентства, создав новую страницу и перейдя в интерфейсный конструктор.
Когда ваша страница загружается, у вас есть возможность использовать предопределенный макет, один из сохраненных макетов или создать новую сборку. Выберите предопределенный макет и используйте строку поиска, чтобы найти макеты «Веб-агентство». Обзорный раздел этого руководства находится на целевой странице.
После загрузки единственное различие между предопределенным макетом и нашим примером заключается в том, что мы изменили фон каждого текста презентации, заголовок и цвет шрифта текста и добавили немного отступов.
После того, как вы изменили эти настройки для объявления, вы можете щелкнуть правой кнопкой мыши на модуле и использовать «расширенные стили», чтобы применить их к остальным трем.
Теперь, когда мы настроили наши четыре модуля Blurb так, чтобы они выглядели так, как мы хотим, пришло время добавить код для создания нумерованного элемента. Однако, чтобы этот дизайн работал, нам сначала нужно добавить строку CSS в настраиваемое поле CSS основного элемента.
перелив: видимый
Это просто позволит элементам, которые мы создаем в следующих шагах, быть видимыми везде, где они перекрывают края нашего модуля представления.
Как только это будет сделано, откройте параметры модуля и перейдите на вкладку «Дополнительно». В области «до» добавьте этот фрагмент CSS:
содержание: «1.»; / * добавляем число «1». перед содержимым * / font-weight: bold; размер шрифта: 80 пикселей; непрозрачность: 0.7; / * делаем число слегка прозрачным * / color: blue; / * меняем цвет шрифта числа * / position: absolute; z-индекс: 9999; слева: 0; / * размещаем содержимое на 0 пикселей слева от содержимого * / top: -20px; / * Размещение содержимого на 20 пикселей выше верхней границы * /
После того, как вы добавите этот фрагмент, вы увидите, что номер появится в верхнем левом углу модуля Blurb. Вы можете изменить положение числа, изменив строки «left:» и «top:», или изменить цвет номера и размер шрифта в этом фрагменте CSS.
После того как вы завершили это для первого модуля, перейдите к трем новым модулям blurb и измените строку «content:» на:
содержание: '2.';
содержание: «3.»;
…и т.д.
Теперь, когда мы отсортировали наши числа, нам нужно добавить немного CSS, чтобы создать форму стрелки.
Откройте каждый модуль и введите его в поле «После» пользовательского поля CSS:
content:''; display:block; height:60px; width:60px; position:absolute ; top:40%; right:-30px; z-index:-1; background-color:#e8e8e8; transform: rotate(45deg); -ms-transform: rotate(45deg); -webkit-transform: rotate(45deg);
Теперь ваши четыре вступительных замечания должны выглядеть так:
Это все для этого урока, я надеюсь, что он позволит вам лучше использовать псевдоэлементы с опциями, предлагаемыми Divi.
