Grazie per aver importato Broadcast 🙂
Broadcast è costruito principalmente utilizzando le fantastiche funzioni integrate di GP, con alcuni CSS per fornire stili personalizzati.
Le sezioni seguenti forniscono una rapida panoramica su come è stato costruito il sito e su alcune potenziali modifiche. Tutti i CSS citati di seguito si trovano nel campo CSS aggiuntivi del personalizzatore.
Intestazione/Navigazione
L’intestazione/navigazione viene creata semplicemente utilizzando le opzioni del personalizzatore. È possibile modificarli nelle sezioni Site Identity, Primary Navigation e Sticky Navigation del customizer.
Elemento di intestazione/Eroe di pagina
La sezione sotto la navigazione primaria viene creata utilizzando il modulo Header Element. Si possono trovare 4 elementi di intestazione in
Aspetto > Elementi: Eroe delle pagine, eroe degli archivi, eroe dei post e eroe della home.
I CSS vengono utilizzati per fornire una larghezza unica del contenitore, uno sfondo sfumato e gli stili per gli elementi <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;
}Questo sito è un’ottima risorsa per modificare il gradiente a proprio piacimento: https://cssgradient.io/.
Contenitore generale
Il CSS seguente viene usato per stilizzare il contenitore principale, includendo la fusione con l’elemento header di cui sopra.
/* 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);
}Elenco dei post
L’elenco dei post della home page può essere modificato utilizzando il nostro modulo Blog.
Ecco il CSS utilizzato per lo stile:
/* 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;
}Barra laterale
Il plugin Recent Posts Widget With Thumbnails è utilizzato nell’area dei widget della barra laterale sinistra per mostrare i post recenti nei singoli post.
Il primo widget della barra laterale è colorato con questo CSS:
/* Sidebar styles */
.sidebar .widget:first-child {
background-image: linear-gradient( 145deg, rgb(164,218,216) 0%, rgb(228,243,242) 100%);
}