Single Post Widgets
Elementor offers a set of widgets called ' Theme Elements' that can be used to create your single post. These include the Post Title widget, Post Info (Meta Data) widget, Post Excerpt widget, Post Content widget, Featured Image widget, Search Form widget, Author Box widget, Post Comments widget, Post Navigation widget, and Yoast Breadcrumbs widget (if Yoast SEO plugin is installed and active).
Shine a spotlight on the writers of your blog posts with Author Box. Enable your visitors to find out more about your authors rapidly, strengthening your brand. Providing a sleek, professional feel, Author Box presents you and your authors as part of the visual content. Let’s get into it.
Author Info.: Go to the Panel, in the Content Tab > Author Info; you have two options: Current Author or Custom Author. Read on to learn about the settings for Custom Author. (If you go with Current Author, you have most of the same style options.)
Profile Picture: Begin by adding a profile picture to your author box by clicking on Choose Image and uploading a photo from your Media Library or your computer. Adjust the size and placement later in the Style Tab under Image.
HTML Tag and Link: Enter the author’s name and choose an HTML tag. You can also add a link to your image and author name. Be sure to enter your site using this format: http://your-link.com. Click on the cog wheel icon to specify link options. Here check either ‘open site in a new window’ or ‘add nofollow’ (that way search engines do not see the link, and do not influence the rank). Press update to save, and then test it out by going to your live site. (In the bottom of the panel, hit the eye icon - Preview changes - to go to your live site.)
Author Bio: Write a description of your author in the Biography box. You can design the text later in the STYLE tab under Text.
Archive Text: Change the Archive text if using an archive button. In Author Info > Source > Current Author, there is a switch to hide or show the archive button. Play with the layout and alignment.
Image Style: In the Style tab > Image, set the Vertical Align, toggle the image size and the gap between the text and image.
Border: You can add a border around your picture and give it a color.
Border radius changes the shape from a circle to a square.
Box Shadow: Style it further by adding a box shadow. If this suits your design tweak the amount of Blur, where it is Spread, and set the positioning- Horizontal, Vertical, and Position of Inset/Outline. Or you can reset it back to default (no box-shadow) by pressing the circular arrow icon next to the pencil icon.
Text Style: Under Text, you can style the Name and Biography texts by adding color, typography, and the gap between the name and photo. Here Button refers to your Archive button set in the Content tab. If you are not using the custom source (under Author Info.) and using the default source, the Archive button links automatically to all your posts on the website.
To leave a lasting impression, insert the author box at the end of your post and engage your readers more.
Add a search form to your header, footer, or sidebar and give your users the ability to find the content they are looking for on your site. The search form comes with three skins.
1. The Classic skin displays a search field and search button. This is the only skin allowing you to choose an icon or text display for the button.
In Content, you can design the button as either an icon (an arrow or a magnifying glass) or type in some text, and then adjust the overall size. In Style>Input>Normal modify the left side of the field including the icon and border size, typography, color, and add a border radius to curve the edges of the form. Focus offers more color settings for the text, background, and border. Test it out by choosing colors and typing text in the left field. Viewing your form live can also give you a better sense of how it will look on your page. In Style>Button design the right side of the field - the button. Choose the text and background colors for Normal viewing and Hover. Set the icon size and width. Click the desktop icon next to ‘Icon Size’ to open up and adjust for tablet and mobile.
2. The Full-Screen skin displays a single search icon (without a button). When users click on it, the search box opens inside a full-screen lightbox. This skin is quite handy for menus and mobile devices. In Content>Toggle set the alignment left, center or to the right. Here you can also adjust the size of the entire field. In Style>Input you can give it an overlay color and set the typography. Add more color in the Normal and Focus tabs. In Content>Toggle play with colors in Normal and Hover. Choose the size of the icon, border width, and if needed curve the edges with a border radius.
3. The Minimal skin appears as one field and also contains a search icon. This skin is easily adapted to fit any website. In the Content tab, enter your text to customize the placeholder call-to-action. Here you also have control over the size of the search form. In Style>Input edit the icon and border size. Style the typography and splash some color on your text and background in Normal and Focus.
Start a lively discussion by adding user comments to any page or post.
Alright, how do we get the ball rolling? The Theme Comments skin uses the currently active theme comments design and layout to display the comment form and comments. In the future, we will add more skins.
The source of the comments can be from the current post, or from any other post or page on your site. If the comments are closed, a notification alert will appear in the preview. If needed, adjust in the Content tab of the panel.
Explore the Background and Border options in the Advanced tab to style the comment box with a color or a border. You can also find responsive settings for mobile in Advanced.
To freely navigate between posts use this widget. Design it using the three tabs: Content, Style, and Advanced.
- Hide or show a variety of elements including label, arrows, post title, and borders.
- Name the back and forward navigation points (previous post, next post). Once you have more than one post, the text and arrows will appear for the next post.
- Choose arrow type (chevron, arrow circle, etc.).
- Design your title and label by changing the font family under typography.
- Add colors in the normal or hover view.
- Adjust the arrow size and the gap distance from the border.
- Give the border color, toggle its size and spacing.
- Use a background image; under Size set it to cover, auto, or contain.
- Test out different background colors.
- Play around with the other settings of Border and Element Style.
Breadcrumbs enable users to navigate your site easily, while also providing search engines clues as to the structure of your site.
Add: To use this widget, first, add the plugin from the WordPress dashboard.
Under Plugins > Add New, search for Yoast and add Yoast SEO. Enable Advanced - Yoast SEO and press save changes. Refresh your Elementor screen, now Yoast should appear as ‘Breadcrumbs’ in the panel under Theme Elements.
Drag: Drag the widget into the relevant section and customize.
Most settings you will need are in the Content and Style tabs in the panel.
Align: Under Content set the alignment (left, center or right) and choose your HTML tag (p, div, nav, and span) for your coding preferences and SEO. At the bottom follow the link to the Breadcrumbs panel to set further specific coding settings.
Style: Under Style choose the typography, color (normal and hover), and link color.
How to Use Theme Elements
Integrating Theme Elements into your pages will add that extra touch of professionalism to your site. Their functionality will improve user-experience and raise your brand awareness. Give them a spin!