update

includes/shortcodes.php

@@ -37,4 +37,14 @@ function getSubpages($atts){
     return $content;  
 }
 
-add_shortcode( 'subpages', 'getSubpages' );
+add_shortcode( 'subpages', 'getSubpages' );
+
+
+function getContactBoxes($atts){
+    ob_start();
+    $content .= get_template_part('template-parts/shortcodes/contactboxes','',$atts);
+    $content .= ob_get_clean(); 
+    return $content;  
+}
+
+add_shortcode( 'contactboxes', 'getContactBoxes' );

scss/includes/_content.scss

@@ -43,6 +43,10 @@ a{
             margin-right: 0 !important;
         }
 
+        .boxicon {
+            width: 35px;
+            height: auto;
+        }
 
         .single-post-image{
             width: 100%;
@@ -64,16 +68,28 @@ a{
             width: 100%;
             height: 240px;
             background-color: #fff;
+
+            &.subpage-content{
+                .teaser {
+                    height: 140px;
+                }
+                height: auto;
+            }
         }
 
         .imagecontainer{
             width: 100%;
             height: 240px;
             background-color: $lightgrey;
-            background-size: cover;
+            background-size: 100%;
             background-repeat: no-repeat;
             background-position: center;
-
+            transition: all 0.3s ease-in-out;
+
+            &:hover{
+                transition: all 0.3s ease-in-out;
+                background-size: 105%;
+            }
         }
     }
 }
@@ -169,4 +185,5 @@ h2 {
             margin: auto;
         }
     }
-}
+}
+

scss/styles.css

@@ -394,6 +394,10 @@ a:hover {
     margin-right: 0 !important;
   }
 }
+.posts-grid .single-post .boxicon {
+  width: 35px;
+  height: auto;
+}
 .posts-grid .single-post .single-post-image {
   width: 100%;
   height: 240px;
@@ -414,13 +418,24 @@ a:hover {
   height: 240px;
   background-color: #fff;
 }
+.posts-grid .single-post .single-post-content.subpage-content {
+  height: auto;
+}
+.posts-grid .single-post .single-post-content.subpage-content .teaser {
+  height: 140px;
+}
 .posts-grid .single-post .imagecontainer {
   width: 100%;
   height: 240px;
   background-color: #f7f8f8;
-  background-size: cover;
+  background-size: 100%;
   background-repeat: no-repeat;
   background-position: center;
+  transition: all 0.3s ease-in-out;
+}
+.posts-grid .single-post .imagecontainer:hover {
+  transition: all 0.3s ease-in-out;
+  background-size: 105%;
 }
 
 #about-banner {

template-parts/pages/subpage.php

@@ -1,13 +1,17 @@
 
 
 <div class="single-post bg-white">
-    <?php if( has_post_thumbnail( $args->ID )): ?>
+    <?php if( has_post_thumbnail( $args->ID )): 
+          $image = wp_get_attachment_image_src( get_post_thumbnail_id( $args->ID ), 'full' )[0];    
+    ?>
+        <div class="w-100 imagecontainer bg-gray" style="background-image:url('<?php echo $image; ?>')"></div>
     <?php else: ?>
         <div class="w-100 imagecontainer bg-gray"></div>
     <?php endif; ?>
 
-    <div class="single-post-content d-flex flex-column p-5">
+    <div class="single-post-content subpage-content d-flex flex-column p-5">
         <h2 class="fs23 mb-3"><?php echo $args->post_title; ?></h2>
-        <p><?php echo get_post_meta($args->ID,'teaser',true); ?></p>
+        <p class="teaser"><?php echo get_post_meta($args->ID,'teaser',true); ?></p>
+        <a href="<?php echo get_permalink($args->ID); ?>" ><img src="<?php bloginfo('stylesheet_directory'); ?>/images/icons/arrow_yellow.svg"></a>
     </div>
 </div>

template-parts/shortcodes/contact.php

@@ -0,0 +1,9 @@
+
+
+<div class="single-post bg-white p-5 d-flex flex-column justify-content-between h-100">
+    <img src="<?php bloginfo('stylesheet_directory'); ?>/images/icons/Kontakt_icon.svg" alt="Autohaus Löhr, Fahrzeugzentrum Olpe" class="boxicon my-3" />
+    <h3 class="my-3">Anschrift</h3>
+    <div class="mb-5">    
+       <?php the_field('adresse','options') ?>
+    </div>
+</div>

template-parts/shortcodes/contactboxes.php

@@ -0,0 +1,7 @@
+
+<div class="posts-grid p-0 w-100">
+
+    <?php get_template_part('template-parts/shortcodes/contact'); ?>
+    <?php get_template_part('template-parts/shortcodes/fragen'); ?>
+    <?php get_template_part('template-parts/shortcodes/socialmedia'); ?>
+</div>

template-parts/shortcodes/fragen.php

@@ -0,0 +1,16 @@
+
+
+<div class="single-post bg-white p-5 d-flex flex-column justify-content-between h-100">
+    <img src="<?php bloginfo('stylesheet_directory'); ?>/images/icons/Kontakt_icon.svg" alt="Autohaus Löhr, Fahrzeugzentrum Olpe" class="boxicon my-3" />
+    <h3 class="my-3">Haben Sie Fragen?</h3>
+    <div class="mb-5">    
+    <div class="d-flex flex-row">
+        <p>Wir beraten Sie gerne:</p>
+        <p class="whatsapp"><a href="https://wa.me/4915735980000" target="_blank">02761/ 82870</a></p>
+    </div>
+    <div class="d-flex flex-row">
+        <p class="clock text-end">Mo.-Fr.:<br>Sa.:</p>
+        <p class="">08:00 - 17:00 Uhr<br>09:00 - 12:00 Uhr</p>
+    </div>
+    </div>
+</div>

template-parts/shortcodes/socialmedia.php

@@ -0,0 +1,12 @@
+
+
+<div class="single-post bg-white p-5 d-flex flex-column justify-content-between h-100">
+    <img src="<?php bloginfo('stylesheet_directory'); ?>/images/icons/Kontakt_icon.svg" alt="Autohaus Löhr, Fahrzeugzentrum Olpe" class="boxicon my-3 opacity-0" />
+    <h3 class="my-3">Folge uns auf Social Media</h3>
+    <div class="mb-5">    
+    <div class="d-flex flex-row">
+        <p class="clock text-end">Mo.-Fr.:<br>Sa.:</p>
+        <p class="">08:00 - 17:00 Uhr<br>09:00 - 12:00 Uhr</p>
+    </div>
+    </div>
+</div>