Accordion element will help you display custom content within collapsible container. Element popup contains following options;

Defaults tab

1. Sorting title  -  Used only in builder for easy sorting.
2. Accordions  -  Add/edit your accordions.
3. Container metrics  -  Add custom class or ID to HTML container and adjust visibility on specific devices.

Layout tab

1. Container box style  -  Adjust .thz-shortcode-accordion box style.
2. Global metrics  -  Adjust borders, borders width, space between accordions, toggle arrow, and first accordion open/closed on page load.
3. Title padding  -  Adjust .thz-accordion-title padding.
4. Content padding  -  Adjust .thz-accordion-content padding

Styling tab

1. Title font  -  Accordion title font metrics
2. Active title colors  -  Set active accordion title colors
3. Inactive title colors  -  Set inactive accordion title colors
4. Global colors  -  Set borders colors, content background, link, links hovered and headings colors. Theme defaults are used if empty.

The post Accordion appeared first on Themezly™.

Post meta element displays the single post meta. Meta elements can be date, views, author, categories, tags, comments count or likes.

Defaults tab

1. Meta elements  -  Check to show/hide specific post meta elements. Click and drag the label to sort.
2. Meta preferences  -  Adjust meta preferences.
3. Meta separator  -  Select post meta elements separator. This option will let you adjust space between separator and elements. Nudge option can help you align the separator verticaly. This can come in handy if separator is icon and icon font does not place the icon in absolute vertical middle. Nudge moves relative top position of the separator.
4. Font settings  -  Adjust meta elements fonts.
5. Meta colors  -  Adjust meta elements colors.

Layout tab

1. Container box style  -  Adjust .thz-post-meta-sh box style.
2. Meta box style  -  Adjust Adjust .thz-post-meta-sh-holder box style.
3. Container metrics  -  Add custom class or ID to HTML container and adjust visibility on specific devices.

Effects tab

1. Animate  -  Add animation to the HTML container.
2. Container parallax  -  Activate/deactivate container parallax.

The post Post Meta appeared first on Themezly™.

Breadcrumbs element displays the path from homepage to current page. Element popup contains following options;

Defaults tab

1. Breadcrumbs font  -  Adjust breadcrumbs font metrics.
2. Breadcrumbs colors  -  Breadcrumbs font colors. If empty, colors are inhereted from theme.
3. Breadcrumbs Separator  -  Select separator type and adjust space between separator and breadcrumbs

Layout tab

1. Container box style  -  Adjust .thz-breadcrumbs box style.
2. Links holder box style  -  Adjust .thz-breadcrumbs-links box style.
3. Container metrics  -  Add custom class or ID to HTML container and adjust visibility on specific devices.

Effects tab

1. Animate  -  Add animation to the HTML container.
2. Container parallax  -  Activate/deactivate container parallax.

The post Breadcrumbs appeared first on Themezly™.

Before After element highlights differences between two images. Element popup contains following options;

Images tab

1. Before image  -  Select before image.
2. After image  -  Select after image.

Settings tab

1. Compare metrics  -  Set script metrics and handle colors. See help for more info.
2. Images size  -  Select the images size to be used.
3. Container box style  -  Adjust .thz-before-after-container box style.
4. Container metrics  -  Add custom class or ID to HTML container and adjust visibility on specific devices.

Effects tab

1. Animate container  -  Add animation to the HTML container.
2. Container parallax  -  Activate/deactivate container parallax.

The post Before After appeared first on Themezly™.

Button element comes with visual button generator. Element popup contains easy to understand options that will help you create and save custom buttons.

The post Button appeared first on Themezly™.

Calendar element will help you display your tasks or event as a monthly, weekly or daily calendar. Element popup contains following options;

Defaults tab

1. Population Method  -  Select calendar population method (Ex: events, custom).
2. Events  -  Add events to your calendar.
3. Start Week On  -  Select first day of week.
4. Container metrics  -  Add custom class or ID to HTML container and adjust visibility on specific devices.

Style tab

1. Calendar Type  -  Select calendar type. If custom type is choosen all colors, backrgounds and borders are removed from the calendar. The layout will remain in tact. This way you can CSS it on your own.
2. Day  -  Adjust day color and background.
3. Today & hovered day  -  Adjust today and hovered day color and background.
4. Event day  -  Adjust event day color and background.
5. Calendar header  -  Adjust calendar header styles.
6. Event links  -  Adjust event links color. Theme default used if empty.

Effects tab

1. Animate  -  Add animation to the HTML container.

The post Calendar appeared first on Themezly™.

Call To Action element will help you display custom content intended to induce visitors attention. Element popup contains following options;

General tab

1. Cta holder box style  -  Adjust .thz-cta-box-holder box style.
2. Cta box style  -  Adjust .thz-cta-box box style.
3. Animate  -  Add animation to the HTML container.
4. Container metrics  -  Add custom class or ID to HTML container and adjust visibility on specific devices.

Text tab

1. Heading  -  Add heading text.
2. Sub heading  -  Add sub heading text.
3. Text  -  Call to action text.

Button 1 tab

1. Show button 1  -  Show or hide cta buton 1
2. Button  -  Button generator.

Button 2 tab

1. Show button 2  -  Show or hide cta buton 2
2. Button  -  Button generator.

Icon tab

1. Icon  -  Add icon to cta.
2. Icon size  -  Set cta icon size.
3. Background shape  -  Hide/show icon bacground shape.

Layout tab

1. Elements settings  -  Set text alignment, button and icon position and vertical alignment.
2. Spacers  -  This is the space between the element and the surrounding elements.
3. Heading padding  -  Set heading padding.
4. Sub heading padding  -  Set sub heading padding.
5. Text padding  -  Set text heading padding.
6. Set text heading padding.  -  Set buttons container padding.
7. Icon padding  -  Set icon container padding.

Colors tab

1. Heading color  -  Set heading color.
2. Sub heading color  -  Set Sub heading color.
3. Text color  -  Set text color.
4. Icon color  -  Set icon color.

Typography tab

1. Heading font  -  Set custom font settings for heading.
2. Sub heading font  -  Set custom font settings for sub heading.
3. Text font  -  Set custom font settings for cta text.

The post Call To Action appeared first on Themezly™.

Circle Progress element will draw an animated circular bar around the text. Element popup contains following options;

Defaults tab

1. Holder box style  -  Adjust .thz-circle-progress-holder box style.
2. Progress  -  Setup your progress bar size and animation.
3. Container metrics  -  Add custom class or ID to HTML container and adjust visibility on specific devices.

Progress tab

1. Progress bar colors  -  Setup your progress bar colors. If multiple fill colors, bar fill becomes a gradient.
2. Progress value  -  Choose progress circle value. Percent or custom defined text/icon.

Outer circle tab

1. Background  -  Adjust .thz-circle-progress background.
2. Metrics  -  Adjust outer circle metrics.

Inner circle tab

1. Background  -  Adjust .thz-circle-progress-inner background.
2. Border  -  Adjust inner circle border.

Title tab

1. Title  -  Add progress title.
2. Title style  -  Adjust title look and feel.
3. Title separator  -  Adjust title separator. Separator is located between title and text.

Text tab

1. Text  -  Add progress text.
2. Text style  -  Adjust text look and feel.

Effects tab

1. Animate  -  Add animation to the HTML container.

The post Circle Progress appeared first on Themezly™.

Code Snippet element will help you display code blocks within styled code container. Element popup contains following options;

Code tab

1. Code snippet  -  Insert your code snippet.

Layout tab

1. Style  -  Select code snippet style.
2. Container margin  -  Adjust .thz-code-snippet container margin.
3. Limit height  -  Limit code snippet height and make its content scrollable.
4. Syntax highlighting  -  Activate/deactivate syntax highlighting.
5. Line numbers  -  Show hide code line numbers.
6. Container metrics  -  Add custom class or ID to HTML container and adjust visibility on specific devices.

The post Code Snippet appeared first on Themezly™.

Column element is main wrapper used to position elements within the row. Element popup contains following options;

Layout tab

1. Center column  -  If set to center, this column float is removed and it will be centered inside the section.
2. Column-in box style  -  This option will help you customize the box style of .thz-column-in container.
3. Inner column spacings  -  Adjust spacings for all inner columns in this column.
4. Use CSS ID as anchor  -  If set to yes column ID can be used as anchor in your menu.
5. Container metrics  -  Add custom class or ID to HTML container and adjust visibility on specific devices.

Typography tab

1. Fonts settings  -  Add custom font settings.
2. Links colors  -  Add custom links colors.

Effects tab

1. Background layers  -  Create background layer. Add parallax, infinity or basic background layer. This option adds additional background layer to the HTML container. Note that z-index is assigned per layer position in the order. The layer on top has the highest z-index.
2. Animation  -  Add animation. This option adds animation effect to the HTML container.
3. Scroll fade  -  Add scroll fade effect. This option adds fade effect on scroll to the HTML container or the container content.
4. Full height  -  Add full height effect. This option adds full height ( viewport height ) to the HTML container.

The post Column appeared first on Themezly™.