Black Friday Sale! Get up to $40 off GP Premium!Learn more

Sections Extension – How to look like your video?

Home Forums Support Sections Extension – How to look like your video?

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #145470
    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.
    Screenshot from GP video

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

    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!

    #145471
    Tom
    Lead Developer
    Lead Developer

    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 🙂

    #145484
    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

    #145516
    Tom
    Lead Developer
    Lead Developer

    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>

Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.