Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • June 19, 2025 at 3:05 pm #1485679
    mrqslmk

    Hi all,

    my customer wants to have accordions on his page with firstly an image on the left and text on the right and secondly, in the next accordion, it should be text on the left and image on the right etc.
    I’d like to use the possibilities of the media element “image” such as “zoom in” for the images.

    Thus, my thought is, I’d like to create template: create a color section, add a 1/4 layout element, place an “image” inside. On the right I’d use a 3/4 layout element and place a text block in it. Then I’d save it as a template. In the end, I’d like to use this template inside an accordion, maybe via a shortcode.

    Is that possible? Is my thinking too complicated? How else could I achieve the above mentioned requirement?

    Thx for your help!

    June 20, 2025 at 8:28 am #1485706
    Ismael

    Hey mrqslmk,

    Thank you for the inquiry.

    Instead of using shortcodes, you can directly use html in the accordion content. Example:

    <div class="av-mod-alternate-section">
  <div class="av-mod-image">
    <img src="image1.jpg" alt="Image 1">
  </div>
  <div class="av-mod-text">
    This is the text for section 1. Image is on the left.
  </div>
</div>

<div class="av-mod-alternate-section av-mod-reverse">
  <div class="av-mod-text">
    This is the text for section 2. Image is on the right.
  </div>
  <div class="av-mod-image">
    <img src="image2.jpg" alt="Image 2">
  </div>
</div>

<div class="av-mod-alternate-section">
  <div class="av-mod-image">
    <img src="image3.jpg" alt="Image 3">
  </div>
  <div class="av-mod-text">
    This is the text for section 3. Image is on the left again.
  </div>
</div>

    Add this code in the Quick CSS field:

    .av-mod-alternate-section {
  display: flex;
  align-items: center;
  margin: 2rem 0;
  gap: 2rem;
}

.av-mod-reverse {
  flex-direction: row-reverse;
}

.av-mod-image img {
  max-width: 300px;
  height: auto;
  display: block;
}

.av-mod-text {
  max-width: 600px;
}

    Let us know if you need more info.

    Best regards,
    Ismael

    June 20, 2025 at 10:57 am #1485718
    mrqslmk

    I’m afraid I haven’t described the requirement very clearly. There should be several accordions, each with its own heading. In the first accordion, the image should be on the left and the text on the right, in the second accordion it should be the other way round, etc.

    With the current code that you specify, the image/text paragraphs alternate within an accordion. Correct?

    Can you help me with this?

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