При вставке рекламных блоков в статьи на сайте желательно их выделить, чтобы они не сливались с контентом. Самый простой способ — это сделать отступ между объявлением и текстом.
Как сделать вертикальный отступ в объявлениях Google Adsense
Типовой код рекламного объявления Google Adsense выглядит примерно следующим образом:
(adsbygoogle = window.adsbygoogle || []).push(<>);
Здесь YYYYYYYYYYYY и XXXXXXXXXXXXXXX — уникальные коды вашего рекламного объявления.
Для того, чтобы сделать вертикальные отступы у рекламного объявления нужно изменить стиль оформления тега INS. Например так: margin: 20px 0; . В таком случае у рекламного блока Google Adsense будут отступы сверху и снизу величиной 20 пикселей. Вы можете использовать свое значение в зависимости от дизайна вашего сайта.
Отредактированный код рекламного объявления с вертикальными отступами будет выглядеть так:
(adsbygoogle = window.adsbygoogle || []).push(<>);
Как сделать отступы в объявлениях рекламной сети Яндекс (РСЯ)
Код RTB блока рекламной сети Яндекс выглядит следующим образом:
Создать свой блог за 10 минут бесплатно от Google.
Здесь XXXXXX-Y — это уникальный код рекламного объявления РСЯ.
Чтобы добавить отступы у объявления Яндекс нужно добавить стили к блоку DIV. Например такие же как и описанные выше стили рекламного объявления Google Adsense: margin: 20px 0; , которые добавят отступы сверху и снизу величиной в 20 пикселей.
Вариант кода вызова рекламного объявления РСЯ с вертикальными отступами будет выглядеть так:
Теперь ваши рекламные блоки не будут сливаться с текстом, что в конечном итоге должно увеличить конверсию сайта.
Как не нужно делать вертикальные отступы в рекламных объявлениях
Казалось бы, что проще всего сделать отступы, поместив рекламный блок во внешний блок DIV с указанным выше стилем margin: 20px 0; . Например так:
Код рекламного объявления Код рекламного объявления . Код рекламного объявления
Но у такого решения есть существенный недостаток. Когда посетитель использует блокировщик рекламы на вашем сайте образуются пустые места. Дело в том, что блокировщики удаляют рекламный код со всеми стилями, но они ничего не знают про внешний блок DIV, который при использовании блокировщика останется на странице и создаст разрыв 40 пикселей в тексте.
Поэтому используйте предложенные мною методы оформления отступов для объявлений РСЯ и Google Adsense и внешний вид вашего сайта не будет страдать при использовании блокировщиков рекламы.
Источник: moonback.ru
Как создавать собственные блоки Гутенберга в WordPress, пошаговая инструкция
Выпущен WordPress 5.0 , а вместе с ним и новый блочный редактор Gutenberg. Из коробки он упакован в приличный набор блоков, которые вы можете использовать на своих страницах и постах. Однако, поскольку это WordPress, всегда есть место для дополнительных пользовательских функций.
КАК РЕДАКТИРОВАТЬ СВОЙ БЛОК ЗНАНИЙ В GOOGLE? 2021 ГОД!
Другими словами, можно создавать свои собственные блоки. Для этого вам нужно хотя бы немного знать о кодировании, но сам процесс относительно прост. Кроме того, создание пользовательских блоков для функций, которые вы хотите использовать повторно, может сэкономить вам много времени в будущем!
Примечание. При тестировании редактора Gutenberg или создании пользовательских блоков обязательно внесите изменения в промежуточную или локальную среду, например Local by Flywheel. Нажмите здесь, чтобы узнать больше о тестировании WordPress 5.0!
В этой статье я расскажу немного подробнее о текущем состоянии редактора блоков. Затем я расскажу, как создавать новые блоки вручную, и познакомлю вас с парой плагинов, которые могут упростить процесс. Давайте доберемся до этого!
Пользовательские блоки для редактора WordPress
Конечно, блоки являются центральными в функциональности нового редактора. Идея состоит в том, что вы можете добавлять блоки куда угодно и располагать их, используя строки и столбцы. Вот как выглядит редактор без макияжа:
Вот что вы увидите, когда добавите новый блок в одну из своих публикаций или страниц:
Хотя функциональность каждого блока различна, добавление и редактирование их обычно работает практически одинаково. Проблема в том, что на данный момент редактор блоков все еще относительно новый — поэтому выбор блоков в вашем распоряжении не слишком впечатляет прямо сейчас.
Конечно, набор доступных вам блоков со временем обязательно увеличится. Ядро WordPress добавит новые элементы, а разработчики плагинов заполнят пробелы (как они обычно делают). Фактически, уже есть несколько плагинов, которые добавляют новые блоки в редактор блоков, включая атомарные блоки и наращиваемые .
Однако, если есть определенный блок, который вы хотели бы использовать, но не можете найти, у вас есть только один вариант — создание пользовательского блока, который вы можете использовать с редактором Гутенберга.
Как вручную создать пользовательские блоки (в 2 этапа)
Block API редактора Gutenberg — это инструмент, который вам нужен. В этом разделе я помогу вам настроить новый плагин для добавления блока в ваш редактор. Для этого вам понадобятся всего два файла (и немного кода).
Шаг 1: Создайте плагин для вызова ваших файлов блоков
Самый простой способ создать пользовательский блок Gutenberg Editor — это создать плагин, который «ставит в очередь» или вызывает ваши скрипты блока, и добавляет их в редактор.
Для начала зайдите на ваш сайт через SFTP с помощью клиента, такого как FileZilla . Как только вы войдете, перейдите в root папку WordPress и в wp-content/plugins каталог. Внутри вы найдете папки для всех плагинов на вашем сайте:
Теперь щелкните правой кнопкой мыши в любом месте внутри каталога и создайте новую папку. Я позвоню моему test-block , но ваш может иметь отношение к вам:
Откройте папку, создайте новый файл plugin.php (которому можно дать более подходящее имя), затем откройте пустой файл и добавьте следующий код:
Источник: ok2web.ru
Урок 7. Блочная верстка web-сайта. Часть 1
Наиболее популярной является блочная верстка сайта или div верстка. Наш урок блочной верстки сайта поможет начинающим освоить основные приемы div верстки.
1. Основные понятия
Многие web-дизайнеры отдают предпочтение блочной верстке сайта, которая осуществляется с помощью тега . Страницы, сверстанные с помощью блочной верстки, значительно меньше весят по сравнению с табличной версткой.
Блок – это обычная прямоугольная область, обладающая рядом свойств, таких как: рамка, поля и отступы (рис. 1). Содержимым блока может быть что угодно – текст, картинки, списки, формы для заполнения, меню навигации и т.п.
Рамка (border) – это контур, для которого можно задать такие характеристики как толщина, цвет и тип (пунктирная, сплошная, точечная).
Поля (padding) – отделяют содержимое блока от его рамки, чтобы текст, например, не был «впритык» к стенкам блока.
Отступы (margin) – это пустое пространство между различными блоками, позволяющее на заданном расстоянии расположить два блока относительно друг друга.
Блочная верстка сайта включает в себя блоки. Блоки, как и таблицы – это элементы, всегда располагающиеся на странице вертикально. То есть, если в коде страницы записаны подряд два блока, то отобразятся они в браузере один под другим. Если нам нужно расположить несколько блоков горизонтально, то в их свойствах задается такой параметр как «обтекание» (float). Но об этом чуть позже.
В данной работе мы создадим web-страничку из блоков. Сначала создадим контейнер, в который, как в коробку сложим наши блоки. Для наглядности каждый блок будет иметь свой цвет. Конечный результат должен быть таким как на рис. 2.
Контейнер будет содержать в себе пять блоков:
TOP – шапка сайта, обычно содержит логотип компании, название, заголовки и слоганы, поиск, навигацию;
LEFT и RIGHT – левая и правая колонки, обычно содержат рекламу, навигацию, рассылку, новости и т. д.:
CENTER – содержит основной текст страницы;
FOOTER – подвал сайта, содержащий копирайты и другие сведения о сайте, возможно, дублировать навигацию, что является признаком хорошего тона.
Для теста нашего сайта нам понадобятся как минимум три самых популярных браузера – Opera, Fire Fox, Internet Explorer.
Описание web-страницы в основном делается в CSS документе.
2. «Фиксированный» дизайн методом блочной верстки
1. Создайте в блокноте новый документ с расширением css и сохраните его под именем mystyle.css.
2. Создайте HTML-документ и сохраните его в той же папке.
Определяет тип нашего документа. Любая грамотно сверстанная страница должна в самом начале содержать так называемый DOCTYPE. Нужен он для всевозможных устройств вывода информации и браузеров в том числе. Пока что все ныне существующие браузеры прекрасно обходятся и без указания DOCTYPE. Но уже грядут те времена, когда страница сайта, сразу начинающаяся с тэга , просто не будет прочитана, потому как стандарты становятся жестче.