WebsiteBuilder: Text Formatting

  • 7
  • 5
  • Article
  • Updated 5 days ago
  • (Edited)
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"
Photo of Homestead FAQ

Homestead FAQ, Employee

  • 43,116 Points 20k badge 2x thumb

Posted 2 years ago

  • 7
  • 5
Photo of Susan

Susan

  • 2,734 Points 2k 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

  • 45,636 Points 20k 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

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

Sherry5040

  • 604 Points 500 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

  • 45,636 Points 20k 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.
Photo of Rockerfeller

Rockerfeller

  • 1,414 Points 1k badge 2x thumb
This is absolutely fantastic.  Thank you!  I have known that there was some way to do this, but until today, I just made it work the wrong way.  I have had an issue with how my site looks on tablets, and I have a feeling that following these steps when building text boxes MAY be the answer. 

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 :)

Photo of Elyzabeth

Elyzabeth , Official Rep

  • 45,740 Points 20k badge 2x thumb
I'm glad you found this helpful
Photo of Rockerfeller

Rockerfeller

  • 1,414 Points 1k badge 2x thumb
Not just helpful....Trans-formative!
Photo of Kathryn1654

Kathryn1654

  • 576 Points 500 badge 2x thumb
This reply was created from a merged topic originally titled mobile custom style font size.

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

twiggy

  • 2,502 Points 2k badge 2x thumb
So if i convert my current website to site builder will I lose anything?

Photo of Elyzabeth

Elyzabeth , Official Rep

  • 45,636 Points 20k badge 2x thumb
Correct, the old site will be up and running until you switch over to the new one.
Yes you can switch the domain when you are done.
I'm sorry, I'm not sure I'm understanding that last question. There is not a way to point one website to another. Domains point to a website, and you can add links on your site to another domain if you want.
Photo of twiggy

twiggy

  • 2,502 Points 2k badge 2x thumb
hi - I have 3 domains that point to the same website can I have the one domain as it's own sub-website so a website within a website? In other words if I click a link it will connect me to a website, within that one website....I guess it would be called...to me a sub-website
Photo of Elyzabeth

Elyzabeth , Official Rep

  • 45,636 Points 20k badge 2x thumb
You can have one domain pointing to the site. The other 2 domains would need to point to the first, primary domain.
You wouldn't necessarily have a website within a website, but you can create pages that you link to.
Photo of twiggy

twiggy

  • 2,502 Points 2k badge 2x thumb
ok great - once I am finished with the pages and new site - can I let you know and we can make the changes?
Photo of Drew N

Drew N, Alum

  • 262,826 Points 100k badge 2x thumb
Sure thing.
Photo of Maurice2103

Maurice2103

  • 1,350 Points 1k badge 2x thumb
Odd thing, when I do as described on your You Tube "Editing your Text for Mobile View with Website Builder" Design, text style, and color, it changes the font on the desktop (Sometimes even the color and the size), which is not what is shown in the tutorial. I have done re-adding the text to see if that helps but that didn't work either. Not really sure what I'm doing wrong.
Photo of Michelle C

Michelle C, Employee

  • 20,670 Points 20k badge 2x thumb
When editing mobile text use the custom mobile style editing. This will not affect your desktop formatting. Let me know is that helps. 




Photo of Michelle C

Michelle C, Employee

  • 20,670 Points 20k badge 2x thumb
I tested re-adding it as a new text box and used the advanced setting to customize the text, then went to the mobile and customized it with no issues. I apologize, editing the mobile text can be a little odd but it does work as long as you do not use the express editing bar causing it to lock. 
Photo of Maurice2103

Maurice2103

  • 1,350 Points 1k badge 2x thumb
I'm going to mess around with a new site, just to see if there is something I am missing or doing wrong. I'll try to work the problem. However it seems there is more issues than just the mobile thing, this same site is not secure, even though it says it secures this automatically. Not sure if there is a bigger issue with my systems I can't fix myself. None of this makes much sense.

Photo of Michelle C

Michelle C, Employee

  • 20,670 Points 20k badge 2x thumb
Check out our Youtube channel for an overview of the new builders features https://community.homestead.com/homestead/topics/youtube-website-builder-tutorials-are-live. Also, here are the instructions to apply the SSL if you do not see it apply automatically. https://community.homestead.com/homestead/topics/websitebuilder-ssl-cnvdqnt2aqgpr

If you are ever stuck and need more personal assistance feel free to call into support at 1800-710-1998 and we can talk you though navigating anything in the new builder. 
Photo of Maurice2103

Maurice2103

  • 1,350 Points 1k badge 2x thumb
You have been a great help... I will get better at this I swear and be less of an annoyance. Thanks so much.
Photo of Michelle C

Michelle C, Employee

  • 20,670 Points 20k badge 2x thumb
You are not an annoyance, I am always happy to help. I just want to make sure we are able to communicate the information in the best way possible to help you understand. Please do not hesitate and feel free to ask for help or clarification at anytime.