Text Formatting in Website Builder

  • 2
  • 2
  • Question
  • Updated 2 weeks ago
  • (Edited)
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!

Photo of Homestead FAQ

Homestead FAQ, Employee

  • 40,876 Points 20k badge 2x thumb

Posted 2 months ago

  • 2
  • 2
Photo of Susan

Susan

  • 1,714 Points 1k badge 2x thumb
I’m not sure why this has not gotten any replies but I certainly find it very interesting because I have been looking around for anything resembling tutorials that I can look at while I grope my way thru adapting to the “new” website-builder format after being a longtime devotee to old SiteBuilder Plus!
...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
Photo of Elyzabeth

Elyzabeth , Official Rep

  • 11,832 Points 10k badge 2x thumb
Hello Susan!

Thank you, I posted this a few weeks ago hoping it would help someone. That tip with the mobile site building along with the desktop is a great thing to learn early on. If you haven't seen these already, here are a couple Youtube tutorial videos.

https://www.youtube.com/channel/UC5xbyEqz51Npif-TdHSokhw/videos

I hope these can help you as well. We do plan on adding more articles like this one!
Photo of Susan

Susan

  • 1,714 Points 1k badge 2x thumb
Thanks, they are a great help!
Photo of Sherry5040

Sherry5040

  • 474 Points 250 badge 2x thumb
This reply was created from a merged topic originally titled Need some instructions on how to create a mobile site in website builder.

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.
Photo of Elyzabeth

Elyzabeth , Official Rep

  • 10,092 Points 10k badge 2x thumb
The instructions for text formatting are in this post. There isn't a tutorial that will walk you through how to edit your mobile site. As many posts in Community state, it is easier if you do it as you go, but if you have already built your site, you just need to keep in mind that there are limitations in the mobile builder. You can't layer elements like you did in desktop and some things will need to be edited in the desktop version to display properly in mobile, like pictures. (If they are cropped in mobile, go to the desktop side and change the layout of the picture to fit) It is just a matter of trial and error for what looks best for your site.