twentytvvo

Разбейте левую часть с текстом и правую с формой на две колонки с flat:left; и на ПК width:50%, а на мобайле width:100%;

Простое решение, берите и стилизируйте просто под себя.

Изначально используйте альтернативы единице масштаба px, например em, px, pt, эксперементируйте, что бы текст и блоки уменьшались пропорционально от размера окна и не были четко привязаны к пикселям.

Как это сделать по людски:

1. Сверстать статику на HTML, CSS.
   
2. Стилизовать анимацию в CSS.
   
3. Скриптовать нажатия и смену стилей в JS.
   
   

Вариант для ленивых или для халтуры:
Найти похожее на https://codepen.io/ и допилить под себя.

Или же как альтернатива, как преобразовать $data в текстовое значение?
Сейчас шорткод выводит так как и написано $data, а не значение переменной...

function data_text_shortcode() {
    return '$data';
}
add_shortcode('datashortcode', 'data_text_shortcode');

Встречал данную проблему с выводом товаров или записей блога. Решается это просто.
1. Нужно страницу шаблона Блога или Архива Товаров/Категорий указать в настройках сайта и в настройках WooCommerce, тогда проблема исчезает.
2. Или же удалить страницы сами и создать их альтернативы в виде шаблона в Theme Builder.

Да, можно, если не ошибаюсь у Sticky Effect есть еще настройка viewport, уверен что видел ее в какой то версии, не помню правда, в последней или прошлых.