{"id":233,"date":"2025-01-06T11:15:09","date_gmt":"2025-01-06T11:15:09","guid":{"rendered":"https:\/\/blog.floristtouch.co.uk\/?p=233"},"modified":"2025-01-28T23:44:47","modified_gmt":"2025-01-28T23:44:47","slug":"introducing-the-new-website-design-blocks-for-florists-custom-editor-blocks-on-florist-touch","status":"publish","type":"post","link":"https:\/\/blog.floristtouch.co.uk\/introducing-the-new-website-design-blocks-for-florists-custom-editor-blocks-on-florist-touch\/","title":{"rendered":"Introducing the New Website Design Blocks for Florists: Custom Editor Blocks on Florist Touch"},"content":{"rendered":"\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"576\" src="\&quot;https:\/\/blog.floristtouch.co.uk\/wp-content\/uploads\/2025\/01\/Florist-Web-Design-New-Blocks-1-1024x576.jpg\&quot;" alt=\"\" class=\"wp-image-235\" srcset="\&quot;https:\/\/blog.floristtouch.co.uk\/wp-content\/uploads\/2025\/01\/Florist-Web-Design-New-Blocks-1-1024x576.jpg" 1024w, https:\ \ blog.floristtouch.co.uk\ wp-content\ uploads\ 2025\ 01\ Florist-Web-Design-New-Blocks-1-300x169.jpg 300w, https:\ \ blog.floristtouch.co.uk\ wp-content\ uploads\ 2025\ 01\ Florist-Web-Design-New-Blocks-1-768x432.jpg 768w, https:\ \ blog.floristtouch.co.uk\ wp-content\ uploads\ 2025\ 01\ Florist-Web-Design-New-Blocks-1.jpg 1366w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \ /><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<p>We\u2019re thrilled to announce some exciting updates to the Florist Touch website editor! Our platform now features new custom blocks designed to make your website even more beautiful and engaging. Whether you\u2019re showcasing your stunning floral arrangements or sharing your services, these new blocks will give your website a fresh, professional look.<\/p>\n\n\n\n<p>If you\u2019re new to editing your website or need a quick refresher on how to use the editor and where to edit your website, we recommend watching our <a href="\&quot;https:\/\/youtu.be\/ssrd_wDfSiY?si=hpkIUOTObySNmfmh\&quot;">quick tutorial video<\/a> before diving into this guide. This will help you get the most out of your new design options. In this article, we\u2019ll cover what these new blocks are, how to use them as well as some design tips in helping them look their best. If you prefer a more detailed video on this, you can watch a tutorial of how to use these new design blocks <a href="\&quot;https:\/\/youtu.be\/48YQ3i6m2ZA\&quot;" target=\"_blank\" rel=\"noreferrer noopener\">here<\/a>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Preview the New Blocks<\/strong><\/h3>\n\n\n\n<p>Want to see these new blocks in action? Check out our<a href="\&quot;https:\/\/brigantiahealing.floristtouch.com\/library-of-custom-blocks\&quot;"> Library of Custom Blocks<\/a> demo page. This page showcases all the new designs and how they look when fully customized.<\/p>\n\n\n\n<p><strong>Important Note:<\/strong> The images you upload to these blocks will display exactly as they are\u2014meaning their size and shape won\u2019t change automatically. For example, while some demo blocks use circular or square images for a uniform look, your uploaded images will appear just as you\u2019ve uploaded them. To achieve a polished design, we recommend using images that are similar in size and shape. For instance:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>If you use square images, keep them all square for consistency.<\/li>\n\n\n\n<li>If your images are rectangular, ensure they\u2019re cropped to the same width and height.<\/li>\n<\/ul>\n\n\n\n<p>This little step can make a big difference in maintaining a professional and cohesive look on your website.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>How to Crop Images for Uniformity<\/strong><\/h4>\n\n\n\n<p>To crop an image to a specific shape, like a circle, here are two easy methods:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Using Canva<\/strong>\n<ul class=\"wp-block-list\">\n<li>Open Canva and create a design (a 500px by 500px square is a good start).<\/li>\n\n\n\n<li>Use a frame (e.g., a circular frame) and add your image to the frame.<\/li>\n\n\n\n<li>Download the image as a PNG with a transparent background. If you don\u2019t have Canva Pro, download it as a PNG and use a tool like<a href="\&quot;https:\/\/www.remove.bg\&quot;"> remove.bg<\/a> to remove the background.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Using an Online Tool<\/strong>\n<ul class=\"wp-block-list\">\n<li>Visit a site like<a href="\&quot;https:\/\/rounder.pics\/crop-circular-image\/\&quot;"> Rounder Pics<\/a>.<\/li>\n\n\n\n<li>Upload your image, crop it to the desired shape, and download it.<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n\n\n\n<p>By ensuring your images are cropped uniformly, your website will look more professional and visually appealing.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Adding Buttons with the Text Editor<\/strong><\/h3>\n\n\n\n<p>One of the most exciting updates is how links are styled in these new blocks. When you add a link using the text editor, it will automatically be turned into a button. Buttons are a great way to draw attention to important actions, such as &#8220;Order Now&#8221; or &#8220;Contact Us.&#8221;<\/p>\n\n\n\n<div class=\"wp-block-media-text has-media-on-the-right is-stacked-on-mobile\"><div class=\"wp-block-media-text__content\">\n<p><strong>How to Create a Button:<\/strong><\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Highlight the text you want to turn into a button.<\/li>\n\n\n\n<li>Click the hyperlink icon in the text editor.<\/li>\n\n\n\n<li>Add your link (e.g., \/shop or \/contact).<\/li>\n<\/ol>\n\n\n\n<p>That\u2019s it! The text will appear as a styled button on your website. This feature makes it easy to guide visitors to key pages while keeping your website\u2019s design clean and modern.<\/p>\n<\/div><figure class=\"wp-block-media-text__media\"><img loading=\"lazy\" decoding=\"async\" width=\"500\" height=\"367\" src="\&quot;https:\/\/blog.floristtouch.co.uk\/wp-content\/uploads\/2025\/01\/blog-image-2-1.jpg\&quot;" alt=\"\" class=\"wp-image-248 size-full\" srcset="\&quot;https:\/\/blog.floristtouch.co.uk\/wp-content\/uploads\/2025\/01\/blog-image-2-1.jpg" 500w, https:\ \ blog.floristtouch.co.uk\ wp-content\ uploads\ 2025\ 01\ blog-image-2-1-300x220.jpg 300w\" sizes=\"auto, (max-width: 500px) 100vw, 500px\" \ /><\/figure><\/div>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Overview of the New Custom Blocks for Website Design for Florists<\/strong><\/h3>\n\n\n\n<p>These blocks combine features you already know and love, with added styles and layouts to elevate your website. Let\u2019s take a closer look at each new block and how you can use them:<\/p>\n\n\n\n<h5 class=\"wp-block-heading\"><strong>Block 1: Full Width Image With Centred Content<\/strong><\/h5>\n\n\n\n<div class=\"wp-block-media-text is-stacked-on-mobile\"><figure class=\"wp-block-media-text__media\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"389\" src="\&quot;https:\/\/blog.floristtouch.co.uk\/wp-content\/uploads\/2025\/01\/Block-1-1-1024x389.png\&quot;" alt=\"\" class=\"wp-image-238 size-full\" srcset="\&quot;https:\/\/blog.floristtouch.co.uk\/wp-content\/uploads\/2025\/01\/Block-1-1-1024x389.png" 1024w, https:\ \ blog.floristtouch.co.uk\ wp-content\ uploads\ 2025\ 01\ Block-1-1-300x114.png 300w, https:\ \ blog.floristtouch.co.uk\ wp-content\ uploads\ 2025\ 01\ Block-1-1-768x292.png 768w, https:\ \ blog.floristtouch.co.uk\ wp-content\ uploads\ 2025\ 01\ Block-1-1-1536x584.png 1536w, https:\ \ blog.floristtouch.co.uk\ wp-content\ uploads\ 2025\ 01\ Block-1-1-2048x779.png 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \ /><\/figure><div class=\"wp-block-media-text__content\">\n<p>This block features a full-width background image with a title and text centred directly on top. Perfect for making a bold statement or highlighting a key message. Because the text on top of the image is white, you may need to darken the background image a touch to make sure the text (if you are using any) is readable. You could darken an image using your phone or devices photo editing software, or with these tools:<\/p>\n<\/div><\/div>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href="\&quot;https:\/\/pinetools.com\/darken-image\&quot;" data-type=\"link\" data-id=\"https:\/\/pinetools.com\/darken-image\" target=\"_blank\" rel=\"noreferrer noopener\">Here&#8217;s a free tool<\/a> to hep you darken an image.<\/li>\n\n\n\n<li>You can also use Canva to darken an image, <a href="\&quot;https:\/\/youtu.be\/kvWspbMb38o\&quot;" target=\"_blank\" rel=\"noreferrer noopener\">here&#8217;s a tutorial<\/a>.<\/li>\n<\/ul>\n\n\n\n<h5 class=\"wp-block-heading\"><strong>Block 2: Full Width Image and Boxed Content<\/strong><\/h5>\n\n\n\n<div class=\"wp-block-media-text is-stacked-on-mobile\"><figure class=\"wp-block-media-text__media\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"446\" src="\&quot;https:\/\/blog.floristtouch.co.uk\/wp-content\/uploads\/2025\/01\/Block-2-1-1024x446.png\&quot;" alt=\"\" class=\"wp-image-242 size-full\" srcset="\&quot;https:\/\/blog.floristtouch.co.uk\/wp-content\/uploads\/2025\/01\/Block-2-1-1024x446.png" 1024w, https:\ \ blog.floristtouch.co.uk\ wp-content\ uploads\ 2025\ 01\ Block-2-1-300x131.png 300w, https:\ \ blog.floristtouch.co.uk\ wp-content\ uploads\ 2025\ 01\ Block-2-1-768x334.png 768w, https:\ \ blog.floristtouch.co.uk\ wp-content\ uploads\ 2025\ 01\ Block-2-1-1536x669.png 1536w, https:\ \ blog.floristtouch.co.uk\ wp-content\ uploads\ 2025\ 01\ Block-2-1-2048x892.png 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \ /><\/figure><div class=\"wp-block-media-text__content\">\n<p>Similar to Block 1, but with a twist. This block includes boxed text content positioned over or below the image. Use it to showcase a special event or promotion.<\/p>\n<\/div><\/div>\n\n\n\n<h5 class=\"wp-block-heading\"><strong>Block 3: Row of 6 Images + Text<\/strong><\/h5>\n\n\n\n<div class=\"wp-block-media-text is-stacked-on-mobile\"><figure class=\"wp-block-media-text__media\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"282\" src="\&quot;https:\/\/blog.floristtouch.co.uk\/wp-content\/uploads\/2025\/01\/Block-3-1-1024x282.png\&quot;" alt=\"\" class=\"wp-image-243 size-full\" srcset="\&quot;https:\/\/blog.floristtouch.co.uk\/wp-content\/uploads\/2025\/01\/Block-3-1-1024x282.png" 1024w, https:\ \ blog.floristtouch.co.uk\ wp-content\ uploads\ 2025\ 01\ Block-3-1-300x83.png 300w, https:\ \ blog.floristtouch.co.uk\ wp-content\ uploads\ 2025\ 01\ Block-3-1-768x212.png 768w, https:\ \ blog.floristtouch.co.uk\ wp-content\ uploads\ 2025\ 01\ Block-3-1-1536x423.png 1536w, https:\ \ blog.floristtouch.co.uk\ wp-content\ uploads\ 2025\ 01\ Block-3-1-2048x564.png 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \ /><\/figure><div class=\"wp-block-media-text__content\">\n<ul class=\"wp-block-list\">\n<li>Display six images in a single row, each with accompanying text. Ideal for showing off your floral designs or team members.<\/li>\n\n\n\n<li><em>Tip:<\/em> To make this block look its best, upload six images that are the same size and shape. For example, if you use round images, ensure all six are cropped as circles.<\/li>\n<\/ul>\n<\/div><\/div>\n\n\n\n<h5 class=\"wp-block-heading\"><strong>Block 4: Row of 3 Images + Text<\/strong><\/h5>\n\n\n\n<div class=\"wp-block-media-text is-stacked-on-mobile\"><figure class=\"wp-block-media-text__media\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"533\" src="\&quot;https:\/\/blog.floristtouch.co.uk\/wp-content\/uploads\/2025\/01\/Block-4-1-1024x533.png\&quot;" alt=\"\" class=\"wp-image-244 size-full\" srcset="\&quot;https:\/\/blog.floristtouch.co.uk\/wp-content\/uploads\/2025\/01\/Block-4-1-1024x533.png" 1024w, https:\ \ blog.floristtouch.co.uk\ wp-content\ uploads\ 2025\ 01\ Block-4-1-300x156.png 300w, https:\ \ blog.floristtouch.co.uk\ wp-content\ uploads\ 2025\ 01\ Block-4-1-768x400.png 768w, https:\ \ blog.floristtouch.co.uk\ wp-content\ uploads\ 2025\ 01\ Block-4-1-1536x799.png 1536w, https:\ \ blog.floristtouch.co.uk\ wp-content\ uploads\ 2025\ 01\ Block-4-1-2048x1066.png 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \ /><\/figure><div class=\"wp-block-media-text__content\">\n<p>A smaller variation of Block 3, this block features three images in a row with space for text. It\u2019s great for showcasing featured products or services.<\/p>\n<\/div><\/div>\n\n\n\n<h5 class=\"wp-block-heading\"><strong>Block 5: Row of 2 Images + Text<\/strong><\/h5>\n\n\n\n<div class=\"wp-block-media-text is-stacked-on-mobile\"><figure class=\"wp-block-media-text__media\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"539\" src="\&quot;https:\/\/blog.floristtouch.co.uk\/wp-content\/uploads\/2025\/01\/Block-5-1-1024x539.png\&quot;" alt=\"\" class=\"wp-image-245 size-full\" srcset="\&quot;https:\/\/blog.floristtouch.co.uk\/wp-content\/uploads\/2025\/01\/Block-5-1-1024x539.png" 1024w, https:\ \ blog.floristtouch.co.uk\ wp-content\ uploads\ 2025\ 01\ Block-5-1-300x158.png 300w, https:\ \ blog.floristtouch.co.uk\ wp-content\ uploads\ 2025\ 01\ Block-5-1-768x404.png 768w, https:\ \ blog.floristtouch.co.uk\ wp-content\ uploads\ 2025\ 01\ Block-5-1-1536x809.png 1536w, https:\ \ blog.floristtouch.co.uk\ wp-content\ uploads\ 2025\ 01\ Block-5-1-2048x1078.png 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \ /><\/figure><div class=\"wp-block-media-text__content\">\n<p>This block displays two side-by-side images with text. Use it to highlight key offerings, such as wedding packages or seasonal collections.<\/p>\n<\/div><\/div>\n\n\n\n<h5 class=\"wp-block-heading\"><strong>Block 6: Text, Four Columns<\/strong><\/h5>\n\n\n\n<div class=\"wp-block-media-text is-stacked-on-mobile\"><figure class=\"wp-block-media-text__media\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"296\" src="\&quot;https:\/\/blog.floristtouch.co.uk\/wp-content\/uploads\/2025\/01\/Block-6-1-1024x296.png\&quot;" alt=\"\" class=\"wp-image-246 size-full\" srcset="\&quot;https:\/\/blog.floristtouch.co.uk\/wp-content\/uploads\/2025\/01\/Block-6-1-1024x296.png" 1024w, https:\ \ blog.floristtouch.co.uk\ wp-content\ uploads\ 2025\ 01\ Block-6-1-300x87.png 300w, https:\ \ blog.floristtouch.co.uk\ wp-content\ uploads\ 2025\ 01\ Block-6-1-768x222.png 768w, https:\ \ blog.floristtouch.co.uk\ wp-content\ uploads\ 2025\ 01\ Block-6-1-1536x444.png 1536w, https:\ \ blog.floristtouch.co.uk\ wp-content\ uploads\ 2025\ 01\ Block-6-1-2048x591.png 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \ /><\/figure><div class=\"wp-block-media-text__content\">\n<p>A simple yet effective layout for text-based content. This block splits your text into four columns, making it perfect for listing services, features, or benefits.<\/p>\n<\/div><\/div>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Design Best Practices for Website Design for Florists<\/strong><\/h3>\n\n\n\n<p>To ensure your website looks polished and professional, keep these tips in mind:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Use Consistent Images:<\/strong> Make sure all images in a block are the same size and shape. For instance, if one image is square, crop the others to match. This keeps your layout neat and visually appealing.<\/li>\n\n\n\n<li><strong>Test Your Design:<\/strong> After adding content to a block, preview your changes to check for readability and alignment. Small adjustments can make a big difference.<\/li>\n\n\n\n<li><strong>Don\u2019t Overload:<\/strong> Avoid adding too much text or too many links in a single block. Keep the design clean and focused.<\/li>\n<\/ol>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Website Design for Florists: Enhancing Your Online Presence<\/strong><\/h3>\n\n\n\n<p>The Florist Touch editor is designed with florists in mind, making it simple and intuitive to create a website that showcases your business beautifully. These new blocks offer enhanced flexibility and style options, helping you stand out in a competitive market. Whether you specialize in weddings, events, or daily arrangements, these tools ensure your website reflects your unique offerings and brand.<\/p>\n\n\n\n<p>Ready to transform your website with these new blocks? Log in to your Florist Touch editor and start experimenting today! For inspiration, don\u2019t forget to visit our<a href="\&quot;https:\/\/brigantiahealing.floristtouch.com\/library-of-custom-blocks\&quot;"> Library of Custom Blocks<\/a>.<\/p>\n\n\n\n<p>If you have any questions or need assistance, feel free to reach out to our support team or <a href="\&quot;https:\/\/youtu.be\/48YQ3i6m2ZA\&quot;" target=\"_blank\" rel=\"noreferrer noopener\">watch our full video tutorial<\/a>. Happy designing!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>We\u2019re thrilled to announce some exciting updates to the Florist Touch website editor! Our platform now features new custom blocks designed to make your website even more beautiful and engaging. Whether you\u2019re showcasing your stunning floral arrangements or sharing your services, these new blocks will give your website a fresh, professional look. If you\u2019re new [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7],"tags":[],"class_list":["post-233","post","type-post","status-publish","format-standard","hentry","category-florist-advice"],"_links":{"self":[{"href":"https:\/\/blog.floristtouch.co.uk\/wp-json\/wp\/v2\/posts\/233","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blog.floristtouch.co.uk\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.floristtouch.co.uk\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.floristtouch.co.uk\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.floristtouch.co.uk\/wp-json\/wp\/v2\/comments?post=233"}],"version-history":[{"count":9,"href":"https:\/\/blog.floristtouch.co.uk\/wp-json\/wp\/v2\/posts\/233\/revisions"}],"predecessor-version":[{"id":250,"href":"https:\/\/blog.floristtouch.co.uk\/wp-json\/wp\/v2\/posts\/233\/revisions\/250"}],"wp:attachment":[{"href":"https:\/\/blog.floristtouch.co.uk\/wp-json\/wp\/v2\/media?parent=233"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.floristtouch.co.uk\/wp-json\/wp\/v2\/categories?post=233"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.floristtouch.co.uk\/wp-json\/wp\/v2\/tags?post=233"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}