Text and Pictures on New Pages

User 411087 Photo


Registered User
31 posts

I want to create a "Contact" page for a store I'm working on. I've added the page, but when I began to type in the information I wanted to use on the page, I could not find a way to center the text on the page. I also wanted to place a picture on the page, but could not find anything that would allow me to do that as well. What am I missing? All assisitance is much appreciated!!!
User 103173 Photo


VP of Software Development
0 posts

Alignment functionality has not been added in yet (don't ask me why). ;)

If you need to center something, what you could use is the HTML Tool and then enter in your text there along with the proper HTML markup.
Learn the essentials with these quick tips for Responsive Site Designer, Responsive Email Designer, Foundation Framer, and the new Bootstrap Builder. You'll be making awesome, code-free responsive websites and newsletters like a boss.
User 38401 Photo


Senior Advisor
10,951 posts

Hiya Terry,

To center text or add images you need to use the HTML Tool. Doing the text is very easy as all you need to do is go to the place where you want the centering to start and click your mouse there so the cursor is in that spot and then open the HTML Tool and type this in it:

<center>

Then press ok (or whatever the button is, I dont' have it open to check lol) and it will put that on the page for you.

Now go to the END of the text or image you want to center and place your cursor there and do the same thing as above only be sure it's an ending tag like this:

</center>

This will place the code within brackets onto your page for you and it should center anything between it so it will be something like this on your page:

[[[<center>]]]all your text here you want centered[[[</center>]]]

Now for an image you need to do exactly the same thing as above but you need to add the step of adding the image code to the thing and instead of 2 steps you should be able to do this in 1 step so it will end up looking like this:

[[[<center><img src="image file here alt="image info here" /></center>]]]

Give that a try and let me know how it goes for you. I've had quirks happen where centering an image got messy and I had to enclose the image in it's own tags, but I think that's fixed now, but if the above image code setup doesn't work for you try this:

[[[<center>]]][[[<img src="image file here alt="image info here" />]]][[[</center>]]]

Be sure you use the HTML Tool to input all the code rather than just typing it yourself. I believe if you type it yourself it ends up thinking it's normal text and tries styling it with the CSS and might get messy so use the HTML Tool to insert like so:

HTML Tool to insert: <center><img src="image file here alt="image info here" /></center>

or

HTML Tool to insert: <center>
HTML Tool to insert: <img src="image file here alt="image info here" />
HTML Tool to insert: </center>

The tool will add the [[[ ]]] brackets for you which will then be read as non styled text and as code like it should be.

Hope that helps :)
User 411087 Photo


Registered User
31 posts

Thanks Scott & Jo Ann for all you help. I'll do as you've suggested. Unfortunately, I'm not very proficient in writing HTML code, but your directions are very good. I have one more question, How would I write the code if I wanted a picture to the left of the text? Thanks for your time and patience!
User 2114410 Photo


Registered User
383 posts

I think you'd just leave out where Jo Ann put center. It will automatically sit to the left, well it should from my HTML experience. :D
User 411087 Photo


Registered User
31 posts

Thanks Bren, I'll give it a try. You folks are very helpful!
User 117361 Photo


Ambassador
6,076 posts

Terry... to place an image over to the left you are going to have to use a little css in that html box otherwise the image will remain above the text. Here is a little code to do that
<div style="text-align:center;"> DUIS autem vel eum iriure dolor in hendrerit in vulputate velit
esse molestie consequat, vel illum dolore eu feugiat nulla facilisis
at vero eros et accumsan <div style="float:left; border:none;"><img src="yourimage.png" width="128" height="128" alt="my image" title="my image" /></div></div>


You will notice that I have used a slightly different system to align the text in the centre of the page... that is by the use of css and text-align since the center tag is now deprecated.
http://www.codehelp.co.uk/html/deprecated.html even though most browsers still recognize it.
Using float will have the text wrap around the image which will remain over on the left of the page. To have the text wrap on the other side, just save the float left to float right.

Just bear in mind that having the text centred will not work well aesthetically with the image block over on the left.

User 38401 Photo


Senior Advisor
10,951 posts

Thanks Janys, I'll even give that code a try myself as I've never gotten anything to center an image other than the <center> tags and definitely not for lack of trying lol. I'm very sure I tried that style tag to try to center it also and it wouldnt' work, but... that was about a year ago so maybe it's been updated since I tried last so I'll see how that works out for centering also :)
User 38401 Photo


Senior Advisor
10,951 posts

Thanks Janys, I'll even give that code a try myself as I've never gotten anything to center an image other than the <center> tags and definitely not for lack of trying lol. I'm very sure I tried that style tag to try to center it also and it wouldnt' work, but... that was about a year ago so maybe it's been updated since I tried last so I'll see how that works out for centering also. I myself wouldn't use the tag either since I knew it was depracated, if it wasn't the only thing I could get to work lol. I'm pretty sure that it was suggested by support when I asked them about it even now that I think about it.
User 117361 Photo


Ambassador
6,076 posts

Jo Ann
I did my css course a few years back now and that method of centering has remained the same. Maybe you missed out a semi-colon or something which meant the code wouldn't work properly. Have another go and let's hear how it went for you...

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.