Как создать блог среднего стиля с Divi

Опубликовано: 2017-07-06

В сегодняшней публикации блога Divi мы собираемся поделиться некоторыми отличными советами о том, как создать свой собственный веб-сайт для ведения блога в том же стиле, что и блог Medium.

Medium - одна из наиболее часто используемых платформ для ведения блогов. У них есть не только большое сообщество блоггеров, которые регулярно взаимодействуют со своей аудиторией, но и их платформа для ведения блогов также обеспечивает очень приятный пользовательский интерфейс. Это именно то, чего хочет каждый блогер. Они хотят быть уверены, что передают сообщение ясно и в обстановке, удобной для читателя.

Однако ведение блога на Medium имеет свои ограничения. Например, нет никаких преимуществ SEO. Создав свой собственный блог, вдохновленный стилем блога Medium, вы можете продолжить то знакомое чувство, которое они уже испытывают с блогом Medium, и перенести его на свой собственный веб-сайт.

Давайте начнем

Подпишитесь на наш канал Youtube

Мы покажем вам наиболее важные части создания блога в стиле Medium, а также шаг за шагом покажем вам, как создавать некоторые из важных частей. Например; как сделать шаблон сообщения в блоге в среднем стиле, который можно использовать для всех своих сообщений. Шаблон выглядит так:

Мы также покажем вам, как добавить плагины Worth The Read и Highlight and Share, чтобы сделать его еще более похожим. Результат Worth The Read выглядит так:

А выделение и публикация будут иметь следующий эффект:

Создайте упрощенное меню, подобное блогу Medium

Одна из вещей, которую вы можете четко заметить при посещении веб-сайта Medium, - это простота их меню. Доступных опций не так много, что сразу упрощает навигацию для посетителей. Посетители могут изучить выделенные сообщения блога на главной странице и продолжить свое пребывание оттуда.

Элементы меню

Выберите логотип, который соответствует простоте остальной части вашего веб-сайта, и убедитесь, что он тонкий, добавив ему небольшого размера в меню. Вы определенно не хотите, чтобы логотип преобладал над контентом, которым вы делитесь на своем веб-сайте.

Затем не включайте слишком много страниц в свою навигацию. Поскольку ваш веб-сайт полностью посвящен ведению блога, вероятно, достаточно и домашней страницы. Вы также можете подумать о добавлении страницы о себе, если хотите рассказать посетителям немного больше о себе.

Далее, включите значок поиска, чтобы люди могли легко искать сообщения в вашем блоге по нескольким ключевым словам. Все дело в контенте, который вы создаете, и в том, чтобы его было легко найти.

В приведенном выше примере мы использовали следующие настройки для основной панели меню в настройщике темы:

Высота меню: 54
Макс.высота логотипа: 37
Размер текста: 18

Используйте цветовую палитру с контрастными и простыми шрифтами

В блоге Medium на всей платформе используются три основных цвета, что упрощает чтение контента. Хотя два цвета могут казаться черными и белыми, они немного мягче для глаз. Третий - светло-серого, но читаемого цвета. Внесите следующие изменения в строку основного меню в настройщике темы, чтобы изменить цвета и шрифт, которые используются в основном меню:

Шрифт: Source Sans Pro
Цвет текста: rgba (0,0,0, .44)
Цвет активной ссылки: rgba (0,0,0, .44)
Цвет фона: #fbfcfd

Включить значок поиска

Кроме того, чтобы включить значок поиска в основное меню, выберите « Заголовок и навигация»> «Элементы заголовка»> «Показать значок поиска».

Отключить фиксированную панель навигации

Еще одна вещь, которую делает блог Medium, - это держать панель навигации вверху страницы. Таким образом, посетители не будут без надобности отвлекаться, когда они читают. Чтобы отключить фиксированную панель навигации на веб-сайте Divi, перейдите в панель WordPress> Divi> Параметры темы> Общие настройки> Отключить фиксированную панель навигации.

Стилизуйте модули блога на главной странице по категориям

Затем вы хотите стилизовать домашнюю страницу своего сайта по категориям. В зависимости от создаваемого вами блога вы можете создавать различные разделы на своей домашней странице, которые соответствуют тому, что ваши посетители любят читать больше всего. Мы рекомендуем использовать как минимум следующие категории: популярные, последние и рекомендуемые. Вы можете назначить сообщения блога этим категориям, создав разные категории на странице «Категории» раздела «Сообщения» в меню WordPress и назначив каждое сообщение одной или нескольким категориям внутри самого сообщения.

Еще одна вещь, которую вы действительно хотите сделать, - это упростить отслеживание различных модулей и разделов блога на вашей домашней странице. Для этого вы можете использовать стандартную сетку блога в конструкторе Divi или поискать что-то более сложное. Ниже мы перечислили три плагина, которые вы можете использовать.

Плагин Divi Article Card

Плагин Divi Article Card - это бесплатный плагин, которым поделились в нашем блоге во время Divi 100. Стиль, который используется в этом плагине, чистый и имеет приятный эффект наведения. Это простой эффект, но он может создать дополнительный штрих для вашего блога.

Плагин полностью бесплатный, просто зайдите в публикацию и скачайте!

Пользовательский модуль блога Divi

Другой плагин, который создал красивый макет модуля блога, - это модуль настраиваемого блога Divi. Этот больше похож на сообщения в блоге Medium, чем предыдущий, поскольку размещенное изображение размещено с левой стороны.

Цена плагина - 20 долларов.

Divi Blog Extras

Последний плагин, который может помочь вам приблизить ваш блог к блогу Medium, - это Divi Blog Extras. Этот плагин также имеет множество различных макетов модуля блога, которые могут помочь вам создать блог в стиле Medium.

Плагин продается по цене 15 долларов за лицензию на один сайт и 30 долларов за расширенную лицензию.

Создать шаблон сообщения в блоге

Medium имеет стандартный формат сообщений в блогах для всех создаваемых сообщений. В дизайне основное внимание уделяется сути сообщения: содержанию. Используемый формат сообщения в блоге соответствует тому, как выглядит остальная часть веб-сайта: упрощенный. Он переходит к делу, используя комбинацию письменного контента и мультимедиа, которые вы можете вставлять в сообщение.

Divi предлагает те же возможности. Вы можете сделать свой пост в блоге настолько простым или деликатным, насколько захотите, используя различные модули, которые предоставляет конструктор Divi. Это пример макета, который мы покажем вам, как создать шаг за шагом:

Настройки Divi Post

Начните с добавления нового сообщения, присвоения ему заголовка и активации конструктора Divi. Затем убедитесь, что настройки Divi Post следующие:

Макет страницы: Полная ширина
Точечная навигация: выкл.
Скрыть навигацию перед прокруткой: по умолчанию
Заголовок сообщения: Скрыть

Автор (Рабочий стол)

Чтобы сделать макет, мы собираемся переключиться на Visual Builder. Начните с добавления нового раздела с двумя рядами. Продолжите, добавив модуль изображения в первый столбец и два текстовых модуля во второй столбец. Откройте настройки раздела и добавьте в качестве цвета фона "#fbfcfd".

Модуль изображения

Откройте модуль изображения, загрузите изображение на вкладку «Содержимое» и установите для параметра «Выравнивание изображения» значение «Влево» на вкладке «Дизайн». Двигаясь дальше, добавьте «-5%» к верхнему полю и «25%» к левому полю в подкатегории «Интервал» на вкладке «Дизайн».

После этого добавьте следующий код в основной элемент в подкатегории Custom CSS на вкладке Advanced:

-webkit-clip-path: circle(50% at 50% 50%);
clip-path: circle(50% at 50% 50%);
width: 75px;
height: 75px;

Первый текстовый модуль

Добавьте имя автора в поле «Содержимое» на вкладке «Содержимое» и внесите следующие изменения в подкатегорию «Текст» на вкладке «Дизайн»:

Ориентация текста: влево
Шрифт текста: Source Sans Pro
Размер шрифта текста: 18
Цвет текста: rgba (0,0,0,0.8)
Высота текстовой строки: 1,7 мкм

Прокрутите ту же вкладку вниз, чтобы добавить «-3%» к верхнему полю и «-70%» к левому полю.

Второй текстовый модуль

Введите слоган во втором текстовом модуле и внесите следующие изменения в подкатегорию «Текст» на вкладке «Дизайн»:

Ориентация текста: влево
Шрифт текста: Source Sans Pro
Размер шрифта текста: 14
Цвет текста: rgba (0,0,0,0.44)
Высота текстовой строки: 1,7 мкм

Кроме того, прокрутите ту же вкладку вниз и добавьте «-5%» к верхнему полю и «-70%» к левому полю в подкатегории «Интервал».

Видимость строки

Наконец, откройте настройки строки и отключите строку на телефонах и планшетах в подкатегории «Видимость» на вкладке «Дополнительно».

Автор (мобильный)

Добавьте еще одну строку в тот же раздел со строкой полной ширины. Продолжите, клонируя модуль изображения и текстовые модули из предыдущей строки и поместив их в строку полной ширины. Нам придется внести некоторые изменения в каждый модуль, чтобы они располагались по центру экрана, когда кто-то открывает страницу на мобильном телефоне или планшете.

Модуль изображения

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

Первый текстовый модуль

Откройте первый текстовый модуль и измените ориентацию текста на «Центр» в подкатегории «Текст» на вкладке «Дизайн».

Прокрутите ту же вкладку вниз, удалите левое поле и оставьте верхнее поле.

Второй текстовый модуль

Кроме того, проделайте то же самое со вторым текстовым модулем. Поместите ориентацию текста в «Центр» и удалите левое поле в подкатегории «Интервал» на вкладке «Содержимое».

Видимость строки

Наконец, откройте настройки строки и отключите строку для рабочих столов.

Модуль заголовка сообщения

Поскольку мы отключили заголовок сообщения в наших настройках Divi Post, мы собираемся добавить модуль заголовка сообщения в строку с полной шириной в том же разделе, который мы использовали до сих пор.

В подкатегории Elements на вкладке Content мы можем выбрать, какие элементы мы хотим отображать. Поскольку мы уже упоминали автора, мы отключили все, кроме названия.

Более того; внесите следующие изменения в подкатегории «Текст» и «Текст заголовка» на вкладке «Дизайн»:

Ориентация текста: по центру
Шрифт заголовка: Source Sans Pro
Стиль шрифта заголовка: полужирный
Размер шрифта заголовка: 47 пикселей (рабочий стол), 40 (планшет), 35 (телефон)
Цвет текста заголовка: rgba (0,0,0,0.8)

Изображения полной ширины

Первое полноразмерное изображение, которое мы добавим, является представлением избранного изображения. Добавьте раздел Fullwidth, поместите в него модуль изображения Fullwidth и загрузите изображение на вкладке Content. Это так просто.

Текстовые модули

Двигаясь дальше, мы создадим текстовые модули, которые будут использоваться для публикации в блоге. Добавьте стандартный раздел с полноразмерной строкой и поместите в него текстовый модуль. В этом примере мы используем семейство шрифтов Cardo вместо Georgia просто потому, что Cardo - это встроенное семейство шрифтов.

Кроме того, откройте настройки модуля «Текст», введите образец текста в поле «Содержимое» и перейдите на вкладку «Дизайн». В подкатегории Текст внесите следующие изменения:

Ориентация текста: влево
Шрифт текста: Cardo
Размер шрифта текста: 25 пикселей (рабочий стол), 19 пикселей (планшет), 17 пикселей (телефон)
Цвет текста: rgba (0,0,0,0.8)
Высота текстовой строки: 1,8 м

Прокрутите ту же вкладку вниз, добавьте «800 пикселей» к максимальной ширине в подкатегории «Размер» и добавьте «10%» к левому полю в подкатегории «Интервал».

Видео модуль

Последнее, что может повысить ценность вашего сообщения в блоге, - это интеграция видео. Для этого вам нужно клонировать ранее созданный раздел с помощью текстового модуля и разделить общий контент, который у вас есть, между двумя текстовыми модулями. Прямо между двумя разделами мы собираемся добавить еще один раздел со строкой на всю ширину. В эту полноразмерную строку мы добавим видеомодуль.

Вот как должна выглядеть структура в бэкэнде:

Мы не вносили никаких изменений в модуль видео, кроме добавления URL.

Сохранить шаблон

Вы можете повторно использовать различные разделы, чтобы они соответствовали создаваемому вами сообщению в блоге, клонируя их и изменяя содержимое. Как только вы это сделаете, вы можете сохранить шаблон сообщения в блоге, нажав «Сохранить в библиотеке» и присвоив ему имя.

В следующий раз, когда вы захотите использовать шаблон, просто нажмите «Загрузить из библиотеки» и загрузите шаблон.

Стоит прочитать

Типичная вещь при создании среднего блога - это количество минут, необходимое для прочтения определенного сообщения в блоге. Обычно он появляется в самом начале страницы и дает пользователям оценку того, сколько времени им потребуется, чтобы закончить чтение. В эпоху, когда время является самым ценным, это помогает людям решить, хотят они читать сообщение в блоге или нет.

Бесплатный плагин WordPress, который поможет вам добраться туда, - это Worth The Read by Well Done Marketing. Вы можете скачать его на странице, на которую мы ссылаемся, или найти его в плагинах. Хорошая особенность этого плагина заключается в том, что вы можете выбрать, где вы хотите отображать время чтения; страницы, сообщения или и то, и другое. Вы также можете выбрать размещение и формат.

После того, как вы скачали плагин и активировали его, нажмите на опцию «Reading Progress» в его меню. Продолжайте и вносите необходимые изменения. Время чтения обычно используется только для сообщений, поэтому большинство людей, скорее всего, выберут только этот вариант.

На вкладке «Стиль» вы можете выбрать стиль, который хотите использовать. Убедитесь, что вы используете тот же шрифт, что и в заголовке. Вы также можете добавить собственный код CSS, если хотите внести какие-либо дополнительные изменения.

Выделите и поделитесь

Еще одна действительно типичная вещь в Medium - это возможность выделить что-то, поделиться этим или прокомментировать, если вам это нравится. Это придает дополнительную ценность сообщению в блоге, позволяя ему взаимодействовать с людьми, которые его читают. Мы нашли плагин, который поможет вам сделать нечто подобное; плагин Highlight and Share, который также можно использовать бесплатно.

Вы можете решить, какими каналами социальных сетей люди могут делиться, перейдя в « Настройки»> «Выделить и поделиться»> «Включение каналов социальных сетей, которые вы хотите использовать».

Подведение итогов

Прочитав этот пост, вы сможете начать создавать свой блог в стиле Medium, который содержит некоторые из наиболее важных частей Medium. У вас есть множество возможностей сделать его простым, как в блоге Medium, но при этом внести в него некоторые личные штрихи. Если у вас есть вопросы или предложения; обязательно оставьте комментарий в разделе комментариев ниже, чтобы мы могли оставаться на связи с нашим потрясающим сообществом Divi!

Обязательно подпишитесь на нашу рассылку по электронной почте и канал на YouTube, чтобы не пропустить важное объявление, полезный совет или бесплатную поддержку Divi!

Изображение от Джулии Тим / shutterstock.com