Бъдещето на уеб хостинга е тук!

Веднага щом вашият уебсайт достигне 15.000 3 посетители на месец за период от 90 месеца (XNUMX дни), вашият хостинг автоматично става безплатен за цял живот... както и всички включени Premium WordPress плъгини.

N

Несравним управляван хостинг

N

Elementor, Divi AI, AIOSEO и др

N

Имейл адрес на PayPal за партньори

N

Brouavo Super Marketing Plugin

N

Стартирайте сайта си за минути

N

Първокласна 24/7 експертна поддръжка

N

30 дни гаранция за връщане на парите

Включено във всички пакети: Elementor Pro – Divi Builder и Divi Ai, Преводателпрес Про, Всичко в едно SEO професионалист, Защитник Професионален, Форминатор Про, Смъш Про, Snapshot Pro, Платен абонамент за членове Pro, Hummingbird Pro, Хъстъл Про, Плъгинът Brouavo Super Marketing.

С Divi дори блоговете са модул и вашият „блог“ може да бъде поставен навсякъде на вашия уебсайт и в различни формати. Можете да комбинирате модули за блог и странична лента, за да създадете класически дизайни на блогове. С помощта на модула за блог и странична лента могат да се създадат 1 колона, 2 колони или 3 колони.

преглед блога диви модул blog.png

Как да добавите блог модул към страницата си

Преди да можете да добавите блог модул към вашата страница, първо трябва да получите достъп до Divi Builder. Веднъж Тема на Divi инсталиран на уебсайта ви, ще забележите бутон Използвайте Divi Builder над редактора на публикации, когато създавате нова страница. Като кликнете върху този бутон, ще можете да активирате Divi Builder, който ще ви даде достъп до всички модули Divi Builder. След това кликнете върху бутона Използвайте Visual Builder за да стартирате генератора във визуален режим. Можете също да щракнете върху бутона Използвайте Visual Builder когато разглеждате уебсайта си нагоре, ако сте влезли в таблото за управление на WordPress.

бутон divi builder модул блог divi.png

След като влезете в Visual Builder, можете да щракнете върху сивия бутон плюс, за да добавите нов модул към вашата страница. Нови модули могат да се добавят само в редове. Ако започвате нова страница, не забравяйте първо да добавите ред към страницата си. Имаме страхотни уроци за използването на елементите на Lignes et де секции от Диви.

добавете блога модул divi builder.png

Намерете модула на блога в списъка с модули и кликнете върху него, за да го добавите към вашата страница. В списъка с модули може да се търси, което означава, че можете също да въведете думата "блог" и след това щракнете върху Enter, за да намерите автоматично и добавите модула на блога! След като модулът бъде добавен, ще бъдете посрещнати със списъка с опции на модула. Тези опции са разделени на три основни групи: Съдържание , Концепция et напреднал .

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

За този пример ще добавя блог модул към страница на блог. Тази страница в блога има пълен заглавие с модул за търсене по-долу. Под модула за търсене ще добавя специализирана секция с блог модул от лявата страна и секция от страничната лента отдясно. Страничната лента вдясно съдържа приспособление за скорошна публикация, модул за оптимизиране на имейл и модул за лице.

Ето как изглежда примерната страница.

пример на страница divi.jpg

Обърнете внимание, че блог модулът е в решетка в лявата част на специалната секция.

Нека да започнем.

Използвайте визуалния конструктор, за да добавите специализиран раздел със следното оформление:

специалност оформление divi.png

Ще бъдете подканени да добавите колона или ред с две колони за лявата страна. Изберете колона ред 1.

селекция зона divi builder.png

След това добавете блога модул към реда.

използвайте модула blog.png

Актуализирайте настройките на блога, както следва:

Опции за съдържанието

Брой постове: 6
Научете повече Бутон: ON
Показване на страници: НЕ
Цвят на фона на мрежата: #ffffff

Опции за дизайн

Разпределение: Решетка
Използвайте Dropshadow: ON
Икона на цвета на наслагване: #ffffff
Задръжте курсора на курсора на мишката: заглавка на rgba (224,153,0,0.51)
Полицията:
Размер на шрифта: 21px
Цвят на текста на заглавката: # 333333
Разстояние между буквите: 1px
Височина на заглавния ред: 1.2 ем
Граница: ДА
Цвят на границата: # f0f0f0
Ширина на границата: 1px
Стил на границата: Твърд

Разширени опции

Персонализиран CSS (бутон Прочетете повече):

цвят: # e09900;
блок за наблюдение;
текст-подравняване: център;
долна граница: 10px;
граница: 1px твърдо # ccc;
подложка: 5px;
Трансформация на текста: капитализиране;
разстояние между буквите: 1px;

настройките на блога divi.png

Разширеният персонализиран CSS бутон за бутона Read More създава персонализиран вид, който съответства на дизайна.

блок дизайн статии divi.jpg

В дясната секция на страничната лента на оформлението на специализирания раздел ще трябва да добавите модул на страничната лента, който вмъква приспособлението за скорошни публикации. По-долу ще трябва да добавите модул за оптимизиране на имейл. И след това под Optin Email, трябва да добавите модул Person с информация за автора.

Това е!

Опции за съдържанието в блог

В раздела Съдържание ще намерите всички елементи на съдържанието на модула, като текст, изображения и икони. Всичко, което контролира какво се появява във вашия модул винаги ще бъде в този раздел.

блог модул divi.png

Номер на артикула (Брой елементи)

Задайте броя на съобщенията, които искате да се показват. Ще трябва да имате съобщения за всичко, което се появява в този модул.

Изберете категориите, които искате да включите в емисията за публикации. Всички категории съобщения, които сте създали, ще се появят тук, за да изберете / премахнете избора.

Включени категории

Изберете категориите, които искате да включите във емисията.

Формат на мета-дата

Тук задайте формата на датата, който искате да се показва в публикациите ви в блога. По подразбиране оформлението е M j, Y формат (6 януари 2014 г.) Вижте WordPress код на дати за повече опции.

Съдържание

Показването на цялото съдържание няма да съкрати публикациите ви на страницата с индекс. Show Snippet ще покаже само текста на вашия фрагмент.

Офсет номер

Изберете броя на съобщенията, които искате да компенсирате. Ако компенсирате например с 3 публикации, първите три публикации във вашата емисия в блога няма да се покажат.

Показване на представено изображение

Тази опция ви позволява да изберете дали искате миниатюрите да се показват в блога ви.

Прочетете още бутона

Тук можете да зададете дали връзката „прочети повече“ да се показва след фрагмента или не.

Автор на шоуто

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

Показване на датата

Изберете дали искате да покажете датата, на която всяка статия е създадена, в полето Meta Meta под заглавието на съобщението.

елементи за показване на диви модул blog.png

Показване на категории

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

Показване на броя коментари

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

Преглеждайте страницирането

Изберете дали искате да показвате страниране за тази емисия или не. За да активирате номерирано пейджинг, ще трябва да инсталирате приставката WP Page Navi .

Административен етикет

Това ще промени етикета на модула в генератора за лесно идентифициране. Когато използвате изгледа WireFrame в Visual Builder, тези етикети ще се появят в модулния блок на интерфейса Divi Builder.

Опции за дизайна на блога

В раздела Дизайн ще намерите всички опции за стила на модула, като например шрифтове, цветове, размер и разстояние. Този раздел ви позволява да промените външния вид на вашия модул. Всеки модул Divi има дълъг списък с дизайнерски настройки, които можете да използвате, за да промените почти всичко.

дизайн опция divi builder модул blog.png

разпореждане

Можете да изберете да показвате публикациите в блога си в мрежа или оформление с пълна ширина.

Насложено изображение

Ако тази опция е активирана, цвят и икона за наслагване се показват, когато посетител задържи курсора на мишката върху избраното изображение на съобщение.

Цвят на иконата за наслагване

Тук можете да зададете персонализиран цвят за иконата за наслагване.

Покриване на цвета на корицата

Тук можете да определите персонализиран цвят за наслагването.

Плъзгач на иконите

Тук можете да определите персонализирана икона за наслагването.

Цвят на текста

Si вашия блог е поставен на светъл фон, цветът на текста трябва да бъде зададен на „Тъмен“. Виза, да вашия блог е поставен на тъмен фон, цветът на текста трябва да бъде зададен на „Светъл“.

Шрифт на заглавката

Можете да промените шрифта на заглавката си, като изберете желания шрифт от падащото меню. Divi се предлага с десетки страхотни шрифтове, задвижвани от Google Fonts. По подразбиране Divi използва шрифта Open Sans за целия текст на вашата страница. Можете също така да персонализирате стила на вашия текст, като използвате опции удебелен, курсив, главни букви и подчертаване.

Размер на заглавния шрифт

Тук можете да регулирате размера на вашия заглавен текст. Можете да плъзнете плъзгача на интервала, за да увеличите или намалите размера на текста си, или можете директно да въведете желаната стойност на размера на текста в полето за въвеждане вдясно от плъзгача. Полетата за въвеждане поддържат различни мерни единици, което означава, че можете да въведете "px" или "em" в зависимост от вашия размер, за да промените типа на единицата.

Цвят на заглавния текст

По подразбиране всички цветове на текста в Divi се показват в бяло или тъмно сиво. Ако искате да промените цвета на заглавката, изберете желания цвят от инструмента за избор на цветове, като използвате тази опция.

Разстояние между буквите в заглавката

Разстоянието между буквите засяга пространството между всяка буква. Ако искате да увеличите интервала между всяка буква от текста на заглавката, използвайте плъзгача за интервал, за да регулирате интервала или въведете желания размер на разстоянието в полето за въвеждане отдясно на плъзгача. Полетата за въвеждане поддържат различни мерни единици, което означава, че можете да въведете "px" или "em" в зависимост от вашия размер, за да промените типа на единицата.

конфигурационно разстояние заглавка divi.png

Височина на заглавния ред

Височината на реда засяга пространството между всеки ред от текста на заглавката ви. Ако искате да увеличите интервала между всеки ред, използвайте плъзгача за диапазон, за да регулирате интервала или да въведете желания размер на разстоянието в полето за въвеждане вдясно от курсора. Полетата за въвеждане поддържат различни мерни единици, което означава, че можете да въведете "px" или "em" в зависимост от вашия размер, за да промените типа на единицата.

Шрифт на тялото

Можете да промените шрифта на тялото си, като изберете желания шрифт от падащото меню. Divi се предлага с десетки страхотни шрифтове, задвижвани от Google Fonts. По подразбиране Divi използва шрифта Open Sans за целия текст на вашата страница. Можете също така да персонализирате стила на вашия текст, като използвате опции удебелен, курсив, главни букви и подчертаване.

Размер на шрифта

Тук можете да регулирате размера на основния си текст. Можете да плъзнете плъзгача на интервала, за да увеличите или намалите размера на текста си, или можете директно да въведете желаната стойност на размера на текста в полето за въвеждане вдясно от плъзгача. Полетата за въвеждане поддържат различни мерни единици, което означава, че можете да въведете "px" или "em" в зависимост от вашия размер, за да промените типа му.

Цвят на текста на тялото

По подразбиране всички цветове на текста в Divi се показват в бяло или тъмно сиво. Ако искате да промените цвета на основния текст, изберете желания цвят от инструмента за избор на цвят, използвайки тази опция.

Разстояние между буквите

Разстоянието между буквите засяга пространството между всяка буква. Ако искате да увеличите интервала между всяка буква от основния текст, използвайте плъзгача за интервал, за да регулирате интервала или въведете желания размер на разстоянието в полето за въвеждане вдясно от плъзгача. Полетата за въвеждане поддържат различни мерни единици, което означава, че можете да въведете "px" или "em" в зависимост от вашия размер, за да промените типа на единицата.

Височина на линията на тялото

Височината на реда засяга пространството между всеки ред от основния текст. Ако искате да увеличите интервала между всеки ред, използвайте плъзгача за интервали, за да регулирате интервала или въведете желания размер на разстоянието в полето за въвеждане вдясно от плъзгача. Полетата за въвеждане поддържат различни мерни единици, което означава, че можете да въведете "px" или "em" в зависимост от вашия размер, за да промените типа на единицата.

Шрифт Metas

Можете да промените шрифта на вашия мета-текст, като изберете желания шрифт от падащото меню. Divi се предлага с десетки страхотни шрифтове, задвижвани от Google Fonts. По подразбиране Divi използва шрифта Open Sans за целия текст на вашата страница. Можете също така да персонализирате стила на вашия текст, като използвате опции удебелен, курсив, главни букви и подчертаване.

раздел мета данни diiv builder.png

Размер на шрифта на Metas

Тук можете да регулирате размера на вашия мета текст. Можете да плъзнете плъзгача на интервала, за да увеличите или намалите размера на текста си, или можете директно да въведете желаната стойност на размера на текста в полето за въвеждане вдясно от плъзгача. Полетата за въвеждане поддържат различни мерни единици, което означава, че можете да въведете "px" или "em" в зависимост от вашия размер, за да промените типа на единицата.

Цвят на текста за мета

По подразбиране всички цветове на текста в Divi се показват в бяло или тъмно сиво. Ако искате да промените цвета на вашия мета-текст, изберете желания цвят от инструмента за избор на цветове, използвайки тази опция.

Разстояние от мета букви

Разстоянието между буквите засяга пространството между всяка буква. Ако искате да увеличите интервала между всяка буква от вашия метатекст, използвайте плъзгача за диапазон, за да регулирате интервала или въведете размера на пространството, което искате, в полето за въвеждане вдясно от плъзгача. Полетата за въвеждане поддържат различни мерни единици, което означава, че можете да въведете "px" или "em" в зависимост от вашия размер, за да промените типа на единицата.

Височина на металната линия

Височината на реда влияе върху пространството между всеки ред на вашия мета-текст. Ако искате да увеличите интервала между всеки ред, използвайте плъзгача за диапазон, за да коригирате интервала или да въведете желания размер на разстоянието в полето вдясно от курсора. Полетата за въвеждане поддържат различни мерни единици, което означава, че можете да въведете "px" или "em" в зависимост от вашия размер, за да промените типа му.

Използвайте границата

Активирането на тази опция ще постави граница около вашия модул. Тази граница може да бъде персонализирана, като се използват следните условни параметри.

Цвят на границата

Тази опция влияе върху цвета на вашата граница. Изберете персонализиран цвят от инструмента за избор на цвят, за да го приложите към вашата граница.

Ширина на границата

По подразбиране границите са широки 1 пиксел. Можете да увеличите тази стойност, като плъзнете плъзгача за диапазон или въведете персонализирана стойност в полето за въвеждане вдясно от плъзгача. Поддържани персонализирани мерни единици, което означава, че можете да промените единицата по подразбиране от "px" на нещо друго, напр. Em, vh, vw и т.н.

Стил на границата

Границите поддържат осем различни стила, включително: плътен, пунктиран, пунктиран, двоен, жлеб, гребен, вложка и старт. Изберете желания стил от падащото меню, за да го приложите към вашата граница.

Разширени опции за блог

В раздела Разширени ще намерите опции, които по-опитните уеб дизайнери могат да намерят за полезни, като персонализирани CSS и HTML атрибути. Тук можете да приложите персонализиран CSS към всеки от многото елементи на модула. Можете също да приложите персонализирани CSS класове и идентификатори към модула, които могат да се използват за персонализиране на модула във файла style.css на вашата тема.

разширена секция на модула blog.png

CSS ID

Въведете незадължителен CSS ID, който да използвате за този модул. Идентификаторът може да се използва за създаване на персонализиран CSS стил или за връзка към определени раздели на вашата страница.

CSS клас

Въведете незадължителните CSS класове, които да използвате за този модул. CSS клас може да се използва за създаване на персонализиран CSS стил. Можете да добавите множество класове, разделени с интервал. Тези класове могат да се използват във вашия Тема на Divi Дъщерен или в персонализиран CSS, който добавяте към страницата или уебсайта си с помощта на опциите за тема на Divi или настройките на страницата на Divi Builder.

Персонализиран CSS

Персонализиран CSS може също да се приложи към модула и всеки от вътрешните елементи на модула. В раздела Персонализиран CSS ще намерите текстово поле, където можете да добавите CSS директно към всеки елемент. CSS записите в тези настройки вече са вградени със стилови тагове. Така че просто трябва да въведете CSS правила, разделени с точка и запетая.

видимост

Тази опция ви позволява да контролирате устройствата, на които се показва вашият модул. Можете да изберете да деактивирате модула си поотделно на таблети, смартфони или настолни компютри. Това е полезно, ако искате да използвате различни модове на различни устройства или ако искате да опростите мобилния дизайн, като премахнете определени елементи от страницата.

Това е всичко за този урок.

аватар на автора
Блеър Jersyer
Разработчик на WordPress и запален по всичко, свързано с новите технологични тенденции. Автори на добавки, Теми на WordPress и други уеб приложения. Автор в BlogPasCher.com.

Тя ПИН на Pinterest