How to Create Responsive Texts in Basic Wix Editor-Wix Velo Tutorials

Creating responsive text is a big opportunity for website design in Wix. Learn how to create your responsive texts with Velo by Wix code at the end of this tutorial. Responsive website design has already been provided by Wix in Editor X but the basic Editor is still in use, so we still need a responsive design solution for the basic Editor.

How to Create Responsive Texts in Wix

Before we get started building this feature, we first should understand the key components and respective usage in Editor as well as Velo and JS features. As we do in JS programming, we use functions for many apps in Wix Velo. makeResponsive is the function we will use to build this responsive feature. It has parameters following parameters: elementId, textTheme, fontSize, fontColor, lineHeight, charSpacing, and width. Functions take parameters as the values they will use in later code.

If it is the first time you have explored Wix Velo and coding, please read the keynotes below.

Key Notes

1. // means comment line. You are free not to add these lines into your code but in order to understand what you have written later, we advise you to keep these lines.

2. # means the id of the element in JS. In Velo, we use element IDs with $w sign in front like $w(elementId)

3. html and text methods are the two main text methods in Wix. You can further read about them in Velo documentation.

4. onReady is a page component. It ensures all components are loaded when the page is ready to use.

Responsive Function Parameters

elementId - The text component's ID. (string) for example: "#text1"

textTheme - The text theme (from the templates theme) you want the text to use. (string) for example: "h3"

fontSize - The number of vw units for the text size. (number) for example: 4

Optional parameters:

fontColor - Text color in hex or rgba. (string) for example: "#ffffff"

lineHeight - Line height amount. (number) for example: 1.2

charSpacing - Character spacing amount. (number) for example: 0.3

width - The number of vw units for the width of the text component. (number) for example: 50

function makeResponsive(elementId,textTheme,fontSize,fontColor,lineHeight,charSpacing,width) {

    let style = "
        font-size:"+fontSize+"vw;
        color:"+fontColor+";
        line-height:"+lineHeight+";
        letter-spacing:"+charSpacing+"vw;
        width:"+width+"vw";

    $w(elementId).html = "<"+textTheme+" style="+style+">"+$w(elementId).text+"</"+textTheme+">";

}

Responsive Text Examples

We have added three examples here. So that you can try to build your own responsive text for different cases with different features.

Basic responsive text using only text theme and font size

// onReady function line
$w.onReady(function () {
    makeResponsive("#text2","h4",5);
});
 
// Responsive Text Function
function makeResponsive(elementId,textTheme,fontSize,fontColor,lineHeight,charSpacing,width) {
       let style = "
              font-size:"+fontSize+"vw;
              color:"+fontColor+";
              line-height:"+lineHeight+";
              letter-spacing:"+charSpacing+"vw;
              width:"+width+"vw";
              
              $w(elementId).html = "<"+textTheme+"style="+style+">"+$w(elementId).text+"</"+textTheme+">";
}

Responsive text using all parameters but character spacing

$w.onReady(function () {
    makeResponsive("#text2","h4",5,"#000000",1.2, null, 40);
});
 
// Responsive Text Function
function makeResponsive(elementId,textTheme,fontSize,fontColor,lineHeight,charSpacing,width) {
let style = "font-size:"+fontSize+"vw;color:"+fontColor+";line-height:"+lineHeight+";letter-spacing:"+charSpacing+"vw;width:"+width+"vw";
$w(elementId).html = "<"+textTheme+" style="+style+">"+$w(elementId).text+"</"+textTheme+">";
}

Responsive text using all parameters

$w.onReady(function () {
    makeResponsive("#text2","h4",5,"#000000",1.2, 0.3, 40);
});
 
// Responsive Text Function
function makeResponsive(elementId,textTheme,fontSize,fontColor,lineHeight,charSpacing,width) {

        let style = "
                font-size:"+fontSize+"vw;
                color:"+fontColor+";
                line-height:"+lineHeight+";
                letter-spacing:"+charSpacing+"vw;
                width:"+width+"vw
        ";

        $w(elementId).html = "<"+textTheme+" style="+style+">"+$w(elementId).text+"</"+textTheme+">";
}

See respective owner and live example of this tutorial.

Wix Velo Services

Bizim Muhit offers a variety of services including Wix Velo and coding. If you can't handle a case, let us know.

Hire a Wix Partner