styling with Elementor (or other page builders)

  • Resolved zwalex

    (@zwalex)


    6 years, 11 months ago

    Now that I know that PODS custom fields work just fine with CCS, I would like to style it – specifically a [loop] with a page builder.
    I am currently using Elementor, and it has a shortcode widget, and obviously I can put a loop and it’s fields in there, but then the fields in the loop are not styled at all.
    Can I use a page builder with the [loop] shortcode and how?
    Thanks!

Viewing 4 replies - 1 through 4 (of 4 total)

  • There’s css classes you can use to add some styles. You can find information on this in the Loop section of the plugin towards the bottom. Look for the header called List.

    Here’s a screenshot…

    https://www.screencast.com/t/Bzc7qTOgtz

    Thread Starter zwalex

    (@zwalex)

    Great, this might work, and I know that much about css, but … it would be great if there would be a parameter, that would also wrap the fields in the loop in tags, like i.e. div.
    I have to do that manually now, and fortunately Elementor accepts HTML tags within its Shortcode widget, so I did:

    [loop type=team_member count=5 list=true]
    <div>[field title]</div>
    <div>[field function]</div>
    <div>[field excerpt]</div>
    [/loop]

    Without the explicit <div>…</div> around the fields, [loop] only creates:

    • fieldTitle1
      fieldFunction1
      fieldExcerpt1
    • fieldTitle2
      fieldFunction2
      fieldExcerpt2

      • …

    If there is a better, more ‘elegant’ way, please let me know.
    Thanks again!

    If you want to apply a class to each div, write it like so:

    <div class=classname>[field title]</div>

    Don’t use “” around the class name. WordPress inserts the quotes for you when it interprets the shortcode.

    Thread Starter zwalex

    (@zwalex)

    Thanks – that’s what I did.

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘styling with Elementor (or other page builders)’ is closed to new replies.