[Resolved] display the services

[Sathish Kumar KP]

Hi,

I want to create multiple small paragraphs as like http://generatepress.com/ to display the services offer with icons in my webiste. Could you please help me to achieve this?

https://www.dropbox.com/s/7tf3f8q6moiwd04/Screenshot%20from%202015-06-19%2022%3A15%3A22.png?dl=0

[Adrian Cojocariu]

Sure man.

You just have to know a little HTML.

You can use divs for that. We will set a class grid-33 to make every div 33% of the screen, which means only 3 divs will fit the screen. The smaller the size of the screen gets, the divs will stack one upon another.

First let’s get rid of Font Awesome problem. This is where Tom took the Icons from.

http://fortawesome.github.io/Font-Awesome/get-started/

If you have GP Premium, just use GP Hooks and select the wp_head section, and insert this.

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">

Then you can use any of these: http://fortawesome.github.io/Font-Awesome/icons/

You can find instructions for size and other stuff on their site.

Then, in a page you can activate Sections, or just simply add the divs anywhere. But you will have to add them as HTML text, not in the visual editor.

<div class="grid-33">
<h2>Title</h2>
<p>Content</p>
</div>

Then you just add another and another and another, and so on.

TIP : You can right click anything on any page and click inspect element ( on Google Chrome ) and you will see the HTML in the right, you then can try to replicate.

[Tom]

Font Awesome is actually built into GP – no need to add that to wp_head 🙂

Using the grid system like that is perfect, especially if you don’t want to install any other plugins.

If you don’t want to mess with HTML, you can use my grid columns plugin: https://wordpress.org/plugins/lightweight-grid-columns

[Adrian Cojocariu]

LoL man I gotta check out all your plugins 😀 I thought Lightweight social media was the only 1.

[Tom]

Lightweight Grid Columns is the newest one 🙂

[Adrian Cojocariu]

^_^ It will ease my work a lot, thx !

[Author]

Posts