Mit dem Editors Choice ausgezeichnet

Mein Foto ist Editors Choice auf Pixabay

Hallo liebe Leser,

gestern wurde mein erstes Bild mir dem Editors Choice für herausragende Bilder bei pixabay ausgezeichnet.

 

Editors-Choice-Pixabay-300x240 Mit dem Editors Choice ausgezeichnet

 

Zum Download der  Datei kommt ihr hier:

Bild auf Pixabay

Natürlich ist diese Datei wieder mit CC0 eingestellt und kann daher von Euch kostenfrei genutzt werden.
Wenn Ihr Fragen zu den Creative Comments habt, meldet euch gerne bei mir.

Schaut Euch dort gerne um, ich habe dort schon viele meiner Arbeiten eingestellt.

Bei Fragen schreibt mir gerne, ich freue mich über Feedback.

Beste Grüße aus Hamburg sende ich euch
Karsten

 

Meine Bilder zum kostenfreien Download

Bilder kostenlos und mit CC0-Lizenz auch kommerziell nutzen!

Hallo liebe Leser, in meinem heutigen Blogeintrag geht es um meine kostenfreien Bilder und diese könnt Ihr mit CC0-Lizenz auch kommerziell nutzen. Ich erstelle Photos und Retuschen für verschiedene Anlässe und einige meiner Bilder sind auch online zu finden. Das Portal pixabay ist kostenfrei und die dort angebotenen Bilder sind mit CC0-Lizenz. Es sind auch Bilder von mir auf kostenpflichtigen Portalen zu finden aber ich möchte heute auf dieses Profil hinweisen. Das dortige Portfolio wird ständig und fast täglich erweitert. An die Bilder kommt ihr, wenn ihr auf mein pixabay-Profil geht und hier ist der Link zu meinem Profil: Karsten Bergmann bei pixabay Folgendes zur CC0-Lizenz:

Die Person, die ein Werk mit dieser Lizenz anbietet, hat dieses Werk in die Gemeinfreiheit – auch genannt Public Domain – entlassen, indem er weltweit auf alle urheberrechtlichen und verwandten Schutzrechte verzichtet hat, soweit das gesetzlich möglich ist. Sie dürfen das Werk kopieren, verändern, verbreiten und aufführen, sogar zu kommerziellen Zwecken, ohne um weitere Erlaubnis bitten zu müssen.

Wenn euch die Bilder gefallen, freue ich mich natürlich über eine kleine Spende “Kaffee” über das Portal. 🙂 Ich übernehme auch Auftragsarbeiten, wenn du Produktfotos brauchst, oder Bilder zur Bearbeitung hast, schreib mir gern eine Nachricht und mit professionellem Equipment und Erfahrung, setze ich die gewünschten Bilder dann gerne um. Falls du fragen hast, oder etwas offen geblieben ist, freue ich mich über eine Nachricht, oder Kommentar zu diesem Beitrag.
Beste Grüße aus Hamburg sende ich euch Karsten

WooCommerce-Buttons übersetzen

WooCommerce-Buttons übersetzen & Zusatztexte anpassen 1

Buttons übersetzen in WooCommerce

Hallo liebe Leser, in meinem heutigen Blogeintrag geht es um WooCommerce und die nicht ganz so Nutzer freundliche Umbenennung der Schaltflächen. Nach der Installation von WooCommerce tritt das Problem auf, dass es leider nicht einfach möglich ist, die Schaltflächen von Englisch nach Deutsch zu übersetzen. Da ich hier ewig nach der Lösung gesucht habe, möchte ich hier kurz zusammenfassen, wie ich die Änderungen hinbekommen habe. Ich hoffe, es wird dadurch für euch einfacher und dieser Beitrag hilft euch. 🙂 Ihr benötigt dazu die unten genannten Scripte, die ihr via FTP downloaden könnt und bearbeitet wieder in den Ordner (FTP) schiebt, bearbeiten könnt ihr zum Beispiel in dem kostenfreien Programm Notepad ++. Die entsprechende Stelle im Script könnt ihr gut finden, indem ihr die entsprechende Bezeichnung des Elementes bestimmt, zum Beispiel mit der Untersuchen-Funktion eures Browsers, dann drückt ihr einfach Strg + F und könnt so nach dieser Bezeichnung in den Php-Dateien suchen. Den dort geschrieben Namen ändert ihr einfach ab in eure Wunschbezeichnung der Schaltfläche und speichert das Script dann ab. Einige Änderungen sind auch bequem über Plugins möglich, diese habe ich euch weiter unten aufgelistet. Ich habe hier die Punkte für die Änderungen durchnummeriert:
  1. Continue shopping, wird geändert im Script / Quelle:
(wp-content/plugins/woocommerce/includes/wc-cart-function.php/ continue-shopping WooCommerce-Buttons übersetzen in bspw: Einkauf fortsetzen
  1. Update cart, wird geändert im Script / Quelle:
(wp-content/plugins/woocomerce/templates/cart/cart.php) in bpsw: aktualisieren update-cart WooCommerce-Buttons übersetzen
  1. Proceed to checkout, wird geändert im Script / Quelle:
(wp-content/plugins/woocomerce/templates /cart/proceed-to-checkout) proceed-to-checkout WooCommerce-Buttons übersetzen
  1. Submit order -> Plugin: WooCommerce Customizer
unter Einstellungen check out: submit-order WooCommerce-Buttons übersetzen
  1. Add to cart -> Plugin: WooCommerce Customizer
unter Einstellungen check out: add-to-cart WooCommerce-Buttons übersetzen
  1. Checkout Seite:
Die Überschrift Billing details in zum Beispiel Rechnungsdaten ändern: (wp-content/plugins/woocomerce/templates /checkout/form-billing.php) billing-details WooCommerce-Buttons übersetzen Diese Schaltflächen waren für meinen kleinen Shop ausreichend, die anderen Buttons könnt ihr aber auf ähnliche Weise ändern. Falls Fragen offen geblieben sind, ihr nicht weiterkommt oder sonstige Fragen habt, schreibt mir gerne eine Nachricht oder einen Kommentar.
Beste Grüße aus Hamburg sende ich euch Karsten
WooCommerce_Buttons_und_Texte_aendern-300x169 WooCommerce-Buttons übersetzen

3 kostenlose SEO Tipps um das Ranking deutlich zu steigern!

3 kostenlose SEO Tipps um das Ranking deutlich zu steigern!

Um eure Website besser im Netz finden zu können gibt es einige gute Techniken, welche ich euch hier zeige.

Das Wichtigste um die Homepage nach oben zu bringen, ist ein sauberer Code, viel guter Content / Text aber auch die Keyword-Dichte, Überschriften, Strong-Tags, H1-H3 usw. sind wichtige Faktoren. Ich benutze in diesem Video ausschließlich kostenfreie Tools, diese könnt ihr ohne Anmeldung oder Registrierung kostenlos nutzen.
Seobility
Als erstes im Video gehe ich auf Seobilty ein, dieses Tool ist sehr übersichtlich. Ihr tragt einfach in der Leiste eure Domain ein und geht auf Webseite analysieren. Es dauert nun einige Sekunden und ihr erhaltet eine ausführliche, technische Auswertung der Seite. Am Wichtigsten sind die direkt oben genannten “To-do Liste mit SEO Optimierungen”. Mit jedem Punkt, welchen ihr hier ausbessert, wird euer SEO-Wert ein wenig besser werden. Genauso wie die ganze Website, lassen sich dann auch die Inhalte auf einzelne Keywords prüfen. Geht einfach unten in der Auswertung auf “Wichtigste Suchbegriffe” und dort könnt ihr auf den blauen Check-Knopf drücken und erhaltet wichtige Infos zu den einzelnen Suchbegriffen. Natürlich könnt ihr in die Maske auch andere Begriffe eintragen und ihr seht, wie man diese optimieren kann. Fragt mich gerne, wenn ihr hier Hilfe braucht!
Hier die Links zu Seobilty:
https://www.seobility.net/de/seocheck/ https://www.seobility.net/de/keywordcheck/
rankingcheck
Als nächstes die Keyword-Datenbank von rankningcheck, diese kann man benutzen, um neue Keywords zu finden, den Marktwert und Konkurrenz für die Begriffe zu prüfen und auszuwerten. Diese kann man alternativ zu der Datenbank von AdWords nutzen, um die eigene Strategie besser auszuarbeiten.
Hier der Link zur Datenbank:
https://www.more-fire.com/tools/keyword-datenbank/ Ich hoffe, mein Video, die Links und die grobe Anleitung haben euch gefallen und bringen euch weiter bei eurem Projekt und ein paar Plätze weiter nach oben bei Google. 🙂 Schreibt mir gerne eine Nachricht oder Kommentar, wenn ihr Fragen habt oder etwas unklar geblieben ist. Viele Grüße aus Hamburg Karsten

Relative Werte, responsive Programmierung

Relative Werte, responsive Programmierung

Relative Werte, einfacher Weg zur responsiven Website

Um für alle Anzeigegeräte zu programmieren, ist diese Technik eine gute und wichtige Grundlage.
Funktionsweise
Relative Werte werden in die CSS-Datei eingegeben und alternativ zu den fixen Werten, zum Beispiel 10 Pixel, verwenden wir Werte, die sich nach der Anzeige richten und keine feste Größe besitzen. Folgende Werte kann man hier als Beispiel verwenden und spart sich dadurch erheblich viel Code, zu der Variante mit px: vw = Viewportwidth, vh = Viewportheight, em = Schriftgröße, % = Prozent
Den in meinem Video verwendeten Code könnt ihr hier kopieren und es selbst probieren:
Hier der Code aus der HTML-Datei:
<!DOCTYPE html> <head> <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″/> <link rel=”stylesheet” href=”relative-werte.css”> </head> <body> <header> </header> <main> <div class=”beispiel1″> </div> <h1>Beispiel für relative Werte</h1> <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. </p> <div class=”beispiel2″> </div> <img class=”relativeimg” src=”relative-werte.jpg” alt=”Lrelative Werte” title=”relative Werte Image”> <div class=”beispiel3″> </div> </main> <footer > </footer> </body> </html>  
Hier der Code aus der CSS:
/*RESET*/ *{ margin: 0; padding: 0; box-sizing: border-box; } .beispiel1{ height: 2em; /*für relative Breite % Angabe verwenden*/ width: 60%; margin-left: 20%; margin-top: 2vh; /*höhe des Viewport*/ margin-bottom: 4vh; /*höhe des Viewport*/ background-color: green; } .beispiel2{ height: 1em; width: 100%; background-color: blue; } .beispiel3{ height: 20em; width: 80%; margin-left: 10%; background-color: red; } .relativeimg{ width: 50%; /* alternativ zum Bsp. width: 50vw; vw = viewport-Breite*/ } /*für relative Größe in Schriften vw Angabe verwenden*/ h1{ font-size:5vw; } p{ font-size:3vw; }
Alternativ findet ihr den Code zum Video unter:
HTML5:
https://gist.github.com/kb-media/ba64…
CSS3
https://gist.github.com/kb-media/414d… Mehr Angaben zu fixen Werten und relativen Werten findet ihr hier: https://wiki.selfhtml.org/wiki/CSS/We… Ich hoffe, mein Video, die Links und die grobe Anleitung haben euch gefallen und bringen euch weiter bei eurem Projekt. ???? Ein weiteres wichtiges Thema werde ich demnächst auch noch aufgreifen und das sind die Breakpoints. Schreibt mir gerne eine Nachricht oder Kommentar, wenn ihr Fragen habt oder etwas unklar geblieben ist. Viele Grüße aus Hamburg Karsten

Freistellen von Objekten mit dem Pfadwerkzeug in Photoshop

Freistellen von Objekten mit dem Pfadwerkzeug in Photoshop
Ein Pfad besteht aus einem oder mehreren geraden oder gekrümmten Segmenten (Kurvensegmente). Ankerpunkte bilden die Endpunkte der Pfadsegmente. Bei Kurvensegmenten hat jeder ausgewählte Ankerpunkt eine oder zwei Grifflinien, die in Griffpunkten enden. Die Positionen der Grifflinien und -punkte bestimmen die Größe und Form eines Kurvensegments. Dieses Tool kann man wunderbar nutzen, um Elemente freizustellen, die man mit dem Zauberstab oder anderen Werkzeugen nicht sauber auswählen kann.
Der grobe Ablauf ist wie folgt:
  1. Das Bild aus dem ein Pfad erstellt werden soll, öffnen wir mit Photoshop und erstellen ein Duplikat der Ebene mit Strg + J. Das erste Bild (Ebene) blenden wir dann aus (einfach auf das Auge klicken in der Ebenenübersicht).
  2. Wir wählen das Pfadwerkzeug aus und setzen mit der linken Maustaste die Marker, nicht zu viele und besonders an Radien-Wechseln sollte man welche setzen.
  3. Wir schließen die Pfade, indem wir am Ende wieder auf den ersten Ankerpunkt klicken.
  4.  Die Hilfslinie lässt sich mit der Alt-Taste beliebig aufziehen und man kann dann die Radien / Krümmungen individuell mit gedrückter Strg-Taste anpassen. Das braucht natürlich etwas Übung und man muss sich an die Handhabung ein wenig gewöhnen, aber nach ein paar Minuten wird die Arbeitsweise recht schnell klar.
  5. Falls die Radien nicht ganz passen, kann man auch jeden einzelnen Ankerpunkt mit gedrückter Strg-Taste verschieben, löschen (mit Ent-Taste) oder natürlich neue Punkte dazwischen einfügen (im Video ab etwa Minute 4:30 erklärt). Wenn man einen Schritt rückgängig machen möchte, geht das einfach mit der Tastenkombination Strg + Z oder mehrere Arbeitsschritte mit Strg + Alt + Z.
  6. Wenn die Pfade soweit passen, klickt man die rechte Maustaste und wählt dann Vektormaske erstellen aus. Dann klicken wir in der Ebenen-Übersicht auf Pfade, wählen den soeben erstellten Pfad aus und bestätigen den Punkt “Auswahl erstellen”.
  7. Dann kann man die Datei in eine andere Datei importieren, eine Maske erstellen und die Maskenkante bearbeiten, diverse Effekte anwenden oder was auch immer man vor hat.
Ich hoffe, mein Video und die grobe Anleitung hat euch gefallen und es bringt euch weiter bei eurem Projekt. Schreibt mir gerne eine Nachricht oder Kommentar, wenn ihr Fragen habt oder etwas unklar geblieben ist. Viele Grüße aus Hamburg Karsten