Nested Shortcodes

Hi Guys !

first of all, sorry if the topic already exist, I couldn’t find my answer,

I would like to use 2 shortcodes together :

  • shortcode “3 columns”
  • shortcode “Image on top + text”

Step 1 : I would like to put the “image on top + text” in each column of the “3 columns”,
Step 2 : I would like to decide a max column per line

If anyone could help me for at least the step 1, it would be awesome :slight_smile:

Thanks !!


It is possible, that I can say. What specific problem do you have? Shortcode syntax?

Hi Bep,

thanks for this quick answer,

Yes, I don’t really know how to link them together,
My main problem would be how to write the 3 columns one I guess,


I struggle so define the 3 column shortcode, as I would have eventually 3 different “.Inner”.
How would you suggest to do it ?

many thanks,

On your 3-column shortcode you need one .Inner. See my “video-grid” shortcode

<div class="grid-x grid-margin-x">

I have a video shortcode and I use them like:

{{< video-grid >}}
    {{< video id="7JkkTwyGbQU" title="Web Summit 2017 highlights" desc="" >}}
    {{< video id="Djbu0aOSBFM" title="Workshop" desc="Recorded sessions of our workshop: \"Why Great Ideas Fail and How to Make Sure They Don't\"" >}}
    {{< video id="Xoa4NHs5ys8" title="Brightline's Dinner" desc="Brightline Initiative hosted the exclusive speakers dinner at Web Summit 2017 in Lisbon. The dinner sparked delightful conversations and gathered over 200 insightful people together." >}}
{{</ video-grid >}}

Ok thx sjardim,

I get it, basic actually ^^

thanks :slight_smile: