homestead_faq's profileBrand User

677 Messages

 • 

44.6K Points

Wednesday, September 26th, 2018 10:38 PM

WebsiteBuilder: Editing the Mobile Site

WebsiteBuilder: Editing the Mobile Site

Optimizing your site to be mobile friendly is crucial nowadays. Mobile-friendly websites will be at the core of website indexing with Google starting in March 2021. This is very important for sites that are not mobile-friendly.  Read more on this subject here. https://community.homestead.com/conversations/marketing/googles-mobilefirst-indexing/5fcfff4fb763bd30fe15398d

Over 50% of all internet users are browsing on some type of mobile device. These screens are smaller and tend to have limited functionality, so you need to edit your site to make the easiest possible experience for your site visitors. It is all about making a bigger impact with a smaller space. 

That first section of your site that is visible on a mobile device is the place to put your most important information. This includes company name and logo, a smaller navigation menu, contact information, call to action, or a picture. 

In Website Builder, there is a part of the builder specifically designed to help optimize your mobile site. In the builder, in the bar at the top of the page, there is an icon that looks like a mobile device. Click that to access the mobile editor:




It is suggested to edit the mobile AS YOU GO. Make a few changes in the desktop builder, then switch to mobile and fix it there as well. Our system will create the mobile site based off of what you build for the desktop, but it might not place all elements in your desired order. You will need to check every page and make sure the elements are displaying in the proper order as you go. This will save you a lot of time and headache later. 

There are many things to do in the desktop version to make the content display in the mobile site better. 

  1. Edit your text immediately. Add the textbox element, type or paste your text content, then switch to mobile and turn on "Custom Style in Mobile"



  2. Edit your font, size, color, and alignment under Style > Custom Style.




  3. Remove "Dead Space" in text boxes. This is space at the end of your text taken up with empty lines. Just click on the very end of your text and use the Delete button on your keyboard. 


  4. Don't use "Enter" to create space in text boxes if you want to add a picture or element in the middle. This will not translate properly to mobile. Instead, create two separate text boxes. The same thing applies to Titles and Paragraphs. 


  5. Use settings such as background color with elements whenever possible, instead of layering colored squares under elements. This also does not translate well to mobile. 
    Just click the element, then click More and look for this icon:



    You could, alternately, use a "box" container element if you need to house multiple elements over one background color.
    If you need to edit the background color in mobile only, you can.

  6. Change images to the layout "Fit". This will help them not cut off in mobile, because they will fit the image the best it can in the space provided. 
    Just click on the image, click Advanced > Settings and click on the Drop Down Menu for the layout. Choose "Fit"




  7. Elements in the mobile version are stuck in the section they are placed in. You cannot, for example, move something from the bottom of the page to the top, two sections above.  To move it that much, you will need to change the section it is connected to in the main site.


----------------------------------------------------------------------------


There are some things you will need to change from the desktop version to the mobile:

       1. The navigation menu. If you only have 2-3 pages, you can   get away with having a navigation menu with buttons for each page. More than that, you'll want to have one button that expands your menu. This goes back to utilizing that space on the site the best you can. Navigation menus for a lot of pages will take up too much room.
In the mobile editor, click on the navigation menu, click Advanced, and change the menu type to "Menu Button"





       2. If you add a Photo Gallery, you will want to change the settings for that gallery specifically in the mobile. It will show all images in a single column, which is a lot for your visitors to scroll through. You'll want to click on the gallery, click Advanced, turn off "Show On All Pages", set it to only show one or two images at once, and set Gallery Transitions.




       3. If large text is cut off or not displaying properly on the mobile site, you'll want to follow the instructions in this article.


       4. If the background you place in your desktop site does not work as well in the mobile, you can change that as well, by clicking on the background, clicking on Style, and turn "Mobile Custom Style" on. You can remove images and set the color from here.





----------------------------------------------------------------------------

If some elements don't work in mobile as well as they do on the main site, you can hide them in the mobile view. To do this, simply click the element in question, and click the "Hide In Mobile" icon.
If you decide you want to show that element again, simply click "Settings" on the left, and find it under "Hidden Elements", hover over it with your mouse, and click the icon to un-hide it.



----------------------------------------------------------------------------

To move elements within the mobile editor, click and drag the element. You will see a black cursor indicating where the element will be placed.



----------------------------------------------------------------------------

Lastly, people browsing on mobile tend to be less patient, so they want things faster. It is recommended to create links your visitors can click on that will make calling you, emailing you, or finding you as easy as possible. To do this:

1. Create a link to your phone number. You can either use an icon (like a phone icon) or your phone number. Attach link and choose the Phone option. Type in your phone number and click OK. When people click on this, it will bring the number up, already dialed on their phone. They just have to click call!

2. Similarly, create a link for your email.


3. If you have a map on your site, please follow these instructions:
Type your address into Google Maps (separate from the builder) and click Share. Copy the link they provide. Attach the link to the map on your site. That way, people can click on the map and it will offer directions.
----------------------------------------------------------------------------
One last tip: On the desktop site, build within the two vertical guidelines. This area is the most commonly visible space, regardless of what device is being used, so for people using tablets, this will allow them to see all of your content.
----------------------------------------------------------------------------

These are all tips and suggestions for improving the look and functionality of your mobile site. Use what works for your site and your business!

Youtube Tutorials:

Moving Elements in Mobile:



Editing Text in Mobile:



Editing Images for Mobile:



Editing Header in Mobile:

 

Brand User

7.6K Messages

 • 

106.7K Points

4 years ago

Thank you, I have tested this and I pulled it up on a mobile device. The menu does immediately react and displays the additional pages when it is clicked at a decent font size. I wouldn't have any recommendations for changes, in my opinion it works fine. 

61 Messages

 • 

1.2K Points

4 years ago

Ok, thanks.   New problem in www.benefitssitedemo.com.   I can't find the "second" text element "insurance group llc" to delete it!   I did a copy and paste, but can't find it in the editor, but it shows in the preview and published version.   Isn't there an easy way to find an element like in SBP?
Brand User

7.6K Messages

 • 

106.7K Points

If its off to the far left or right you can zoom out to get a wider view. What page you seeing this on? I only see that text once on the published site. 

61 Messages

 • 

1.2K Points

4 years ago

I still can't find the duplicate.   It's on the main page, but only shows up on the mobile version.   One is part of the Lookout Mountain text, and the other is text by itself.    I was trying to get that text to line up better.

61 Messages

 • 

1.2K Points

4 years ago

I could do that, but that's the element I was trying to use to line up the words "insurance group, llc" in the mobile version, which now comes in as.....

                                           insurance
                                  group, llc

How can I line up these words when I can't even find them?


Brand User

7.6K Messages

 • 

106.7K Points

4 years ago

You may have figured it out. I do not see a line break, it looks good. This is how it displays. 

61 Messages

 • 

1.2K Points

4 years ago

No I didn't, it's still coming in jagged on my cellphone, but if it's straight on yours, I'm going to give up!
I wish I could change the pitch, can't figure out how, I guess it's not possible.
Brand User

7.6K Messages

 • 

106.7K Points

There is something affecting these text boxes, these text boxes are "locked". When editing font type and size avoid using the express editor. Which is the editing bar that immediately appears when you select text.


Instead use the advanced settings, this will allow you to then customize the mobile text for font type and size. 



If you want more control re-add these text boxes and use the advanced settings to customize then you can edit in mobile under custom style.  

11 Messages

 • 

170 Points

4 years ago

I'm having some trouble with the true appearance of my site on a mobile device. I just finished building my site with Website Builder after having a site for many years in Site Builder Plus. In the editor, everything looked exactly as I wanted it to, including the mobile version. All the images were proportioned properly and looked sharp. I published the site (which went very smoothly by the way!). On my iphone 10, many of the photos are stretched horizontally, or cropped vertically and the resolution is poor even though it all looks good in the mobile editor. On my ipad, the site comes up in the desktop version. Opening the site on my desktop, some of the images are poor resolution even though I tried to be very consistent when I initially edited the images in Photoshop. I could not find any specific info with guidelines about the best size and resolution for an image loaded into Website Builder so I edited the images the same as for SiteBuilder Plus. I didn't want the pages to load slowly. Any suggestions about these problems would be very helpful.

Brand User

7.6K Messages

 • 

106.7K Points

Hello,

Since the screen is a bit larger than the preview mode of the editor it is possible some changes can occur. Try setting the images to fit for the layout and this should help the image fit the dimensions on a mobile search. 

11 Messages

 • 

170 Points

Thank you!

After much experimenting, I found that making each image "Fixed" in the Mobile editor was the only way to control the appearance of the image on my phone. I tried all the different layout options, but there was always something wrong with the image if it was in "Block" option. It was a little frustrating (and time-consuming) to get the images the way I wanted them because I had to publish each small change and  experiment to be able to see it on my phone. The mobile editor mode does NOT show the images the way they really appear on my phone. I do wish there were help articles that would explain exactly what the Display, Layout, and Alignment options mean and how they affect the images. I have searched, but maybe I'm missing them.

Brand User

7.6K Messages

 • 

106.7K Points

You are welcome, I am glad the fixed option worked for you. I can definitely look into adding some information on the image layouts for future reference. 

10 Messages

 • 

220 Points

2 years ago

There is a download button underneath the bar on the left of the page that has Elements, Pages, Sections etc. How do I hide that bar that has Elements, Pages, Sections so I can delete the download button? 

Also, is there a way to alphabetize uploaded documents?

Brand User

1K Messages

 • 

30K Points

There is not a built in way to organize the documents by alpabetical order, but you can click Add a Folder to help with organizing. I can also take a look for the download button, what is the website and which page?

10 Messages

 • 

220 Points

Thanks for your help. I will definitely upload the folder next time. I noticed that feature after I had uploaded them individually. 

I was able to remove the download button hidden underneath the element bar by reducing the page size which made the button invisible. 

I was able to remove the line underneath the hyperlink by highlighting it and then clicking on the underline icon which removed the line.

Again, thanks for your help.

Brand User

1K Messages

 • 

30K Points

I am glad to hear it, and yes I have seen other reports about the same download button appearing under the menu. A lot of them are from laptop screens as they are on the smaller end screen resolutions, and sometimes can hide from plain view. 

Please let us know if anything else comes up.

17 Messages

 • 

290 Points

2 years ago

Great suggestions.  Thanks!

4 Messages

 • 

334 Points

2 years ago

I need help to change over our existing Homestead site. It is very simple. It shouldnt take very long.  I just don't have the time to do it.  Let me know who to talk with to get a cost to do this.  Thanks!

Brand User

11.1K Messages

 • 

145.6K Points

If you call 1-800-710-1998, they can get you in touch with the right people for this. 

26 Messages

 • 

630 Points

1 year ago

I watched the video on changing text and followed the instructions. I still cannot change the font size in mobile. No matter what I change to in the styles setting, the text does not change.