Obrigado por importar Broadcast 🙂
A transmissão é construída principalmente usando as fantásticas características incorporadas do GP com alguns CSS para fornecer estilos personalizados.
As secções abaixo fornecem uma rápida visão geral sobre como o sítio foi construído e algumas modificações potenciais. Todos os CSS mencionados abaixo podem ser encontrados no campo CSS Adicional no customizador.
Cabeçalho/Navigação
O cabeçalho/navegação é simplesmente criado usando as opções do personalizador. Pode modificá-los nas secções Identidade do Sítio, Navegação Primária e Navegação Fixo no personalizador.
Elemento de cabeçalho/herói de página
A secção abaixo da navegação primária é criada usando o módulo Elemento de cabeçalho. Pode encontrar 4 elementos de cabeçalho em
Aparência > Elementos: Herói das páginas, Herói dos Arquivos, Herói dos Posts e Herói Doméstico.
O CSS é utilizado para fornecer uma largura de contentor única, fundo gradiente e estilos para os elementos <h2> e <p>:
/* Page hero styles */
.page-hero.gradient {
background-image: linear-gradient( 145deg, transparent 0%, rgba(255,255,255, 0.5) 100%);
max-width: 1440px;
margin: auto;
}
.inside-page-hero h2 {
font-size: 40px;
}
.inside-page-hero p {
font-size: 20px;
}Este site é um excelente recurso para ajustar o gradiente ao seu gosto: https://cssgradient.io/.
Contentor Geral
O seguinte CSS é utilizado para estilizar o contentor principal, incluindo a fusão com o elemento de cabeçalho acima.
/* Main container styles */
.separate-containers .page-hero + #page .site-main {
margin-top: -80px !important;
}
@media (max-width: 768px) {
body .site.grid-container {
margin-left: 20px;
margin-right: 20px;
}
}
.site-content .inside-article, .sidebar .widget, .comments-area {
box-shadow: 0px 0px 0px 1px rgba(214,218,222,1);
}Lista de Mensagens
A lista de postagens da página inicial pode ser modificada utilizando o nosso módulo Blog.
Aqui está o CSS utilizado para os estilizar:
/* Posts grid styles */
@media (min-width: 769px) {
.generate-columns .inside-article {
transition: all 0.2s ease-in;
transform: scale(1);
}
.generate-columns .inside-article:hover {
transform: scale(1.01);
box-shadow: 0px 5px 10px 0px rgba(0,0,0,0.3);
}
p.read-more-container {
opacity: 0;
transition: all 0.3s ease-in-out;
}
.generate-columns .inside-article:hover p.read-more-container {
opacity: 1;
}
}
.generate-columns .inside-article {
display: flex;
flex-direction: column;
border-radius: 3px;
}
.generate-columns .inside-article .entry-summary {
display: flex;
flex-direction: column;
flex-grow: 1;
}
.entry-summary p:not(.read-more-container) {
display: none;
}
.read-more-container {
margin-top: auto;
text-align: center;
}
button, html input[type="button"], input[type="reset"], input[type="submit"], a.button, a.button:visited {
border-width: 1px;
border-style: solid;
border-color: inherit;
border-radius: 3px;
}
.blog footer.entry-meta, .archive footer.entry-meta {
margin-top: 0;
}Sidebar
O plugin Recent Posts Widget With Thumbnails é utilizado na área de widgets da barra lateral esquerda para mostrar postes recentes em postes individuais.
O primeiro widget da barra lateral é colorido com este CSS abaixo:
/* Sidebar styles */
.sidebar .widget:first-child {
background-image: linear-gradient( 145deg, rgb(164,218,216) 0%, rgb(228,243,242) 100%);
}