{"id":95807,"date":"2022-04-18T10:58:32","date_gmt":"2022-04-18T14:58:32","guid":{"rendered":"https:\/\/www.inmotionhosting.com\/support\/?p=95807"},"modified":"2022-07-22T09:04:43","modified_gmt":"2022-07-22T13:04:43","slug":"images-side-by-side","status":"publish","type":"post","link":"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/blocks\/images-side-by-side\/","title":{"rendered":"How to Set Images Side By Side In WordPress"},"content":{"rendered":"<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"538\" src=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2022\/04\/Side-By-Side-Images-1-1024x538.png\" alt=\"Side by side images with WordPress blocks, wall at gallery\" class=\"wp-image-95927\" srcset=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2022\/04\/Side-By-Side-Images-1-1024x538.png 1024w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2022\/04\/Side-By-Side-Images-1-300x158.png 300w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2022\/04\/Side-By-Side-Images-1-768x403.png 768w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2022\/04\/Side-By-Side-Images-1.png 1200w\" sizes=\"auto, (min-width: 1360px) 876px, (min-width: 960px) calc(61.58vw + 51px), calc(100vw - 80px)\" \/><\/figure>\n\n\n\n<p>Using images in your post and page content is often necessary to help emphasize your message. Visual aids draw the eye and can create a powerful contrast. And when it comes to contrast, presenting images side by side is a great way to make powerful statements. In this article, you\u2019ll learn how to set images side by side with the column block, row block and patterns.<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><a href=\"#columns\">Create Side by Side Images Using Column Blocks<\/a><\/li><li><a href=\"#patterns\">Using Patterns for Side by Side Images<\/a><\/li><li><a href=\"#row\">Using the Row Block for Side by Side Images<\/a><\/li><li><a href=\"#non-responsive\">How columns collapse (and how to avoid it)<\/a><\/li><\/ul>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"columns\">Create Side by Side Images Using Column Blocks<\/h2>\n\n\n\n<p>The easiest way to create side by side images (and perhaps the best way, considering your needs) is to use the all-purpose column block. Column blocks create evenly spaced, mobile responsive columns that can accept multiple kinds of content \u2014 including images, text, and more.<\/p>\n\n\n\n<ol class=\"article_list wp-block-list\"><li><a href=\"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/logging-into-wordpress-dashboard\/\">Log into WordPress dashboard<\/a><\/li><li>Select a post or page to edit or create new contact<\/li><li>Use the plus sign to create a new block<br><img loading=\"lazy\" decoding=\"async\" width=\"500\" height=\"332\" class=\"wp-image-95619\" style=\"width: 500px;\" src=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2022\/04\/wordpress-blocks_010.png\" alt=\"Plus sign to create block in Gutenberg\"><\/li><li>Choose <strong>Columns<\/strong><br><img loading=\"lazy\" decoding=\"async\" width=\"500\" height=\"692\" class=\"wp-image-95411\" style=\"width: 500px;\" src=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2022\/03\/wordpress-blocks_001.png\" alt=\"Select columns\" srcset=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2022\/03\/wordpress-blocks_001.png 411w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2022\/03\/wordpress-blocks_001-217x300.png 217w\" sizes=\"auto, (min-width: 1360px) 876px, (min-width: 960px) calc(61.58vw + 51px), calc(100vw - 80px)\" \/><\/li><\/ol>\n\n\n\n<p>Once you have selected a column block, you can choose the orientation of the columns. You have your choice of various width ratios by percentage of the total width of your content area:<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"677\" height=\"263\" src=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2022\/03\/columns_gutenberg.png\" alt=\"Column width ratios\" class=\"wp-image-95410\" srcset=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2022\/03\/columns_gutenberg.png 677w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2022\/03\/columns_gutenberg-300x117.png 300w\" sizes=\"auto, (min-width: 1360px) 876px, (min-width: 960px) calc(61.58vw + 51px), calc(100vw - 80px)\" \/><\/figure><\/div>\n\n\n\n<p>For example, if you choose 50\/50, you will have two evenly spaced columns dividing the total width of the area by exactly half.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"patterns\">Using Patterns for Side by Side Images<\/h2>\n\n\n\n<p>Another way to get a formatted group of blocks to show images is to use patterns.  Patterns are predefined groups of blocks and may often have a format and appearance that you want to use.  Patterns can be obtained in a particular theme or you can go online to the <a href=\"https:\/\/www.wordpress.org\/patterns\">Pattern directory on WordPress.org<\/a>.<\/p>\n\n\n\n<p>The theme used in the example below is the Twenty Twenty-two theme.  There is a pattern for a side-by-side image with text underneath it.<\/p>\n\n\n\n<ol class=\"article_list wp-block-list\"><li>  Open an existing post or create a new one.<\/li><li>Select the location where you want to add the images and then click on the <strong>+ sign<\/strong> in the top left corner of the editor.<\/li><li>You will see blocks and patterns immediately beneath the <strong>Search<\/strong> field. Click on <strong>Patterns<\/strong>.<\/li><li>Scroll down until you see the pattern with the image of two birds side-by-side.  Click on this pattern to add it to your post.<\/li><li>You can customize the pattern to replace the images with your own.  When you\u2019re finished, click on <strong>Save as Draft<\/strong>, <strong>Publish<\/strong>, or <strong>Update <\/strong>in order to save your changes.<\/li><\/ol>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"561\" src=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2022\/07\/two-images-pattern-1024x561.jpg\" alt=\"\" class=\"wp-image-98935\" srcset=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2022\/07\/two-images-pattern-1024x561.jpg 1024w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2022\/07\/two-images-pattern-300x164.jpg 300w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2022\/07\/two-images-pattern-768x421.jpg 768w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2022\/07\/two-images-pattern-1536x842.jpg 1536w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2022\/07\/two-images-pattern.jpg 1584w\" sizes=\"auto, (min-width: 1360px) 876px, (min-width: 960px) calc(61.58vw + 51px), calc(100vw - 80px)\" \/><\/figure>\n\n\n\n<p> The example above shows the pattern for images in a side-by-side format.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"row\">Using the Row Block For Side by Side Images<\/h2>\n\n\n\n<p>There is another block that can be used to place images side by side \u2013 the <strong>row block<\/strong>.  When you work with patterns or blocks, it\u2019s best to open list view to see what blocks are added to your post.  Follow the instructions below to learn how to use the row block to add adjacent images to your content.<\/p>\n\n\n\n<ol class=\"article_list wp-block-list\"><li>Open a post or create a new one.<\/li><li>At the top of the editor in the left corner, click on<strong> list view<\/strong>. <\/li><li>Select where you want to add your images using the row block.  Click on the <strong>+ sign<\/strong> in order to add a new block.  <\/li><li>Search for \u201c<strong>row<\/strong>\u201d or scroll down through the blocks to find the <strong>row block<\/strong> in the design section.<br><br><img loading=\"lazy\" decoding=\"async\" width=\"1000\" height=\"353\" class=\"wp-image-98936\" style=\"width: 1000px;\" src=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2022\/04\/add-row-1.jpg\" alt=\"Row added\" srcset=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2022\/04\/add-row-1.jpg 1348w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2022\/04\/add-row-1-300x106.jpg 300w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2022\/04\/add-row-1-1024x362.jpg 1024w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2022\/04\/add-row-1-768x271.jpg 768w\" sizes=\"auto, (min-width: 1360px) 876px, (min-width: 960px) calc(61.58vw + 51px), calc(100vw - 80px)\" \/><br><\/li><li>Click on the <strong>+ sign<\/strong>, then select the <strong>image block<\/strong>. Add an image.<br><br><img loading=\"lazy\" decoding=\"async\" width=\"1000\" height=\"548\" class=\"wp-image-98937\" style=\"width: 1000px;\" src=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2022\/04\/add-row-2.jpg\" alt=\"Select image block\" srcset=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2022\/04\/add-row-2.jpg 1584w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2022\/04\/add-row-2-300x164.jpg 300w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2022\/04\/add-row-2-1024x561.jpg 1024w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2022\/04\/add-row-2-768x421.jpg 768w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2022\/04\/add-row-2-1536x842.jpg 1536w\" sizes=\"auto, (min-width: 1360px) 876px, (min-width: 960px) calc(61.58vw + 51px), calc(100vw - 80px)\" \/><br><\/li><li>Once the image is loaded, you will need to click on the row block in the list view.  This will help to display the <strong>+ sign<\/strong> at the bottom of the row so that you can add the adjacent image.<br><br><img loading=\"lazy\" decoding=\"async\" width=\"1000\" height=\"548\" class=\"wp-image-98938\" style=\"width: 1000px;\" src=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2022\/04\/add-row-4.jpg\" alt=\"Click on Row\" srcset=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2022\/04\/add-row-4.jpg 1584w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2022\/04\/add-row-4-300x164.jpg 300w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2022\/04\/add-row-4-1024x561.jpg 1024w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2022\/04\/add-row-4-768x421.jpg 768w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2022\/04\/add-row-4-1536x842.jpg 1536w\" sizes=\"auto, (min-width: 1360px) 876px, (min-width: 960px) calc(61.58vw + 51px), calc(100vw - 80px)\" \/><br><\/li><li>When you click on the <strong>Add block + sign in the row<\/strong> (which is blue as per the screenshot), you\u2019ll be able to select the next block as an image.  <\/li><li>Upload or choose an image from the media library.  Click on <strong>Save as Draft<\/strong>, <strong>Publish<\/strong>, or <strong>Update<\/strong> to save your changes.<\/li><\/ol>\n\n\n\n<p>You can see the row in action here with two images.  Like columns, you are not limited to only two images, but space on your page will become a factor when adding images in groups.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"561\" src=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2022\/07\/pictures-in-row-1024x561.jpg\" alt=\"Images using the row block\" class=\"wp-image-98944\" srcset=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2022\/07\/pictures-in-row-1024x561.jpg 1024w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2022\/07\/pictures-in-row-300x164.jpg 300w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2022\/07\/pictures-in-row-768x421.jpg 768w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2022\/07\/pictures-in-row-1536x842.jpg 1536w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2022\/07\/pictures-in-row.jpg 1584w\" sizes=\"auto, (min-width: 1360px) 876px, (min-width: 960px) calc(61.58vw + 51px), calc(100vw - 80px)\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"non-responsive\">How Columns Collapse And How To Avoid It<\/h2>\n\n\n\n<p>The column block provides you with perfectly placed mobile responsive columns.  What does that mean?  Mobile responsiveness is a design technique that ensures a website can be properly viewed and interacted with on mobile devices. In the past, many websites were designed primarily for desktop computers, resulting in a poor user experience on mobile devices. <\/p>\n\n\n\n<p>But today, more and more people are using mobile devices to read your website, so it\u2019s important to make sure the site layout is mobile responsive. Mobile responsive design helps to improve readability by making text and images resize automatically to fit the screen size of the device. This makes it easier for mobile users to find the information they\u2019re looking for without having to zoom in and out or scroll around. In addition, mobile responsive design can also help improve click-through rates and conversion rates by making it easier for mobile users to navigate your website.<\/p>\n\n\n\n<p>When in doubt, you should choose the responsive design.<\/p>\n\n\n\n<p>However, if you want your images to always be side by side in all circumstances, the automatic behavior used by responsive design may not be desirable.  If this is the case, you have a few options for a workaround.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Compose Your Images Side By Side In a Single File <\/h3>\n\n\n\n<p>Using Photoshop, or some other desktop image application, you can compose a single image file containing both of your desired side by side images aligned just the way you want. Upload this file to WordPress, and you can be certain that your desired layout will be retained.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Create a Table<\/h3>\n\n\n\n<p>The rules of mobile responsiveness apply differently when it comes to tables. Table data must always retain its initial orientation. This means a table will never collapse in a mobile view. <\/p>\n\n\n\n<p>Creating a table is easy. <\/p>\n\n\n\n<ol class=\"article_list wp-block-list\"><li>When creating a new block, as described above, select table instead of column.<\/li><li>Select 1 row, 2 columns<br><img loading=\"lazy\" decoding=\"async\" width=\"500\" height=\"159\" class=\"wp-image-95842\" style=\"width: 500px;\" src=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2022\/04\/gutenberg-table-2col-1row.png\" alt=\"Gutenberg table selection\" srcset=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2022\/04\/gutenberg-table-2col-1row.png 662w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2022\/04\/gutenberg-table-2col-1row-300x95.png 300w\" sizes=\"auto, (min-width: 1360px) 876px, (min-width: 960px) calc(61.58vw + 51px), calc(100vw - 80px)\" \/><\/li><li>While inside a cell, click the arrow dropdown and choose <strong>inline image<\/strong><\/li><\/ol>\n\n\n\n<p>You will find the arrow dropdown in your main toolbar, as seen in the image below:<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"707\" height=\"368\" src=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2022\/04\/wordpress-blocks_012.png\" alt=\"arrow dropdown, inline image\" class=\"wp-image-95844\" srcset=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2022\/04\/wordpress-blocks_012.png 707w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2022\/04\/wordpress-blocks_012-300x156.png 300w\" sizes=\"auto, (min-width: 1360px) 876px, (min-width: 960px) calc(61.58vw + 51px), calc(100vw - 80px)\" \/><\/figure><\/div>\n\n\n\n<p>Once you have selected an inline image for the table cell it will appear small, but you can adjust the width to increase the image size. However over the image and you will see the width controls:<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"302\" height=\"236\" src=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2022\/04\/gutenberg-image-width.png\" alt=\"\" class=\"wp-image-95847\" srcset=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2022\/04\/gutenberg-image-width.png 302w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2022\/04\/gutenberg-image-width-300x234.png 300w\" sizes=\"auto, (min-width: 1360px) 876px, (min-width: 960px) calc(61.58vw + 51px), calc(100vw - 80px)\" \/><\/figure><\/div>\n\n\n\n<hr class=\"wp-block-separator\">\n\n\n\n<p>So there you have a few ways of creating horizontally aligned images in your WordPress blocks using the Gutenberg editor. If you have any questions or comments feel free to drop them below this article. Also consider checking out the full guide on using <a href=\"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/blocks\/add-animated-gif-wordpress\/\">animated gif images in WordPress<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Using images in your post and page content is often necessary to help emphasize your message. Visual aids draw the eye and can create a powerful contrast. And when it comes to contrast, presenting images side by side is a great way to make powerful statements. In this article, you\u2019ll learn how to set images<a class=\"moretag\" href=\"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/blocks\/images-side-by-side\/\"> Read More ><\/a><\/p>\n","protected":false},"author":17,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[4524],"tags":[],"class_list":["post-95807","post","type-post","status-publish","format-standard","hentry","category-blocks"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.1.1 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>How to Set Images Side By Side In WordPress | InMotion Hosting<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/blocks\/images-side-by-side\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Set Images Side By Side In WordPress | InMotion Hosting\" \/>\n<meta property=\"og:description\" content=\"Using images in your post and page content is often necessary to help emphasize your message. Visual aids draw the eye and can create a powerful contrast. And when it comes to contrast, presenting images side by side is a great way to make powerful statements. In this article, you\u2019ll learn how to set images Read More &gt;\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/blocks\/images-side-by-side\/\" \/>\n<meta property=\"og:site_name\" content=\"InMotion Hosting Support Center\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/inmotionhosting\/\" \/>\n<meta property=\"article:published_time\" content=\"2022-04-18T14:58:32+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-07-22T13:04:43+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2022\/04\/Side-By-Side-Images-1-1024x538.png\" \/>\n<meta name=\"author\" content=\"Christopher Maiorana\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@InMotionHosting\" \/>\n<meta name=\"twitter:site\" content=\"@InMotionHosting\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Christopher Maiorana\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/blocks\/images-side-by-side\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/blocks\/images-side-by-side\/\"},\"author\":{\"name\":\"Christopher Maiorana\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/person\/c6922c56c84e17079fd558e07b7ef72f\"},\"headline\":\"How to Set Images Side By Side In WordPress\",\"datePublished\":\"2022-04-18T14:58:32+00:00\",\"dateModified\":\"2022-07-22T13:04:43+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/blocks\/images-side-by-side\/\"},\"wordCount\":1146,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/blocks\/images-side-by-side\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2022\/04\/Side-By-Side-Images-1-1024x538.png\",\"articleSection\":[\"Blocks\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/blocks\/images-side-by-side\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/blocks\/images-side-by-side\/\",\"url\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/blocks\/images-side-by-side\/\",\"name\":\"How to Set Images Side By Side In WordPress | InMotion Hosting\",\"isPartOf\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/blocks\/images-side-by-side\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/blocks\/images-side-by-side\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2022\/04\/Side-By-Side-Images-1-1024x538.png\",\"datePublished\":\"2022-04-18T14:58:32+00:00\",\"dateModified\":\"2022-07-22T13:04:43+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/blocks\/images-side-by-side\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/blocks\/images-side-by-side\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/blocks\/images-side-by-side\/#primaryimage\",\"url\":\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2022\/04\/Side-By-Side-Images-1.png\",\"contentUrl\":\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2022\/04\/Side-By-Side-Images-1.png\",\"width\":1200,\"height\":630},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/blocks\/images-side-by-side\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.inmotionhosting.com\/support\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to Set Images Side By Side In WordPress\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#website\",\"url\":\"https:\/\/www.inmotionhosting.com\/support\/\",\"name\":\"InMotion Hosting Support Center\",\"description\":\"Web Hosting Support &amp; Tutorials\",\"publisher\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.inmotionhosting.com\/support\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#organization\",\"name\":\"InMotion Hosting\",\"url\":\"https:\/\/www.inmotionhosting.com\/support\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2023\/02\/inmotion-hosting-logo-yoast.jpg\",\"contentUrl\":\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2023\/02\/inmotion-hosting-logo-yoast.jpg\",\"width\":696,\"height\":696,\"caption\":\"InMotion Hosting\"},\"image\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/inmotionhosting\/\",\"https:\/\/x.com\/InMotionHosting\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/person\/c6922c56c84e17079fd558e07b7ef72f\",\"name\":\"Christopher Maiorana\",\"description\":\"Christopher Maiorana joined the InMotion community team in 2015 and regularly dispenses tips and tricks in the Support Center, Community Q&A, and the InMotion Hosting Blog.\",\"sameAs\":[\"https:\/\/www.linkedin.com\/in\/chris-m-4623144b\/\"],\"url\":\"https:\/\/www.inmotionhosting.com\/support\/author\/christopherm\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to Set Images Side By Side In WordPress | InMotion Hosting","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/blocks\/images-side-by-side\/","og_locale":"en_US","og_type":"article","og_title":"How to Set Images Side By Side In WordPress | InMotion Hosting","og_description":"Using images in your post and page content is often necessary to help emphasize your message. Visual aids draw the eye and can create a powerful contrast. And when it comes to contrast, presenting images side by side is a great way to make powerful statements. In this article, you\u2019ll learn how to set images Read More >","og_url":"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/blocks\/images-side-by-side\/","og_site_name":"InMotion Hosting Support Center","article_publisher":"https:\/\/www.facebook.com\/inmotionhosting\/","article_published_time":"2022-04-18T14:58:32+00:00","article_modified_time":"2022-07-22T13:04:43+00:00","og_image":[{"url":"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2022\/04\/Side-By-Side-Images-1-1024x538.png","type":"","width":"","height":""}],"author":"Christopher Maiorana","twitter_card":"summary_large_image","twitter_creator":"@InMotionHosting","twitter_site":"@InMotionHosting","twitter_misc":{"Written by":"Christopher Maiorana","Est. reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/blocks\/images-side-by-side\/#article","isPartOf":{"@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/blocks\/images-side-by-side\/"},"author":{"name":"Christopher Maiorana","@id":"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/person\/c6922c56c84e17079fd558e07b7ef72f"},"headline":"How to Set Images Side By Side In WordPress","datePublished":"2022-04-18T14:58:32+00:00","dateModified":"2022-07-22T13:04:43+00:00","mainEntityOfPage":{"@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/blocks\/images-side-by-side\/"},"wordCount":1146,"commentCount":0,"publisher":{"@id":"https:\/\/www.inmotionhosting.com\/support\/#organization"},"image":{"@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/blocks\/images-side-by-side\/#primaryimage"},"thumbnailUrl":"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2022\/04\/Side-By-Side-Images-1-1024x538.png","articleSection":["Blocks"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/blocks\/images-side-by-side\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/blocks\/images-side-by-side\/","url":"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/blocks\/images-side-by-side\/","name":"How to Set Images Side By Side In WordPress | InMotion Hosting","isPartOf":{"@id":"https:\/\/www.inmotionhosting.com\/support\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/blocks\/images-side-by-side\/#primaryimage"},"image":{"@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/blocks\/images-side-by-side\/#primaryimage"},"thumbnailUrl":"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2022\/04\/Side-By-Side-Images-1-1024x538.png","datePublished":"2022-04-18T14:58:32+00:00","dateModified":"2022-07-22T13:04:43+00:00","breadcrumb":{"@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/blocks\/images-side-by-side\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/blocks\/images-side-by-side\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/blocks\/images-side-by-side\/#primaryimage","url":"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2022\/04\/Side-By-Side-Images-1.png","contentUrl":"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2022\/04\/Side-By-Side-Images-1.png","width":1200,"height":630},{"@type":"BreadcrumbList","@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/blocks\/images-side-by-side\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.inmotionhosting.com\/support\/"},{"@type":"ListItem","position":2,"name":"How to Set Images Side By Side In WordPress"}]},{"@type":"WebSite","@id":"https:\/\/www.inmotionhosting.com\/support\/#website","url":"https:\/\/www.inmotionhosting.com\/support\/","name":"InMotion Hosting Support Center","description":"Web Hosting Support &amp; Tutorials","publisher":{"@id":"https:\/\/www.inmotionhosting.com\/support\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.inmotionhosting.com\/support\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.inmotionhosting.com\/support\/#organization","name":"InMotion Hosting","url":"https:\/\/www.inmotionhosting.com\/support\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/logo\/image\/","url":"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2023\/02\/inmotion-hosting-logo-yoast.jpg","contentUrl":"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2023\/02\/inmotion-hosting-logo-yoast.jpg","width":696,"height":696,"caption":"InMotion Hosting"},"image":{"@id":"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/inmotionhosting\/","https:\/\/x.com\/InMotionHosting"]},{"@type":"Person","@id":"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/person\/c6922c56c84e17079fd558e07b7ef72f","name":"Christopher Maiorana","description":"Christopher Maiorana joined the InMotion community team in 2015 and regularly dispenses tips and tricks in the Support Center, Community Q&A, and the InMotion Hosting Blog.","sameAs":["https:\/\/www.linkedin.com\/in\/chris-m-4623144b\/"],"url":"https:\/\/www.inmotionhosting.com\/support\/author\/christopherm\/"}]}},"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"primary_category":null,"_links":{"self":[{"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/posts\/95807","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/users\/17"}],"replies":[{"embeddable":true,"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/comments?post=95807"}],"version-history":[{"count":20,"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/posts\/95807\/revisions"}],"predecessor-version":[{"id":98945,"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/posts\/95807\/revisions\/98945"}],"wp:attachment":[{"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/media?parent=95807"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/categories?post=95807"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/tags?post=95807"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}