Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • January 22, 2018 at 10:40 pm #901004
    Sigmund

    Hello at Kriesi,
    is it possible to integrate a image box into a post without using the advanced layout builder? I want wo have a infobox with grey background, a image and text on the right side of the image. Like in the example attached. I have tried to use the theme shortcode layout element with image in [av_one_half first] but this does not give me the possibility of background color and I am not sure if this is the best way.

    Any advice is welcome. Thanks.

    Best Regards

    January 22, 2018 at 11:13 pm #901024
    Jordan Shannon

    Hey Sigmund,

    Thanks for submitting your question. Have you attempted to add two columns to a color section? The idea would be to add an image to the left column, add the text to the right column, and then give the color section a gray background. This may produce your desired result.

    Best regards,
    Jordan Shannon

    January 22, 2018 at 11:23 pm #901033
    Sigmund

    Hello Jordan,
    I cannot use color section in a post without the advanced layout builder. A describded in my envireoment I cannot use this layout builder.
    Best Regards

    January 22, 2018 at 11:29 pm #901039
    Jordan Shannon

    Hi,

    Apologies I see. In that case then the next solution would just be to use raw html/css to style that specific section within the text editor if you are familiar with coding HTML/CSS.

    Best regards,
    Jordan Shannon

    January 23, 2018 at 4:04 pm #901512
    Sigmund

    Hi,
    I guess you are correct ;-). Is there a way to integrate a new theme shortcode layout element via PHP?

    Best

    January 23, 2018 at 4:05 pm #901515
    Jordan Shannon

    Hi,

    You could create a separate WP shortcode:

    http://www.wpbeginner.com/wp-tutorials/how-to-add-a-shortcode-in-wordpress/

    Best regards,
    Jordan Shannon

    January 23, 2018 at 4:06 pm #901519
    Sigmund

    Hi,
    ok, thanks for your help. You can close the topic.

    For those who are interested this is the CSS code for a grey box with image on the left:

    .grey-box {
	background-color: #e6e6e6;
	margin-bottom: 15px;
	margin-top: 15px;
	padding: 25px;
    display: flex;
}

.grey-box .image-section {
	width: 25%;
    font-size: 10px;
	font-family: Monserrat;
	font-weight: 500;
	line-height: 1.6;
}

.grey-box .text-section {
	width: 75%;
  	padding-left: 25px;
  	padding-right: 25px;
	font-size: 10px;
	font-family: Monserrat;
	font-weight: 500;
	line-height: 1.6;
    flex-direction: column;
    display: flex;
    justify-content: center;
}

.grey-box .text-section p {
	margin: 0px;
}

@media (max-width: 600px) {
  .grey-box {
      padding: 15px;
      display: block;
  }
  
  .grey-box .image-section {
  	  margin-bottom: 15px;
      width: 100%;
  }
  
  .grey-box .text-section {
      padding: 0px;
      width: 100%;
  }
}

    And the html in the post editor:

    
<div class="grey-box">
<div class="image-section">
<img class="alignnone wp-image-1590 size-medium" src="xxx.jpg" alt="" width="234" height="300" /><br>Caption if needed
</div>
<div class="text-section">
Aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa quialiquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa quialiquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa quialiquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa quialiquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa quialiquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa </div>
</div>

    Yes, could be done with <figure> element also. ;-)

    Best Regards

    • This reply was modified 6 years, 9 months ago by Sigmund.
    January 23, 2018 at 4:19 pm #901528
    Jordan Shannon

    Hi,

    If you need additional help, please let us know here in the forums.

    Best regards,
    Jordan Shannon

  • Author
    Posts
Viewing 8 posts - 1 through 8 (of 8 total)
  • The topic ‘Image Box within Post’ is closed to new replies.