Docs

[Olianna P]

Hi!

My site is http://www.ccisusa.com/

LOGIN CREDENTIALS BELOW

I have a few questions:

1. How do I create 2 or 3 columns inside the accordion for the following page: http://www.ccisusa.com/colleges/

2. How do I link an icon to a particular section of a page? For example, on HomePage (http://www.ccisusa.com/) links under Process go to the top of the Process page but I want it to go to “planning” section of that page (http://www.ccisusa.com/process/)

3.I’m trying to add 8 icons in one row on Homepage but have trouble. Is there any way to do that?

Thanks so much!

[Olianna P]

This reply has been marked as private.

[Lely]

Hi Olianna,

1.) Please add something like this:
[x_column type="1/3"] Place your content in here. [/x_column] [x_column type="1/3"] Place your content in here. [/x_column] [x_column type="1/3" last="true"] Place your content in here. [/x_column][x_clear]

2.)On Cornerstone > Section > Planning Row > Add ID : planning. See attached screenshot. Then on homepage image href field, add this http://www.ccisusa.com/process/#planning

3.)That can be achieved using custom code. You may add something like this on a RAW CONTENT element:

<ul class=eight-columns>
<li><img src="http://www.ccisusa.com/wp-content/uploads/2016/05/conversationicon1.png"></li>
<li><img src="http://www.ccisusa.com/wp-content/uploads/2016/05/conversationicon1.png"></li>
<li><img src="http://www.ccisusa.com/wp-content/uploads/2016/05/conversationicon1.png"></li>
<li><img src="http://www.ccisusa.com/wp-content/uploads/2016/05/conversationicon1.png"></li>
<li><img src="http://www.ccisusa.com/wp-content/uploads/2016/05/conversationicon1.png"></li>
<li><img src="http://www.ccisusa.com/wp-content/uploads/2016/05/conversationicon1.png"></li>
<li><img src="http://www.ccisusa.com/wp-content/uploads/2016/05/conversationicon1.png"></li>
<li><img src="http://www.ccisusa.com/wp-content/uploads/2016/05/conversationicon1.png"></li>
</ul>

Then add the following CSS:

ul.eight-columns {
    list-style: none;
}
ul.eight-columns li {
    width: 12.5%;
    float: left;
}
ul.eight-columns li img {
    width: 80%;
}

Hope this helps.

[Olianna P]

Thanks Lely!
You have been the MOST helpful!!!
Everything worked perfectly!!!

Just one question- for #3, I managed to add all 8 images in RAW element successfully but is there a way to make these images linkable?

[Friech]

Hi There,

Sure thing, you can wrap the image tag <img>, with the anchor tag <a href>

<ul class=eight-columns>
<li><a href="LINK URL HERE"><img src="IMAGE URL HERE"></a></li>
<li><a href="LINK URL HERE"><img src="IMAGE URL HERE"></a></li>
<li><a href="LINK URL HERE"><img src="IMAGE URL HERE"></a></li>
<li><a href="LINK URL HERE"><img src="IMAGE URL HERE"></a></li>
<li><a href="LINK URL HERE"><img src="IMAGE URL HERE"></a></li>
<li><a href="LINK URL HERE"><img src="IMAGE URL HERE"></a></li>
<li><a href="LINK URL HERE"><img src="IMAGE URL HERE"></a></li>
<li><a href="LINK URL HERE"><img src="IMAGE URL HERE"></a></li>
</ul>

Hope it helps, Cheers!

[Olianna P]

Awesome thanks! And, what about adding custom headline to each image? Is that possible?

[Jade]

Hi Olianna,

You can add a custom headline shortcode in the code we have provided:

<ul class=eight-columns>
<li><a href="LINK URL HERE"><img src="IMAGE URL HERE">[custom_headline type="left" level="h2" looks_like="h3"]Custom Headline[/custom_headline]</a></li>
<li><a href="LINK URL HERE"><img src="IMAGE URL HERE">[custom_headline type="left" level="h2" looks_like="h3"]Custom Headline[/custom_headline]</a></li>
<li><a href="LINK URL HERE"><img src="IMAGE URL HERE">[custom_headline type="left" level="h2" looks_like="h3"]Custom Headline[/custom_headline]</a></li>
<li><a href="LINK URL HERE"><img src="IMAGE URL HERE">[custom_headline type="left" level="h2" looks_like="h3"]Custom Headline[/custom_headline]</a></li>
<li><a href="LINK URL HERE"><img src="IMAGE URL HERE">[custom_headline type="left" level="h2" looks_like="h3"]Custom Headline[/custom_headline]</a></li>
<li><a href="LINK URL HERE"><img src="IMAGE URL HERE">[custom_headline type="left" level="h2" looks_like="h3"]Custom Headline[/custom_headline]</a></li>
<li><a href="LINK URL HERE"><img src="IMAGE URL HERE">[custom_headline type="left" level="h2" looks_like="h3"]Custom Headline[/custom_headline]</a></li>
<li><a href="LINK URL HERE"><img src="IMAGE URL HERE">[custom_headline type="left" level="h2" looks_like="h3"]Custom Headline[/custom_headline]</a></li>
</ul>

Custom Headline

Hope this helps.

[Olianna P]

Amazing, thanks!

[Jade]

You’re most welcome Olianna.

[Author]

Posts