Sections Extension – How to look like your video?

[Kristy]

Hi! One of the reasons I upgraded to the Sections extension was because at 01:00 into GP’s training video, they illustrate building a Sections page showing their product features.

The video shows the front end page displaying beautifully, with blocks of text and icons next to it. I thought I was getting a template that would make this happen.

So, I created my own section and pasted text, and it doesn’t have any of the formatting shown in the video 🙁

How can I get my text to appear in fancy blocks like it shows in the video? If it’s not built into the extension (you might want to disclaim that on your video), then would you be willing to share the CSS required to make that happen? I have a child theme all set up, so I’m all ready for some code. Thank you!

[Tom]

Hi there,

I should add a note on the add-on page – sorry for the confusion.

You can build text columns super easily using our free grid columns plugin: https://wordpress.org/plugins/lightweight-grid-columns/

Let me know if you need more info 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Kristy]

Hi, Tom

You had me at ‘we have a free plugin for this’ – thank you! My section is now looking almost identical to the one displayed in the video demo. Do you have any tricks for adding the icon image in your section next to your column blocks? I found great icons at The Noun Project.

Thanks,
Kristy

[Tom]

Font Awesome is is integrated into the theme if you want to use it: http://fortawesome.github.io/Font-Awesome/icons/

Go into the “Text” editor and find the place you want the icon to show up, then add the code:

<i class="fa fa-car"><!-- icon --></i>

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Author]

Posts