677 Messages
•
44.6K Points
WebsiteBuilder: Text Formatting
Sometimes, how text shows up by default is not how you want it to display. If that is the case, you can definitely customize it to fit the look you're going for in your desktop and mobile website.
To program certain text formats:
1) Click on Elements on the left panel and add a text box
2) Type your text
3) Click on Design on the left panel, click on "Text Style", and choose which text style you wish to program. When you click one, a small menu will appear that lets you edit the Font Size, Font, and Color.
4) You can program multiple text styles, for example, you see that Body Large and Body Small has been changed in the picture below. This can be used to fix text in your mobile site.
5) Click on the text box, select the drop-down for text style, and choose the format you want (In this example, we chose Body Large). You'll see your text change.
6) If you look in the mobile editor, you can see the change there as well. If that format doesn't work in mobile, but it works in desktop, we can fix that.
7) If you click on the text box in the mobile editor, a menu will pop up on the right. Click on "Style" and turn on the toggle for "Mobile Custom Style" Click Finish.
8) Click on the dropdown for text, and choose the format you saved for smaller text (or whatever you need for your mobile text). You'll see your text change.
Now looking between the two builders, you can see the different formats looking great!
**Note, this fix will only work on text boxes that have not been edited in mobile.
If this fix does not work, this means the box was previously edited. To fix this, go back into the desktop view, click on that text box, and choose "Clear Formatting"
To program certain text formats:
1) Click on Elements on the left panel and add a text box
2) Type your text
3) Click on Design on the left panel, click on "Text Style", and choose which text style you wish to program. When you click one, a small menu will appear that lets you edit the Font Size, Font, and Color.
4) You can program multiple text styles, for example, you see that Body Large and Body Small has been changed in the picture below. This can be used to fix text in your mobile site.
5) Click on the text box, select the drop-down for text style, and choose the format you want (In this example, we chose Body Large). You'll see your text change.
6) If you look in the mobile editor, you can see the change there as well. If that format doesn't work in mobile, but it works in desktop, we can fix that.
7) If you click on the text box in the mobile editor, a menu will pop up on the right. Click on "Style" and turn on the toggle for "Mobile Custom Style" Click Finish.
8) Click on the dropdown for text, and choose the format you saved for smaller text (or whatever you need for your mobile text). You'll see your text change.
Now looking between the two builders, you can see the different formats looking great!
**Note, this fix will only work on text boxes that have not been edited in mobile.
If this fix does not work, this means the box was previously edited. To fix this, go back into the desktop view, click on that text box, and choose "Clear Formatting"
susan1578
43 Messages
•
2.8K Points
6 years ago
...I’ve come a long way (in the space of about two weeks) from my first blundering and excruciatingly painful attempts to make friends with it but I sure wish there were some actual instructions somewhere that I could go to before resorting to calling the techies.
...Oh! I just read somewhere that the best way to cope with the mobile aspect of building a new site is to work back and forth with the desktop version every step of the way. Luckily, I realized that early on and I see now that it is an extremely important rule to follow.
...If anyone can point me to more mini-tutorials like the one above, I would be very grateful!
Thanks!
Susan
2
0
sherry5040
33 Messages
•
806 Points
6 years ago
I'm trying to use the customized way to do my mobile site. I'm having issues positioning and re-sizing the text. I need a tutorial on how to use the mobile website software. Where can I find that on the Homestead website?
Thanks.
1
rockerfeller
44 Messages
•
1.8K Points
6 years ago
If you want more traffic on this post, you might consider changing the title to something like: "How to design your text boxes so your mobile site looks great" or something like that :)
2
kathryn1654
53 Messages
•
1.1K Points
6 years ago
How do I change font size of paragraph in mobile editor, it makes no sense to have it same size as a pc font. I clicked on cutom style mobile and changed front size but nothing actuallly changed.
2
0
twiggy
32 Messages
•
2.7K Points
6 years ago
8
0
maurice2103
37 Messages
•
1.6K Points
5 years ago
0
0
michelle_c
7.6K Messages
•
106.7K Points
5 years ago
13
0
aimee7421
6 Messages
•
202 Points
3 years ago
Help! I'm having trouble figuring out how to change the color/font on my PRODUCT page.
1
0