Eventlist boxed layout

Hi @pixelsophie,
EM user here too. ??

Is that your own website? If so, I do not understand your question…

Any layout is determined by HTML and CSS. EM “only” provides the specific output through shortcodes and placeholders. You need to enter your markup in Events > Settings > Formatting > Events > Events Page.

If that is not your website, and you are looking for the same layout, simply look in their source code to see how they have done it and replace the static data (like times and dates) with the EM placeholders.

Hey,
thanks for quick answer. Its mine but the theme works with Divi Builder the layout you see it manual text not from a database. I know the shortcodes from EM but don’t know how i could put it in box layout. Where is the css file or should i put the hole code in Events > Settings > Formatting > Events > Events Page ?

Ah… Divi.. Can’t help you there. I never use editors for my layout. I believe they tend to use way too much code for something simple. Just my opinion, but if you learn HTML & CSS you often can get things done exactly to your liking. ??

In your EM Settings, something as simple as this will get you started:
(Change the X in your preferred image width & height).

<div class="event-boxed">
  <div class="event-boxed-image">
    #_EVENTIMAGE{X,X}
  </div>
  <div class="event-boxed-info">
    <h2><a href="#_EVENTURL">#_EVENTNAME</a></h2>
    <p>#_EVENTEXCERPT</p>
    <p><span class="icon">📆</span>#_{d-m-Y}</p>
    <p><span class="icon">⏰</span>#_12HSTARTTIME - #_12HENDTIME</p>
    <p><span class="icon">📍</span>#_LOCATIONNAME</p>
  </div>
</div>

Then add CSS to your liking. If Dvi has a Customizer (doubt it won’t hehehe), the best place to add additional CSS is in Dashboard > Appearance > Customizer > Additional CSS.

.event-boxed {
  display: block;
  margin: 50px auto;
  max-width: 900px;
  height: 330px;
  background-color: LightGray;
}
.event-boxed-image {
  display: inline-block;
  width: 50%;
  float: left;
}
.event-boxed-image img {
  border: none;
}
.event-boxed-info {
  display: inline-block;
  width: 50%;
  float: right;
}
.icon {
  width: 100px;
  padding-right: 25px;
}

To use Emoji codes (natively supported by WordPress) so you do not have to enqueue FontAwesome: https://www.iemoji.com/view/emoji/518/objects/alarm-clock

Many Thanks for your hard work!

Think this i could kae also but i would use the Layout fpr the eventlist not for single event… It is possible?

Think this i could kae also but i would use the Layout fpr the eventlist not for single event… It is possible?

sorry for the confusion but can you give us additional info about this?

I would have a boxed layout for the eventlist not for event. But think it is possible with a table and some html and css.

maybe this similar thread can help you out – https://www.ads-software.com/support/topic/card-grid-style-event-list-format/