Docs

[Sandie]

Hi,

I’m trying to create a grid to look similar to this: http://prntscr.com/ei854i
You can find that grid if you go to the bottom of this page URL: https://www.marieforleo.com/about/

For the 3 items, I would like to have the three different treatments that I offer on my site. So when they click on the “link” (the item) they should be linked to the different sections on my page https://youpheal.com/behandlingar/

So this is what I need help with:

1. I want all the three items to be linked to the same page (https://youpheal.com/behandlingar/) but I need the IMAGES and the TEXT for each grid item to be different ones. Like this: http://prntscr.com/ei8a27

2. The page name is BEHANDLINGAR, but I want to be able to decide myself what it should say in the Grid items.

You can find the grid on page: https://youpheal.com/test/

Thanks!

Best Regards
/Sandra

[Joao]

Hi Sandra.

I would go for 3 marginless columns.

Set a background to each column by adding the following code to the Style box of each column:

background-image: url("http://example.com/paper.jpg");

Add a Custom headline with the link or a text element on Each Column and link to the desired url.

To center the Custom headline I would use a gap element with size defined by % not px.

If you want to make the columns linkable as well, you can add an ID : column-link to each column

And Add the following code to Cornerstone > Settings > Custom > Javascript

jQuery("#column-link").wrap("<a href='https://youpheal.com/behandlingar/'></a>");

Hope it helps

Joao

[Sandie]

Hi,

Yes that would work, but I need to get the effect where the image (column) is darker and ones you move the mouse over the column it will go brighter so you will see the image better.

Same effect as on the three columns on the bottom of this page: https://www.marieforleo.com/about/

You can also see the effect here: http://theme-one.com/the-grid/lome/

Can I get that same effect just by adding 3 maginless columns and do as you wrote above? It so, how do I do to get that effect I am talking about?

Thanks!

Best Regards
/Sandra

[Christopher]

Hi there,

Please add following code in Customize -> Custom -> Global CSS :

#column-link{

    -webkit-transition: all .4s ease;
    -moz-transition: all .4s ease;
    -ms-transition: all .4s ease;
    -o-transition: all .4s ease;
    transition: all .4s ease;
background-color:rgba(0,0,0,0.5);
}
#column-link:hover{

    -webkit-transition: all .4s ease;
    -moz-transition: all .4s ease;
    -ms-transition: all .4s ease;
    -o-transition: all .4s ease;
    transition: all .4s ease;
background-color:none;
}

Hope that helps.

[Sandie]

Hi,

I have added the CSS above but nothing happend. Maybe its because I haven’t done these steps as of yet:

1. Add a Custom headline with the link or a text element on Each Column and link to the desired url.

2. If you want to make the columns linkable as well, you can add an ID : column-link to each column

And Add the following code to Cornerstone > Settings > Custom > Javascript

jQuery(“#column-link”).wrap(““);

So how do I do the ones above?

3. What image size should I make the images in, sinze I would like them to look like this: http://prntscr.com/ejcjl9

I will change the images so they are centered and will look good, when I know what size to use for them to get the same result as in the link above.

You can find the 3 columns on my page: https://youpheal.com
http://prntscr.com/ejck7d

Thanks!

Best Regards
/Sandra

[Christopher]

Hi there,

#1 Do you want to link text/headline to specific section?
Try following code in text element :

<a href="#x-section-4>BLI FRISKARE FORTARE MED HOLOGRAFISK KINESIOLOGI </a>

#2 Please see the attachment.

#3 It should be around 680*420px.

Hope it helps.

[Author]

Posts