Created
November 9, 2022 10:05
-
-
Save aCodeDragon/73fe34554ff544683773eac91ea3f930 to your computer and use it in GitHub Desktop.
Alternating Post Blocks using CSS with Elementor
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| {"content":[{"id":"3df47181","settings":{"flex_gap":{"unit":"px","size":0,"sizes":[]},"margin":{"unit":"rem","top":"0","right":"0","bottom":"0","left":"0","isLinked":false},"margin_tablet":{"unit":"rem","top":"","right":"","bottom":"","left":"","isLinked":true},"margin_mobile":{"unit":"rem","top":"","right":"","bottom":"","left":"","isLinked":true},"padding":{"unit":"px","top":"0","right":"0","bottom":"0","left":"0","isLinked":false},"__globals__":{"background_color":"globals\/colors?id=31bd9885"},"boxed_width":{"unit":"px","size":1100,"sizes":[]}},"elements":[{"id":"dabeb2b","settings":{"title":"Alternating Post Blocks - Without A Plugin","header_size":"h1","align":"center","typography_typography":"custom","typography_font_family":"Georgia","typography_font_size":{"unit":"rem","size":2.9,"sizes":[]},"typography_font_size_tablet":{"unit":"rem","size":"","sizes":[]},"typography_font_size_mobile":{"unit":"rem","size":2.4,"sizes":[]},"typography_font_weight":"600","_padding":{"unit":"rem","top":"4","right":"0","bottom":"7","left":"0","isLinked":false},"_padding_tablet":{"unit":"rem","top":"","right":"","bottom":"","left":"","isLinked":true},"_padding_mobile":{"unit":"rem","top":"4","right":"0","bottom":"4","left":"0","isLinked":false},"_flex_align_self":"stretch","_background_color":"#000","__globals__":{"title_color":"globals\/colors?id=5da7b38e","_background_color":""},"title_color":"#FFF"},"elements":[],"isInner":false,"widgetType":"heading","elType":"widget"},{"id":"10ff1fc5","settings":{"classic_columns":"1","classic_thumbnail":"left","classic_image_width":{"unit":"%","size":50,"sizes":[]},"classic_meta_data":[],"classic_meta_separator":"\/\/\/","classic_read_more_text":"Read More \u00bb","cards_meta_separator":"\u2022","cards_read_more_text":"Read More \u00bb","full_content_meta_separator":"\/\/\/","posts_include":["terms"],"posts_include_term_ids":["9"],"posts_ignore_sticky_posts":"","classic_column_gap":{"unit":"px","size":0,"sizes":[]},"classic_row_gap":{"unit":"px","size":"","sizes":[]},"classic_alignment":"center","classic_content_padding":{"unit":"px","top":"50","right":"50","bottom":"50","left":"50","isLinked":true},"classic_image_spacing":{"unit":"px","size":0,"sizes":[]},"classic_title_typography_typography":"custom","classic_title_typography_font_family":"Georgia","classic_title_typography_font_size":{"unit":"rem","size":2.4,"sizes":[]},"classic_title_typography_font_size_tablet":{"unit":"rem","size":2,"sizes":[]},"classic_title_typography_font_size_mobile":{"unit":"rem","size":"","sizes":[]},"classic_title_typography_font_weight":"600","classic_title_spacing":{"unit":"px","size":10,"sizes":[]},"classic_excerpt_typography_typography":"custom","classic_excerpt_typography_font_family":"DM Sans","classic_excerpt_typography_font_size":{"unit":"rem","size":1.2,"sizes":[]},"classic_excerpt_typography_font_size_tablet":{"unit":"rem","size":1,"sizes":[]},"classic_excerpt_typography_font_size_mobile":{"unit":"rem","size":"","sizes":[]},"classic_excerpt_typography_font_weight":"400","classic_excerpt_typography_line_height":{"unit":"px","size":30,"sizes":[]},"classic_excerpt_typography_line_height_tablet":{"unit":"px","size":"","sizes":[]},"classic_excerpt_typography_line_height_mobile":{"unit":"px","size":"","sizes":[]},"classic_excerpt_spacing":{"unit":"px","size":20,"sizes":[]},"classic_read_more_typography_typography":"custom","classic_read_more_typography_font_family":"Montserrat","classic_read_more_typography_font_size":{"unit":"rem","size":1,"sizes":[]},"classic_read_more_typography_font_size_tablet":{"unit":"rem","size":"","sizes":[]},"classic_read_more_typography_font_size_mobile":{"unit":"rem","size":"","sizes":[]},"classic_read_more_typography_font_weight":"500","pagination_page_limit":"5","pagination_prev_label":"« Previous","pagination_next_label":"Next »","text":"Load More","load_more_no_posts_custom_message":"No more posts to show","_css_classes":"alternating-blocks","custom_css":"@media only screen and (min-width: 767px){\r\n .alternating-blocks .elementor-post:nth-child(odd) .elementor-post__thumbnail__link{\r\norder:1;\r\n }\r\n}\r\n@media only screen and (max-width: 767px){\r\n .alternating-blocks .elementor-post{\r\n flex-direction:column!important;\r\n }\r\n}\r\n\/*Change the background color of the odd posts\r\n.alternating-blocks .elementor-post:nth-child(odd) .elementor-post__text{\r\nBackground-color: #150050}*\/\r\n\/*Change the background color of each post, change the number in nth-child to corresponding post\r\n.alternating-blocks .elementor-post:nth-child(2) .elementor-post__text{\r\nBackground-color: #150050\r\n*\/\r\n\r\n\/*Change the color of the odd post title\r\n.alternating-blocks .elementor-post:nth-child(odd) .elementor-post__title a{\r\n color:#fff;\r\n \r\n}*\/\r\n\/*\r\n.alternating-blocks .elementor-post .elementor-post__title a{\r\n transition: color 0.3s ease-in-out;\r\n}\r\n.alternating-blocks .elementor-post:nth-child(odd) .elementor-post__title a:hover{\r\n color:white;\r\n}\r\n\/* Change the color of the odd post excerpt\r\n.alternating-blocks .elementor-post:nth-child(odd) .elementor-post__excerpt p{\r\n color:white;\r\n}*\/\r\n\/*Add Background to read more link*\/\r\n\/*Change here for different read more background on odd posts\r\n.alternating-blocks .elementor-post:nth-child(odd) .elementor-post__read-more{\r\n background-color:#000;\r\n color:white;\r\n padding:0.5rem 0.75rem;\r\n}*\/\r\n\r\n.alternating-blocks .elementor-post__read-more {\r\n background-color:#000;\r\n padding:0.5rem 0.75rem;\r\n transition: all 0.4s ease-in-out;\r\n}\r\n.alternating-blocks .elementor-post__read-more:hover{\r\n color:#FB2576!important;\r\n}\r\n\r\n\r\n\r\n\r\n\r\n","__globals__":{"classic_title_color":"globals\/colors?id=5c2e892","classic_read_more_color":"globals\/colors?id=5da7b38e","classic_box_bg_color":"globals\/colors?id=5da7b38e","classic_excerpt_color":"globals\/colors?id=5c2e892"},"classic_columns_tablet":"1","classic_row_gap_mobile":{"unit":"px","size":15,"sizes":[]},"classic_content_padding_tablet":{"unit":"px","top":"10","right":"10","bottom":"10","left":"10","isLinked":true},"classic_excerpt_color":"#1B1E17","classic_read_more_color":"#FFF"},"elements":[],"isInner":false,"widgetType":"posts","elType":"widget"}],"isInner":false,"elType":"container"}],"page_settings":{"hide_title":"yes","background_background":"classic","__globals__":{"background_color":"globals\/colors?id=da45969"}},"version":"0.4","title":"Alternating Blocks","type":"page"} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment