Как свернуть развернуть текст в wix

Редактор Wix: Добавление и настройка сворачивающегося текста

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

Совет:

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

Шаг 1 | Как добавить сворачивающийся текст

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

Чтобы добавить сворачивающийся текст на сайт:

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

Шаг 2 | Настройте макет сворачивающегося текста

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

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

Чтобы настроить макет текста:

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

Примечание:

Отображаемые параметры зависят от того, хотите ли вы, чтобы текст сворачивался или отображался целиком.

Шаг 3 | Введите и настройте текст

После настройки внешнего вида и поведения сворачивающегося текстового поля введите полный текст.

Отредактируйте текст на кнопках раскрытия и сворачивания или настройте ссылку, которая ведет посетителей на сайт.

Интересный факт

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

Чтобы отредактировать и настроить текст:

Нажмите на сворачивающееся текстовое поле.
Нажмите Редактировать текст.
Введите или вставьте выбранный текст в поле в разделе Редактировать текст.
Действие кнопки: настройте, как именно посетители будут просматривать полный текст, с помощью следующих параметров:
- Раскрыть: посетители могут просмотреть весь текст, нажав на кнопку «Раскрыть»:
  - Текст кнопки «Раскрыть»: введите текст, который будет отображаться на кнопке «Раскрыть», например «Подробнее».
  - Текст кнопки «Свернуть»: введите текст, который будет отображаться на кнопке «Свернуть», например, «Скрыть».
- Кнопка со ссылкой: посетители могут просмотреть весь текст, нажав на ссылку:
  - Текст кнопки ссылки: введите текст ссылки, например, «Нажмите, чтобы узнать больше».
  - Куда ведет ссылка?: введите данные ссылки, которая ведет на полную версию текста.
(Необязательно) Добавьте описание для поисковиков и выберите HTML-тег для текста из раскрывающегося меню в разделе SEO и спецвозможности, чтобы задать тип текста (заголовок, абзац и т. д.). Подробнее о типах текста

Примечание:

Доступные опции зависят от того, что вы выбрали в разделе Как посетители могут развернуть текст? в панели «Макет».

Редактор Wix: Добавление и настройка сворачивающегося текста на мобильном сайте

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

Есть два типа сворачивающегося текста, которые можно использовать на мобильном сайте:

Сворачивающийся текст, перенесенный из редактора на компьютере.
Сворачивающийся текст, который вы добавляете из панели «Добавить» в мобильном редакторе. Этот текст доступен только на мобильных устройствах и не отображается в полной версии сайта.

Не уверены, откуда элемент: из полной или мобильной версии?

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

Содержание:

Настройка сворачивающегося текста в редакторе на компьютере
Добавление сворачивающегося текста только для мобильных устройств
Настройка макета и поведения сворачивающегося текста на мобильном устройстве
Редактирование содержимого сворачивающегося текста только для мобильных устройств

Wix Editor: Customizing Collapsible Text on Your Mobile Site

After adding collapsible text to your site, adjust it to look and behave exactly as you want for your mobile visitors. You can customize the design and layout of your collapsible text for mobile, whether it was added from desktop or from the mobile Editor.

In this article, learn more about:

Adjusting the layout of collapsible text on your mobile site
Customizing the design of your collapsible text box

Adjusting the layout of collapsible text

Use the Layout panel to set how visitors see the full body of text. You can also adjust the spacing, alignment, and choose how many lines of text are displayed in the preview.

To customize your collapsible text’s layout:

Click the collapsible text box in the mobile Editor.
Click the Layout icon .
Adjust your text’s layout with the following settings:
- How do visitors see more text?: Choose how visitors view the full body of text:
  - Expand: Your visitors can click an expand button to view the full text on the page, and then click another to collapse the text.
  - Click link: Your visitors can click a link to view the full text on the relevant page.
  - Show all text: The entire text piece is displayed on your site, and is not collapsed.
- Number of lines displayed: Choose how many lines of text are displayed before a visitor either needs to click the expand or link button.
- Align button: Select whether the expand / link button is aligned to the left, center, or right of the text.
- Spacing between text and button: Make the spacing between the text and the expand / link button bigger or smaller.

Читать:

Pinboards в опере что это

Customizing the design of collapsible text

Use options such as formatting, font, and color, to edit the body of text, as well as the expand or link button to make them look exactly as you want.

To customize the design of collapsible text:

Click the text box.
Click the Design icon .
Click Customize Design.
Click the What do you want to design? drop-down menu and click the relevant area: Text or Button.
Design the text and button of your collapsible text using the available options:

Text design options
Use the following options to edit the design of the text:

Themes: Select the text theme from the dropdown menu to quickly apply a font and size to your text.
Fonts: Choose how your text looks from the drop-down menu.
Font size: Make your text as small or as big as you want.
Formatting: Further customize your text by applying settings such as bold and italic. You can also add a text, highlight, and outline color.
Alignment: Change how your text is aligned, and the direction it goes in.
Character and line spacing: Drag the slider to increase or decrease the spacing between characters and lines.
Shadows: Add a shadow to give your text a 3D effect. You can customize different aspects of the shadow to make it more or less dramatic.

Wix Editor: Formatting Your Text

Formatting helps you organize your text for clearer communication. There are thousands of possible combinations:

Align, bullet or number your text to keep it neat.
Add italics, underlining, highlighting or bold your text to make it stand out.
Upload your own fonts, and choose language fonts that are compatible with the language(s) of your site to get your message across exactly as you intended.

To format your text:

Highlight the text you want to format.
Click Edit Text.
Format your text using the tools:

Formatting Tool
Explanation
Theme

These themes have been created to match your site. You can edit a theme and save the changes so that you can use it again on your site.

Click the Theme drop-down and select a theme. Customize the theme using the formatting tools, then click Save Theme to save the changes.

Font
Choose from hundreds of fonts. You can also upload your own fonts and add language fonts.
Click the Font drop-down and choose a font.
Font Size
Set a specific font size.
Click the Font Size drop-down and set the size. You can enter values between 6 to 999 px.
Bold
Bold the text.

Click the Bold icon .

Italicize
Italicize the text.

Click the Italics icon .

Underline
Underline the text.

Click the Underline icon .

Color
Change the color of the text.
Click the Color icon and select a color.
Highlight
Add a color to the background of the text to highlight it.

Click the Highlight icon and select a color .

Link Text
Hyperlink your text so that when visitors click it, they are taken to the linked destination.

Click the Link icon to choose the link destination and enter the link details.

Align
Align your text to the left, center or right, or justify it across the textbox.

Click the Alignment icon .

Bullets & numbering
Create a bulleted or numbered list with your text.

Click the Bullets & numbering icon to choose the list type.

Indent
Indent your text.

Click the Decrease indent icon or the Increase indent icon to change the size of the indent.

Text Direction
Change the direction of your text between left-to-right and right-to-left.

Click the Change text direction icon .

Effects
Add glow, blur, shadow, outline effects and more.
Click Effects and select one.
Character spacing
Change the spacing between the characters in your text box.
Click Character & line spacing and set the amount of space between the characters.
Line spacing

Change the spacing between the lines in your text box. You can set a specific amount, or use automatic spacing.

Click Character & line spacing and set the line spacing or select Automatic to automatically fill the text box.

Vertical text
Make your text vertical instead of horizontal. This is mostly useful for languages such as Japanese.
Click Vertical text and the Enable vertical text toggle to flip your text.
SEO & accessibility
Use HTML tags to structure your content to improve your site’s SEO and assist in accessibility.
Click Choose HTML tag and select one from the drop-down.

You cannot link text that spans over two paragraphs. This means that if you have two words or sentences that are separated by Enter, they act as two paragraphs and you cannot link them both at the same time. You can link text that spans over two paragraphs if you use Shift + Enter to create the line space instead of Enter.
You can remove the underline of hyperlinked text by selecting the linked text and clicking the Underline icon.
Wix has licenses for the fonts in the Editor. They are available for digital use ONLY and within your Wix site. For more information, view the Wix Terms of Use. You cannot download the fonts to use, but you may find the open source versions and install them to your computer. Be careful with fonts found in external URLs. These are not owned by Wix so you need to contact the author for permission to use them.