Menu

ФИШКИ

!!! Ниже в примерах я буду сокращать код троеточием (...), чтобы страница не была столь загруженной. Основной код есть на странице "УСТАНОВКА". (Зачем каждый раз повторять?)

1) Добавляем абзацы:

Достаточно просто добавить тег <p> (соответственно текст, и закрыть потом этот тег </p>)

НАГЛЯДНЫЙ ПРИМЕР:

Lorem ipsum dolor sit amet?

1) Nulla facilisi. Fusce accumsan dolor nec ligula scelerisque, sit amet fermentum erat pellentesque. Ut quis ex a justo suscipit convallis. Nulla consequat volutpat nisi at vulputate. Ut iaculis enim in velit commodo vulputate.

2) Nulla facilisi. Fusce accumsan dolor nec ligula scelerisque, sit amet fermentum erat pellentesque. Ut quis ex a justo suscipit convallis. Nulla consequat volutpat nisi at vulputate. Ut iaculis enim in velit commodo vulputate.

Suspendisse luctus leo ante?

1) Nulla facilisi. Fusce accumsan dolor nec ligula scelerisque, sit amet fermentum erat pellentesque. Ut quis ex a justo suscipit convallis.

2) Nulla facilisi. Fusce accumsan dolor nec ligula scelerisque, sit amet fermentum erat pellentesque. Ut quis ex a justo suscipit convallis.

3) Nulla facilisi. Fusce accumsan dolor nec ligula scelerisque, sit amet fermentum erat pellentesque. Ut quis ex a justo suscipit convallis.

ПРИМЕР С КОДОМ:

<!-- ===== RuBizFAQ 2.0 ===== -->
<div id="RuBizFAQ">

    <!-- заголовок -->
    <div class="rbfaq-headline">ЗАГОЛОВОК</div>
    <!-- подзаголовок -->
    <div class="rbfaq-under-headline">подзаголовок</div>
    
    <!-- аккордеон -->
    <div class="rbfaq-content">

        <!-- 1 -->
        <div class="rbfaq-item">
            <input type="checkbox" checked><i></i>
            <div class="rbfaq-item-headline">Lorem ipsum dolor sit amet?</div>
            <div class="rbfaq-item-content">
                 <div class="rbfaq-item-content-area">
                      <p>1) Nulla facilisi. Fusce accumsan dolor nec ligula scelerisque, sit amet fermentum erat pellentesque. Ut quis ex a justo suscipit convallis.</p>
                      <p>2) Nulla facilisi. Fusce accumsan dolor nec ligula scelerisque, sit amet fermentum erat pellentesque. Ut quis ex a justo suscipit convallis.</p>
                </div>
            </div>
        </div>

        <!-- 2 -->
        <div class="rbfaq-item">
            <input type="checkbox" checked><i></i>
            <div class="rbfaq-item-headline">Suspendisse luctus leo ante?</div>
            <div class="rbfaq-item-content">
                <div class="rbfaq-item-content-area">
                     <p>1) Nulla facilisi. Fusce accumsan dolor nec ligula scelerisque, sit amet fermentum erat pellentesque. Ut quis ex a justo suscipit convallis.</p>
                     <p>2) Nulla facilisi. Fusce accumsan dolor nec ligula scelerisque, sit amet fermentum erat pellentesque. Ut quis ex a justo suscipit convallis.</p>
                     <p>3) Nulla facilisi. Fusce accumsan dolor nec ligula scelerisque, sit amet fermentum erat pellentesque. Ut quis ex a justo suscipit convallis.</p>
                </div>
            </div>
        </div>

        <!-- 3 -->
        ...
        
    </div>
    
</div>
<!-- ===== / RuBizFAQ 2.0 ===== -->

2) Добавляем ссылку:

В коде RuBizFAQ 2.0 нет принудительных CSS настроек для ссылок. Ссылки в RuBizFAQ 2.0 будут принимать вид по умолчанию - руководствуясь настройками Вашего сайта.

<a href="URL-ссылка" target="_blank">ТЕКСТ ССЫЛКИ ➤ ➤</a>

НАГЛЯДНЫЙ ПРИМЕР:

Lorem ipsum dolor sit amet?

1) Nulla facilisi. Fusce accumsan dolor nec ligula scelerisque, RuBizPanel 2.0 ► ► sit amet fermentum erat pellentesque. Ut quis ex a justo suscipit convallis.

2) Nulla facilisi. Fusce accumsan dolor nec ligula scelerisque, sit amet fermentum erat pellentesque. Ut quis ex a justo suscipit convallis. Nulla consequat volutpat nisi at vulputate. Ut iaculis enim in velit commodo vulputate.

УЗНАТЬ ПОДРОБНЕЕ МОЖНО ТУТ ► ►

ПРИМЕР С КОДОМ:

<!-- ===== RuBizFAQ 2.0 ===== -->
<div id="RuBizFAQ">
    
    <!-- заголовок -->
    <div class="rbfaq-headline">ЗАГОЛОВОК</div>
    <!-- подзаголовок -->
    <div class="rbfaq-under-headline">подзаголовок</div>

    <!-- аккордеон -->
    <div class="rbfaq-content">

        <!-- 1 -->
        <div class="rbfaq-item">
            <input type="checkbox" checked><i></i>
            <div class="rbfaq-item-headline">Lorem ipsum dolor sit amet?</div>
            <div class="rbfaq-item-content">
                <div class="rbfaq-item-content-area">
                     <p>1) Nulla facilisi. Fusce accumsan dolor nec ligula scelerisque, <a href="http://rubizpanel.ru/" target="_blank">RuBizPanel 2.0 ► ►</a> sit amet fermentum erat pellentesque. Ut quis ex a justo suscipit convallis.</p>
                     <p>2) Nulla facilisi. Fusce accumsan dolor nec ligula scelerisque, sit amet fermentum erat pellentesque. Ut quis ex a justo suscipit convallis. Nulla consequat volutpat nisi at vulputate. Ut iaculis enim in velit commodo vulputate.</p>
                     <p><a href="http://rubizpanel.ru/" target="_blank">УЗНАТЬ ПОДРОБНЕЕ МОЖНО ТУТ ► ►</a></p>
                </div>
            </div>
        </div>
        
        <!-- 2 -->
        ...
        
    </div>
    
</div>
<!-- ===== / RuBizFAQ 2.0 ===== -->

3) Добавляем ВИДЕО:

ВСЕ что Вам нужно сделать, чтобы заиграло Ваше видео (YouTube) - это поменять "ID" видео. Посмотрите на пример с кодом - я выделил "ID" зеленоватым. Обычно, это 11 символов. Их можно получить просто скопируя последние симвомы в ссылке, это когда Вы просматриваете видео на YouTube (до знака "=").

Проще говоря, копируете ниже код, вставляете его в нужное место и заменяете "ID". ЗАМЕТЬТЕ, НЕ ВЕСЬ URL, а именно "ID". Если Вы поменяете весь URL, то видео не заработает, поскольку тут он немного отличается от того, что Вы видите в браузере при просмотре видео.

<p>
    <div class="rbfaq-video-area">
        <iframe src="https://www.youtube.com/embed/XINsLSka_es?rel=0;modestbranding=1;showinfo=0;" allowfullscreen=""></iframe>
    </div>
</p>

НАГЛЯДНЫЙ ПРИМЕР:

Lorem ipsum dolor sit amet?

RuBizPanel 2.0 - Скрытая эффектная ниндзя CSS3 панель для блоггера, инфобизнесмена и инфомаркетера. С ее помощью Вы сможете эффектно и эффективно прорекламировать любой свой проект, например: PDF книгу, подписную страницу, продающую страницу и т.д. УЗНАТЬ ПОДРОБНЕЕ МОЖНО ТУТ ► ►

ПРИМЕР С КОДОМ:

<!-- ===== RuBizFAQ 2.0 ===== -->
<div id="RuBizFAQ">

    <!-- заголовок -->
    <div class="rbfaq-headline">ЗАГОЛОВОК</div>
    <!-- подзаголовок -->
    <div class="rbfaq-under-headline">подзаголовок</div>

    <!-- аккордеон -->
    <div class="rbfaq-content">

        <!-- 1 -->
        <div class="rbfaq-item">
            <input type="checkbox" checked><i></i>
            <div class="rbfaq-item-headline">Lorem ipsum dolor sit amet?</div>
            <div class="rbfaq-item-content">
                <div class="rbfaq-item-content-area">
                     <p>
                        <div class="rbfaq-video-area">
                            <iframe src="https://www.youtube.com/embed/XINsLSka_es?rel=0;modestbranding=1;showinfo=0;" allowfullscreen=""></iframe>
                        </div>
                     </p>
                     <p>RuBizPanel 2.0 - Скрытая эффектная ниндзя CSS3 панель для блоггера, инфобизнесмена и инфомаркетера. С ее помощью Вы сможете эффектно и эффективно прорекламировать любой свой проект, например: PDF книгу, подписную страницу, продающую страницу и т.д. <a href="http://rubizpanel.ru/" target="_blank">УЗНАТЬ ПОДРОБНЕЕ МОЖНО ТУТ ► ►</a></p>
                </div>
            </div>
        </div>

        <!-- 2 -->
        ...
        
    </div>
    
</div>
<!-- ===== / RuBizFAQ 2.0 ===== -->

4) Добавляем КАРТИНКИ:

С картинками все просто. Копируете по выбору внизу код, и заменяете URL картинки.

Если Вы хотите указать свои размеры для картинки, то копируете это:
Для width="" указываете ширину (ПРИМЕР: width="300" - это значит 300px)
Для height="" указываете высоту (ПРИМЕР: height="350" - это значит 350px). РЕКОМЕНДУЮ для высоты использовать height="auto" - высота будет подстраиваться пропорционально ширине, или наоборот.

<p>Дизайн 1: Картинка, список и форма.</p>
<p><img src="http://rubizpanel.ru/images/rbp1.jpg" width="300" height="auto"></p>
<p>Дизайн 3: Видео и форма.</p>
<p><img src="http://rubizpanel.ru/images/rbp3.jpg" width="auto" height="350"></p>

Если у Вас картинка широкоформатная, то рекомендую использовать код ниже - он делает картинку "резиновой" - "заполняет картинкой" всю ширину аккордеона, т.е. о размерах Вам не нужно беспокоиться - все автоматически.

<p>Дизайн 1: Картинка, список и форма.</p>
<p><img class="r-img" src="http://rubizpanel.ru/images/rbp1.jpg"></p>
<p>Дизайн 3: Видео и форма.</p>
<p><img class="r-img" src="http://rubizpanel.ru/images/rbp3.jpg"></p>

НАГЛЯДНЫЙ ПРИМЕР:

Пример с фиксированной шириной

(width="300" height="auto")

(width="auto" height="350")

Пример с резиновой картинкой (100%)

Дизайн 1: Картинка, список и форма.

Дизайн 3: Видео и форма.

ПРИМЕР С КОДОМ:

<!-- ===== RuBizFAQ 2.0 ===== -->
<div id="RuBizFAQ">

    <!-- заголовок -->
    <div class="rbfaq-headline">ЗАГОЛОВОК</div>
    <!-- подзаголовок -->
    <div class="rbfaq-under-headline">подзаголовок</div>
  
    <!-- аккордеон -->
    <div class="rbfaq-content">

        <!-- 1 -->
        <div class="rbfaq-item">
            <input type="checkbox" checked><i></i>
            <div class="rbfaq-item-headline">Примеры "RuBizPanel 2.0"</div>
            <div class="rbfaq-item-content">
                <div class="rbfaq-item-content-area">
                    <p>Дизайн 1: Картинка, список и форма.</p>
                    <p><img src="http://rubizpanel.ru/images/rbp1.jpg" width="300" height="auto"></p>
                    <p>Дизайн 3: Видео и форма.</p>
                    <p><img src="http://rubizpanel.ru/images/rbp3.jpg" width="auto" height="350"></p>
                </div>
            </div>
        </div>

        <!-- 2 -->
        <div class="rbfaq-item">
            <input type="checkbox" checked><i></i>
            <div class="rbfaq-item-headline">Примеры "RuBizPanel 2.0"</div>
            <div class="rbfaq-item-content">
                <div class="rbfaq-item-content-area">
                    <p>Дизайн 1: Картинка, список и форма.</p>
                    <p><img class="r-img" src="http://rubizpanel.ru/images/rbp1.jpg"></p>
                    <p>Дизайн 3: Видео и форма.</p>
                    <p><img class="r-img" src="http://rubizpanel.ru/images/rbp3.jpg"></p>
                </div>
            </div>
        </div>
        
        <!-- 3 -->
        ...
        
    </div>
    
</div>
<!-- ===== / RuBizFAQ 2.0 ===== -->

5) Добавляем СПИСОК:

Стандартный список из тегов <ul> и <li>

Если хотите выделить первое слово в списке, то используйте тег <strong>:

<p>
    <ul>
        <li><strong>Простота и легкость.</strong> Простота и легкость Процесс установки вам так понравится, что Вы почувствуете себя профессионалом!</li>
        <li><strong>Профессионализм.</strong> Вы приобретаете проект, который был сделан профессионалом своего ремесла.</li>
        <li><strong>Лаконичный дизайн.</strong> Время помпезности ушло. Всякие крючки-закарючки уже не работают.</li>
        <li><strong>Видеоинструкции.</strong> Автор очень постарался записать видеоинструкции таким образом, чтобы "RuBizPanel 2.0" Вы смогли установить без проблем.</li>
        <li><strong>Приятное глазу меню.</strong> Для "RuBizPanel 2.0" был сделан специальный меню-сайт, где Вы сможете и скачать проект, и удобно посмотреть видеоинструкции.</li>
        <li><strong>Сделано от сердца.</strong> Я очень люблю то, чем я занимаюсь. Каждый проект делаю как для лучшего друга.</li>
    </ul>
</p>

НАГЛЯДНЫЙ ПРИМЕР:

ПЛЮСЫ "RuBizPanel 2.0"

Как и у каждого профессионально выполненного проекта, есть свои плюсы:

  • Простота и легкость. Процесс установки вам так понравится, что Вы почувствуете себя профессионалом!
  • Профессионализм. Вы приобретаете проект, который был сделан профессионалом своего ремесла.
  • Лаконичный дизайн. Время помпезности ушло. Всякие крючки-закарючки уже не работают.
  • Видеоинструкции. Автор очень постарался записать видеоинструкции таким образом, чтобы "RuBizPanel 2.0" Вы смогли установить без проблем.
  • Приятное глазу меню. Для "RuBizPanel 2.0" был сделан специальный меню-сайт, где Вы сможете и скачать проект, и удобно посмотреть видеоинструкции.
  • Сделано от сердца Я очень люблю то, чем я занимаюсь. Каждый проект делаю как для лучшего друга.

Какие возможности "RuBizPanel 2.0"?

Возможности:

  • Вставка картинки. Картинка будет резиновой, т.е. не нужно беспокоиться о точных ее размерах. Главное, чтобы она более-менее была квадратной.
  • Список выгод. Укажите выгоды рекламируемого Вашего товара. Они только подчеркнут его важность!
  • Форма подписки. Нет проблем! SmartResponder, JustClick или GetResponse - на все УЖЕ есть готовое решение и код для вставки. Покажу как подключить.
  • Видеоинструкции. Автор очень постарался записать видеоинструкции таким образом, чтобы "RuBizPanel 2.0" Вы смогли установить без проблем.
  • Вставка YouTube видео. Вариант с видео Вам также понравится. А процесс подключения - это простое "copy-paste".
  • Варианты. Как для картинки со списком выгод, так и для видео есть два варианта, где один с формой, а другой с кнопкой (ссылка).
  • Работоспособность. Отлично работает во всех браузерах (IE 9+). Настроено даже для iPad и Android 4+. На других моб.устр. (max-width: 767px) панель будет скрыта.

УЗНАТЬ ПОДРОБНЕЕ МОЖНО ТУТ ► ►

ПРИМЕР С КОДОМ:

<!-- ===== RuBizFAQ 2.0 ===== -->
<div id="RuBizFAQ">

    <!-- заголовок -->
    <div class="rbfaq-headline">ЗАГОЛОВОК</div>
    <!-- подзаголовок -->
    <div class="rbfaq-under-headline">подзаголовок</div>
  
    <!-- аккордеон -->
    <div class="rbfaq-content">

        <!-- 1 -->
        <div class="rbfaq-item">
            <input type="checkbox" checked><i></i>
            <div class="rbfaq-item-headline">ПЛЮСЫ "RuBizPanel 2.0"</div>
            <div class="rbfaq-item-content">
                <div class="rbfaq-item-content-area">
                    <p>Как и у каждого профессионально выполненного проекта, есть свои плюсы:</p>
                    <p>
                        <ul>
                            <li><strong>Простота и легкость.</strong> Процесс установки вам так понравится, что Вы почувствуете себя профессионалом!</li>
                            <li><strong>Профессионализм.</strong> Вы приобретаете проект, который был сделан профессионалом своего ремесла.</li>
                            <li><strong>Лаконичный дизайн.</strong> Время помпезности ушло. Всякие крючки-закарючки уже не работают.</li>
                            <li><strong>Видеоинструкции.</strong> Автор очень постарался записать видеоинструкции таким образом, чтобы "RuBizPanel 2.0" Вы смогли установить без проблем.</li>
                            <li><strong>Приятное глазу меню.</strong> Для "RuBizPanel 2.0" был сделан специальный меню-сайт, где Вы сможете и скачать проект, и удобно посмотреть видеоинструкции.</li>
                            <li><strong>Сделано от сердца</strong> Я очень люблю то, чем я занимаюсь. Каждый проект делаю как для лучшего друга.</li>
                        </ul>
                    </p>
                </div>
            </div>
        </div>

        <!-- 2 -->
        <div class="rbfaq-item">
            <input type="checkbox" checked><i></i>
            <div class="rbfaq-item-headline">Какие возможности "RuBizPanel 2.0"?</div>
            <div class="rbfaq-item-content">
                <div class="rbfaq-item-content-area">
                    <p>
                        <ul>
                            <li><strong>Вставка картинки.</strong> Картинка будет резиновой, т.е. не нужно беспокоиться о точных ее размерах. Главное, чтобы она более-менее была квадратной.</li>
                            <li><strong>Список выгод.</strong> Укажите выгоды рекламируемого Вашего товара. Они только подчеркнут его важность!</li>
                            <li><strong>Форма подписки.</strong> Нет проблем! SmartResponder, JustClick или GetResponse - на все УЖЕ есть готовое решение и код для вставки. Покажу как подключить.</li>
                            <li><strong>Видеоинструкции.</strong> Автор очень постарался записать видеоинструкции таким образом, чтобы "RuBizPanel 2.0" Вы смогли установить без проблем.</li>
                            <li><strong>Вставка YouTube видео.</strong> Вариант с видео Вам также понравится. А процесс подключения - это простое "copy-paste".</li>
                            <li><strong>Варианты.</strong> Как для картинки со списком выгод, так и для видео есть два варианта, где один с формой, а другой с кнопкой (ссылка).</li>
                            <li><strong>Работоспособность.</strong> Отлично работает во всех браузерах (IE 9+). Настроено даже для iPad и Android 4+. На других моб.устр. (max-width: 767px) панель будет скрыта.</li>
                        </ul>
                    </p>
                    <p><a href="http://rubizpanel.ru/" target="_blank">УЗНАТЬ ПОДРОБНЕЕ МОЖНО ТУТ ► ►</a></p>
                </div>
            </div>
        </div>
        
        <!-- 3 -->
        ...
        
    </div>
    
</div>
<!-- ===== / RuBizFAQ 2.0 ===== -->


Copyright © RuBizProject | SergeyChunkevich.com
"Эффективные инструменты для бизнеса в интернет" © 2011-. Все права защищены.

Использование изображений, текстов, кодов (JS, PHP, CSS, HTML) с данной страницы
без письменного разрешения Сергея Чункевича запрещено.

Другие проекты:

RuBizHelper 2.0   |    RuBizPanel 2.0   |    Elite Opt-in Forms   |    RuBizScrollToID