Skip to content

Instantly share code, notes, and snippets.

@aCodeDragon
Created November 9, 2022 10:05
Show Gist options
  • Select an option

  • Save aCodeDragon/73fe34554ff544683773eac91ea3f930 to your computer and use it in GitHub Desktop.

Select an option

Save aCodeDragon/73fe34554ff544683773eac91ea3f930 to your computer and use it in GitHub Desktop.
Alternating Post Blocks using CSS with Elementor
{"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