Archived

This topic is now archived and is closed to further replies.

  • 0

Please help- customize image sizes, hover font color


Question

Posted · Report post

Hi there, if you're reading this, thank you for reading! 

I am desperately trying to put two images side by side, with a small margin of space between them. And I would also like to figure out how I would put two horizontal pictures atop each other (like a typical blog post, one pict atop another) but change the image size, ex: The top one would look more square and the bottom would be equal in width but not in height?!

 

Thanks again in advance!!

 

Vanessa

Share this post


Link to post
Share on other sites

7 answers to this question

Posted · Report post

Hi Vanessa,

 

You could use the Pagelines Grid to display your images. The grid will split the area up into columns using shortcodes. You can then place your image inside the shortcode to get it to display in the required layout. See the grid section here - http://demo.pagelines.me/tools/

 

Otherwise you could put the images together in the correct format in a photo editor like photoshop and save as one image, then upload.

 

Hope this helps

Share this post


Link to post
Share on other sites

Posted · Report post

Hi James,

 

Thanks for responding.. how do I get/use Pagelines Grid.. do I have to pay more for it?

 

Thanks,

Vanessa

Share this post


Link to post
Share on other sites

Posted · Report post

Hi Catrina,

 

Thanks for responding.. I guess maybe I'm not reading it right.. Is the Grid something I get like a plug in or how do I use it?? I'm not seeing where I put in on my site?

 

Thanks,

Vanessa

Share this post


Link to post
Share on other sites

Posted · Report post

Hi Vanessa,

 

You can use the Grid System code found here: http://demo.pagelines.me/tools/ in a post, page or text widget. If using it in a Post or Page, make sure to select the Text view. You'll find the code shown there. You can, for example, use something like this:

<div class="row">
<div class="span4">The top image </div>
/div>
<div class="row">
<div class="span4">The bottom image</div>
/div>

Make sure you replace the language I inserted above with the proper HTML for the image (and any link).

 

If you need additional explanation, please let us know.

Share this post


Link to post
Share on other sites

Posted · Report post

Hi Rob.. Its not working! Thanks for you response.. I'm feeling a bit amateur.. Where would I put the HTML links for the images.. For example, I have two pictures I'd like to put side by side in the same line...what exactly do I need to write?

 

Thanks!

Share this post


Link to post
Share on other sites

Posted · Report post

Hi there, you need to paste your code into the text view of the page/post. You can access this via the text tab in the top right hand corner of the wordpress editor on the post/page screen.

 

Then using Rob's code as an example you'd need to use

 

<div class="row">
<div class="span6">Your content </div>
<div class="span6">Your content </div>
</div>

Share this post


Link to post
Share on other sites