How to Create a Sticky Transparent Header

How to Create a Sticky Transparent Header

Create a cool sticky transparent header effect using Elementor』s CSS class.

You will learn how to:

Make your sticky header transparentUse CSS to create an animation transition Change min-height when scrolling

Go to Templates > Theme Builder > Header and edit your header template.Right-click the header』s section handle to edit the section.In the panel, go to Advanced > Motion Effects.

Advanced

Motion Effects

Sticky: Click Top to choose to stick the header to the top. Other options include Bottom or None.Sticky On: Choose which devices to stick the header, including Desktop, Tablet, and Mobile.Offset: Set the number of pixels scrolled before the header becomes sticky.Effects Offset: Set the number of pixels scrolled before the header effects take place.

Note: The Offset Effects options only work when Custom CSS is applied.

Custom CSS

Add your own custom CSS here. Below is an example of CSS that changes the header』s background color, transparency, and height, with an easing animation effect. 

selector.elementor-sticky--effects{ background-color: rgba(133,130,255,0.5) !important }

selector{ transition: background-color 4s ease !important; }

selector.elementor-sticky--effects >.elementor-container{ min-height: 80px; }

selector > .elementor-container{ transition: min-height 1s ease !important; }

Note: This CSS will take effect when the user has scrolled the number of pixels specified in the Offset options.

Flip Box Widget (Pro)

Flip Box Widget (Pro)

The Flip Box Widget helps you create animated boxes that flip to the other side, once the visitor hovers over them. 

Content 

Front

Content

This tab controls the content of the front side of the flip box. 

Graphic Element: Choose between None, Image or Icon to display a graphical Element in the front of the flip boxIf Image is selected as the Graphic Element: Choose Image: Select or upload an image Image Size: Set the size of the image, from thumbnail to full, or set a custom sizeIf Icon is selected as the Graphic Element:Icon: Select an icon from the FontAwesome library View: Choose the default icon view, or select Stacked or FramedShape:  If Stacked or Framed is chosen, choose Circle or SquareTitle & Description: Choose the title and description that appears in the front of the flip box

Background

This tab controls the background of the front side of the flip box.

Background Type: Choose Color, Image or Gradient as the background of the front of the flip box.

If you choose an Image Background, the following options become available:

Position: Select the position of the image, such as Top Center, Top Right, Center Center, etc.Attachment: Select from Default, Scroll, or FixedRepeat: Choose from Default, No-repeat, Repeat, Repeat-x, or Repeat-ySize: Select from Default, Auto, Cover, or ContainBackground Overlay: Choose a color for the overlay

If you choose Gradient Background, the following options become available:

Color: Select the primary color of the gradientLocation: Select the location of the primary colorSecond Color: Select the second color of the gradientLocation: Select the location of the second colorType: Choose Linear or RadialAngle: Set the angle of the gradient

Back

The back side of the flip box has the same elements as the front side listed above, except for the graphic element that only appears on the front. The back side also includes a button.

Button Text: Choose the text that appears inside the buttonLink: Choose where the button points to. The link needs to include the entire URL (including http / https)Apply Link On: Choose to apply the clickable link to the Button Only, or to the Whole Box

Settings

Height: Control the height of the flip boxBorder Radius: Set the border radius of the flip box, and make its corners roundFlip Effect: Choose between flip effects, including flip, slide, push, zoom in, zoom out or fadeFlip Direction: If you choose the flip or slide effects, you can have the flip box flip right, left, up or down3D Depth: Slide to On to give the flip box a 3D animation effect

Note: The Safari browser is partially incompatible with the 3D Depth effect on mobile. If 3D Depth is used, portions of the flip box may show through the Nav Menu dropdown. It is not possible to use the 3D Flip Box widget and the Nav Menu widget with IOS due to issues with Safari being unable to support this option. We advise modifying the content for mobile in this case with the 「hide section」 option in the section』s Advanced tab in Responsive > Visibliity.

Style

Front Side

Padding: Add padding to the content area of the front of the flip boxAlignment: Choose to align the flip box content to the left, right or center of the flip boxVertical Position: Align the flip box content to the top, center or bottom of the flip boxBorder Type: Set a border to the entire flip boxWidth: If a border type is chosen, set a width for the borderColor: If a border type is chosen, select a color for the border

Icon

Spacing: Control the space between the icon and the titlePrimary Color: Choose the primary color of the iconSecondary Color: Choose the secondary color of the iconIcon Size: Choose the size of the iconIcon Padding: Set the amount of padding around the iconIcon Rotate: Rotate the icon to any angleBorder Width: Set the width of the icon borderBorder Radius: Set the radius of the icon border to control corner roundness

Image

Spacing: Control the space between the image and the titleOpacity: Choose the opacity of the imageBorder Type: Choose a border for the image: None, Solid, Double, Dotted, Dashed, or GrooveBorder Radius: Control the border radius of the image border

Title 

Spacing: Control the space between the title and descriptionText Color: Choose the color of the titleTypography: Set the typography settings of the title

Description

Text Color: Choose the color of the descriptionTypography: Set the typography settings of the description

Back Side

For the back side of the flip box, you get all the options listed previously for the front side, minus the graphical element settings. You also get control over the button settings.

Button

Size: Choose a size for the button (extra small, small, medium large and extra large)Typography: Customize the typography of the button textText Color: Choose the text color of the buttonBackground Color: Choose the color of the button backgroundBorder Color: Control the color of the button borderBorder Width: Control the width of the button borderBorder Radius: Control the border radius of the button

Advanced

Set the Advanced options that are applicable to this widget

Read the full release post about the Flip Box widget

How To Create A Shopping Cart Popup For Your Checkout Page

How To Create A Shopping Cart Popup For Your Checkout Page

Create an engaging Elementor Popup on your checkout page that helps users make buying decisions.

You will learn how to create a popup that:

Keeps the visitor in the shopping loopEncourages sharing your product with othersEarns visitor trust by not pushing for a purchase

Design The Popup and Its Content

Go to Templates > Popups > Add New and give your new Popup a name. (An alternative method is to press CMD+E or CTRL+E to open Finder, search for Popup, choose Add New Popup, and give it a name.Choose a pre-designed Popup template or close the Library overlay and design your Popup from scratch.For this example, we』ll design our own, and add a heading, some text, an image or animated gif, and some social share buttons .Style the text and icons as desired.Now let』s give our popup an Entrance Animation by going to Popup Settings > Entrance Animation > Slide In Right, and set the Animation Duration to 1Click Publish

Set The Publish Options

Now let』s set Conditions and Triggers. We』ll show the Popup only on the Checkout page, and only after the user has been inactive on the page for 20 seconds.

Conditions > Singular > All Pages > Choose Page – Enter the name of page where you want the popup to pop – In this example, we typed checkoutTriggers > After Inactivity > 20 (seconds)For this example, we don』t need to set any Advanced Rules, so click Save and Close.

All done. Now go to your checkout page, and view your Popup in action.

WooCommerce Archive Products (Pro)

WooCommerce Archive Products (Pro)

Set the style and layout of the WooCommerce Archive Products

Content

Content

Allow Order: Select Yes to give users the option to sort the products by Default, Popularity, Rating, Latest, Price: Low to High, or Price: High to LowShow Result Count: Select Yes to show number of results for this archive, or No to hide it

Advanced

Nothing Found Message: Enter the message to be shown to users when there are no results to display

Style

Products

Columns Gap: Set the exact gap between the columnsRows Gap: Set the exact gap between the rowsAlignment: Align the products data to the left, right, or center

Image

Border Type: Select the type of border, choosing from none, solid, double, dotted, dashed, or groovedBorder Radius: Set the radius to control corner roundness of the borderSpacing: Adjust the amount of space between the images and their data

Title

Color: Choose the product Title colorTypography: Set the typography options for the Title textSpacing: Adjust the amount of space after the Title

Rating

Star Color: Choose the color of a filled starEmpty Star Color: Choose the color of an empty starStar Size: Set the size of starsSpacing: Adjust the amount of space after the Rating Stars

Price

Color: Choose the color of the product PriceTypography: Set the typography options for the product Price

Regular price

Color: Choose the color of the product』s Regular PriceTypography: Set the typography options for the product』s Regular Price

Button

Normal | Hover

The following options can be set independently for both the normal and hover states.

Text Color: Choose the color of the product』s Button TextBackground Color: Choose the background color of the product』s ButtonBorder Color: Choose the border color of the product』s Button

Typography: Set the typography options for the product』s Button TextBorder Type: Select the type of border, choosing from none, solid, double, dotted, dashed, or groovedWidth: Control the thickness of the border around the product』s ButtonBorder Radius: Control corner roundness of the button』s borderText Padding: Set the padding within the buttonSpacing: Adjust the amount of space above the buttons

View Cart

Color: Choose the color of the View Cart text under the buttonsTypography: Set the typography options for the View Cart text

Box

Border Width: Control the thickness of the border around the product』s boxBorder Radius: Control corner roundness of the products boxPadding: Change the padding within the products box

Normal | Hover

The following options can be set independently for both the normal and hover states.

Box Shadow: Adjust box shadow optionsBackground Color: Choose the background color of the products boxBorder Color: Choose the border color of the products box

Pagination

Spacing: Set the amount of space above the paginationBorder: Show or Hide border around paginationBorder Color: Choose the color of the pagination borderPadding: Set the padding within the pagination

Normal | Hover | Active

The following options can be set independently for the normal, hover, and active states.

Typography: Set the typography options for the pagination textColor: Choose the color of the pagination textBackground Color: Choose the background color for the pagination

Sale Flash

Sale Flash: Show or HideText Color: Choose the color of the Sale Flash textBackground Color: Choose the background color of the Sale FlashTypography: Set the typography options for the Sale Flash textBorder Radius: Control the corner roundness of the Sale FlashWidth: Control the thickness of the border for the Sale FlashHeight: Set the height of the Sale FlashPosition: Set the position of the Sale Flash, Left or Right, of the products boxDistance: Set the distance of the Sale Flash from the top of the products box

Nothing Found Message

Color: Choose the color of the Nothing Found Message textTypography: Set the typography options for the message text

Note: The style of this widget is often affected by your theme and plugins. If you experience any such issue, try to switch to a basic theme and deactivate related plugins, or adjust the styling within your theme』s settings.

Custom Labels & Values in Select, Radio and Checkbox Form Fields

Custom Labels & Values in Select, Radio and Checkbox Form Fields

You can use the pipe character on your keyboard (『|』) to differentiate between label and value. If you use a pipe (『|』) character in an option value, the part before the pipe will be used as the label, and the part after the pipe will be the actual value. 

You can use this method in a Select, Radio buttons and Checkbox fields.

The backend will look like this:

And the frontend will look like this:

Learn more about the Form Widget and its options here.

The Template Library is Empty

The Template Library is Empty

If you do not see any templates in the 「Predesigned Templates」 after hitting on the 「Add Template」, please check the following steps:

1. On your WordPress Dashboard, go to 「Elementor > Tools」 and click on 「Sync Library「.

2. Go to Elementor > System Info on your WordPress Dashboard and check the 「Memory Limit」 allocated to WordPress. If your memory limit is under 128MB (40MB for instance) please ask your hosting company to raise it. The official WordPress guide to increase the memory limit can be found here.

3. Check if it is not a permission issue. Contact your hosting company so that they can check the error logs of your server.

4. Ask your hosting company if the allow_url_fopen function is activated.

To troubleshoot, you can test Elementor on a localhost to rule out a server issue.

Layers Header and Footer Options

Layers Header and Footer Options

The Layers theme options include multiple header and footer layout and design choices.

Headers

From the WordPress Customizer, select Header.

Styling

Header Arrangement: Choose to display the logo position at Logo Left, Logo Right, Logo Center Top, Logo Top, Logo Center, or Header SidebarHeader Width: Select to display the header as Boxed or Full WidthSticky Header: Slide on to make header sticky and to make the sticky header transparentSearch: Slide on to show search in the header. If on, enter a Search Label

Header Styling

Control the visual styling of the heading elements

Header Padding: Adjust top and bottom padding of headerBackground Color: Choose the color of the header』s backgroundBackground Image: Select an image for the header』s backgroundSticky Breakpoint (px): Set the number of pixels, when user scrolls, that the Sticky Menu displays

Page Title Styling

Page titles appear on list pages and pages using the 「Blank Page」 template they also include breadcrumb navigation.

Title Background: Choose the color of the page title』s backgroundBackground Image: Select an image for the page title』s backgroundTitle: Choose the title』s text colorExcerpt: Choose the page excerpt』s colorTitle Height: Adjust the height of the page titleTitle Below Spacing (px): Adjust the amount of spacing below the page title

Menu Styling

This will affect the menus which display in the header                   

Text Color: Choose the menu』s text colorText Shadow: Select None, Bottom Shadow or Top ShadowText Transform: Select None, Uppercase, Capitalize, LowercaseLink Spacing: Slide to set the amount of space between each menu itemEnable Hover Styling: Slide on to enable hover styling detailed below

Header Menu Hover Styling

This will affect header menu items when hovered over or active                   

Text Color: Choose the menu items』 hover/active text colorText Shadow: Select None, Bottom Shadow or Top Shadow for the hover/active stateBackground Color: Choose the menu item』s hover/active background colorRounded Corner Size: Set the amount of corner roundness in a menu item』s hover/active stateBorder Width: Set the width of the menu item』s border in the hover/active stateBorder Color: Choose the menu item』s border color in the hover/active state

Sub Menu Styling

This will affect menu drop-downs

Text Color: Choose the drop-down menu items』 colorText Shadow: Select None, Bottom Shadow or Top ShadowText Transform: Select None, Uppercase, Capitalize, LowercaseBackground Color: Choose the drop-down menu item』s background colorBorder Width: Set the width of the drop-down  menu item』s borderBorder Color: Choose the drop-down menu item』s border colorSeparator Border Color: Choose the border color that separates each item in a menu drop-down

Footers

Likewise, the Layers theme includes several Footer layout and design options in WordPress Customizer. From the WordPress Customizer, select Footer.

Footer Width: Choose from Boxed or Full WidthWidget Areas: Choose the number of widget areas to appear in the footerCopyright Text: Enter your copyright text

Styling

Footer Background: Choose the color of the footer』s backgroundFooter Padding: Set the top and bottom padding of the footer

Elementor Pro』s Header and Footer Builder

If you need more complex header design customization, Elementor Pro allows you to fully design your headers and footers in a visual way. No need to settle for limited options. You can drag and drop Elementor widgets into your header and footer templates, and design the entire layout in any way you choose. Need different headers or footers to display based on multiple conditions? Elementor Pro makes that process simple.

Learn more about Elementor Pro』s Header and Footer Builder

Check out these 5 inspiring header tutorials

The images of the templates are missing

The images of the templates are missing

This can happen because of a low memory limit or to other server settings (file permission issues most of the time).

Ask your hosting company to check if the option allow_url_fopen is set to 「on」 and if the function  file_get_contents is not blocked. 

Please note that sometimes the allow_url_fopen appears as activated even if it is not actually the case. For this reason, this has to be checked by an experienced technical support engineer.

This can also happen when you import templates from a localhost to another localhost or with a server which blocks the transfer of pictures from one site to another.

Layers / Elementor Comparison Tables

Layers / Elementor Comparison Tables

Layers is a theme, so just as Elementor happily works with nearly all themes, Elementor integrates well with Layers. As with any good WordPress theme, you』ll find Layer』s theme options in the WordPress Customizer. Here you can customize Layer』s theme logo and header options, blog and footer options, menus, etc. If you need more design options, Elementor Pro enables you to design fully-custom headers, footers, single posts and pages, archives, and more.

Layer』s page-building widgets are no longer in the WordPress Customizer. Instead, you』ll now find all the page-building design aspects within Elementor.

Below is a comparison table listing all of the previous Layers』 widgets next to the comparable and additional Elementor widgets.

Layers』 Widgets
Elementor』s Widgets

Content
Image Box

Slider
Slides (Pro)

Contact
Form (Pro) / Google Maps

Posts
Posts (Pro)

Post Carousel (Pro)
3rd Party Options

Social (Pro)
Social Icons

Call To Action (Pro)
Call To Action (Pro)

Tabs (Pro)
Tabs

Accordion (Pro)
Accordion

 
Toggle

 
Inner Section

 
Heading

 
Image

 
Video

 
Button

 
Star Rating

 
Divider

 
Icon

 
Image Box

 
Icon Box

 
Image Gallery

 
Image Carousel

 
Icon List

 
Counter

 
Spacer

 
Testimonial

 
Progress Bar

 
Sound Cloud

 
Shortcode

 
HTML

 
Menu Anchor

 
Sidebar

 
Alert

 
Portfolio (Pro)

 
Login (Pro)

 
Nav Menu (Pro)

 
Animated Headline (Pro)

 
Price List (Pro)

 
Price Table (Pro)

 
Flip Box (Pro)

 
Media Carousel (Pro)

 
Testimonial Carousel (Pro)

 
Countdown (Pro)

 
Share Buttons (Pro)

 
Blockquote (Pro)

 
Reviews (Pro)

 
Facebook Button (Pro)

 
Facebook Embed (Pro)

 
Facebook Page (Pro)

 
Facebook Comments (Pro)

 
Template (Pro)

 
Post Title (Pro)

 
Post Excerpt (Pro)

 
Featured Image (Pro)

 
Author Box (Pro)

 
Post Comments (Pro)

 
Post Navigation (Pro)

 
Post Info (Pro)

 
Site Logo (Pro)

 
Site Title (Pro)

 
Page Title (Pro)

 
Search Form (Pro)

 
Breadcrumbs (Pro)

 
Sitemap (Pro)

 
Woocommerce Breadcrumbs (Pro)

 
Woocommerce Product Title (Pro)

 
Woocommerce Product Images (Pro)

 
Woocommerce Product Price (Pro)

 
Woocommerce Add To Cart (Pro)

 
Woocommerce Product Rating (Pro)

 
Woocommerce Product Stock (Pro)

 
Woocommerce Product Meta (Pro)

 
Woocommerce Short Description (Pro)

 
Woocommerce Product Data Tabs (Pro)

 
Woocommerce Additional Info (Pro)

 
Woocommerce Product Related (Pro)

 
Woocommerce Upsells (Pro)

 
Woocommerce Products (Pro)

 
Woocommerce Custom Add To Cart (Pro)

 
Woocommerce Pages (Pro)

 
Woocommerce Product Categories (Pro)

 
Woocommerce Menu Cart (Pro)

 
Standard WordPress Widgets

 
3rd Party Widgets

 
Build Your Own Widgets

Below Is A Comparison Table Listing All Of Layers』 Previous And Current Features Along With The Comparable And Additional Elementor Features.

Layers』 Features
Elementor』s Features

Design With WordPress Customizer
Live Preview Drag And Drop Editor

Design Bar
Design Panel

Theme Options
Works With Your Theme』s Options

Blog Archive Layout
Archive Layout Templates (Pro)

Layers Messenger Support
24/7 Support (Pro) + Community Support

7 Pre-designed Page Templates
300+ Pre-designed Layouts And Blocks

Mobile Editing (Limited Control)
Mobile Editing (Extensive Control)

Google Font Integration
Google Font Integration

Typekit Fonts
Typekit Fonts + Custom Fonts (Pro)

Font Colors Adjust To Light/Dark Backgrounds
Full Control Over Font Colors And Typography

Background Video (Pro)
Background Video

Background Parallax (Pro)
3rd Party Options

Advanced Css Options (Pro)
Custom Css (Pro)

Automatic Image Resizing
Responsive Images

Automatic Page Backups
Autosave, Revision History, Undo, And Redo

Google Analytics Integration
3rd Party Options

Site Search (Pro)
Search Form Widget (Pro)

Button Styling (Pro)
Button Widget

Hide On Devices (Pro)
Responsive Visibility

Smooth Scrolling (Pro)
Menu Anchor Widget Smooth Scrolling

Parallax Backgrounds
3rd Party Options

 
In-line Editing

 
Navigator Page Overview Map

 
Finder Page And Settings Search

 
Hotkeys

 
Shortcut Cheatsheet Window

 
Copy / Paste Elements

 
Copy / Paste Styles

 
Global Colors / Typography

 
Global Widgets (Pro)

 
Custom Color Picker

 
Background Gradients

 
Background Overlay

 
Css Filters

 
Blend Modes

 
Elementor Canvas

 
Shape Divider

 
Box Shadow

 
Font Preview

 
Font Sizes In Px, Em, Or Rem

 
Drop Cap

 
Text Shadow

 
Draggable Column Widths

 
Nested Columns

 
Z-index

 
Reverse Columns On Mobile

 
Custom Breakpoints

 
Full Design Control Over All Aspects Of Any Theme, Including Headers And Footers. (Pro)

 
Sticky Headers (Pro)

 
Make Your Own Reusable Custom Templates For Pages, Sections, Or Widgets (Pro)

 
Design Your Own Archive Templates (Pro)

 
Design Your Own Single Page And Single Post Templates (Pro)

 
Design Your Own 404 Page Template (Pro)

 
Design Your Own Search Results Page (Pro)

 
Use Dynamic Content (Pro)

 
Integrates With Custom Fields From Acf, Toolset, Pods, And More (Pro)

 
Template Display Conditions (Pro)

 
Custom Design Forms (Pro)

 
Integrate Forms With Mailchimp, Drip, Convertkit, Activecampaign, Hubspot, Slack, Discord, And Many More (Pro)

 
Action Links Connect With Whatsapp, Waze, Google Calendar And More (Pro)

 
Import / Export Templates

 
Embed Templates Anywhere (Pro)

 
Font Awesome Icons

 
Scrolling Effects (Pro)

 
Hover Animations (Pro)

 
Entrance Animations (Pro)

 
Maintenance Mode

 
Version Control

 
Role Manager (Pro)

 
Request Parameters (Pro)

 
Replace Url Tool

 
Developer API

 
Custom Attributes (Pro)

 
RTL Ready

 
New Widgets And Features Always Being Developed