This article will cover information on the Blog Post Category Element. The Blog Post Category Element is one of the Blog Post Categories-type elements in the page editor.
This element can be found in the Elements menu by mousing over a current element on the page and clicking on the orange “Add Element” button. You can scroll through the menu to locate it and click on the Blog Element Group. or type “Category” in the Search Elements field.
Click and hold the element to drag it into position.
Blog Post Category Element Menu
Move
Clicking and holding the move icon will drag the element to a new location on the page.
Element Name
This is the name of the currently selected element. The name given will be the default name of the element. The name in the CSS info of the Coding menu can be changed.
Settings
Clicking on this gear icon will open the individual settings of the element. Each element has specific settings based on its functions. Please check the Settings section below for further information.
Clone
The clone Icon will duplicate the currently selected element and place it below the current element.
Coding
Custom CSS can extend the design of each section on the page to meet needs both visually and functionally. As the code requires, code can be added to one of three areas: CSS, Header, or Footer.
The CSS Info for the element is on the right of the CSS window. The element's title can be changed in the title field to allow for easier identification.
Due to the many different styles and uses of custom coding, ClickFunnels' Support Agents will not troubleshoot specific codes or code within the coding windows.
If assistance in coding is required, please submit a request for help in the Coding section of our Community or reach out to the code provider for support.
Trash
Clicking on the trash icon will delete the element from the editor.
Blog Post Category Element Settings
Layout Path
This section of the settings will show where the current element is located within the page's layout.
Element title
The current element's title is located at the top left of the settings. The element's title can be changed via the coding button.
Coding button
The Coding button will open the page coding menu. Opening the coding menu will allow coding to be added to the page. The element’s title can also be changed for easier searching.
Due to the many different styles and uses of custom coding, ClickFunnels' Support Agents will not troubleshoot specific codes or code within the coding windows.
If assistance in coding is required, please submit a request for help in the Coding section of our Community or reach out to the code provider for support.
Settings Menu
Top margin
The top margin slider is used to set the spacing between the top of the current element and the bottom of the element above it. Entering a negative number in the field will cause the lower element to overlap the top element.
Gap
The gap slider is used to set the distance between the menu items in the element.
Justification
Click the options to select the orientation of your Submenu. The submenu can be aligned to the left, right, center, or by having a space between or around them.
Orientation
Select either a row or column layout.
Padding
Top
The top padding slider is used to set the space from the top of the element box to the materials displayed in the element box.
Bottom
The bottom padding slider is used to set the space from the bottom of the element box to the materials displayed in the element box.
Left Right
The side padding slider is used to set the space from the left and right sides of the element box to the materials displayed in the element box.
Typography
Style
Set the style for the element text with the preset sizes or the custom choice by selecting the three dots.
Edit Style
Clicking this button will open the style guide page for the page. Please save your work before clicking this button.
Override
The override button will open the custom settings that will be different from the style guide.
Font Family
Clicking on the font family button will set the font of the element. This will override the general typography setting of the page.
Weight
The weight of the font lines can be set from this drop menu from: thin, regular, or semi-bold.
Font Size and Font Size Mobile
Set the font size for both desktop and mobile viewing here. If one wants the mobile font size to be different from the desktop font size, click the link icon to separate the two settings. Unlinking the text will allow one to set font sizes independent of the other view.
Letter Spacing and Letter Spacing Mobile
The spacing between the letters of this element can be set with this slider in both mobile and desktop view. Click the link icon to separate the two settings. Unlinking the text will allow one to set font sizes independent of the other view.
Line Height and Line Height Mobile
The spacing between the lines in the element can be set with this slider in both mobile and desktop view. Click the link icon to separate the two settings. Unlinking the text will allow one to set font sizes independent of the other view.
Link
Set the text color of hyperlinks.
Text Casing
Letter casing can be selected using all lower case, all upper case, or upper and lower case.
Opacity
Opacity will set the transparency of the text from invisible to full strength.
Background
The background color of the element can be assigned using this field.
Text Shadow
Toggling the Text Shadowing setting will open the following settings below:
Offset-X
Set the shadow from directly beneath the text and move to the right. Entering negative numbers in the field to have the shadow move to the left.
Offset-Y
Set the shadow from directly beneath the text and move it below. Entering negative numbers in the field to have the shadow move above the text.
Blur
The sharpness of the shadow can be set from sharp to blurred using this slider.
Color
Shadow color can be assigned using this field.
Advanced Settings
Animation
The animation section of the settings will allow dynamic movement to be added to a page.
Style
Select the style of animation to be applied to the element from the dropdown list.
Trigger
Select the trigger type that will start the animation.
Time Function
This option will change the timing of the animation.
Play Direction
This option will change the direction in which the animation will play.
Duration
Duration is the time it will take for the animation from start to completion in milliseconds.
Delay
Delay is how long after the trigger is set to begin the animation.
Animate Once
This check box will stop the animation from being triggered multiple times.
Loop
This option will loop the animation of the element.
Preview Animation
Clicking on the “Preview animation” button will allow the animation in the editor to be seen.
Advanced CSS
Position
The position of the CSS added to the element can be changed here.
Z Index
The Z index of the CSS added to the element can be adjusted here by moving the slider to the left or the right, or by entering a number to the right of the slider.
Due to the many different styles and uses of custom coding, ClickFunnels' Support Agents will not troubleshoot specific codes or code within the coding windows.
If assistance in coding is required, please submit a request for help in the Coding section of our Community or reach out to the code provider for support.
Render Conditions
Adding conditions to a section, row, or element will allow for custom page renderings based on the conditions set.
Collection Settings
Items per row
This option will change how many rows of blog posts will be displayed within the element.
Items per page
This option will determine how many blogs will be displayed within the element.
Hide pagination
This option will hide the pagination within the element.
Pagination item color
This option will control the color of the numbered pages that are not currently selected, as seen in the example below:
Pagination item background color
This option will control the background color of the numbered pages that are not currently selected, as seen in the example below:
Pagination border color
This option will control the color of the borders surrounding the numbered pages that are not currently selected, as seen in the example below:
Pagination active item color
This option will control the color of the number of the currently selected page, as seen in the example below:
Pagination active item background color
This option will control the background color of the numbered page that is currently selected, as seen in the example below:
Pagination active border color
This option will control the color of the borders surrounding the numbered page that is currently selected, as seen in the example below:
Custom Attributes
This setting will allow for creating custom attributes or adding data-title attributes for sections, rows, and elements. Using a data-title is a reliable way to make reusable custom code for both CSS and JS to affect the page.
Views and Trash
The All icon sets the element to be visible on both Desktop and Mobile versions of the page.
The Desktop icon will set the element to only be visible on the desktop version of the page.
The Mobile icon will set the element to only be visible on the page's mobile version.
The Eye with a Line icon will hide the element on all views. The Layout Menu in the editor can be used to locate hidden elements.
The Trash icon will delete an element from the page.
If you have any questions about this, please contact our Support Team by clicking the Submit a Request button at the top right-hand corner of this page and then the Help button at the bottom left of the ClickFunnels Page.
Was this article helpful?
That’s Great!
Thank you for your feedback
Sorry! We couldn't be helpful
Thank you for your feedback
Feedback sent
We appreciate your effort and will try to fix the article