1. The Recommended Standard: OHT PDF Export Preset

For the most reliable results, we provide a standardized Adobe PDF Preset (.joboptions). This file automatically configures all technical requirements, including compatibility modes, font embedding, and transparency flattening.

Installation Instructions:

1. Download: Save the OHT-PDF-Export.zip file to your workstation.
2. Extract: Locate the ZIP file on your computer and double-click (or right-click and select “Extract”) to reveal the OHT-PDF-Export.joboptions file inside.
3. Load: In Adobe InDesign, navigate to File > Adobe PDF Presets > Define…
4. Import: Click Load, select the downloaded file, and click Done.

Usage: When exporting your final layout, go to File > Export, select Adobe PDF (Print), and choose “OHT PDF Export” from the Adobe PDF Preset dropdown menu.

2. Manual Configuration & Audit Guidelines

If you are incorporating our requirements into an existing custom workflow, please audit your settings to ensure they match the following specifications:

General Specifications

• Compatibility: Must be set to Acrobat 4 (PDF 1.3).
  • Technical Note: This legacy standard ensures that text layers remain accessible to our extraction tools without being obscured by modern transparency containers.
• Export Layers: Set to Visible Layers. This prevents non-printing “slug” or “pasteboard” content from interfering with the extraction of the text elements.

Compression & Image Handling

• Compression: Use Bicubic Downsampling to 300 ppi with Maximum JPEG Quality.
• Crop Image Data to Frames: (Default: Checked)
  • The Full-Extraction Option: By default, our preset is configured to crop image data to the frame to keep file sizes manageable. However, if you prefer that we extract the full, uncropped source photo for use on your website, simply uncheck this box. This allows our system to access the entire original photograph even if it is tightly cropped in your print layout.

Font & Transparency Integrity

• Font Subsetting: Set to 0%.
  • Requirement: This forces the embedding of the complete character set, eliminating the risk of “garbled” text or missing glyphs during the conversion to web content.
• Transparency Flattener: Set to High Resolution.
  • Requirement: Since Acrobat 4 does not support live transparency, this setting ensures that text overlapping transparent elements remains “Live” and searchable rather than being rasterized into an image.

3. Content Integrity: Best Practices

To maintain the highest data quality, please observe the following “Do Not” rules during your production process:

• Do Not Convert Text to Outlines: Our extraction engine requires “Live” font data. Converting text to paths/outlines renders the content unreadable by our system.
• Minimize Hidden Layers: Ensure that “ghost” text boxes or old versions of stories are deleted rather than simply hidden behind other objects. Our tools may still attempt to extract data from overlapping hidden elements.

4. Managing External Advertising Assets

Display advertisements provided by third-party agencies often contain complex nested PDF data or non-standard fonts that can disrupt the extraction of surrounding editorial content.

• The Rasterization Standard: If a specific advertisement consistently causes PDF errors or contains “invisible” OCR text, we recommend opening the ad in Photoshop at 300 dpi (CMYK) and saving it as a High-Quality TIFF or JPG.
• The Result: Placing this flattened image into your InDesign layout removes all problematic background code while preserving print and web quality.

Technical Support — If you require assistance installing the OHT PDF Export preset or would like a member of our team to review your current export settings, please contact our production support department at ops@our-hometown.com.

The post PDF Export Guide: Optimizing for Our-Hometown Web Publishing first appeared on Our-Hometown.

That’s why the team at Our-Hometown Web Publishing is thrilled to announce our latest, most-requested feature: Direct Video Uploads are now available on your WordPress website!

You can now bring your community’s stories to life and offer powerful new advertising solutions in a more dynamic and engaging way than ever before.

The Power of Video, Simplified

We believe that powerful tools should also be easy to use. We’ve integrated video uploads directly into the Media Library you already know. It’s as simple as uploading a photo.

Here are the key details:

• Generous File Size: Upload video files up to 256MB.
• Standard Formats: We support all the common formats you use, including .mp4, .mov, .webm, and more.
• Seamless Integration: Your uploaded videos can be placed into posts, pages, and even ad placements with ease.

NOTE: To ensure compatibility, always sanitize the filename of your videos: i.e. no special characters (/,?#) and also replace any spaces with either a dash or underscore.

From the Field to the Front Page: Go Mobile!

We know that news happens everywhere, not just at your desk. That’s why we’ve ensured our new video feature is completely mobile-ready.

Imagine this: you’re covering a last-minute press conference or a high school playoff game. You can capture a critical clip on your smartphone, open your website in your mobile browser, and upload the video directly into a new post. Your readers can see what’s happening, as it’s happening. No more waiting to get back to the office to transfer files.

Ideas to Get You Started

Not sure where to begin? Video is perfect for capturing the content that makes local news so special and opens up new revenue streams.

• High School Sports: Upload the game-winning touchdown, the three-point shot at the buzzer, or a post-game interview with the coach.
• Parades & Performances: Showcase the intricate float designs from the holiday parade, or a clip of the high school marching band’s new routine.
• Breaking News: Provide on-the-scene footage from a local event or incident, adding urgency and authenticity to your reporting.
• Nature & Wildlife: Share a serene video of a sunrise over a local landmark or capture footage of wildlife in a nearby park. These clips are highly shareable!
• Powerful Video Advertising: Offer premium advertising opportunities! A local realtor could run a video property walkthrough as part of their campaign, or a car dealership could showcase a new model in action. This is a fantastic new product to offer your advertisers.
• Community Voices: Record short “man-on-the-street” interviews about a local issue or a quick soundbite from a town council meeting.

Placing Your Videos: As Easy as 1-2-3

Once you’ve uploaded your video to the Media Library, how do you get it onto your site? We’ve made it simple by integrating it directly with the WordPress tools you already use.

• In an Article or Page: When writing a post, simply add a new block and search for the “Video” block. You can then select your clip directly from the Media Library.
• On Your Homepage or Sidebars: Want to feature a video more prominently? Use the Theme Customizer to add a video block to widget-ready areas, giving you full control over where your featured videos appear.

Ready to Roll?

This feature is now live for all Our-Hometown customers. We are committed to providing you with the tools you need to be the essential source for news and information in your community. We can’t wait to see the incredible stories you’ll tell and the new advertising opportunities you’ll create.

If you have any questions, please don’t hesitate to reach out to our support team at ops@our-hometown.com.

The post Bring Your Stories to Life: Video Uploads Are Now Live on Our-Hometown first appeared on Our-Hometown.

Did you miss our recent webinar on advanced Block Editor layouts? The replay is now available.

Our session, “Block Editor Basics: More Text, Plus Grids & Groups,” explored how to create sophisticated content arrangements directly within WordPress. Christopher from Our-Hometown guided attendees through leveraging the Block Editor’s powerful layout tools. If you weren’t able to join us live, this is an opportunity to review the key techniques.

In this replay, you’ll learn about:

• Utilizing Grids: Discover how to construct dynamic image and text grids using the Grid block, including the application of column and row span settings for flexible designs.
• Organizing with Groups: Understand how Group blocks can be used to keep related content together and maintain structure within complex layouts.
• Beyond Standard Lists: Learn about the Details block as an alternative for presenting collapsible content, suitable for citations or expandable information.
• Refining Visuals with Covers: See how Cover blocks can be used to enhance the presentation and fit of individual elements within your grid layouts.
• The session also covered nested lists and the distinct functionalities of Rows and Stacks.

This webinar replay offers practical demonstrations and insights to help you create more sophisticated and visually appealing content in the Block Editor.

The post Block Editor Basics: More Text, Plus Grids and Groups | OHT Webinar Replay first appeared on Our-Hometown.

XML Export

Once you have applied your desired settings for the Reverse Publishing export, you can then choose what content is to be included, either via the Export page or through selecting and exporting articles with the Bulk Edit option in the All Articles List.

The plugin will compile a ZIP archive including the XML file with all the article content and individual images associated with each story that is then downloaded to your computer.

Extract this zip file and we are now ready for import into InDesign.

For this demo we’ll use an existing InDesign template with paragraph styles and basic layout guides in place. Note the styles specified in the export settings match those in the InDesign file, so they will be automatically applied when you add content into the document itself.

XML Import

With the InDesign file open, go to the File menu and click Import XML.

Select the XML file in the folder extracted from the zip file download.

Make sure the Show XML Import Options button is ticked as well as Merge Content.

On the import options window leave the defaults. Merging content will make sure that any updated XML content will be automatically reflected in the imported elements.

Once the XML is imported the Structure pane will appear to the left of your document containing the Root tag. Click the small arrow to the left of the tag to reveal the contents of the XML import.

Each story element contains the others: title, byline, body, image et al. plus any tag attributes, including character and paragraph styles.

Note that the character and paragraph styles included in the export will be created if these styles are not present in the InDesign file when you import the XML. However these styles will need to be configured as they will only have default settings in this scenario.

Structure Panel

Once the XML is imported the Structure pane will appear to the left of your document containing the Root tag. Click the small arrow to the left of the tag to reveal the contents of the XML import.

Each element or tag (we are using the term interchangeably) has an icon next to it indicating the type of content it references:

Container Element: A wrapper for grouping other element-types together

Text Element: A wrapper for text copy, i.e. paragraph tags similar to html

Image Element: A reference to the local image file downloaded as part of the XML export which links back to the folder extracted from the ZIP archive.

Drag and Drop Behavior

To bring content from the structure pane into the document layout, you simply drag the element either onto the layout itself or into a pre-existing frame in the layout.

Once an element has been placed in the layout a blue dot appears at the bottom-right of the icon.

Text Elements

For instance if you template already has a frame set up for the positioning of the Title element, simply drag that element from the structure pane onto that frame. If styles are setup properly, the Title style will be applied automatically.

If you don’t drop a text element into an existing frame, InDesign will create one, however the size of the text frame will usually follow the width of the dragged element, but its height will simply fill to the bottom margin from the spot of the drop.

Image Elements

Image elements, when dropped into a pre-existing frame will honor that frame’s fitting options, so this can be extremely helpful when placing images within your layout. If you simply drop an image element onto the layout, InDesign will create a frame matching the original resolution of the image (which can be quite large at screen preview levels). If the image is dropped within the page margins, the resulting frame will respect those while cropping those portions of the image. For predictable behavior we recommend dropping images into pre-existing frames with fitting already specified.

You will note the above example shows the Image element itself being placed, not the Graphic element. The Graphic element is a container for the image element and if present a text element for the Caption.

Container Elements

So what happens if you drag a container into the layout?

InDesign will insert all of the elements into a single frame while respecting the individual paragraph styles. The frame can then be adjusted to fit your layout. If Graphic elements are part of the container you are placing, InDesign imports the caption as a paragraph tag and includes the image as an anchored object attached to the caption. Additionally the image frame will be the same size as the resolution of the image as noted previously.

This often means that the images (which are included in the story container after the text elements) will not be displayed, but are hidden as they are part of the overset content that doesn’t not fit into the default frame size created when you drag a container into the layout.

Reassigning Elements

This brings us to another important point: Once an element has been placed, it cannot be ‘deleted’ per se, but it can be reassigned to another frame (or just dragged again into the layout).

This is very helpful if an image has been placed, but is hidden in overset limbo. You can drag those image/caption tags into new positions or move them to specific frames. This way you can drag the entire story element into the layout and then grab the images individually to place into frames with text wrapping, etc.

Importing XML Updates

A great feature of the Reverse Publishing plugin is that it keeps track of what has been exported, allowing you to only export content updated since the last export. You can also toggle off the image export, so that you can download just the updated XML content. Overwrite the previous XML file (by copying the new one to your existing archive folder with your images) and when you re-import the XML all the text content will update to reflect any changes to the story content.

We hope this post establishes the usefulness of a ‘digital-first’ strategy, allowing you to manage all your content on the website, and providing a straightforward pipeline for creating your print edition from that content.

If you have any questions or would like to try out Reverse Publishing, don’t hesitate to reach out to us at ops@our-hometown.com.

The post Reverse Publishing: Import Your Content Into InDesign first appeared on Our-Hometown.

Settings Page

• Notification Schedule
• Export all statuses
• Include Byline in Body
• Use Author for Empty Byline
• Alternative image export option
• Export only filename for images – removes image blocks
• Export image title for XML node

• Limit number of editions to view in export panel
• Send notification emails to
• Export Format
• Disable images on export
• Use image title as filename
• Use XML Ad Sheet
• FTP Backup Settings

Notification Schedule

Set the options for when to receive update emails (the destination email address is set below):

• On the export screen
• When articles are saved
• Every X minutes

Export all statuses

This toggle will make available articles of any status (draft, scheduled, etc.) for export, instead of being limited to published content.

Include Byline in Body

Depending on how your InDesign template is built, this option allows for the inclusion of the Byline field from an article to be in it’s own XML tag or inserted at the top within the Body tag.

Use Author for Empty Byline

Toggle this on to use the Author field of an article if there is no Byline present.

Export Format

We are demonstrating the InDesign XML option in this walkthrough, but the NewsCycle NITF format is available for those who need it.

Disable images on export

Use this option if you would like to only download the text article content, i.e. just the XML file, if you would like to add images directly from your computer. This is good for instances where separate color management needs to be done for print services.

Use image title as filename

This option can be very useful if images in your media library have default camera-assigned filenames, such as IMG00034034.jpg.

Export only filename for images – removes image blocks

Images are included in the XML at the end of each story element. If this option is toggled OFF, images be wrapped in a paragraph tag similar to the option for including Bylines in the body tag. This can be useful if you will be using different or altered versions of images instead of those on the website.

</story-225816-body>
<graphic-driving-development-1>
<image href="file:///driving-development-1.jpg" />
<caption aid:cstyle="" aid:pstyle="Photo Caption RD">
 St. Ignace has not seen many high-capacity housing projects in recent decades, with the St. Ignace Senior Housing apartment complex on Lake Street remaining as one of the newer ones Thursday, April 24, 2025.
</caption>
</graphic-driving-development-1>

</story-225816-body>
<story-225816-image-placeholders><p>driving-development-1.jpg</p>
<p aid:cstyle="" aid:pstyle="Photo Caption RD"> St. Ignace has not seen many high-capacity housing projects in recent decades, with the St. Ignace Senior Housing apartment complex on Lake Street remaining as one of the newer ones Thursday, April 24, 2025.</p>

Export Page

• Edition
• Category
• Export
• Include Ads
• Include titles in article root
• Character Styles
• Paragraph Styles

Edition

Select the edition for export. A search field allows you to filter the list for convenience.

Category

Choose a single category from the selected edition for export.

Export

You can export all content from the selected edition/category or choose to only include changes since the last export.

Include Ads

If you are posting display ads (or they are extracted as part of our full-service process), these can be included in the export for layout along with the article content for the edition. Display ads themselves are not associated with a particular edition, so this option will include all currently running display ads on the site. Note these are NOT the ads managed by AdRotate Pro, i.e. manually placed banner and tile ads.

Include titles in article root

Toggle this options to include the article headline in each story tag in the exported XML.

<story-225816-Driving-Development>

<story-225816-title aid:cstyle="" aid:pstyle="Headline Sans RD">Driving Development</story-225816-title>

<story-225816>

<story-225816-title aid:cstyle="" aid:pstyle="Headline Sans RD">Driving Development</story-225816-title>

Text Styles

You can specify style attributes for the main elements that will be exported:

Character Styles are used less often, but allow you to target styles at the word or character level in your InDesign template. In this context it is still applied to the entire element (e.g. Heading), so we recommend using Paragraph styles in most situations.

Paragraph Styles should always be used as these styles are applied to the individual article elements.

For either style group, the name of a style supplied on the export page should match the corresponding style in your InDesign template by name. This ensures that when dragging content from the Structure panel, all relevant styles will be applied automatically.

The post Reverse Publishing: Setting Up Your First Export first appeared on Our-Hometown.

We recently hosted a live webinar diving deep into the world of text-focused blocks within the WordPress Block Editor. Led by Christopher, with assistance from Vera and Tyler, the session explored how to go beyond basic paragraphs and headings to create dynamic and well-structured text layouts for your website content.

If you missed the live session, or want to revisit specific sections, the full recording is now available!

During the webinar, we covered a wide range of essential blocks and techniques, including:

• The Fundamentals: Mastering Headings, Paragraphs, and Lists, including their shared settings for color and typography.
• Layout Powerhouses: Using the Table block for structured data, the Details block for creating collapsible content (like FAQs), and the versatile Buttons block for calls to action.
• Advanced Options: Exploring inline images within text blocks, managing list levels and nested lists, styling tables and buttons, and using container blocks (like Group and Cover) for enhanced layout control.
• Legacy & Custom Content: A look at the Classic Editor block for older content and the Custom HTML block for embedding custom code or third-party widgets, plus a mention of the Shortcode block.

Christopher demonstrated practical examples for each block, showing how to transform blocks, adjust settings in the sidebar, and utilize the floating toolbar options. We also tackled common questions and explored workarounds for styling limitations.

This webinar is perfect for anyone looking to enhance their skills in the WordPress Block Editor and create more engaging, organized, and visually appealing text content on their website.

The recording includes chapters, making it easy to jump directly to the blocks or topics you’re most interested in.

Stay tuned for future webinars covering more aspects of the WordPress Block Editor and other helpful topics!

The post Block Editor Basics: Creating Text Layouts | OHT Webinar Replay first appeared on Our-Hometown.

Shared Style and Typography Settings

Settings for Styles (text and background colors) and Typography (Bold, Italic, etc.) are found in the right panel and are common to many text blocks:

The Color panel contains options for text color and background color/gradient for the individual block, allowing for quick styling of section headings, callouts, infoboxes, etc.

The Typography panel provides toggles to activate various additional text controls for Sizing, Appearance (various font weights for bold text), Letter Spacing, Decorations (strikethrough, underline) and Letter Case (all caps, etc.).

---

Floating Toolbar Options

The floating toolbar contains options for block transformations, arrows for vertical ordering, text decorations, adding links to text and an additional options dropdown.

The additional options include inline insertions, and other less-used decorations, such as strikethrough, formatted code and sub/superscript.

The Inline Image option can be useful for inserting a small icon graphic directly in the text flow of a block:

The small image above has been placed inline between sentences in a single paragraph block.

Heading Block

The Heading block shares all the same styling and typography settings as other text blocks, with the addition of setting a specific Heading level to delineate structure in your article.

Paragraph Block

The style and typography settings for the Paragraph block share the same options as discussed previously, but with the addition of limited alternative font selection, and a Drop Cap toggle.

The floating toolbar offers the same options for alignment, decorations and links, although with specific transformations, allowing you to convert a paragraph into a heading or list, etc.

List Block

Use the List block to organize text in numbered or bulleted lists.

Style are typography options are the same as paragraph blocks.

The floating toolbar offers options for numbered vs. bulleted lists.

Note that this block is a container for individual List Item blocks.

---

List Item Block

List items have a limited subset of styling options (only the text color can be changed), but the typography options are the same.

Additionally, the floating toolbar for a single List Item provides the same text options for text decoration and links, plus buttons for increasing or decreasing the list depth of an item.

---

Ordered (Numbered) Lists

For Ordered Lists, the settings panel provides format options (Numbers, Upper / Lowercase Letters, or Upper / Lowercase Roman Numerals.

You can also specify a starting value if the list is a continuation of a previous one.

The order can also be reversed for a countdown-style list.

Table Block

Table creation has been limited to the tools in the Classic Paragraph block (similar to the classic article editor itself), however we now have a dedicated Table block with some customization and styling options, plus all the normal table editing tools one might expect: adding/deleting columns and rows, showing header and footer sections, creating striped row delineation and more.

---

Table Block Settings

You have the option to tell the table to use “Fixed width table cells“, which means all columns will be equal in width rather than adapting the column widths to the content of the table.

The Header section and Footer section will each add an additional row to your table. The header section is typically used to add titles to the top of each row. The footer can be used to add an additional row at the bottom.

---

Table Block Styles

There are two styles available for tables: Default and Stripes:

• The Default style has a plain background and borders around the cells.
• The Stripes style has alternating row background colors.
• The Color and Typography panels are identical to those in the Paragraph block settings.

---

Table Block Toolbar

The floating toolbar for the Table block provides similar text options as other text blocks, but has an additional menu for editing the table itself: Inserting or deleting columns or rows. This behavior is very similar to other table editing operations in many common document editors.

Quote Block

The Quote block is similar to the List block in that it contains other blocks. The main difference is the citation toggle (indicated by the quill icon) for quote attribution. An inline image is attached to the citation text and the entire Quote block is right-aligned for a more engaging design.

---

Pull Quote Block

The Pull Quote block offers additional styling options, such as a border with an adjustable radius. Notably the Pull Quote block doesn’t contain other blocks, it has just the two text fields for the quote and citation (although the example below is also using the inline image option for the headshot).

Details Block

The Details block is a block that allows you to include content hidden under a parent block with a text summary. This works like an accordion, with the text summary expanding to show nested content. This nested content, similar to other “container-style” blocks, can be anything you’d like. This block is often use for things such as FAQs, or directory-type listings.

For example:

Quote of the Day

“A person who never made a mistake never tried anything new.”

Albert Einstein

Spacer Block

The Spacer block provides a resizable element that adds vertical space between other blocks. The size can be specified either in the settings panel or by dragging the circular handle at the bottom of the Spacer when it is selected.

Separator Block

Similar to adding a Horizontal Line in the Classic Editor, this block will add a simple line to delineate content in the flow of your article. There are options for line-style, thickness and color settings.

Buttons Block

You can add buttons to your website to create links to pages, products, or any other locations. Buttons help guide visitors to take action, such as signing up, purchasing, or learning more.

The Buttons block is similar to the List block in that it contains individual Button, each with separate styling options. Also the layout settings for a group of Buttons (the Buttons block) are very similar to the Row block, with vertical and horizontal justification, and the toggle to wrap the buttons onto additional rows depending on the width of the individual buttons.

The small + icon at the bottom left of the block highlight is used to add additional buttons to the Buttons block.

---

Button Settings

 After you add the block you will be presented with a single button ready for text and styling.

The width of the button can be set as a percentage of the container using the Settings switches in the side panel, e.g. 50% will stretch the button to half the size of the available width.

---

Button Styles

The style panel provides options for solid vs outline buttons, color settings, and a slider for adjusting the border radius, i.e. how round the corners of the button are. Note the border color will follow the color set for the text, while the background color will fill the button (regardless of the solid vs. outline setting. The Outline style only adds a border to the button with the text color.

The vertical and horizontal alignment of the buttons as well as the text alignment and decorations are all set in the floating toolbar.

You can even us the inline image option to add a graphic to your button:

Classic Block

The Classic block brings the legacy functionality of the Classic Editor into a single block in your content area. This allows for the use of established classic designs in your newer layouts integrating with other blocks as any other.

The block provides the same toolbar as the Classic editor, with the additional meta option to convert all content within the Classic block to individual content blocks, i.e. all paragraphs in the Classic block will become individual paragraph blocks after this process.

Custom HTML

The Custom HTML block is used most often for embeds that don’t have a native block. Depending on what plugins are installed you may have several blocks for embedding social media content, YouTube videos. etc. However this block will render any valid HTML code such as an iframe snippet from an online puzzle provide or even just a simple HTML design created in other software.

Play Sudoku online!

The post Creative Text Layouts in the Block Editor first appeared on Our-Hometown.

The widget features a header displaying current conditions and today’s forecast.

Below the header you can toggle a section to display periodic Special Weather Statements from the National Weather Service.

The main portion of the widget is dedicated to tabs that provide Hourly and 7-Day forecasts, as well as a live radar Map.

For the Hourly and 7-Day forecast entries, a button to the right of each will reveal further details for that particular timeframe.

The Map tab displays a live view with settings for the road/satellite view, plus layer toggles for various map overlays, such as precipitation, temperature, etc. and can even play through an animation of weather conditions.

A General Settings page provides options to toggle the default state (on or off) for many of these items as well as the default location and your API key for accessing the weather data.

The widget actually includes two separate widgets that can be used in the theme Customizer or simply in the Block Editor. One for a small heading display and one for the full widget.

Additionally, the widget can be accessed and placed via shortcode with options for the various display toggles and location settings.

If you are interested in adding the new OHT Weather Widget to your site, please don’t hesitate to reach out to us at ops@our-hometown.com!

The post Introducing Our-Hometown’s Fully-Featured Weather Widget first appeared on Our-Hometown.

Images are the lifeblood of engaging online content. They break up text, draw the eye, and tell stories in ways words alone can’t. But let’s be honest, getting them to look just right on your website – perfectly sized, aligned, maybe even with some stylish text overlay – can sometimes feel like wrestling a digital octopus.

If you’ve ever felt frustrated trying to manage images in WordPress, especially transitioning to the Block Editor, you’re not alone! That’s why we recently hosted a deep-dive webinar, led by Our-Hometown’s own Christopher, focused entirely on mastering the Image, Gallery, and Cover blocks.

Missed the live session? No worries! We’ve got the full recording ready for you, packed with practical tips and live demonstrations.

What You’ll Discover in the Webinar:

This session wasn’t just a surface-level overview. Christopher took us through the nuts and bolts, starting with the fundamentals and building up to sophisticated layouts:

1. The Mighty Image Block: We revisited the basics, comparing the Block Editor’s capabilities to the Classic Editor. You’ll learn how to precisely control:
   • Sizing & Aspect Ratios: Go beyond presets with specific dimensions and aspect ratios (square, widescreen, portrait, etc.).
   • Scaling (Cover vs. Contain): Understand how to make your image fill its space or fit entirely within it.
   • Non-Destructive Cropping: Learn how to crop images directly in the editor without altering your original file – a game-changer!
   • Alignment & Filters: Master positioning and apply cool effects like duotone (perfect for consistent headshots!).
2. The Creative Cover Block: Prepare to be amazed! The Cover block lets you use images (or solid colors/gradients) as backgrounds and layer text or even other blocks on top. We explored:
   • Adding Text & Content: Place headings, paragraphs, buttons, and more over your visuals.
   • Background Effects: Create eye-catching parallax scrolls (fixed background) or tiled patterns (repeated background).
   • Focal Points & Overlays: Ensure the most important part of your image stays visible, and use color/gradient overlays with adjustable opacity to improve text readability.
3. Gallery vs. Grid – Choosing Your Layout: Need to display multiple images?
   • Gallery Block: Quick and easy for simple grids, with a unique caption overlay style.
   • Grid Block (Power Move!): We showed how transforming a Gallery into a Group and using the Grid layout unlocks incredible flexibility. Create responsive columns that reflow automatically and even make specific images span multiple columns for dynamic, magazine-style layouts (perfect for staff directories or featured products!).
4. Combining Blocks for Maximum Impact: The real magic happens when you start combining these tools. Christopher demonstrated wrapping a complex Grid layout inside a Cover block, allowing you to add background effects and align the entire structure seamlessly within your content flow.

Stop Fighting, Start Creating!

Whether you’re new to the Block Editor or looking to level up your design skills, this webinar provides actionable techniques you can implement immediately. Learn how to move beyond basic image insertion and start crafting visually compelling, responsive layouts that capture your audience’s attention.

Need a hand implementing these techniques? Don’t hesitate to reach out to our support team at ops@our-hometown.com. We’re always happy to help you make the most of your Our-Hometown platform!

The post Unlock Stunning Visuals: Master Image, Gallery & Cover Blocks in WordPress — Webinar Replay first appeared on Our-Hometown.

The WordPress block editor (often called Gutenberg) has revolutionized how we create content, moving from a single text field to a modular system of blocks. One of the most powerful, yet sometimes overlooked, features within this system is Block Patterns. If you’re not using them yet, you’re missing out on a fantastic way to build beautiful, complex layouts quickly and consistently.

What Exactly Are Block Patterns?

Think of block patterns as pre-designed collections of blocks, arranged into ready-to-use layouts or sections. Instead of adding individual blocks (like headings, paragraphs, images, columns) one by one and styling them, you can insert a complete pattern with just a few clicks. These can range from simple call-to-action buttons to intricate page sections like testimonials, contact forms, image galleries, or multi-column layouts.

Why Use Block Patterns?

The advantages of incorporating patterns into your workflow are significant:

1. Speed Up Content Creation: This is the most obvious benefit. Building complex layouts block by block takes time. Patterns provide shortcuts, allowing you to insert sophisticated designs instantly. Need a pricing table or a feature comparison section? There’s likely a pattern for that.
2. Ensure Design Consistency: Patterns help maintain a consistent look and feel across your website. Whether provided by your theme or created by your team, using predefined patterns ensures that elements like calls-to-action, team member profiles, or service descriptions follow the same design principles everywhere they appear.
3. Access Professional Designs: You don’t need to be a designer to create visually appealing layouts. Themes often bundle beautifully designed patterns. Furthermore, the official WordPress Pattern Directory offers thousands of user-submitted patterns that you can easily copy and paste into your site.
4. Simplify Complex Layouts: Building intricate designs with multiple columns, nested blocks, and specific styling can be tricky. Patterns handle the complexity for you, providing a reliable foundation you can then customize with your own content.

How to Find and Use Block Patterns

Using patterns is straightforward:

1. Open the Inserter: In the block editor, click the blue or black (+) button (usually in the top-left corner or within the editor canvas) to open the block inserter panel.
2. Navigate to the Patterns Tab: Within the inserter panel, you’ll see tabs for ‘Blocks’, ‘Patterns’, and potentially ‘Media’. Click on the ‘Patterns’ tab.
3. Browse Categories: Patterns are often organized into categories (e.g., Buttons, Columns, Gallery, Headers, Text, Query). You can also explore patterns specific to your active theme or browse all available patterns. Many themes also offer a dedicated “Explore all patterns” button at the bottom of the pattern inserter tab which opens a larger modal window for easier browsing.
4. Search: Use the search field within the Pattern Directory integration, to search for specific patterns (e.g., “contact form,” “testimonial”).
5. Click to Insert: Simply click on the pattern preview you like, and it will be inserted directly into your page or post content at the location of your cursor.
6. Customize: Once inserted, the pattern is just a collection of regular blocks. You can click into any block within the pattern to edit the text, replace images, change colors, or adjust settings just like any other block. Unless it’s a synced pattern (more on that below), changes you make here won’t affect the original pattern or other instances of it.

Creating Your Own Block Patterns

One of the most powerful features is the ability to create your own patterns, saving layouts you frequently use or want to standardize across your site. Here’s how:

1. Build Your Layout: First, create the combination of blocks exactly as you want them in the editor. Arrange headings, paragraphs, images, buttons, columns, etc., and apply any desired styling (colors, spacing, typography).
2. Select the Blocks: Carefully select all the blocks you want to include in your pattern. You can do this by:

• Clicking and dragging your mouse over the blocks.
• Clicking the first block, holding Shift, and clicking the last block.
• Using the List View to select multiple blocks.
• You can also create a group of all the blocks you would like to include in the Pattern for quick selection and reuse.

3. Open the Options Menu: Once the blocks are selected, an options menu (three vertical dots ⋮) will appear in the block toolbar for the selection. Click on it. You can also find the menu next to the topmost block if you have created a Group for your design.
4. Choose ‘Create Pattern’: From the dropdown menu, select the “Create pattern” option.
5. Configure Your Pattern: A pop-up window will appear:

• Name: Give your pattern a descriptive name (e.g., “Two-Column Feature Section,” “Author Bio Box”). This is how you’ll find it later.
• Categories (Optional): You can assign your pattern to one or more categories to help organize it within the inserter. You can choose existing categories or create new ones.
• Synced: This is a crucial option:
  • Leave it OFF (Default): Creates a standard pattern. When you insert this pattern, it’s a copy of the original layout. Editing the inserted pattern does not affect the original or any other places you’ve used it. This is best for layout templates you want to customize each time.
  • Toggle it ON: Creates a Synced Pattern (previously known as Reusable Blocks). See the next section for details.

6. Click ‘Create’: Once configured, click the “Create” button.

Your custom pattern is now saved and will appear under the ‘My patterns’ category (or any other categories you assigned) in the Patterns tab of the block inserter, ready to be used! You can manage your created patterns via the main WordPress admin menu under Appearance > Patterns.

Understanding Synced Patterns

When creating a pattern, you have the option to make it Synced. This is what WordPress previously called “Reusable Blocks.” Here’s the key difference:

• Standard (Non-Synced) Patterns: When you insert a standard pattern, you get an independent copy of the block arrangement. Changes made to this inserted copy only affect that specific instance. The original pattern remains untouched, and so do any other instances you’ve inserted elsewhere. Think of it as a starting template.
• Synced Patterns: When you insert a synced pattern, it remains linked to the original. If you edit any instance of a synced pattern anywhere on your site, those changes will automatically apply to every other place that same synced pattern is used. This is incredibly powerful for content you need to keep consistent everywhere, such as:
  • Calls-to-action you might want to update sitewide.
  • Contact information footers.
  • Standard disclaimer text.
  • Promotional banners.

The table below summarizes the key differences between these two types of patterns:

Editing Synced Patterns

There are two ways to edit a Synced Pattern:

In the Block Editor:

• Select the Synced Pattern in the main content area or via the List View
• In the Block Toolbar, you will see the option to “Edit Original.” Click that link to open the Synced Pattern in the Pattern Editor. Notice that the field in the Top Toolbar changes from the Headline to the name of the Synced Pattern to indicate that you are in the Pattern Editor.
• Make any changes as you normally would when editing Blocks, then click the Save button at the top right to commit your updates.
• To return to the main editor, click the Back link in the Pattern Name field in the Top Toolbar.

In the Pattern Editor:

• Open the Pattern Editor from the Dashboard under Appearance > Patterns
• Click the three-dot menu below the pattern thumbnail to open the pattern editor (this is basically a strip-down block editor, with access to all the normal blocks and settings that you will find when editing an article).
• Make any changes as you normally would when editing Blocks, then click the Save button at the top right to commit your updates.
• The changes will then be reflected in any instance of the Pattern placed in an Article or Post.

Tips and Tricks: Best Practices for Using Block Patterns Effectively

To maximize the benefits of WordPress Block Patterns, consider the following best practices. Always customize inserted patterns with your own unique content, including text, images, colors, and fonts, to ensure they align with your website’s branding and overall style. Avoid relying solely on the default styling provided by the patterns to maintain a distinctive online presence.

Make frequent use of the List View (accessible via the three stacked lines icon at the top-left of the editor) for efficient editing, especially when working with complex patterns that contain nested blocks like Columns or Groups. The List View provides a clear hierarchical structure, making it easier to navigate and select specific blocks for modification or rearrangement.

While many Block Patterns are designed to be responsive, it is always a good practice to ensure responsiveness across devices by previewing your pages and posts on different screen sizes (desktop, tablet, mobile). Adjust block settings or choose alternative patterns if necessary to guarantee optimal viewing experiences on all devices.

For better organization and easier manipulation of elements within a pattern, consider using the Group block to group related blocks together. This allows you to move and style the grouped blocks as a single unit, streamlining the editing process for more intricate layouts.

The post The Power of Patterns: Block Editor Basics first appeared on Our-Hometown.