Style Tab


There are 12 sections in the Style Tab. Every section of the style tab will display depending on Field Selection and layout. That means if you hide any section from [ Settings > Field Selection ] then it will not appear on the Style Tab section.

1) Section Title: Section title styles.

1.1) Margin Y axis: Section title margin for y-axis. That means you can make space top and bottom of the section title.

1.2) Padding: You can provide padding on all axis for the section title.

1.3) Typography: You can change all kinds of Typography (Font family, size, line height, etc.) for the section title from here.

1.4) Title Color: Change section title color.

1.5) Dot Color: Change the title’s dot color. (If you use the section title style 1 then the below field will display. You can change the style from [Settings > Section Title Style])

1.6) Title Background Color: Section title background color. (If you use the section title style 2 or 3 then the below field will display. You can change the style from [Settings > Section Title Style])

1.7) Line / Border Color: Change line / border color.

Screenshot:


2) Post Title: Post Title styles.

2.1) Title Margin: Enter the title margin to make spacing.

2.2) Title Padding: Enter title padding if needed.

2.3) Typography:  Change title typography (Font family, size, line height, etc.).

2.4) Alignment: You can change title alignment from here.

2.5) Normal/Hover/Box Hover Tab:  You can change title color, background color, and hover border color from here. Also, you can change all for on Hover and on Box Hover. Box hover means when a postcard will hover.

Screenshot:


3) Thumbnail: There are 2 parts (Thumbnail & Overlay) for styling.

Thumbnail Style:

3.1) Border Radius [Pro]: Enter thumbnail border radius.

3.2) Image Width (Optional): This is an optional field. If you choose Default from here then the image will stretch automatically with the postcard. But if you want to change it then you can change to other values.

3.3) Thumbnail Margin: If you want then can use thumbnail margin. Most of the time you needn’t change this field.

Overlay Style:

3.4) Overlay Background Type: You can add the overlay background color or gradient color for the thumbnail overlay normal and on hover.

3.5) Overlay Interaction: You can change overly interaction. By default, it will work for always. But you can change the interaction to FadeIn on hover, FadeOut on hover, SlideIn on hover, SlideOut on hover, ZoomIn on hover, ZoomOut on hover, ZoomIn Content on hover, ZoomOut Content on hover, FlipIn on hover, and FlipOut on hover.

3.6) Overlay Height: This field will be visible only for the Grid Hover layout. By default, overlay height will work depending on the layout. But you can change it to 100% or auto.

3.7) Overlay Height on hover: This field will be visible only for the Grid Hover layout. You can change the overlay height on the hover of the postcard.

Screenshot:


4) Excerpt / Content: Excerpt or Content styles.

4.1) Typography: You can change excerpt typography (Font family, size, line height, etc.) from here.

4.2) Excerpt Spacing: You can add spacing on all sides of the excerpt.

4.2) Alignment: Change excerpt alignment.

4.2) Excerpt color: Change excerpt color for on hover and on postcard hover.

Screenshot:


5) Post Meta: Post meta styles.

5.1) Typography: Change meta typography (Font family, size, line height, etc.) from here.

5.1) Meta Spacing: You can add meta spacing if you need.

5.1) Normal/Hover/Box Hover Tab: You can change all Meta text colors, Meta link colors, Meta separator colors, Meta icon colors, Only category colors, and category background colors from this tab. And also you can apply all for a normal meta, on meta hover, and on postcard hover

Screenshot:


6) Social Share: Post Social Share button styles.

Choose Social Icon: To choose the social icon first, you have to go to [ Dashboard > The Post Grid > Settings > Social Share ]. Now you can check social icons from this list. Please see the below screenshot for more details:

After choosing social share please follow the below steps for elementor style:

6.1) Icon Color Style: There are 3 options for changing all social icons. By default, the brand color will display. But you can apply different colors for each icon or only one color for all icons from here. If you change here then some color field will display on the NORMAL / HOVER tab.

6.2) Icon Margin: You can add icon spacing from here.

6.3) Icon Wrapper Spacing: You can add icon wrapper spacing from here.

6.4) Border Radius: Enter the icon border-radius from here.

6.5) Icon Dimension: You can set icon width and height from here. After entering the value you have to click APPLY button must for change.

6.6) Icon Font Size: You can change the icon font size.

6.7) Normal/Hover Tab: This tab contains all colors, borders, and background-specific styles. Some fields can be shown and hidden depending on the Icon Color Style option.

Screenshot:


7) Advanced Custom Field: Advance Custom Field styles are here. If ACF is installed in your WordPress then it will show here. You may show or hide this field from Field Selection.

7.1) Group Title Typography: You can change the ACF group title typography (Font family, size, line height, etc.) from here.

7.2) ACF Fields Typography: You can change the ACF group field value typography (Font family, size, line height, etc.) from here.

7.3) Label Style: You can change label style to Inline and block.

7.4) NORMAL/HOVER Tab: You can change Group Title Color, Label Color, and Value color for the normal field and on hover from this tab.

Screenshot:


8) Read More: Post Read more button styles.

8.1) Typography: If you want, you can change the Read More button typography (Font family, size, line height, etc.) from here.

8.2) Button Spacing: You can add button spacing from here.

8.3) Button Padding: If you want you can add extra padding for the button from here.

8.4) Button Alignment: Choose button alignment.

Button Icon Style: These below styles will display if you enable the Show Button Icon button from [ Settings Tab > Read More ]

8.5) Icon Position: You can change the icon position to left or right.

8.6) Icon Size: Change icon font size from here.

8.7) Icon Vertical Position: If you needed then you can tune the icon vertical position manually from here.

8.8) NORMAL / HOVER / BOX HOVER Tab: You can change the button text color, Icon Color, background color, border radius, border, etc for the normal button, on the hover button, and on the postcard hover from this tab.

Screenshot:


9) Front-End Filter: Front-end Filter style.

Some fields can be shown or hidden depending on the filter settings from [ Content > Filter ]

1.1) Filter Typography: You may change filter typography (Font family, size, line height, etc.) from here.

1.2) Vertical Alignment: Change filter vertical alignment from here.

1.2) Border Radius: Enter the front-end border-radius from here.

1.2) NORMAL / HOVER-ACTIVE Tab:  You can change the Filter text color, background color, border color, etc for the normal filter and on the hover/active Filter from this tab.

Screenshot:


10) Slider: This section will show when you use TPG – Slider Layout. Otherwise, this section won’t visible.

NB. Some fields can be shown and hidden depending on the layout.

Arrow Style: Slider Arrow style:

10.1) Arrow Font Size: You can change the arrows font size from here.

10.2) Arrow Radius: If you want you can add arrows button border radius from here.

10.3) Arrow Width: Change the width of the arrows from here.

10.4) Arrow Height: Change the height of the arrows from here.

10.5) Arrow X Position: Arrow horizontal position.

10.6) Arrow Y Position: Arrow vertical position.

10.7) Arrow NORMAL/HOVER Tab: You can change the Arrow’s icon color, background color, box shadow, border color, etc for the normal arrows and on the hover of the arrows from this tab.

Dots Style: Slider Dots style:

10.8) Dots Alignment: You can change dots alignment from here.

10.9) Dots Radius: You can change dots border-radius from here.

10.10) Dots Width: If you want to change the width of dots then you can do it from here.

10.11) Dots Height: Also you can change dots height from here.

10.12) Dots Margin: If you need then you can add dots margin from here.

10.13) Dots Y Position: You can change dots vertical position from here.

10.14) Dots NORMAL/HOVER Tab: You can change the Dots color and active color for the normal arrows and on the hover of the arrows from this tab.

Screenshot:


11) Popup: This section will show when you use Single Popup or Multi Popup from [ Content > Links > Post link type ]

11.1) Header Background: Change the popup header background color.

11.2) Header Text Color: Change the popup header text color from here.

11.3) Popup Title Color: Change the popup title color.

11.4) Popup Meta Color: Change the popup meta color.

11.5) Popup Content Color: Change the popup content color.

11.6) Popup Background: Change the popup background color.

Screenshot:


12) Card: Postcard style.

12.1) Card Gap: Enter the card gap between each other.

12.1) Content Padding: Enter content padding if needed.

12.1) Card Border Radius: Enter card border radius from here.

12.1) Enable Border & Box Shadow: You can enable or disable card border-radius and box-shadow.

12.1) Card NORMAL / HOVER Tab: You can change the Card background, Border color, and Box shadow for the normal card and on the hover of the card from this tab.

Screenshot: