Heeded »
Template
Content Tab Options
Skin
The ‘Skin’ option in Elementor’s Archive Posts widget allows you to select the overall design style of your post listings. This setting changes how posts are displayed, offering different layouts like classic, cards, or full content. Choose a skin that aligns with your site’s design.
Image Position
The ‘Image Position’ option lets you decide where to place the featured image in your post. Options like ‘Top’, ‘Left’, ‘Right’, and ‘None’ provide flexibility in designing your post layout. This setting enhances the visual appeal and layout structure of your posts.
Masonry
Masonry’ layout arranges posts in an optimal position based on available vertical space, like a mason fitting stones in a wall. Enable this to create a visually interesting and dynamic layout for your post listings, especially effective for posts with images of varying sizes.
Image resolution
This setting adjusts the quality of the images in your posts. Choose a higher resolution for crisper images, but be mindful of load times. A lower resolution is faster to load but less sharp. Balance between quality and performance based on your audience’s needs.
Image Ratio
The ‘Image Ratio’ controls the aspect ratio of post images, determining their width-to-height proportion. Common ratios include 16:9, 4:3, and 1:1. This setting is essential for maintaining consistency and harmony in the visual presentation of your images.
Image Width
Adjust the ‘Image Width’ to specify the width of your post images. This controls how much space the image occupies within each post, allowing you to create a balanced and harmonious layout. Consider the overall design and readability when adjusting this setting.
Title
The ‘Title’ option toggles the display of post titles within your archive. Turning this on enhances readability and provides context to your readers. Use this to make your posts easily navigable and informative.
Excerpt
Toggle ‘Excerpt’ to display a summary of each post in your archive. This feature gives readers a quick overview of the post content, encouraging further engagement. Excerpts should be concise and intriguing.
Excerpt Length
Here, you set the number of words in the post excerpt. A shorter length provides a brief teaser, while a longer length offers more detail. Adjust this based on how much preview content you want to show your readers.
Apply to Custom Excerpt
Enable this option if you have custom excerpts for your posts. This ensures that your manually crafted excerpts are used instead of automatically generated ones, allowing for greater control over the content presented to your readers.
Meta Data
Meta Data controls the display of post metadata (like author, date, comments). Toggle individual items to show/hide them and customize your archive layout.
Separator Between
Separator Between allows you to choose a character or symbol to place between metadata elements, enhancing readability.
Read More
The “Read More” toggle adds a link to the full post. Enable it to encourage users to explore content in-depth.
Read More Text
Read More Text lets you customize the text for the read more link, offering flexibility to suit your site’s tone.
Automatically Align Buttons
This option adjusts ‘Read More’ buttons alignment automatically based on content length. Enable for consistent visual appeal.
Open In New Window
Enabling “Open In New Window” makes ‘Read More’ links open in a new browser tab, useful for keeping visitors on your original page.
Pagination
Pagination adds page navigation to your archive, allowing users to browse through multiple pages of posts.
Page Limit
Page Limit sets the maximum number of pages in your pagination. Adjust to control user navigation through your content.
Shorten
Shorten limits the amount of text displayed from each post, keeping your archive concise and tidy.
Alignment
The ‘Columns’ setting determines how many posts are displayed in each row. For a grid layout, choose between one to six columns. This setting is crucial for organizing your content in a visually appealing manner, especially on larger screens.
Individual Pagination
Individual Pagination provides separate pagination for each post, enhancing navigation for extensive archives.
Nothing Found Message
Customize the “Nothing Found Message” to display a personalized message when no posts match the archive criteria.
Style Tab Options
Columns gap
Adjust the space between columns. Slide to increase or decrease the gap, or input a specific value for precise spacing. Ideal for structuring your archive posts layout for a clean, organized look.
Rows Gap
Control the spacing between rows of posts. Use the slider to modify the gap, or type a value directly for exact spacing. This setting helps create a well-spaced, visually appealing post archive.
Alignment
Align your posts within the archive. Options include left, center, and right alignment. Choose the best fit to match your website’s design language and enhance readability.
Image Border Radius
Define the roundness of your post images’ corners. Slide for subtle curvature or higher values for a more rounded appearance. This stylistic choice can soften your design and make it more visually appealing.
Image Spacing
Set the space between the image and post content. Adjust to create a balanced look, ensuring images complement the text without overwhelming it.
Image CSS Filters (Normal and Hover)
Add CSS filters to your post images. Options for ‘Normal’ affect the default state, while ‘Hover’ changes when the mouse is over the image. Adjust brightness, contrast, and more to make images stand out or blend seamlessly into your design. Filters can enhance user interaction and visual appeal, offering a dynamic way to engage visitors as they browse your archives.
Title Colour
Choose a color for your post titles. Pick from the palette or enter a hex code for brand consistency. This setting significantly impacts the readability and visual hierarchy of your post titles.
Title Typography
Customize font size, style, weight, and more for post titles. This option is crucial for maintaining legibility and ensuring your titles stand out appropriately, reflecting the importance of your content.
Title Text Stroke
Apply an outline effect to your post titles. Adjust thickness and color to create a unique style or highlight the titles against various backgrounds.
Title Spacing
Manage the space around your post titles. Increase or decrease to ensure titles are distinct from other elements, enhancing clarity and focus.
Meta Colour
Select a color for the metadata text (like date, author). Ensures metadata is legible and complementary to your overall design, enhancing user understanding of post context and details.
Meta Separator Colour
The ‘Meta Separator Colour’ setting allows you to customize the color of the separator used in the post metadata. To change the color, click the color field and choose a new color or enter a specific color code. This is a great way to ensure the meta separator aligns with your site’s color scheme.
Meta Typography
Meta Typography’ lets you control the font properties of the post metadata. Here you can change the font size, family, weight, transform, style, decoration, line-height, and letter spacing. Adjust these settings to match the typography of your site for a consistent look.
Meta Spacing
In the ‘Meta Spacing’ field, you can adjust the space around the post metadata. This is useful for creating visual separation and enhancing readability. Use the slider or enter a value to set the spacing.
Excerpt Colour
The ‘Excerpt Colour’ option changes the color of the post excerpt text. Click the color field to select a color that enhances readability and fits your design.
Excerpt Typography
Excerpt Typography’ controls the font settings of the excerpt text. Modify the font size, family, weight, and other properties to ensure the excerpt is legible and stylistically in line with your site.
Excerpt Spacing
Excerpt Spacing’ lets you adjust the space around the excerpt text. Use this to create comfortable reading space, making your content more user-friendly.
Read More Colour
Change the color of the ‘Read More’ link with the ‘Read More Colour’ setting. Select a color that stands out yet complements your overall design.
Read More Typography
In ‘Read More Typography’, you can customize the font properties of the ‘Read More’ link. Adjust the font size, type, weight, and more to make this link noticeable and clickable.
Read More Spacing
Read More Spacing’ allows you to adjust the space around the ‘Read More’ link. Use this to draw attention to the link and improve the layout of your post summary.
Pagination Typography
Pagination Typography’ affects the font properties of the pagination links. Customize the font size, family, weight, and other properties to make navigation intuitive and seamless.
Pagination Colour (Normal, Hover and Active)
Adjust the colors for normal, hover, and active states of pagination links with ‘Pagination Colour’. This helps in guiding users visually during navigation.
Pagination Space Between
Pagination Space Between’ sets the spacing between individual pagination links. Adequate spacing ensures that the pagination is user-friendly and easy to interact with.
Pagination Spacing
The ‘Pagination Spacing’ option allows you to control the overall space around the pagination section. Adjust this to ensure the pagination area is neither too cramped nor too spaced out.
Advanced Tab Options
Margin
Margin refers to the space outside the border of the Archive Posts widget. You can set different values for top, right, bottom, and left margins to control the widget’s external spacing. Use this to ensure your Archive Posts widget has adequate breathing room within your page layout.
Padding
Padding is the space inside the border of the Archive Posts widget. Adjust padding values for top, right, bottom, and left to increase or decrease the space between the widget’s content and its border. This is crucial for maintaining the content’s readability and visual appeal.
Width
Width controls the horizontal size of the Archive Posts widget. You can set a specific width in pixels, percentage, or other units. Adjusting the width helps you align the widget effectively within your section or column.
Position
Position determines the placement of the Archive Posts widget in relation to other elements. You can choose from static, relative, absolute, fixed, or sticky, each offering different behaviors in your layout. Understanding these options lets you create sophisticated designs.
Z-Index
Z-Index controls the stacking order of elements on your page. A higher value brings the Archive Posts widget to the front, useful when overlapping elements. It’s essential for managing the visibility of elements in complex designs.
CSS ID
CSS ID is a unique identifier for the Archive Posts widget. Assign an ID to target this specific widget with custom CSS or JavaScript, enhancing your site’s interactivity and styling.
CSS Classes
CSS Classes allow you to apply pre-defined CSS styles to the Archive Posts widget. Add class names to leverage existing styles or create new ones for consistent and efficient styling across your site.
Scrolling Effects
Scrolling Effects add interactive motion effects to the Archive Posts widget as users scroll through the page. Experiment with various effects like vertical scroll, horizontal scroll, transparency, blur, rotate, or scale to create dynamic and engaging user experiences.
Mouse Effects
Mouse Effects in Elementor allow you to add interactive animations to the Archive Posts widget. This feature enhances the visual appeal and user engagement of your website. To use Mouse Effects, simply toggle it on and customize the effects like 3D Tilt and Mouse Track. Experiment with the intensity and speed settings to achieve the desired interaction.
Sticky
The Sticky option enables the Archive Posts widget to stay fixed on the screen as users scroll. This feature is ideal for keeping important content visible. To activate it, toggle on the Sticky option and choose the Sticky On setting based on your needs (Desktop, Tablet, Mobile). You can set the Sticky Offset to manage the distance from the top of the screen and use the Effects Offset to delay the sticking effect.
Entrance Animation
Entrance Animation adds animated transitions as the Archive Posts widget enters the viewport. Select from a variety of animations (e.g., Fade In, Zoom In, Bounce In) to make the widget appear dynamically. Customize the animation duration and delay to suit the overall design of your website. This feature enhances the visual flow and can draw attention to important content.
Transform
Background
The Background option lets you set a custom background for the Archive Posts widget. Choose from classic (solid color or gradient) or video backgrounds. Customize the color, location, type, and angle for gradients. For video backgrounds, input a video link and set the start and end times. This feature is perfect for creating visually striking sections that capture user attention.
Border
Border settings allow you to add a border around the Archive Posts widget. Choose the border type (solid, double, dotted, dashed, etc.), customize its width, and select the border color. You can set different borders for each side of the widget or link the values for uniformity. Additionally, the Border Radius option lets you round the widget’s corners, contributing to your site’s overall aesthetic.
Mask
The Mask option in Elementor allows you to apply creative masking effects to the Archive Posts widget. Choose from various shapes or use a custom SVG to create unique visual effects. The mask can be adjusted in size and position, enabling you to craft innovative designs that stand out. This feature is particularly useful for adding artistic elements to your archive sections.
Visibility
Visibility settings determine where the Archive Posts widget is displayed. You can hide the widget on specific devices (desktop, tablet, mobile) or user roles. This feature is useful for creating responsive designs and tailoring content to different audience segments. It ensures that your archive sections are optimized for every viewing scenario.
Attributes
Attributes in Elementor allow you to add custom HTML attributes to the Archive Posts widget. This is useful for advanced customization, such as adding “aria” attributes for accessibility or custom data attributes for JavaScript interactions. Simply enter the attribute name and its value. This feature enhances your website’s functionality and compliance with web standards.
Custom CSS
Custom CSS gives you the power to write your own CSS code for the Archive Posts widget, offering complete control over its styling. This is ideal for users with CSS knowledge who want to apply specific styles that are not available through standard Elementor options. Write your CSS rules in the provided area to customize the widget’s appearance. Remember, this feature requires a basic understanding of CSS.
Archive Posts Widget Classes
Here you will find (almost, at least) all of the classes related to the Archive Posts widget. They are listed and identified on a live example of the Archive Posts widget below with the use of distinctive colors (mind your eyes, this is for identification purposes). If you spot an element you would like to alter on your own site, you can copy (there’s a copy button when hovering) the css code line associated to it and paste it in the widget’s Custom CSS section of Elementor
If using the free version of Elementor, the code can be pasted in your theme’s custom CSS by removing ‘selector’ and replacing with a CSS ID of your choice. The CSS ID will have to be specified in the Advanced Tab of the widget without a ‘#’, but will be preceeded by ‘#’ in the custom CSS, such as ‘#my-id’, as CSS syntax dictates.
Archive Posts
Maximize your archive pages with Elementor’s Archive Posts widget. Discover the essential classes and design tricks for a better user experience.
Getting Help With Elementor
Using widgets in Elementor can sometimes present challenges, especially when aiming to balance aesthetic appeal with SEO optimization. If you find yourself needing assistance with your Elementor website, it’s precisely what we do every day here at Heeded. Our website design and development services are tailored to ensure that every aspect of your site, including the crucial page titles, is not only visually engaging but also meticulously optimized for search engines. You can even get an instant online quote for a website. At Heeded, we pride ourselves on our comprehensive approach, integrating SEO services into our web design and development processes. This ensures that your website not only looks great but also performs exceptionally well in search engine rankings. Let us take the helm in refining your Elementor page titles, making the process seamless and your website standout, all while boosting your SEO.
Author
