Hey @Jell92 how’s it hanging my dude.
I was recently trying to figure out the same thing and the X structure was throwing me for a spin.
Pretty much what i did was make a single-{custom-post-type}.php file. Then copied the contents from wp-single-x-portfolio.php and modified it according to how i want the content to output. Make sure you put this file in the root of your child-theme directory.
With some HTML, CSS, JS you can make your dreams come true for your page.
I followed WordPress best practices for creating the custsom post type template.
Check out my code for reference. I used ACF so anything with ( the_field(); ) is calling an ACF field.
Notice at the top I added Template Name & Template Post Type this pulls the template file to the specified post type in my case “events” is my CPT.
<?php
/*
Template Name: Event Info 2
Template Post Type: events
*/
// vars
$location = get_field('location');
$thumbnail = get_field('event_image');
?>
<?php get_header(); ?>
<div class="x-main full" role="main">
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<?php while ( have_posts() ) : the_post(); ?>
<div class="entry-wrap">
<div class="x-container max width">
<!-- Event Title -->
<header class="entry-header">
<h1><?php the_title(); ?></h1>
</header>
<div class="event-date">
<?php the_field('date'); ?> from <?php the_field('start_time'); ?> to <?php the_field('end_time'); ?>
<?php echo $location['address']; ?>
</div>
<!-- Event Title end -->
<!-- Entry Image Full Width-->
<div class="event-image">
<?php if( $thumbnail ): ?>
<img class="text-center" src="<?php echo $thumbnail['url']; ?>" alt="<?php echo $thumbnail['alt']; ?>" />
<?php endif; ?>
</div>
<!-- Entry Image -->
<!-- Event Details -->
<div class="event-details">
<h2>About The Event:</h2>
<?php the_content(); ?>
<?php if( $location ): ?>
<div id="event-map" class="acf-map">
<div class="marker" data-lat="<?php echo $location['lat']; ?>" data-lng="<?php echo $location['lng']; ?>"></div>
</div>
<?php endif; ?>
</div>
<!-- Event Details end -->
</div>
</div>
<?php endwhile; ?>
</article>
</div>
<?php get_footer(); ?>
hope this helps my good man!!