I just want to know how to go about it. How do I keep the photo and the text TOGETHER? Apparently you cannot insert a row inside a row or inside a column… I tried 2 sidebars but the photos will not align with the text. The elements just keep popping around. And I cannot add individual rows next to the sidebar – they keep jumping below the sidebar. If I insert a photo module into a column, then it fills the space and the text module cannot be added.
Does this simple, “common” layout need special coding?
Thanks for getting in touch and sorry to hear about the issues! Ok, so in looking at that layout, you’ll want to pull out the right sidebar row layout. The module you will want for the image/text on the left is called the callout module. You can drag out several to place in your original row layout. The callout module can be configured to have the image on the left and text on the right just like your example. You can then place whichever modules you like in the sidebar as well. Let me know if that helps or if you need clarification!
Thanks…I had not noticed the dropdown that positioned the photo to the left.
BUT I cannot figure out how to make the photo area (column?) narrower than the text area. Right now they are equal and the photo is floating in space while the text is way too long because of a narrow area. I want the layout to be similar to what is on this Forum page: smaller photo, wider text, sidebar.
In that case, you will need to do something a little different to give you more control over things. The callout is a single module and the ability to adjust spacing between elements in it isn’t available. What you’ll need to now do is drag out a 3 column row layout. These 3 columns will make up each of the elements you need - photo, text, sidebar.
When you first pull out the 3 column row layout, each column will be the same width, i.e. 33.33%. You’ll need to adjust the column width. This can be done before you place anything into the columns using the tool icon or after you put modules in each using the little book icon. The sidebar would need to be probably smaller than the other 2 columns, something like 25%. The photo module column smaller than the text module column.
The above should get you going there, it will just be a bit more fine tuning. I would also suggest continually using the same columns as you go down the page or duplicating the row above so you don’t have to fine tune again.
I have tried this solution BUT how do I attach the photo to the text column? Each person should have his photo next to his text. If I duplicate the photo column it lands right below the first photo – not with the text it should go with.
You would use a photo module in column 1, text module in column 2, so on. You should set up one row to your liking first before duplicating it entirely.
I feel like I am going in a loop [sigh] because this was my initial question… cannot put a row within a row. The 3rd column (sidebar) is much longer than the other columns so any additional rows go way below it.
I feel frustrated because it needs to be simple for the client to add/subtract new people.
Shall I try a custom sidebar plugin? Again, I would like it to be easy for the client since they will be updating it. They are not used to working in code. I wish the regular Callout module could be modified somehow with the ability to size the photo % to less than 50%. Just as in this Forum, the photos do not have to be jumbo and the text should not be forced to be super long.
I have been trying to think of a way to make this page work – or even re-design it, but with small photos and lengthy text it would not be fair to the user.
I also tried to insert the photo module into the text module but that did not work either because the photo module expanded to full width so the text could not run around it.
In that case, I may suggest using the WordPress sidebar page template or a custom sidebar plugin for the actual sidebar on the page.
The content is where I believe there is a bit of miscommunication. With a sidebar on a page, it will make what you are trying to do with the image/text a bit easier. You don’t want to insert a photo module into a text module, rather, have the two modules side by side in a 2 column row.
Once you have the 2 modules in place, you can adjust the column width percentage of the first column to make the image smaller and allow more room for the text. The column width percentage can be accessed via the little book icon. Hope that helps, but let me know if I can explain further.
If the above still isn’t working for you, I would be happy to login and do a quick example for you on the page if you like.
