2 Column Pages for Text and Image

Hi, I would like to have my about page and services pages (design consultancy and bespoke design) to be 2 column pages that I can insert the text on one side, and an image on the other side, like the image attached (which I have done on Photoshop). Please can you tell me how to create these two columns in these pages and where to insert the images and text so that it looks like the image attached?
Thanks in advance.

 

Hello,

To achieve this you can use column shortcode in the page text editor.
Go to the Pages > Add New panel in your dashboard and paste the column shortcode in the page text editor area
and then select the fullwidth page template from the Page Attribute section.
This will solve your issue.

For example

Code:

[col2]
Enter your text here
[/col2][col2_last]
<img src="Enter your image address"/>
[/col2_last]

Also check the link given below, I hope it will help you
http://www.inkthemes.com/how-to-use-shortcodes-in-themes/02/

 

Thanks for that. I have done it, however, the text in the first paragraph is now in a different font and colour...?! I don't know how this happened as I only followed your instructions and didn't do anything else. Can you also tell me how to align my image more to the right of the page as the page currently looks unbalanced....I want it to be the same layout/proportion as the Home Page 2 Columns section. Please see image of current about page now with 2 columns, image inserted.

 

Hello,

1. For the font and color issue, I think you have copied the text and pasted it in the text editor due to which it also contains the style with it.
Go to the Pages > All Pages and click on edit option of desired page and format the text from the "Text Editor".


2. For the alignment issue could you please provide us your page link.

 

Thanks Piyush. I've re-written the text in the text editor and now it appears to be fine.
The link for the page is www.iozzolino.com/about

 

Hello,

Paste this code in Custom CSS
Appearance > Theme Option > Styling Option > Custom CSS

Code:

.content_wrapper .fullwidth-page img{
float:right;
}

 

Hi, it's still not quite right. See www.iozzolino.com/about to see what I mean. The image is now too far to the right, and not in line with the text, I want the top of the image to be in line with the first line of the text, and the bottom of the image to be in line with the last line of the text.

 

Hello,

Paste this code in Custom CSS
Appearance > Theme Option > Styling Option > Custom CSS

Code:

.content_wrapper .fullwidth-page img {
margin-top: -16px;
height: 437px;
}

Adjust its value as per your requirements.

 

Hi, that has made it in line with the text at the top and bottom, however, it is still either all the way to the right of the space on the screen, or too far to the left near the text. Can you tell me how to centre it within the space on the screen. Again, please see www.iozzolino.com/about to see what I mean.

 

Hello,

Paste this code in Custom CSS
Appearance > Theme Option > Styling Option > Custom CSS

Code:

.content_wrapper .fullwidth-page img {
float:none;
margin-left: 15%;
}

Thanks & Regards
Nitesh Raghuwanshi

 

PERFECT! Thank you!