Как добавить приложение Accordion в Weebly и настроить?

Элементы стиля «аккордеон» позволяют добавлять контент в форме спойлера, что позволяет отображать больше контента на меньшем пространстве. Хорошая новость заключается в том, что Weebly разработал элемент аккордеона по умолчанию, так что вы можете перетаскивать любые типы элементов, такие как текст, изображение, галерея и т. Д., В пространство содержимого. Хотя пользовательский опыт использования элемента «аккордеон» оставляет желать лучшего, он определенно стоит во многих сценариях, таких как добавление вопросов и ответов, часто задаваемых вопросов или любого типа структурированного контента. В этой статье мы обсудим, как добавить приложение аккордеона в Weebly и настроить его.

Как добавить приложение Accordion на сайт Weebly?

С появлением центра приложений Weebly предлагает множество новых элементов, и «Accordion» – один из таких элементов, предлагаемых бесплатно. Когда вы находитесь в редакторе Weebly, нажмите «Приложения> Центр приложений», чтобы перейти в Центр приложений Weebly.

Доступ к центру приложений Weebly

Приложение «Аккордеон» доступно в категории «Инструменты», нажмите «Еще» в разделе «Инструменты», чтобы просмотреть приложение.

Приложение Weebly Accordion в Центре приложений

Приложение Weebly Accordion в Центре приложений

Щелкните приложение «Аккордеон», чтобы просмотреть подробную информацию и отзывы пользователей о приложении. Поскольку это приложение от Weebly, в ближайшем будущем вы можете ожидать больше возможностей настройки, чтобы повысить удобство использования. Нажмите кнопку «Добавить», а затем ссылку «Подключиться», чтобы добавить элемент на свой сайт.

Подключение приложения Accordion к сайту Weebly

Подключение приложения Accordion к сайту Weebly

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

Настройка элемента аккордеона

Элемент аккордеона состоит из двух частей – заголовка и содержимого. Заголовок – это фиксированная часть, в которую вы можете добавить только текстовый заголовок, а часть содержимого – это раздел перетаскивания, где вы можете добавлять любые типы элементов, такие как текст, изображение или элемент кода внедрения. Ниже показано, как элемент аккордеона будет выглядеть после добавления на страницу:

Приложение Weebly Accordion по умолчанию

Приложение Weebly Accordion по умолчанию

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

Настройки приложения Weebly Accordion

Настройки приложения Weebly Accordion

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

Решения некоторых текущих проблем

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

Добавьте приведенный ниже код CSS в раздел «Страницы> Выберите страницу вашего аккордеона> Дополнительно> Код заголовка»:

<style>
.accordion__title {
text-transform: none !important;
}

.accordion__item.active > .accordion__title {
background-color: #A9E5F8 !important;
}
</style>

Теперь последний элемент аккордеона на опубликованном сайте будет выглядеть примерно так, как показано ниже, с заголовком, который вы вводите (без изменения на верхний регистр, хотя он выглядит в редакторе при вводе в верхнем регистре) и имеет другой цвет, чем область содержимого.

Индивидуальное приложение Weebly Accordion

Индивидуальное приложение Weebly Accordion

Похожие записи

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *